/*
Theme Name: Nina's Handmade
Theme URI: https://ninashandmade.gr
Description: Block theme για το eshop χειροποίητων ειδών δώρων της Νίνας, κατά τα εγκεκριμένα mockups (v3). Mobile first, ελληνικά, Core Web Vitals.
Author: webhosting4u.gr
Template: twentytwentyfive
Version: 3.8.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nina
Tags: e-commerce, block-theme, full-site-editing
*/

/* Tokens στο theme.json. Εδώ μόνο ό,τι δεν εκφράζεται εκεί. Mobile first.
 *
 * v3: λευκή σελίδα, τερακότα τόνος, σκούρο υποσέλιδο, κοφτές γωνίες.
 * Οι καμπύλες του v2 (8px παντού) καταργήθηκαν: τα mockups είναι κοφτά σε
 * κάθε επιφάνεια, και μισή υιοθέτηση διαβάζεται ως λάθος, όχι ως ύφος. */

/* Το συρτάρι του mini-cart του WooCommerce στέκεται εκτός οθόνης δεξιά και
 * είναι 396px σε viewport 390px: η σελίδα αποκτούσε 6px οριζόντιας κύλισης
 * στο κινητό. Μετρήθηκε στο live, δεν υποτέθηκε.
 *
 * clip και όχι hidden: το hidden φτιάχνει scroll container και θα σκότωνε το
 * position:sticky της σύνοψης παραγγελίας στο ταμείο. */
html, body { overflow-x: clip; }

:root {
	--ease-out: cubic-bezier(.16, 1, .3, 1);      /* out-expo */
	--dur-fast: 140ms;
	--dur: 220ms;
	--wide: 1290px;
	--gut: var(--wp--preset--spacing--50);
	/* Επιφάνειες που δεν είναι tokens γιατί χρησιμοποιούνται σε ένα σημείο */
	--peach: #E3C4A6;
	--espresso: #3A2E24;
	--onDark: #EDE3D8;
	--onDarkDim: #C9BCAF;
}

/* ═══ ΚΟΙΝΟ ΠΛΑΤΟΣ ═══
 * Ντετερμινιστικό gutter: ΙΔΙΟ πλάτος και κεντράρισμα για κάθε ζώνη, είτε
 * είναι block group είτε δικό μας <section>. Χωρίς αυτό, οι εναλλασσόμενες
 * ζώνες ξεκινούσαν σε διαφορετικό x και η σελίδα «τρεμόπαιζε» κατακόρυφα. */
.nina-front > * { margin-block: 0 !important; }
.nina-front > .alignfull,
.nina-shop > .alignfull,
.nina-product > .alignfull { padding-inline: 0 !important; }
.nina-front .alignfull > .alignwide,
.nina-shop .alignfull > .alignwide,
.nina-product .alignfull > .alignwide,
.nina-shop > .alignwide,
.nina-product > .alignwide,
.nina-checkout > .alignwide,
.hero-in, .feat-in, .cta-in, .ph-in, .coh-row, .cof-in, .nina-fgrid, .nina-fbot {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gut);
	box-sizing: border-box;
}

/* ═══ ΚΟΥΜΠΙΑ ═══
 * Τρεις παραλλαγές. Τα ελληνικά κεφαλαία γράφονται κεφαλαία στο markup, ΔΕΝ
 * παράγονται με text-transform: ο κανόνας uppercase κρατά τους τόνους σε
 * αρκετούς browsers («ΠΡΟΣΘΉΚΗ»), που είναι ορθογραφικό λάθος στα ελληνικά. */
.nina-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 16px 34px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
	text-decoration: none; border: 1px solid transparent; cursor: pointer;
	background: var(--wp--preset--color--brand); color: #fff;
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
	            border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nina-btn:hover { background: var(--wp--preset--color--brand-dark); color: #fff; text-decoration: none; }
.nina-btn:active { transform: translateY(1px); }
.nina-btn-solid { background: var(--wp--preset--color--ink); }
.nina-btn-solid:hover { background: #000; }
.nina-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.nina-btn-ghost:hover { background: #fff; color: var(--wp--preset--color--ink); border-color: #fff; }

/* ═══ TOPBAR ═══ */
.nina-topbar { font-size: 12.5px; }
.nina-topbar .wp-block-group { padding-top: 7px; padding-bottom: 7px; }
.nina-topbar .tb-item { margin: 0; color: rgba(255,255,255,.92); }
.nina-topbar .tb-item a { color: #fff; text-decoration: none; }
.nina-topbar .tb-item a:hover { text-decoration: underline; }
.nina-topbar .tb-left { gap: var(--wp--preset--spacing--50); align-items: center; }
.nina-tbsocial { display: flex; gap: 14px; align-items: center; }
.nina-tbsocial a { color: rgba(255,255,255,.9); line-height: 0; padding: 6px 2px; }
.nina-tbsocial a:hover { color: #fff; }
/* Σε κινητό μένει μόνο το τηλέφωνο: τρία στοιχεία δεν χωρούν σε 358px. */
@media (max-width: 860px) { .nina-topbar .tb-mail, .nina-topbar .tb-ship { display: none; } }
@media (max-width: 560px) { .nina-tbsocial { display: none; } .nina-topbar .tb-left { gap: 14px; } }

/* ═══ ΚΕΦΑΛΙΔΑ ═══
 * Λογότυπο ΑΡΙΣΤΕΡΑ, μενού δίπλα του, εικονίδια δεξιά.
 *
 * Τα mockups έχουν κεντραρισμένο λογότυπο, και το v3 ξεκίνησε έτσι. Δεν
 * δουλεύει με το πραγματικό μενού, και οι αριθμοί το δείχνουν: κεντραρισμένο
 * λογότυπο σημαίνει ΙΣΕΣ πλαϊνές στήλες, δηλαδή 555px ανά πλευρά στα 1440.
 * Το μενού με 6 στοιχεία θέλει 754px (634 κείμενο + 120 κενά). Καμία λογική
 * γραμματοσειρά δεν καλύπτει τη διαφορά των 198px: χρειάζεται 11.5px, που
 * δεν διαβάζεται. Με 4 στοιχεία θα ήθελε 494px και θα χωρούσε άνετα.
 *
 * Το προηγούμενο grid ήταν «1fr auto 1fr», που είναι minmax(AUTO, 1fr): η
 * στήλη του μενού μεγάλωνε πάνω από το μερίδιό της αντί να κοπεί, οι δύο
 * πλευρές έβγαιναν 753px και 372px, και το λογότυπο κατέληγε 183px δεξιά
 * από το κέντρο. Έμοιαζε με σφάλμα, γιατί ήταν.
 *
 * Εδώ δεν υπάρχει τέτοια εξάρτηση: το λογότυπο πατά αριστερά και το μενού
 * παίρνει όσο χώρο χρειάζεται, με όσα στοιχεία κι αν αποκτήσει. */
.nina-hrow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas: "logo nav icons";
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	min-height: 88px;
}
.nina-logo { grid-area: logo; justify-self: start; display: block; line-height: 0; }
.nina-hrow > .wp-block-navigation { grid-area: nav; justify-self: start; }
.nina-logo img { width: 132px; height: auto; }
.nina-hicons { grid-area: icons; justify-self: end; color: var(--wp--preset--color--ink); }
.nina-hicons a { color: inherit; }
.nina-hicons svg { display: block; }
.nina-hicons .wc-block-mini-cart__button { padding: 0; color: inherit; }
.nina-hicons .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--brand); color: #fff;
	font-size: 11px; font-weight: 600;
}

/* Τα labels δεν σπάνε ποτέ σε δεύτερη γραμμή: μενού σε δύο σειρές διαβάζεται
 * ως σφάλμα. Με το λογότυπο αριστερά υπάρχει άφθονος χώρος, οπότε το μέγεθος
 * μένει αναγνώσιμο. */
.nina-header .wp-block-navigation { font-weight: 400; font-size: 14.5px; }
.nina-header .wp-block-navigation .wp-block-navigation__container { gap: var(--wp--preset--spacing--50); }
.nina-header .wp-block-navigation .wp-block-navigation-item__label { white-space: nowrap; }
.nina-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--ink); }
.nina-header .wp-block-navigation a:hover,
.nina-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--brand); }
.nina-header .wp-block-navigation__submenu-container {
	background: #fff; border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 18px 40px -22px rgba(43,33,25,.35);
	padding: 6px 0; min-width: 220px;
}
.nina-header .wp-block-navigation__submenu-container a { padding: 9px 18px; }

/* Search popover (details/summary, καθόλου JS) */
.nina-search { position: relative; }
/* Κλειστό details: ρητή απόκρυψη. Χωρίς αυτό η φόρμα έμενε στη ροή. */
.nina-search:not([open]) .nina-search-form { display: none; }
.nina-search summary { list-style: none; cursor: pointer; display: block; line-height: 0; padding: 4px; }
.nina-search summary::-webkit-details-marker { display: none; }
.nina-search[open] .nina-search-form {
	position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
	display: flex; gap: 0; width: min(78vw, 340px);
	background: #fff; border: 1px solid var(--wp--preset--color--line);
	box-shadow: 0 18px 40px -22px rgba(43,33,25,.35); padding: 8px;
}
.nina-search-form input[type="search"] {
	flex: 1; border: 0; padding: 10px 12px; font-size: 16px;
	background: transparent; color: var(--wp--preset--color--ink);
}
.nina-search-form button {
	border: 0; background: var(--wp--preset--color--brand); color: #fff;
	padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ═══ ΗΡΩΑΣ ═══
 * Κατά το εγκεκριμένο mockup: μία φωτογραφία σε όλο το πλάτος, κείμενο
 * αριστερά πάνω της. Η αναλογία μετρήθηκε από το ίδιο το mockup, 316/941
 * του πλάτους, δηλαδή 0.336. Στα 1440 βγάζει 484px. */
.nina-hero {
	position: relative;
	background: var(--wp--preset--color--alt);   /* πριν φορτώσει η εικόνα */
	min-height: clamp(300px, 33.6vw, 560px);
	display: grid;
	overflow: hidden;
}
/* Η φωτογραφία πιάνει το ΔΕΞΙ 62%, όχι όλο το πλάτος.
 *
 * Μετρημένο: η πηγή είναι 4:3. Απλωμένη σε ολόκληρη τη ζώνη 2.98:1, το
 * object-fit: cover έδειχνε μόνο το 45% του ύψους της, δηλαδή μια αγνώριστη
 * λωρίδα. Στο 62% η ζώνη είναι 1.84:1 και φαίνεται το 72% του ύψους.
 *
 * Οπτικά το αποτέλεσμα είναι το ίδιο με το mockup, γιατί εκεί η αριστερή
 * πλευρά της φωτογραφίας είναι ούτως ή άλλως σχεδόν σκέτη κρέμα. */
.hero-photo {
	position: absolute; top: 0; right: 0; bottom: 0; left: auto;
	width: 62%; height: 100%;
	object-fit: cover;
	/* `top` και όχι κεντρικό κόψιμο: στη φωτογραφία της Νίνας (07/09/2026) τα
	 * δύο πιο δυνατά κομμάτια, η μπομπονιέρα με το πώμα και το στρογγυλό
	 * κουτί, ακουμπούν την πάνω άκρη του κάδρου. Με οποιοδήποτε κόψιμο προς τα
	 * κάτω τους κόβονταν οι κορυφές, που διαβάζεται ως λάθος. Έτσι μένουν
	 * ολόκληρα, και το τετράγωνο σταχτοδοχείο με το μπολ «φεύγουν» από την
	 * κάτω άκρη, που διαβάζεται ως φωτογραφία που συνεχίζεται. */
	object-position: center top;
}
/* Η βαθμίδα κρέμας ΔΕΝ είναι διακόσμηση, είναι η εγγύηση αντίθεσης: το
 * σκούρο κείμενο πρέπει να διαβάζεται ό,τι κι αν δείχνει η φωτογραφία από
 * κάτω. Χωρίς αυτήν, μια πιο σκούρα εικόνα θα έσπαγε τον ήρωα. */
/* Λιώσιμο της αριστερής άκρης της φωτογραφίας μέσα στην κρέμα, ώστε να μη
 * φαίνεται κολλημένο ορθογώνιο αλλά μία συνεχής ζώνη, όπως στο mockup. */
.nina-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg,
		var(--wp--preset--color--alt) 0%,
		/* Αδιαφανές ΠΕΡΑ από την αριστερή άκρη της φωτογραφίας (38%),
		 * αλλιώς φαινόταν λεπτή κατακόρυφη ραφή εκεί που αρχίζει. */
		var(--wp--preset--color--alt) 40%,
		rgba(242,231,218,.82) 47%,
		rgba(242,231,218,.42) 55%,
		rgba(242,231,218,.10) 63%,
		rgba(242,231,218,0) 72%);
}
.hero-in {
	position: relative; z-index: 2;
	align-self: center;
	padding-block: clamp(40px, 5vw, 72px);
	width: 100%;
}
.hero-tx { max-width: 30rem; }
.hero-tx h1 {
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--40);
	max-width: 14ch;
}
.hero-sub {
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	margin: 0 0 var(--wp--preset--spacing--50);
	max-width: 32ch;
}

/* Κινητό: η φωτογραφία γίνεται φόντο ολόκληρου του ήρωα και η βαθμίδα
 * γυρίζει κατακόρυφα, αλλιώς το κείμενο πέφτει πάνω στο θέμα. */
@media (max-width: 700px) {
	/* Ψηλότερος ήρωας σε κινητό, ώστε να μείνει λωρίδα φωτογραφίας ΚΑΤΩ από
	 * το κείμενο. Με 380px το κείμενο έφτανε ως τη μέση και η βαθμίδα
	 * αναγκαστικά ξεθώριαζε πίσω του. */
	.nina-hero { min-height: clamp(440px, 112vw, 560px); }
	/* Σε κινητό δεν υπάρχει πλάτος για δύο ζώνες: η φωτογραφία γεμίζει τα
	 * πάντα και η βαθμίδα γυρίζει κατακόρυφα. */
	.hero-photo { left: 0; width: 100%; object-position: 58% center; }
	/* Αδιαφανές ως το 58%, δηλαδή ΚΑΤΩ από τον υπότιτλο. Μετρημένο: με
	 * ξεθώριασμα από το 42% ο υπότιτλος έπεφτε σε 3.73:1, κάτω από το AA.
	 * Το κείμενο δεν κάθεται ποτέ πάνω σε φωτογραφία. */
	.nina-hero::after {
		background: linear-gradient(180deg,
			var(--wp--preset--color--alt) 0%,
			var(--wp--preset--color--alt) 58%,
			rgba(242,231,218,.72) 70%,
			rgba(242,231,218,.28) 82%,
			rgba(242,231,218,0) 94%);
	}
	.hero-in { align-self: start; }
	.hero-tx { max-width: none; }
	.hero-tx h1 { max-width: 16ch; }
}

/* ═══ ΤΑΙΝΙΑ ΕΓΓΥΗΣΕΩΝ ═══ */
.nina-usps .usp-row {
	display: grid; gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
}
.usp { display: flex; gap: 14px; align-items: center; color: var(--wp--preset--color--brand); }
.usp div { color: var(--wp--preset--color--ink); }
.usp strong { display: block; font-size: 14.5px; }
.usp span { display: block; font-size: 13px; color: var(--wp--preset--color--muted); }
.usp svg { flex: none; }
@media (min-width: 820px) {
	.nina-usps .usp-row { grid-template-columns: repeat(3, 1fr); align-items: center; }
	.usp { justify-content: center; }
	.usp + .usp { border-left: 1px solid rgba(43,33,25,.13); padding-left: var(--wp--preset--spacing--50); }
}

/* ═══ ΖΩΝΗ ΚΑΤΗΓΟΡΙΑΣ (εικόνα + κάρτα που επικαλύπτει) ═══ */
/* Συμμετρικό padding. Πριν, το κάτω ήταν 0 και την απόσταση την έδινε η
 * σειρά προϊόντων που ακολουθούσε. Οι σειρές αφαιρέθηκαν, οπότε οι ζώνες
 * θα κολλούσαν η μία στην άλλη. */
.nina-feat { padding-block: clamp(48px, 7vw, 92px) clamp(40px, 5.5vw, 76px); }
.feat-in { display: grid; }
.feat-im { line-height: 0; grid-area: im; }
.feat-im img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feat-card {
	grid-area: card;
	background: #fff;
	padding: clamp(26px, 4vw, 46px) clamp(22px, 3.4vw, 44px);
	box-shadow: 0 26px 54px -30px rgba(43,33,25,.42);
}
.feat-eyebrow {
	margin: 0 0 12px; font-size: 11.5px; font-weight: 600;
	letter-spacing: .19em; color: var(--wp--preset--color--brand);
}
.feat-card h2 { margin: 0 0 14px; }
.feat-body { margin: 0 0 var(--wp--preset--spacing--50); font-size: 15px; color: var(--wp--preset--color--muted); line-height: 1.8; }
.feat-link {
	display: inline-flex; align-items: center; gap: 14px;
	font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
	color: var(--wp--preset--color--ink); text-decoration: none;
}
.feat-link .arr { display: block; width: 34px; height: 1px; background: currentColor; transition: width var(--dur) var(--ease-out); }
.feat-link:hover { color: var(--wp--preset--color--brand); text-decoration: none; }
.feat-link:hover .arr { width: 48px; }

/* Κινητό: η κάρτα ανεβαίνει πάνω στην εικόνα, με περιθώριο ώστε να φαίνεται
 * η επικάλυψη. Desktop: πλέγμα 12 στηλών με πραγματική επικάλυψη. */
.feat-in { grid-template-areas: "im" "card"; }
.feat-card { margin: -46px var(--wp--preset--spacing--40) 0; position: relative; z-index: 2; }
@media (min-width: 900px) {
	.feat-in {
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas: "im im im im im im im im card card card card";
		align-items: center;
	}
	.feat-im { grid-column: 1 / 9; }
	.feat-card { grid-column: 8 / 13; margin: 0; }
	.feat-imright .feat-im { grid-column: 5 / 13; }
	.feat-imright .feat-card { grid-column: 1 / 6; }
}

/* ═══ ΚΑΡΤΕΣ ΚΑΤΗΓΟΡΙΩΝ ═══
 * Το περιεχόμενο έρχεται από το [nina_categories], δηλαδή από τον πίνακα
 * κατηγοριών του WooCommerce. Εδώ μόνο η επιφάνεια. */
.nina-catcards { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 700px)  { .nina-catcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .nina-catcards { grid-template-columns: repeat(3, 1fr); } }

.ccard { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); }
/* Στήλη με το σύνδεσμο σπρωγμένο στη βάση: οι περιγραφές των κατηγοριών τις
 * γράφει η Νίνα και έχουν διαφορετικό μήκος. Χωρίς αυτό, το «Προβολή
 * προϊόντων» κάθε κάρτας έπεφτε σε άλλο ύψος. Μετρημένο στο live: 565, 590
 * και 613. */
.ccard a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.ccard-bd { display: flex; flex-direction: column; flex: 1; }
.ccard-bd p { flex: 1; }
.ccard a:hover { text-decoration: none; }
/* Το κόψιμο της μεγέθυνσης γίνεται στη ΦΩΤΟΓΡΑΦΙΑ, όχι στο <a>: μέσα στο
 * <a> ζει και το κείμενο, και το overflow εκεί θα έκοβε λάθος πράγματα.
 * Το wp_get_attachment_image βγάζει <img> χωρίς περιτύλιγμα, οπότε το
 * ρόλο του κουτιού τον παίρνει το ίδιο το .ccard a > img μέσω aspect-ratio. */
.ccard img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	background: var(--wp--preset--color--tile);
	transition: transform 480ms var(--ease-out);
}
.ccard-bd { padding: var(--wp--preset--spacing--50); }
.golink { margin-top: auto; align-self: flex-start; }
.ccard-bd h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400; margin: 0 0 6px;
}
.ccard-bd p { font-size: 14px; color: var(--wp--preset--color--muted); margin: 0 0 var(--wp--preset--spacing--40); }
.golink {
	display: inline-block;
	font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
	color: var(--wp--preset--color--brand);
	transition: transform var(--dur) var(--ease-out);
}
.ccard:hover { border-color: var(--wp--preset--color--brand); }
.ccard:hover .golink { transform: translateX(4px); }

/* Η εικόνα ζωντανεύει μέσα στα όριά της. Το clip-path εδώ δεν θα δούλευε
 * (μεταμορφώνεται μαζί με το στοιχείο), οπότε κόβει το .ccard. */
.ccard { overflow: hidden; }
.ccard:hover img { transform: scale(1.04); }

/* ═══ ΣΕΙΡΑ ΝΕΩΝ ΠΡΟΪΟΝΤΩΝ ═══
 * Έξι σε μία σειρά στο mockup. Πιο κάτω σπάει σε 3 και 2, ώστε οι κάρτες
 * να μη γίνουν στενότερες από τη φωτογραφία που κουβαλούν. */
/* Το «.nina-newrow .woocommerce ul.products» (0-3-1) και όχι
 * «.nina-newrow ul.products» (0-2-1): ο βασικός κανόνας των 4 στηλών είναι
 * «.woocommerce ul.products», ίδιας ειδικότητας με τον δεύτερο και ΠΙΟ ΚΑΤΩ
 * στο αρχείο, οπότε κέρδιζε και η σειρά έβγαινε τετράστηλη. */
@media (min-width: 780px) {
	.nina-newrow .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
	.nina-newrow .woocommerce ul.products { grid-template-columns: repeat(6, 1fr); }
}
/* Ο τίτλος κρατά ύψος δύο γραμμών. Χωρίς αυτό, ένα όνομα που τυλίγει
 * κατέβαζε την τιμή του χαμηλότερα από των διπλανών και η σειρά έμοιαζε
 * ακατάστατη. Κουμπί καλαθιού δεν υπάρχει εδώ: το αφαιρεί η
 * nina_front_loop_card() σε όλη την αρχική. */
.nina-newrow .woocommerce ul.products li.product .price { font-size: 14px; }

/* ═══ GRID ΠΡΟΪΟΝΤΩΝ (κοινό: shortcode, archive, related) ═══ */
ul.wc-block-product-template,
.woocommerce ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 780px) {
	ul.wc-block-product-template,
	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}
li.wc-block-product,
.woocommerce ul.products li.product {
	margin: 0 !important; width: auto !important; float: none !important;
	position: relative; text-align: left;
}
/* Η εικόνα κάθεται σε ήρεμο μπεζ πλακίδιο, όπως στα mockups. Τα προϊόντα
 * φωτογραφίζονται σε διαφορετικά φόντα· το πλακίδιο τα ενοποιεί. */
.wc-block-components-product-image,
.nina-thumb {
	display: block; overflow: hidden;
	background: var(--wp--preset--color--tile);
}
.wc-block-components-product-image img,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0;
	margin: 0;
}
.wc-block-components-product-image { margin: 0 0 var(--wp--preset--spacing--30); overflow: hidden; }
.woocommerce ul.products li.product a { text-decoration: none; }
li.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px; font-weight: 400; line-height: 1.4;
	margin: var(--wp--preset--spacing--30) 0 6px !important;
	padding: 0; color: var(--wp--preset--color--ink);
}
li.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
li.wc-block-product .wp-block-post-title a:hover,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--wp--preset--color--brand); }
.wc-block-components-product-price,
.woocommerce ul.products li.product .price {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px; font-weight: 600; color: var(--wp--preset--color--ink);
	margin: 0;
}
.woocommerce ul.products li.product .price del { font-weight: 400; color: var(--wp--preset--color--muted); margin-right: 6px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Σήμα προσφοράς: τετράγωνο, πάνω αριστερά, στο χρώμα της μάρκας. */
.woocommerce ul.products li.product .onsale,
.wc-block-components-product-sale-badge {
	position: absolute; top: 0; left: 0; right: auto; z-index: 3;
	background: var(--wp--preset--color--brand); color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px; font-weight: 600; letter-spacing: .06em;
	padding: 6px 12px; margin: 0; border-radius: 0; min-height: 0; line-height: 1.4;
}

/* Το κατάστημα έχει πλάγια στήλη, άρα 3 προϊόντα ανά σειρά, όπως στα
 * mockups. Οι σειρές της αρχικής και τα σχετικά προϊόντα μένουν στα 4. */
@media (min-width: 780px) {
	.nina-shop-grid-products ul.wc-block-product-template { grid-template-columns: repeat(3, 1fr); }
}

/* Ευθυγράμμιση καρτών: όταν ένας τίτλος πιάνει δύο γραμμές, η τιμή και το
 * κουμπί του έπεφταν χαμηλότερα από των διπλανών και η σειρά έμοιαζε
 * ακατάστατη. Ο τίτλος κρατά ύψος δύο γραμμών και το κουμπί σπρώχνεται
 * πάντα στη βάση της κάρτας. Μετρήθηκε στο στιγμιότυπο, δεν υποτέθηκε. */
li.wc-block-product,
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
li.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	min-height: 2.8em;
}
li.wc-block-product .wc-block-components-product-button,
.woocommerce ul.products li.product .button { margin-top: auto; }
/* Στη μίνι λίστα της πλάγιας στήλης δεν ισχύει τίποτε από τα παραπάνω. */
.nina-sidelist li.wc-block-product { display: grid; }
.nina-sidelist .wp-block-post-title { min-height: 0; }

/* Καρδιά wishlist στις κάρτες (μπαίνει με JS από το nina-core) */
.nina-heart {
	position: absolute; top: 10px; right: 10px; z-index: 4;
	width: 34px; height: 34px; display: grid; place-items: center;
	background: rgba(255,255,255,.92); border: 0; cursor: pointer;
	color: var(--wp--preset--color--brand);
	transition: transform var(--dur) var(--ease-out);
}
.nina-heart:hover { transform: scale(1.08); }
.nina-heart.is-active svg path { fill: var(--wp--preset--color--brand); }

/* ═══ ΔΙΠΛΟ BANNER ═══ */
.nina-twin { display: grid; }
@media (min-width: 800px) { .nina-twin { grid-template-columns: 1fr 1fr; } }
.tw { display: grid; align-items: center; min-height: clamp(280px, 30vw, 420px); }
.tw-in { padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px); max-width: 30rem; }
.tw h2 { margin: 0 0 12px; }
.tw p { margin: 0 0 var(--wp--preset--spacing--50); font-size: 15px; }
.tw-light { background: var(--peach); color: var(--wp--preset--color--ink); }
.tw-light p { color: #5A4632; }
.tw-dark { background: var(--espresso); color: #fff; }
.tw-dark h2 { color: #fff; }
.tw-dark p { color: rgba(255,255,255,.82); }
/* Και τα δύο πάνελ έχουν το κείμενο ΑΡΙΣΤΕΡΑ, όπως στα mockups. Η πρώτη
 * εκδοχή έσπρωχνε το αριστερό πάνελ δεξιά (justify-content:end) και ο τίτλος
 * κόλλαγε στη διαχωριστική γραμμή με μισό πάνελ άδειο.
 *
 * Το αριστερό πάνελ πατά στο ίδιο νοητό περιθώριο με τις υπόλοιπες ζώνες:
 * η ζώνη είναι πλήρους πλάτους, αλλά το κείμενο ξεκινά εκεί που ξεκινά και
 * το περιεχόμενο πιο πάνω. Αλλιώς η σελίδα χάνει τον κατακόρυφο άξονά της. */
@media (min-width: 800px) {
	.tw-light .tw-in {
		padding-left: max(var(--gut), calc((100vw - var(--wide)) / 2 + var(--gut)));
	}
}

/* ═══ ΣΚΟΥΡΗ ΖΩΝΗ CTA ═══ */
.nina-cta {
	position: relative; background: var(--wp--preset--color--dark);
	background-image: url(assets/img/cta-bg.jpg);
	background-size: cover; background-position: center;
	text-align: center;
}
/* .28 και όχι .45: με βαρύτερη σκίαση η ζώνη έπεφτε στον ίδιο τόνο με το
 * υποσέλιδο από κάτω και τα δύο διαβάζονταν ως ένα ενιαίο μαύρο μπλοκ. Τώρα
 * φαίνεται η υφή της φωτογραφίας και υπάρχει όριο. Το λευκό κείμενο μένει
 * πολύ πάνω από το AA: το φωτεινότερο σημείο του φόντου δίνει 9.4:1. */
.nina-cta::before { content: ""; position: absolute; inset: 0; background: rgba(20,15,11,.28); }
.cta-in { position: relative; padding-block: clamp(64px, 9vw, 118px); }
.nina-cta h2 { color: #fff; margin: 0 0 14px; }
.nina-cta p { color: rgba(255,255,255,.84); margin: 0 auto var(--wp--preset--spacing--50); max-width: 46ch; font-size: 16px; }

/* ═══ ΥΠΟΣΕΛΙΔΟ (σκούρο) ═══ */
.nina-footer { padding-top: clamp(52px, 7vw, 84px); }
.nina-fgrid { display: grid; gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.fbrand img { width: 150px; height: auto; margin-bottom: 14px; }
.fbrand-tag { color: var(--onDarkDim); font-size: 14px; margin: 0; max-width: 26ch; line-height: 1.7; }
.fcol .fh {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 19px; font-weight: 400; letter-spacing: .01em;
	color: var(--onDark);
	margin: 0 0 var(--wp--preset--spacing--40);
}
.flist { list-style: none; margin: 0; padding: 0; }
.flist li { margin: 0; padding: 6px 0; font-size: 14px; color: var(--onDarkDim); }
.flist a { color: var(--onDarkDim); text-decoration: none; }
.flist a:hover { color: #fff; text-decoration: underline; }
.fcontact li { display: flex; gap: 10px; align-items: center; }
.fcontact svg { flex: none; color: var(--wp--preset--color--brand); }
.nina-social { display: flex; gap: 10px; margin-top: 18px; }
.nina-social a {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid rgba(237,227,216,.35); color: var(--onDark);
	display: grid; place-items: center;
	transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nina-social a:hover { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: #fff; }

.nina-fbot {
	margin-top: clamp(40px, 5vw, 64px);
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid rgba(237,227,216,.16);
	display: flex; flex-wrap: wrap; gap: 12px 24px;
	align-items: center; justify-content: space-between;
}
.fbot-copy { margin: 0; font-size: 13px; color: var(--onDarkDim); }
.nina-pay { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.nina-pay li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--onDarkDim); }
.nina-pay svg { color: var(--wp--preset--color--brand); }

@media (min-width: 560px) { .nina-fgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .nina-fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.15fr; } }

/* ═══ ΕΝΟΤΗΤΕΣ (εσωτερικές σελίδες) ═══ */
.nina-sec { padding: var(--wp--preset--spacing--80) 0; }
.sec-head { margin-bottom: var(--wp--preset--spacing--50); flex-wrap: wrap !important; gap: 6px 16px; }
.sec-head h2 { margin: 0; }
.sec-link { margin: 0; font-size: 14px; font-weight: 600; }
.sec-link a { color: var(--wp--preset--color--brand); text-decoration: none; display: inline-block; transition: transform var(--dur) var(--ease-out); }
.sec-link a:hover { text-decoration: underline; transform: translateX(3px); }

/* ═══ ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΟΣ ═══ */
.nina-crumbs { color: var(--wp--preset--color--muted); }
.nina-crumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.nina-crumbs a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.nina-crumbs .woocommerce-breadcrumb { font-size: 13px; }

/* Γκαλερί: κάθετα thumbnails σε desktop (mockup) */
.woocommerce-product-gallery { margin: 0; }
.woocommerce-product-gallery__wrapper { overflow: hidden; }
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 64px; }
.woocommerce-product-gallery .flex-control-thumbs img {
	border: 2px solid transparent; cursor: pointer; opacity: .75;
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	border-color: var(--wp--preset--color--brand); opacity: 1;
}
@media (min-width: 900px) {
	/* Κάθετα thumbs ΜΟΝΟ όταν υπάρχουν πολλές εικόνες: με μία, το grid
	 * έστελνε την κύρια εικόνα στη στήλη των 76px. */
	.woocommerce-product-gallery:has(.flex-control-thumbs) {
		display: grid; grid-template-columns: 76px 1fr; gap: 12px;
	}
	.woocommerce-product-gallery:has(.flex-control-thumbs) .woocommerce-product-gallery__wrapper { order: 2; }
	.woocommerce-product-gallery .flex-control-thumbs { order: 1; flex-direction: column; margin: 0; }
	.woocommerce-product-gallery .flex-control-thumbs li { width: 100%; }
}

.nina-pinfo .wp-block-post-title { margin-top: 0; }
.nina-price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400; font-size: var(--wp--preset--font-size--x-large);
}
.nina-summary { color: var(--wp--preset--color--muted); font-size: 15px; }

.nina-stock { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 var(--wp--preset--spacing--40); }
.nina-stock .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--wp--preset--color--ok); }

/* Φόρμα καλαθιού + stepper */
.nina-product form.cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.nina-qty {
	display: inline-flex; align-items: stretch;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}
.nina-qty button {
	width: 42px; border: 0; background: transparent; cursor: pointer;
	font-size: 18px; color: var(--wp--preset--color--ink);
}
.nina-qty button:hover { background: var(--wp--preset--color--alt); }
.nina-product form.cart .quantity input.qty {
	width: 46px; height: 52px; text-align: center; font-size: 16px;
	border: 0; background: transparent; color: var(--wp--preset--color--ink);
	-moz-appearance: textfield; appearance: textfield;
}
.nina-product form.cart input.qty::-webkit-outer-spin-button,
.nina-product form.cart input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nina-product form.cart button.single_add_to_cart_button { flex: 1; min-width: 200px; }

/* Κουμπί αγαπημένων (outline, πλήρους πλάτους) */
.nina-wish-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; margin-top: 12px; min-height: 52px;
	background: transparent; color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 14px;
	cursor: pointer;
	transition: background 150ms var(--ease-out);
}
.nina-wish-btn:hover { background: rgba(156,104,69,.08); }
.nina-wish-btn.is-active svg path { fill: currentColor; }

/* Γραμμές διαβεβαίωσης */
.nina-passure { border-top: 1px solid var(--wp--preset--color--line); }
.pa-row {
	display: flex; gap: 13px; align-items: flex-start;
	padding: 13px 0; border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--brand);
}
.pa-row div { color: var(--wp--preset--color--ink); }
.pa-row strong { display: block; font-size: 14.5px; }
.pa-row span { display: block; font-size: 13px; color: var(--wp--preset--color--muted); }
.pa-row svg { flex: none; margin-top: 2px; }

/* USP band σελίδας προϊόντος */
.nina-uspband {
	display: grid; gap: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--alt);
	padding: var(--wp--preset--spacing--50);
}
.ub { text-align: center; color: var(--wp--preset--color--brand); }
.ub strong { display: block; color: var(--wp--preset--color--ink); font-size: 14.5px; margin-top: 8px; }
.ub span { display: block; color: var(--wp--preset--color--muted); font-size: 13px; }
.ub svg { margin: 0 auto; }
@media (min-width: 700px) { .nina-uspband { grid-template-columns: repeat(4, 1fr); } }

/* 3 στήλες λεπτομερειών */
.pd-h { margin: 0 0 var(--wp--preset--spacing--40); }
.pd-desc p { font-size: 15px; color: var(--wp--preset--color--muted); }
.nina-specs { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.nina-specs th, .nina-specs td {
	text-align: left; padding: 9px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}
.nina-specs th { font-weight: 600; color: var(--wp--preset--color--ink); width: 38%; padding-right: 12px; }
.nina-specs td { color: var(--wp--preset--color--muted); }
.pd-ship .pa-row:first-child { border-top: 0; }

/* Κριτική (μόνο πραγματική) */
.nina-reviewband {
	background: var(--wp--preset--color--alt);
	padding: var(--wp--preset--spacing--60); margin: 0; text-align: center;
}
.nr-stars { color: var(--wp--preset--color--brand); font-size: 18px; letter-spacing: 3px; }
.nina-reviewband blockquote {
	font-family: var(--wp--preset--font-family--serif); font-style: italic;
	font-size: clamp(17px, 4vw, 21px); line-height: 1.5;
	border: 0; margin: 10px auto; padding: 0; max-width: 560px;
}
.nina-reviewband figcaption { font-size: 13.5px; color: var(--wp--preset--color--muted); }

/* Σχετικά προϊόντα */
.nina-product .wp-block-woocommerce-product-collection > h2,
.nina-product .wp-block-woocommerce-related-products > h2,
.woocommerce .related > h2, .woocommerce .upsells > h2 {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 400 !important; line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--50) !important;
}

/* ═══ ΑΡΧΕΙΟ/ΚΑΤΗΓΟΡΙΑ ═══ */
.nina-archive-bar { font-size: 14px; }
.wc-block-product-results-count,
.wc-block-product-sort-select { font-size: 14px; color: var(--wp--preset--color--muted); }
.nina-term-desc { font-size: 15px; }

/* ═══ ΚΟΥΜΠΙΑ WOO (κλασικά) ═══ */
/* Χωρίς εξάρτηση από πρόγονο .woocommerce: το κουμπί του καλαθιού ζει μέσα
 * σε block wrapper και η κλάση .woocommerce μπαίνει στο <body> από το
 * WooCommerce. Αν λείψει (ή αλλάξει), το κύριο κουμπί αγοράς έμενε άβαφο. */
button.single_add_to_cart_button,
.wp-block-woocommerce-add-to-cart-form button,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--wp--preset--color--brand); color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600; font-size: 14px; line-height: 1.2;
	border: 0; border-radius: 0; padding: 16px 30px; min-height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none;
	transition: background 150ms var(--ease-out);
}
button.single_add_to_cart_button:hover,
.wp-block-woocommerce-add-to-cart-form button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--brand-dark); color: #fff;
}

/* Κουμπί κάρτας: διακριτικό outline */
.wc-block-components-product-button { margin-top: var(--wp--preset--spacing--20); }
/* Το display είναι ΑΠΑΡΑΙΤΗΤΟ εδώ. Το κουμπί είναι <a>, δηλαδή inline, και
 * σε inline στοιχείο τα width και min-height αγνοούνται και το padding δεν
 * μεγαλώνει τη γραμμή. Σε κινητό η κάρτα ήταν 163px, το κουμπί έβγαινε 106px
 * και ξεχείλιζε 7px κάτω από την κάρτα. Μετρήθηκε, δεν υποτέθηκε.
 * Δεν βασιζόμαστε στο CSS του WooCommerce: στην αρχική το κάνουμε dequeue. */
.wc-block-components-product-button__button {
	display: inline-flex !important; align-items: center; justify-content: center;
	text-align: center; line-height: 1.3;
	background: transparent !important; color: var(--wp--preset--color--brand) !important;
	border: 1px solid var(--wp--preset--color--brand) !important;
	border-radius: 0 !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 600 !important; font-size: 13px !important;
	min-height: 44px; padding: 10px 14px !important; width: 100%;
}
/* Στενές κάρτες δύο στηλών: μικρότερο κείμενο, ώστε «Προσθήκη στο καλάθι»
 * να χωρά σε δύο άνετες γραμμές αντί να σπάει άσχημα. */
@media (max-width: 560px) {
	.wc-block-components-product-button__button {
		font-size: 12px !important; padding: 9px 8px !important;
	}
}
.wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--brand) !important; color: #fff !important;
}

/* ═══ ΦΟΡΜΑ ΕΠΙΚΟΙΝΩΝΙΑΣ ═══ */
.nina-form { max-width: 34rem; }
.nina-form p { margin: 0 0 var(--wp--preset--spacing--40); }
.nina-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.nina-form label .opt { font-weight: 400; color: var(--wp--preset--color--muted); }
.nina-form input:not([type="checkbox"]), .nina-form select, .nina-form textarea {
	/* box-sizing: χωρίς αυτό, width:100% + padding 28 + border 2 = 388px μέσα σε
	 * container 358px -> οριζόντιο scroll σε κινητό. Μετρήθηκε, δεν υποτέθηκε. */
	box-sizing: border-box;
	width: 100%; font-family: var(--wp--preset--font-family--sans);
	font-size: 16px; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0; padding: 14px 15px; min-height: 50px;
}
.nina-form textarea { min-height: 140px; resize: vertical; }
.nina-form .nina-hp { position: absolute !important; left: -9999px !important; }
.nina-form button {
	background: var(--wp--preset--color--brand); color: #fff;
	border: 0; border-radius: 0; padding: 16px 32px; min-height: 52px;
	font-family: var(--wp--preset--font-family--sans); font-weight: 600; font-size: 14px;
	cursor: pointer;
}
.nina-form button:hover { background: var(--wp--preset--color--brand-dark); }
.nina-form-ok, .nina-form-err {
	max-width: 34rem; padding: 14px 16px;
	margin-bottom: var(--wp--preset--spacing--50); font-size: 15px;
}
.nina-form-ok { background: #EAF0E4; border: 1px solid #B9C9AC; }
.nina-form-err { background: #F5E9E3; border: 1px solid #D9BCA8; }

/* Κεφαλίδα checkout: χωρίς μενού (distraction-free). */
.nina-checkout-secure {
	display: inline-flex; align-items: center; gap: 7px; margin: 0;
	font-size: 13px; color: var(--wp--preset--color--muted);
}

/* ═══ ΚΑΛΑΘΙ & CHECKOUT ═══
 * Blocks του WooCommerce με δικό τους CSS. Ευθυγράμμιση με το theme χωρίς
 * να αγγίξουμε τη λογική τους, μόνο επιφάνεια. */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { font-family: var(--wp--preset--font-family--sans); }

.wc-block-components-title, .wp-block-woocommerce-cart h1, .wp-block-woocommerce-checkout h1,
.wc-block-cart__totals-title, .wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--serif) !important;
	font-weight: 400 !important;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
}
.wc-block-components-checkout-step__title { font-size: var(--wp--preset--font-size--x-large) !important; }
.wc-block-components-checkout-step__description { color: var(--wp--preset--color--muted); }

/* Ζώνη συναίνεσης όρων & υπαναχώρησης (απαίτηση Fraud Τράπεζας Πειραιώς).
 * Το υποχρεωτικό κουτί ζει στη ζώνη «Πρόσθετες πληροφορίες παραγγελίας» του
 * WooCommerce, γιατί μόνο εκεί υπάρχει έλεγχος στον server. Ο τίτλος της
 * ζώνης δεν αλλάζει από το theme: έρχεται από τις μεταφράσεις της JS, όχι από
 * attribute του μπλοκ. Και τιτλοφορεί λάθος μια νομική συναίνεση.
 * Κρύβεται ΜΟΝΟ ο ορατός τίτλος. Το <legend class="screen-reader-text"> του
 * fieldset μένει στη θέση του, οπότε οι αναγνώστες οθόνης ακούν κανονικά πού
 * βρίσκονται. Έτσι το κουτί κάθεται κάτω από τη γραμμή με τους συνδέσμους των
 * όρων και πάνω από το κουμπί παραγγελίας, ως ένα πράγμα. */
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkout-step__heading-container { display: none; }
.wp-block-woocommerce-checkout-additional-information-block { margin-block-start: 0; }

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox input {
	box-sizing: border-box;
	font-size: 16px !important;               /* <16px = zoom στο iOS */
	border-radius: 0 !important;
	border-color: var(--wp--preset--color--line) !important;
	background: var(--wp--preset--color--paper) !important;
	color: var(--wp--preset--color--ink) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--wp--preset--color--muted); }
.wc-block-components-text-input input:focus { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--brand) !important;
	color: #fff !important;
	border-radius: 0 !important;
	min-height: 54px;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 600 !important;
	transition: background var(--dur) var(--ease-out);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--brand-dark) !important;
}

/* Σύνολα & πίνακας
 * Το σύνολο ΔΕΝ μπαίνει σε serif προβολής: είναι αριθμός που ο χρήστης
 * επαληθεύει πριν πληρώσει (product register: display fonts σε δεδομένα
 * απαγορεύονται). Η ιεραρχία βγαίνει από μέγεθος και βάρος, όχι από ύφος. */
.wc-block-components-totals-item__value,
.wc-block-components-product-price { color: var(--wp--preset--color--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.01em;
}

/* ── Καταστάσεις πεδίων ──
 * Το !important παραπάνω έσβηνε το κόκκινο περίγραμμα σφάλματος του
 * WooCommerce: το άκυρο πεδίο έμοιαζε ίδιο με το έγκυρο. Μετρήθηκε. */
.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.has-error textarea,
.has-error .wc-block-components-combobox-control input,
.wc-block-components-address-form .has-error input {
	border-color: #C0322A !important;
	border-width: 1.5px !important;
	background: #FDF7F5 !important;
}
.wc-block-components-text-input.has-error input:focus { outline-color: #C0322A; }
.wc-block-components-validation-error { font-weight: 600; }

.wc-block-cart__submit-button[disabled],
.wc-block-components-checkout-place-order-button[disabled],
.wc-block-components-button--loading {
	opacity: .55 !important;
	cursor: not-allowed;
}
.woocommerce button.button:disabled,
.nina-form button:disabled { opacity: .55; cursor: not-allowed; }
.wc-block-cart-items__row { border-color: var(--wp--preset--color--line) !important; }
.wc-block-cart-item__image img { border: 1px solid var(--wp--preset--color--line); }
.wc-block-components-sidebar, .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	background: var(--wp--preset--color--alt);
}
.wc-block-components-panel__button { color: var(--wp--preset--color--brand); }

.wc-block-components-notice-banner { border-radius: 0; }
.wc-block-components-notice-banner.is-error { border-color: #C08A6A; }
.wc-block-components-notice-banner.is-success { border-color: var(--wp--preset--color--ok); }

/* Άδειο καλάθι: κατάσταση που διδάσκει, όχι «δεν υπάρχει τίποτα εδώ». */
.wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: var(--wp--preset--spacing--60); }
.wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	margin-bottom: var(--wp--preset--spacing--30);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products,
.wp-block-woocommerce-empty-cart-block ul.wc-block-product-template { text-align: left; }

/* Στενές οθόνες: τα 44px στόχοι μένουν, μαζεύουν τα κενά. */
/* Κινητό: το μενού είναι πια ένα κουμπί hamburger, άρα το κεντραρισμένο
 * λογότυπο του mockup χωράει άνετα. Η σειρά αλλάζει μόνο οπτικά, με
 * grid-template-areas· το markup μένει λογότυπο, μενού, εικονίδια. */
@media (max-width: 599px) {
	.nina-hrow {
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "nav logo icons";
	}
	.nina-logo { justify-self: center; }
}
@media (max-width: 520px) {
	.nina-logo img { width: 104px; }
	.nina-hicons { gap: 0 !important; }
	.nina-hrow { gap: 2px; min-height: 72px; }
}

/* ═══ ΣΤΟΧΟΙ ΑΦΗΣ ═══
 * Μετρημένο: μενού κινητού 24×24, αναζήτηση 29×29, λογαριασμός 40×40.
 * Όλα κάτω από το ελάχιστο 44×44 (WCAG 2.5.8). */
.nina-hicons > *,
.nina-hicons .wc-block-mini-cart__button,
.nina-hicons .wc-block-customer-account__link,
.nina-search summary {
	min-width: 44px; min-height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
}
/* ΧΩΡΙΣ display εδώ. Ο κανόνας του WordPress που κρύβει το hamburger πάνω
 * από 600px έχει ΙΔΙΑ ειδικότητα (0-2-0) με αυτόν, και το style.css του
 * theme φορτώνει αργότερα: το «display: inline-flex» κέρδιζε και το κουμπί
 * έμενε ορατό δίπλα στο λογότυπο σε desktop. Εδώ ορίζουμε μόνο τον στόχο
 * αφής· ποιος το δείχνει και πότε το αποφασίζει το WordPress. */
.nina-header .wp-block-navigation__responsive-container-open,
.nina-header .wp-block-navigation__responsive-container-close {
	min-width: 44px; min-height: 44px;
	align-items: center; justify-content: center;
}
.nina-header .wp-block-navigation__responsive-container-close { display: inline-flex; }
@media (max-width: 599px) {
	.nina-header .wp-block-navigation__responsive-container-open { display: inline-flex; }
}
.nina-header .wp-block-navigation__responsive-container-open svg,
.nina-header .wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
.nina-topbar .tb-phone a { display: inline-block; padding: 14px 2px; margin: -14px 0; }
.nina-header .wp-block-navigation__submenu-icon { width: 20px; height: 20px; padding: 0 2px; }

/* ═══ ΚΕΦΑΛΙΔΑ ΣΕΛΙΔΑΣ (κατάστημα, προϊόν) ═══ */
.nina-pagehead {
	position: relative; background: var(--wp--preset--color--dark);
	background-image: url(assets/img/cta-bg.jpg);
	background-size: cover; background-position: center;
}
.nina-pagehead::before { content: ""; position: absolute; inset: 0; background: rgba(20,15,11,.55); }
.ph-in {
	position: relative;
	padding-block: clamp(38px, 5.5vw, 74px);
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	align-items: baseline; justify-content: space-between;
}
.ph-title {
	margin: 0; color: #fff;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400; line-height: 1.15;
}
.ph-title a { color: #fff; text-decoration: none; }
.ph-crumbs, .ph-crumbs a { color: rgba(255,255,255,.82) !important; }
.ph-crumbs a:hover { color: #fff !important; }
.nina-pagehead .woocommerce-breadcrumb { font-size: 13px; margin: 0; }

/* ═══ ΚΑΤΑΣΤΗΜΑ: πλάγια στήλη + πλέγμα ═══ */
.nina-shop, .nina-product { padding-bottom: var(--wp--preset--spacing--90); }
.nina-shop-grid { display: grid; gap: var(--wp--preset--spacing--70); margin-top: var(--wp--preset--spacing--70) !important; }
@media (min-width: 1000px) {
	.nina-shop-grid { grid-template-columns: 280px minmax(0, 1fr); gap: var(--wp--preset--spacing--80); }
}
/* Σε κινητό η πλάγια στήλη πάει ΚΑΤΩ από τα προϊόντα. Ο επισκέπτης ήρθε για
 * τα προϊόντα, και έξι ενότητες φίλτρων πριν από αυτά είναι τοίχος. */
@media (max-width: 999px) {
	.nina-shop-grid { display: flex; flex-direction: column; }
	.nina-side { order: 2; }
	.nina-shop-main { order: 1; }
}

.nina-side > * + * { margin-top: var(--wp--preset--spacing--70); }
.side-h {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 21px; font-weight: 400; margin: 0 0 var(--wp--preset--spacing--40);
	padding-bottom: 12px; border-bottom: 1px solid var(--wp--preset--color--line);
}
.side-search { display: flex; border: 1px solid var(--wp--preset--color--line); background: #fff; }
.side-search input[type="search"] {
	flex: 1; min-width: 0; border: 0; background: transparent;
	padding: 13px 14px; font-size: 16px; color: var(--wp--preset--color--ink);
}
.side-search button { border: 0; background: transparent; color: var(--wp--preset--color--brand); padding: 0 14px; cursor: pointer; }
.side-search button:hover { color: var(--wp--preset--color--brand-dark); }

/* Το πλήθος προϊόντων ΔΕΝ είναι μέσα στον σύνδεσμο. Το WooCommerce το
   βγάζει αδελφάκι του <a>, μέσα στο <li>:
     <li><a><span class="…__name">Όνομα</span></a><span class="…-count">(3)</span></li>
   Άρα ο flex πρέπει να μπει στο <li>. Αν μπει στο <a>, ο σύνδεσμος πιάνει
   όλο το πλάτος και το πλήθος πέφτει στην από κάτω γραμμή. */
.side-cats ul { list-style: none; margin: 0; padding: 0; }
.side-cats li {
	display: flex;
	flex-wrap: wrap;          /* το υπομενού πάει σε δική του γραμμή */
	align-items: baseline;
	justify-content: space-between;
	gap: 0 12px;
	margin: 0;
	padding: 8px 0;
}
.side-cats li a {
	flex: 1 1 auto;
	min-width: 0;             /* να σπάει το πολύ μεγάλο όνομα, να μη βγαίνει έξω */
	font-size: 14.5px;
	color: var(--wp--preset--color--muted); text-decoration: none;
}
.side-cats li a:hover { color: var(--wp--preset--color--brand); }
.side-cats .wc-block-product-categories-list-item-count {
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--wp--preset--color--muted); font-size: 13px;
}
.side-cats li ul { flex: 0 0 100%; margin-left: 14px; }

.side-price .sp-row { display: flex; align-items: flex-end; gap: 10px; }
.side-price .sp-field { flex: 1; min-width: 0; }
.side-price label { display: block; font-size: 12px; color: var(--wp--preset--color--muted); margin-bottom: 5px; }
.side-price input {
	box-sizing: border-box; width: 100%;
	border: 1px solid var(--wp--preset--color--line); background: #fff;
	padding: 11px 12px; font-size: 15px; color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
}
.side-price .sp-sep { width: 12px; height: 1px; background: var(--wp--preset--color--line); margin-bottom: 22px; flex: none; }
.side-price button {
	margin-top: 14px; width: 100%; min-height: 44px;
	border: 0; background: var(--wp--preset--color--brand); color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px; font-weight: 600; letter-spacing: .1em; cursor: pointer;
}
.side-price button:hover { background: var(--wp--preset--color--brand-dark); }

/* Μίνι λίστα προϊόντων: εικόνα αριστερά, κείμενο δεξιά */
.nina-sidelist ul.wc-block-product-template { display: block; }
.nina-sidelist li.wc-block-product {
	display: grid; grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px; align-items: center; margin: 0 0 14px !important;
}
.nina-sidelist .wc-block-components-product-image { margin: 0; }
.nina-sidelist .wc-block-components-product-image img { aspect-ratio: 1 / 1; }
.nina-sidelist .sl-tx { min-width: 0; }
.nina-sidelist .wp-block-post-title { margin: 0 0 3px !important; font-size: 13.5px; line-height: 1.35; }
.nina-sidelist .wc-block-components-product-price { font-size: 13.5px; }

.side-tags { line-height: 2.1; }
.side-tags a {
	display: inline-block; font-size: 13px !important;
	padding: 5px 11px; margin: 0 4px 4px 0;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted); text-decoration: none;
}
.side-tags a:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }

.side-help { background: var(--wp--preset--color--alt); padding: var(--wp--preset--spacing--50); }
.side-help .sh-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px; margin: 0 0 8px;
}
.side-help .sh-tx { font-size: 14px; color: #5A4632; margin: 0 0 var(--wp--preset--spacing--40); }
.side-help .nina-btn { width: 100%; min-height: 46px; }

/* ═══ ΜΠΑΡΑ ΑΡΧΕΙΟΥ + ΣΕΛΙΔΟΠΟΙΗΣΗ ═══ */
.nina-archive-bar {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
	font-size: 14px;
}
.nina-archive-bar .woocommerce-result-count { margin: 0; }
.nina-term-desc { margin-bottom: var(--wp--preset--spacing--60); font-size: 15px; }
.nina-empty { padding-block: var(--wp--preset--spacing--80); text-align: center; }

.nina-pagination { margin-top: var(--wp--preset--spacing--80) !important; gap: 8px; }
.nina-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; min-height: 42px; padding: 0 10px;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink); text-decoration: none; font-size: 14px;
}
.nina-pagination .page-numbers:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); }
.nina-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: #fff;
}
.nina-pagination .wp-block-query-pagination-previous,
.nina-pagination .wp-block-query-pagination-next {
	font-size: 13px; font-weight: 600; color: var(--wp--preset--color--brand); text-decoration: none;
}

/* ═══ ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΟΣ: κεφαλή ═══ */
.nina-ptop { margin-top: var(--wp--preset--spacing--80) !important; }
.p-eyebrow, .p-eyebrow a {
	font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
	color: var(--wp--preset--color--brand); text-decoration: none; margin: 0;
}
.p-eyebrow a:hover { text-decoration: underline; }

.nina-pmeta {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
}
.pm-row { gap: 10px !important; align-items: baseline; margin-bottom: 8px; }
.pm-k { margin: 0; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--ink); min-width: 84px; }
.pm-v, .pm-v a { margin: 0; font-size: 13px; color: var(--wp--preset--color--muted); text-decoration: none; }
.pm-v a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }

.nina-share { display: flex; align-items: center; gap: 10px; margin-top: var(--wp--preset--spacing--40); }
.nina-share .sh-k { font-size: 13px; font-weight: 600; margin-right: 4px; }
.nina-share a {
	width: 34px; height: 34px; display: grid; place-items: center;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.nina-share a:hover { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: #fff; }

/* ═══ ΚΑΡΤΕΛΕΣ ΠΡΟΪΟΝΤΟΣ ═══
 * Δύο καταστάσεις. Χωρίς JS: τρεις ενότητες η μία κάτω από την άλλη, όλες
 * ορατές. Με JS (.is-tabs): μπάρα καρτελών και ένα ορατό πάνελ. */
.nina-tabsband { background: var(--wp--preset--color--tile); margin-top: var(--wp--preset--spacing--90) !important; }
.nina-tabs { padding-block: var(--wp--preset--spacing--80); }
.ntab + .ntab { margin-top: var(--wp--preset--spacing--70); }
.ntab-h {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large); font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--40);
}
/* 46rem, όχι 62: στα 1290px πλάτος το κείμενο έβγαινε περίπου 980px, δηλαδή
 * πάνω από 130 χαρακτήρες τη γραμμή. Το μάτι χάνει τη σειρά. */
.ntab-body { max-width: 46rem; margin-inline: auto; }

.ntab-list { display: none; }
.nina-tabs.is-tabs .ntab-list {
	display: flex; flex-wrap: wrap; justify-content: center;
	background: #fff; margin: 0 auto var(--wp--preset--spacing--70);
	width: fit-content; max-width: 100%;
	box-shadow: 0 18px 40px -28px rgba(43,33,25,.4);
}
.nina-tabs.is-tabs .ntab-btn {
	border: 0; background: transparent; cursor: pointer;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px; color: var(--wp--preset--color--muted);
	padding: 16px 30px; min-height: 52px;
	border-bottom: 2px solid transparent;
	transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.nina-tabs.is-tabs .ntab-btn:hover { color: var(--wp--preset--color--ink); }
.nina-tabs.is-tabs .ntab-btn[aria-selected="true"] {
	color: var(--wp--preset--color--brand);
	border-bottom-color: var(--wp--preset--color--brand);
}
.nina-tabs.is-tabs .ntab-h { display: none; }
.nina-tabs.is-tabs .ntab + .ntab { margin-top: 0; }
.nina-tabs.is-tabs .ntab[hidden] { display: none; }

/* ═══ ΣΧΕΤΙΚΑ ΠΡΟΪΟΝΤΑ ═══ */
.nina-related { margin-top: var(--wp--preset--spacing--90) !important; }
.rel-h { margin: 0 0 var(--wp--preset--spacing--60); }
.nina-reviewwrap { margin-top: var(--wp--preset--spacing--80) !important; }

/* ═══ ΤΑΜΕΙΟ: ΚΕΦΑΛΙΔΑ ═══
 * Ίδιο πλέγμα με την κύρια κεφαλίδα (1fr / auto / 1fr), ώστε το λογότυπο να
 * είναι στο πραγματικό κέντρο. Χωρίς μενού: στο ταμείο κάθε σύνδεσμος που
 * δεν οδηγεί στην ολοκλήρωση είναι διαρροή. */
.nina-checkout-header .coh-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: 78px;
}
.coh-back {
	justify-self: start;
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13.5px; color: var(--wp--preset--color--muted); text-decoration: none;
}
.coh-back:hover { color: var(--wp--preset--color--brand); text-decoration: none; }
.coh-back svg { flex: none; }
.nina-checkout-header .nina-logo { justify-self: center; }
.nina-checkout-header .nina-logo img { width: 118px; height: auto; }
.nina-checkout-secure {
	justify-self: end;
	display: inline-flex; align-items: center; gap: 7px; margin: 0;
	font-size: 13px; color: var(--wp--preset--color--muted);
}
.nina-checkout-secure svg { flex: none; color: var(--wp--preset--color--ok); }

/* Σε στενή οθόνη δεν χωρούν και τα τρία. Το κείμενο «Συνέχεια αγορών»
 * αποκρύπτεται ΟΠΤΙΚΑ αλλά μένει στο δέντρο προσβασιμότητας: ο σύνδεσμος
 * συνεχίζει να ανακοινώνεται σωστά, δεν γίνεται ανώνυμο εικονίδιο.
 * Η ένδειξη ασφάλειας μένει ολόκληρη: είναι ο λόγος που ο επισκέπτης
 * εμπιστεύεται τη φόρμα. */
@media (max-width: 620px) {
	.coh-back span {
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
	.nina-checkout-header .coh-row { min-height: 64px; gap: 8px; }
	.nina-checkout-secure { font-size: 12px; }
}

/* ═══ ΤΑΜΕΙΟ: ΣΩΜΑ ═══ */
.nina-checkout { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--90); }

/* Η σύνοψη παραγγελίας ακολουθεί το scroll σε desktop. Η φόρμα είναι μακριά·
 * χωρίς αυτό το σύνολο φεύγει από την οθόνη ακριβώς τη στιγμή που ο
 * επισκέπτης αποφασίζει αν θα πληρώσει. */
@media (min-width: 1000px) {
	.wc-block-checkout__sidebar {
		position: sticky; top: var(--wp--preset--spacing--50);
		align-self: flex-start;
	}
}
.wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	border: 1px solid var(--wp--preset--color--line);
}
.wc-block-components-order-summary__button-text { font-weight: 600; }
.wc-block-components-order-summary-item { padding-block: var(--wp--preset--spacing--30); }
.wc-block-components-order-summary-item__image img {
	border: 1px solid var(--wp--preset--color--line);
}

/* Τα εγγενή controls του browser βγαίνουν μπλε. Ένα accent-color τα φέρνει
 * στο χρώμα της μάρκας χωρίς να ξαναχτίσουμε radio και checkbox από την αρχή,
 * που θα σήμαινε να αναλάβουμε και την προσβασιμότητά τους. */
input[type="radio"], input[type="checkbox"], progress, input[type="range"] {
	accent-color: var(--wp--preset--color--brand);
}

/* ═══ ΤΑΜΕΙΟ: ΛΙΤΟ ΥΠΟΣΕΛΙΔΟ ═══ */
.nina-cofoot {
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--bg);
}
.cof-in { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50); }
.cof-assure {
	list-style: none; margin: 0 0 var(--wp--preset--spacing--50); padding: 0;
	display: grid; gap: var(--wp--preset--spacing--40);
}
@media (min-width: 820px) {
	.cof-assure { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--50); }
}
.cof-assure li {
	display: flex; gap: 12px; align-items: flex-start;
	font-size: 13.5px; color: var(--wp--preset--color--muted); line-height: 1.5;
}
.cof-assure svg { flex: none; color: var(--wp--preset--color--brand); margin-top: 2px; }
.cof-assure strong { display: block; color: var(--wp--preset--color--ink); font-weight: 600; }

.cof-bot {
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	align-items: center; justify-content: space-between;
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
}
.cof-copy { margin: 0; font-size: 13px; color: var(--wp--preset--color--muted); }
.cof-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; }
.cof-links li { margin: 0; }
.cof-links a { font-size: 13px; color: var(--wp--preset--color--muted); text-decoration: none; }
.cof-links a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }

/* ═══ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ═══ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}
/* Πάνω σε σκούρο, το τερακότα δεν ξεχωρίζει αρκετά. */
.nina-hero a:focus-visible, .nina-cta a:focus-visible,
.nina-footer a:focus-visible, .tw-dark a:focus-visible,
.nina-topbar a:focus-visible { outline-color: #fff; }

.skip-link:focus-visible {
	position: fixed !important; top: 12px; left: 12px; z-index: 200;
	width: auto !important; height: auto !important;
	clip: auto !important; clip-path: none !important;
	background: var(--wp--preset--color--ink); color: #fff;
	padding: 12px 20px; font-weight: 600;
}
::selection { background: var(--wp--preset--color--brand); color: #fff; }

p, li { text-align: left; hyphens: none; }   /* ελληνικά: ποτέ justified */
h1, h2, h3 { text-wrap: balance; }
.hero-sub, .nina-lead, .pd-desc p, .nina-summary, .feat-body { text-wrap: pretty; }

/* ═══ ΚΙΝΗΣΗ ═══
 * Δύο είδη: (1) απόκριση σε ενέργεια του χρήστη, (2) διακριτική αποκάλυψη
 * κατά το scroll. Η αποκάλυψη γίνεται με animation-timeline μέσα σε @supports:
 * όπου δεν υποστηρίζεται, το περιεχόμενο είναι απλώς ορατό, ποτέ κρυμμένο. */

/* Κάρτες προϊόντων: η εικόνα ζωντανεύει, όχι όλη η κάρτα.
 * Η μεγέθυνση κόβεται στο .nina-thumb / .wc-block-components-product-image,
 * ποτέ στο <a>: εκεί μέσα ζει και ο τίτλος. */
.nina-thumb img,
.wc-block-components-product-image img { transition: transform 420ms var(--ease-out); }
li.wc-block-product:hover .wc-block-components-product-image img,
.woocommerce ul.products li.product:hover .nina-thumb img { transform: scale(1.045); }

.feat-im { overflow: hidden; }
.feat-im img { transition: transform 520ms var(--ease-out); }
.nina-feat:hover .feat-im img { transform: scale(1.03); }

.wp-element-button, .woocommerce a.button, .woocommerce button.button,
.nina-form button, .nina-wish-btn, .wc-block-components-product-button__button {
	transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.wp-element-button:active, .woocommerce a.button:active, .woocommerce button.button:active,
.nina-form button:active, .nina-wish-btn:active { transform: translateY(1px); }

.nina-heart svg { transition: transform var(--dur) var(--ease-out); }
.nina-heart.is-active svg { animation: nina-pop 320ms var(--ease-out); }
@keyframes nina-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* Σύνδεσμοι πλοήγησης: υπογράμμιση που μεγαλώνει από το κέντρο */
.nina-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative; padding-bottom: 3px;
}
.nina-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
	background: currentColor; transform: scaleX(0); transform-origin: center;
	transition: transform var(--dur) var(--ease-out);
}
.nina-header .wp-block-navigation a:hover .wp-block-navigation-item__content::after,
.nina-header .wp-block-navigation .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* ΜΟΝΟ διακοσμητικά και δομικά στοιχεία. Οι κάρτες προϊόντων ΔΕΝ
		 * μπαίνουν εδώ: η αποκάλυψη ξεκινά από opacity:0, και ό,τι μπει
		 * κρύβεται μέχρι να κυλήσει ο χρήστης. Για διακοσμητική ζώνη αυτό
		 * είναι ανεκτό· για τον κατάλογο είναι το εμπόρευμα κρυμμένο. */
		.usp, .feat-card, .tw-in {
			animation: nina-rise linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
		/* ΜΟΝΟ μετακίνηση, ΟΧΙ opacity. Με opacity:0 στην αρχή, ό,τι δεν έχει
		 * κυλήσει ακόμη είναι αόρατο· οι πραγματικοί επισκέπτες το βλέπουν
		 * κανονικά, αλλά όποιος renderer δεν προχωρά το timeline (headless
		 * screenshot, crawler του Google, προεπισκόπηση συνδέσμου σε social)
		 * φωτογραφίζει άδειες ζώνες. Επιβεβαιώθηκε σε capture του live.
		 * Η κίνηση παραμένει, ο κίνδυνος φεύγει. */
		@keyframes nina-rise {
			from { transform: translateY(14px); }
			to   { transform: none; }
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}