/* Σελίδα προϊόντος: οι επιλογές παραλλαγής (woo-variation-swatches).
   Πηγή: web/v12-glyko/swatches.css στο repo. */

/* ══ Οι επιλογές παραλλαγής ═════════════════════════════════════════════════
   Τρία είδη, ΕΝΑ αντικείμενο:
     · κουκκίδα χρώματος  -> άρωμα κεριού και waxmelt
     · φωτογραφία         -> σχέδιο πλεκτού
     · σκέτη λέξη         -> άρωμα φιαλιδίου, άρωμα ντουλάπας, Τύπος
   Ό,τι είναι κοινό γράφεται εδώ μία φορά, ώστε η ίδια σελίδα να μη δείχνει τρία
   διαφορετικά είδη κουμπιού. Οι επιλογείς είναι μακρείς επίτηδες: το plugin
   γράφει τους δικούς του κανόνες με 5-6 κλάσεις στη σειρά, οπότε ένας κοντός
   δικός μας κανόνας απλά χάνει. Τους αντιγράφουμε στο ίδιο μήκος και
   προσθέτουμε μία κλάση, ώστε να κερδίζουμε χωρίς ούτε ένα !important. */

.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper,
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper,
.woo-variation-swatches .variable-items-wrapper.button-variable-items-wrapper {
	gap: 8px;
	/* Το περίγραμμα πρέπει να φαίνεται πάνω στο κρεμ της σελίδας. Στο .18 έβγαινε
	   1,23:1 και δεν φαινόταν πού τελειώνει το πατούμενο. */
	--wvs-item-box-shadow: inset 0 0 0 1px rgba(35, 40, 43, .60);
	--wvs-hover-item-box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-2);
	/* Το επιλεγμένο το δηλώνει το γέμισμα, δεν χρειάζεται και δαχτυλίδι. */
	--wvs-selected-item-box-shadow: none;
}

/* ── Το χάπι: κουκκίδα ή λέξη ───────────────────────────────────────────────
   Ελεύθερη ροή, το ένα δίπλα στο άλλο, όσο πλάτος θέλει το κείμενο. 44px ύψος,
   το ελάχιστο για δάχτυλο. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item,
.woo-variation-swatches .variable-items-wrapper.button-variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item {
	width: auto;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 5px 16px;
	border-radius: 999px;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

/* Το χάπι με κουκκίδα θέλει λιγότερο αριστερά, γιατί εκεί κάθεται η κουκκίδα. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item {
	padding-left: 8px;
	gap: 9px;
}

.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item .variable-item-contents {
	flex-direction: row;
	width: auto;
	height: auto;
}

/* Η κουκκίδα. Το δαχτυλίδι στο .55 δίνει 3,4:1 ακόμα και γύρω από τα δύο άσπρα
   #f3f0e7, που αλλιώς πατάνε 1,14:1 πάνω στο λευκό χάπι και διαβάζονται ως
   κουμπί που δεν φόρτωσε. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item .variable-item-span-color {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(35, 40, 43, .55);
}

/* ── «Χωρίς κερί»: η μόνη επιλογή που δεν είναι άρωμα ───────────────────────
   Είναι το σκέτο δοχείο και κάθεται τελευταίο στην ίδια λίστα με τα δέκα
   αρώματα (απόφαση Γιώργου 2026-08-17: ΕΝΑ πεδίο αντί για δύο, ώστε να πάψει
   να υπάρχει ο συνδυασμός δύο attributes που γέννησε το X και την τυφλή
   Φράουλα). Ο όρος δεν έχει χρώμα, οπότε το plugin του γράφει
   `background-color:;` κενό και βγαίνει ΑΣΠΡΟΣ κύκλος — δηλαδή ίδιος με τη
   «Βανίλια praline» και τα «Cookies», που είναι όντως άσπρα αρώματα.
   Η διαγώνιος το ξεχωρίζει: καθιερωμένο σύμβολο του «κανένα», διαβάζεται
   χωρίς λεζάντα. Μπαίνει ως gradient και όχι ως δεύτερο στοιχείο, ώστε να
   κόβεται μόνη της στον κύκλο από το ίδιο το border-radius. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item-xoris-keri .variable-item-span-color {
	background-color: #fdf9f1;
	background-image: linear-gradient(
		135deg,
		transparent calc(50% - 1px),
		rgba(35, 40, 43, .8) calc(50% - 1px),
		rgba(35, 40, 43, .8) calc(50% + 1px),
		transparent calc(50% + 1px));
}

/* Το όνομα. Το plugin το γράφει ήδη μόνο του στο data-title κάθε επιλογής. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item::after {
	content: attr(data-title);
	white-space: nowrap;
}

/* ── Η φωτογραφία ───────────────────────────────────────────────────────────
   56px: το μικρότερο μέγεθος όπου ξεχωρίζει ποιο σκυλάκι είναι ποιο, και πάνω
   από τον στόχο αφής των 44px. Κάτω από αυτό τα καφέ γίνονται πολτός. */
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper {
	/* Η φωτό δεν σηκώνει γέμισμα, θα έκρυβε το προϊόν. Δαχτυλίδι πετρόλ με κενό. */
	--wvs-item-box-shadow: 0 0 0 1px rgba(35, 40, 43, .22);
	--wvs-selected-item-box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--accent-1);
}

.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item:not(.radio-variable-item).image-variable-item {
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	overflow: hidden;
}

.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item:not(.radio-variable-item).image-variable-item img {
	border-radius: 50%;
}

/* ── Επιλεγμένο ─────────────────────────────────────────────────────────────
   Γεμάτο ανθρακί. Το πετρόλ μένει αποκλειστικά στο κουμπί αγοράς, αλλιώς δύο
   διαφορετικά πράγματα στην ίδια οθόνη έχουν ίδια εμφάνιση. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.selected:not(.no-stock),
.woo-variation-swatches .variable-items-wrapper.button-variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item.selected:not(.no-stock) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Κρεμ φωτοστέφανο, ώστε η κουκκίδα να μη χάνεται μέσα στο σκούρο γέμισμα */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.selected .variable-item-span-color {
	box-shadow: inset 0 0 0 1px rgba(35, 40, 43, .55), 0 0 0 2px var(--wp--preset--color--base);
}

/* Το άσπρο τσεκ του plugin: πάνω στην κουκκίδα περισσεύει και στα δύο άσπρα
   αρώματα χάνεται, πάνω στη φωτογραφία σκεπάζει ακριβώς αυτό που δείχνει. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.selected:not(.no-stock) .variable-item-contents::before,
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item:not(.radio-variable-item).image-variable-item.selected:not(.no-stock) .variable-item-contents::before {
	display: none;
}

/* ── Focus ──────────────────────────────────────────────────────────────────
   Το plugin παίζει μόνο με box-shadow, οπότε το outline δεν συγκρούεται ποτέ
   μαζί του και δουλεύει και πάνω στο γεμάτο χάπι. Το offset αφήνει κρεμ
   ανάμεσα, άρα μετριέται πάντα πάνω στο φόντο της σελίδας, 13,6:1. */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* ── Εξαντλημένο ────────────────────────────────────────────────────────────
   Οι κανόνες του plugin για line-through πιάνουν μόνο τα radio items, οπότε
   χωρίς αυτό ένα εξαντλημένο άρωμα φαίνεται σαν διαθέσιμο. */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).no-stock {
	opacity: .55;
	text-decoration: line-through;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).no-stock .variable-item-contents::before {
	display: none;
}

/* ── Η κοντή ετικέτα ────────────────────────────────────────────────────────
   Ο κανόνας πιο πάνω γράφει το ΠΛΗΡΕΣ όνομα του όρου. Εδώ, και μόνο εδώ,
   κόβεται η λέξη του χρώματος, επειδή η κουκκίδα δίπλα τη λέει ήδη. Το καλάθι,
   το ταμείο και το email παραγγελίας δεν έχουν κουκκίδα, οπότε εκεί συνεχίζει
   να γράφεται ολόκληρο το «Φράουλα · κόκκινο» χωρίς καμία αλλαγή. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-fraoula::after { content: "Φράουλα"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-tsixlofouska::after { content: "Τσιχλόφουσκα"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-levanta::after { content: "Λεβάντα"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-frouta-tou-dasous::after { content: "Φρούτα του δάσους"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-seyxelles::after { content: "Σεϋχέλλες"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-santaloksylo::after { content: "Σανδαλόξυλο"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-ouiski-karamela::after { content: "Ουίσκι καραμέλα"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-vanilia::after { content: "Βανίλια praline"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-cappuccino::after { content: "Cappuccino"; }
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item.color-variable-item-cookies::after { content: "Cookies"; }

/* Ο όρος «Χωρίς άρωμα» (`xoris-aroma`) υπάρχει ΜΟΝΟ για να το υποβάλλει μόνο
   του το `product.js` όταν ο πελάτης διαλέξει «Σκέτο» στην πορσελάνη — βλ.
   λύθηκε.md §«Τεχνικά εμπόδια στο WooCommerce» (ο πελάτης πρέπει να στείλει
   ΚΑΠΟΙΑ έγκυρη τιμή, αλλιώς το WooCommerce αρνείται την προσθήκη). Δεν είναι
   ποτέ σωστό να το διαλέξει ο ίδιος: δεν υπάρχει καμία παραλλαγή «Με κερί +
   Χωρίς άρωμα» (ένα κερί χωρίς άρωμα δεν βγάζει νόημα), οπότε θα έμενε νεκρό
   κλικ. Κρύβεται από τη λίστα, ό,τι κι αν αργότερα προστεθεί σε άλλο προϊόν. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .color-variable-item-xoris-aroma {
	display: none;
}

/* Το «Custom» δεν είναι ένα χρώμα, είναι «όποιο θες». Ρόδα χρωμάτων. */
.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .color-variable-item-custom .variable-item-span-color {
	background-image: conic-gradient(#e53935, #fb8c00, #fdd835, #7cb342, #00acc1, #1e88e5, #5e35b1, #d81b60, #e53935);
}

/* ── Κινητό ─────────────────────────────────────────────────────────────────
   Το «Custom» πιάνει δική του γραμμή: δεν είναι άρωμα, είναι υπηρεσία με άλλη
   τιμή, και έτσι σταματάει να συναγωνίζεται τα δέκα αρώματα. */
@media (max-width: 600px) {
	.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper {
		gap: 6px;
	}
	.woo-variation-swatches .variable-items-wrapper.color-variable-items-wrapper .color-variable-item-custom {
		width: 100%;
		justify-content: flex-start;
	}
}

/* ── Windows High Contrast ──────────────────────────────────────────────────
   Εκεί ο browser πετάει όλα τα χρώματα και τα box-shadow, οπότε έμεναν ίδιες
   γραμμές κειμένου χωρίς καμία ένδειξη επιλογής. */
@media (forced-colors: active) {
	.woo-variation-swatches .variable-items-wrapper .variable-item-span-color {
		forced-color-adjust: none;
		box-shadow: inset 0 0 0 1px CanvasText;
	}
	.woo-variation-swatches .variable-items-wrapper .variable-item.selected {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
	.woo-variation-swatches .variable-items-wrapper .variable-item.selected .variable-item-contents::before {
		display: block;
	}
}

/* ── ⚠⚠ ΤΟ ΚΟΥΜΠΙ ΤΙΝΑΖΟΤΑΝ ΔΥΟ ΦΟΡΕΣ ΣΕ ΚΑΘΕ ΚΛΙΚ ────────────────────────
   Μετρήθηκε 2026-08-18, απόλυτη θέση κουμπιού:
     πατάς άρωμα -> +60ms ΑΝΕΒΑΙΝΕΙ 34px -> +300ms ΚΑΤΕΒΑΙΝΕΙ 50px
   Αν διαλέξεις και πας αμέσως να πατήσεις «Προσθήκη», το κουμπί έχει φύγει από
   κάτω απ' το δάχτυλο. Στο κινητό σημαίνει αστοχία.

   Οι δύο ένοχοι, μετρημένοι ένας ένας:
     - η υπόδειξη «Διάλεξε ...» εξαφανίζεται: 21px ύψος + 12,8px margin = 34 πάνω
     - η γραμμή τιμής εμφανίζεται:            30px ύψος + 19,2px margin = 50 κάτω
   Δεν είναι ίσα, και δεν συμβαίνουν την ίδια στιγμή. Γι' αυτό βγαίνουν δύο
   ξεχωριστά τινάγματα σε ΑΝΤΙΘΕΤΕΣ κατευθύνσεις μέσα σε 300ms.

   Λύση: και τα δύο κουτιά κρατούν τη θέση τους ΠΑΝΤΑ.

   ⚠ Γιατί εδώ και όχι στο theme.json, όπου ζει ο κανόνας `.sk-var-hint`:
   το inline CSS του theme.json ΔΕΝ έχει `$ver`, άρα αλλαγή του δεν φτάνει στους
   browsers (δες την παγίδα του 7ήμερου cache). Το `product.css` φορτώνει ΜΕΤΑ
   (θέση 43 έναντι 32, μετρημένο), οπότε με ίδια ειδικότητα κερδίζει.           */

/* ⚠ 2026-08-19: το `min-height` έφυγε (το ύψος το ορίζει πια το κελί του grid),
   το `visibility: hidden` ΕΜΕΙΝΕ — αλλά κοστίζει πια σχεδόν τίποτα.

   Πριν, η κρυφή υπόδειξη καθόταν ΚΑΤΩ από την τιμή και χρέωνε ολόκληρο το ύψος
   της συν τα margin (34px). Τώρα κάθεται ΠΑΝΩ στην τιμή, στο ίδιο κελί, οπότε
   χρεώνει μόνο τη διαφορά: 0px όπου χωράει σε μία γραμμή, ~11px στο κινητό όπου
   το κείμενο σπάει στα δύο.

   ⚠ ΓΙΑΤΙ ΔΕΝ ΕΓΙΝΕ `display: none`. Δοκιμάστηκε, ανέβηκε, μετρήθηκε στο ζωντανό:
   στα 393px η υπόδειξη πιάνει ΔΥΟ γραμμές (42px) ενώ η τιμή μία (31px), οπότε
   μόλις εξαφανιζόταν το κελί μίκραινε και το κουμπί ΑΝΕΒΑΙΝΕ 16px — ακριβώς το
   επικίνδυνο τίναγμα που είχε λυθεί στις 18/8. Στον υπολογιστή δεν φαινόταν
   (μία γραμμή, τίναγμα 0). Με `visibility` το κελί κρατάει πάντα το μεγαλύτερο
   από τα δύο και το κουμπί δεν κουνιέται σε κανένα πλάτος.

   Ο κανόνας μένει ρητός εδώ και όχι μόνο στο theme.json, γιατί μόνο αυτό το
   αρχείο έχει `$ver` και φτάνει στους browsers. */
.sk-var-hint[hidden] {
	display: flex;
	visibility: hidden;
}

/* Το `add-to-cart-variation.js` κρύβει το `.single_variation` με **inline**
   style και το κατεβάζει με slideDown, οπότε το κουτί της τιμής γεννιέται από
   το μηδέν και σπρώχνει το κουμπί. Το κρατάμε πάντα στη ροή, με δεσμευμένο
   ύψος μιας γραμμής τιμής. Το `!important` υπάρχει ΜΟΝΟ για να νικήσει το
   inline `display:none` του plugin. Το περιεχόμενο εμφανίζεται και
   εξαφανίζεται κανονικά, απλώς μέσα σε σταθερό κουτί. */
/* ⚠ ΤΙ ΔΕΝ ΜΠΗΚΕ, ΚΑΙ ΓΙΑΤΙ. Δοκιμάστηκε να δεσμευτεί χώρος ΚΑΙ για τη γραμμή
   τιμής, με `.single_variation { display: block !important; min-height: 1.9rem }`.
   Δούλευε: το κουμπί κατέληγε ΑΚΡΙΒΩΣ εκεί που ξεκίνησε, καθαρή μετακίνηση 0px
   (διαδρομή 816 -> 798 -> 810 -> 816, έναντι 767 -> 733 -> 783 πριν).
   **Απορρίφθηκε από τον Γιώργο 2026-08-18** γιατί το κόστος ήταν ορατό: ~49px
   κενό ανάμεσα στα χάπια και την υπόδειξη, όσο ο πελάτης δεν έχει διαλέξει.
   Η δεσμευμένη θέση της τιμής είναι ΑΚΡΙΒΩΣ όσο και η μετακίνηση που σβήνει,
   δηλαδή ή τρώγεσαι με το τίναγμα ή με το κενό. Διαλέχτηκε το τίναγμα, αρκεί να
   είναι μονόδρομο.

   Αποτέλεσμα εκδοχής Β, μετρημένο: 767 -> 769 -> 807 -> 816. Το κουμπί πηγαίνει
   ΜΟΝΟ προς τα κάτω, δεν γυρίζει ποτέ πίσω. Το ανάποδο τίναγμα των 34px, που
   ήταν και το επικίνδυνο (το κουμπί έφευγε από κάτω απ' το δάχτυλο ΠΡΟΣ ΤΑ
   ΠΑΝΩ, τη στιγμή που το δάχτυλο κατέβαινε), έφυγε.

   ⚠ Το σκυλάκι (δύο πεδία + γραμμή «1 σε απόθεμα») μένει στα ~49px και ΔΕΝ
   λύθηκε. Δες `εκκρεμεί.md`. */

/* ── Λιγότερο κενό γύρω από τη γραμμή τιμής ────────────────────────────────
   Σημείωση Γιώργου 2026-08-19: «μεγάλο κενό πάνω και κάτω από την τιμή σε όλα
   τα προϊόντα, το ίδιο και στο κινητό, τρώει πολύτιμη οθόνη». Μετρήθηκε στο
   Καρουζέλ Πορσελάνης με διαλεγμένο άρωμα:

     πάνω (Εκκαθάριση -> τιμή)   46px στα 1440, 39px στα 393
     κάτω (τιμή -> ποσότητα)     53px και στα δύο πλάτη

   Τα 53 από κάτω ήταν σχεδόν όλα ΑΟΡΑΤΑ: 19,2 margin τιμής + 21 ύψος υπόδειξης
   + 12,8 margin υπόδειξης, δηλαδή το δεσμευμένο κουτί της εκδοχής Β παραπάνω.

   ⚠ ΔΕΝ ΠΑΙΡΝΕΙ ΠΙΣΩ ΤΗ ΣΤΑΘΕΡΟΤΗΤΑ ΤΟΥ ΚΟΥΜΠΙΟΥ — τη βελτιώνει. Η υπόδειξη
   και η τιμή δεν φαίνονται ΠΟΤΕ μαζί: η μία φεύγει ακριβώς όταν έρχεται η
   άλλη. Άρα δεν χρειάζονται δύο θέσεις στη ροή, χρειάζονται ΜΙΑ. Με grid
   μπαίνουν στο ίδιο κελί, και το κελί κρατάει ύψος μιας γραμμής τιμής
   (1,4em = ακριβώς το line-height του θέματος) γεμάτο ή άδειο.

   Έτσι σβήνει και το τελευταίο τίναγμα των 49px της εκδοχής Β: το κουμπί δεν
   κουνιέται πια καθόλου.

   ⚠ Το σκυλάκι έχει δεύτερη γραμμή («1 σε απόθεμα») ΜΕΣΑ στο
   `.single_variation`, οπότε εκεί το κελί μεγαλώνει και μένει μικρό τίναγμα. */
.single_variation_wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: minmax(1.4em, auto);
	row-gap: 0.9rem;
}

/* ⚠ ΤΟ `.woocommerce` ΜΠΡΟΣΤΑ ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΟ. Το WooCommerce δίνει
   `.woocommerce .single_variation_wrap .woocommerce-variation { margin-bottom:
   var(--wp--style--block-gap) }`, δηλαδή ειδικότητα 0,3,0. Ο πρώτος γύρος με
   σκέτο `.single_variation_wrap > .single_variation` (0,2,0) έχασε: μετρήθηκε
   κενό 34px αντί για 14, γιατί το margin των 19,2px επιβίωνε ΚΑΤΩ από το
   row-gap. Εδώ γίνεται 0,4,0 και κερδίζει, χωρίς `!important`. */
.woocommerce .single_variation_wrap > .woocommerce-variation.single_variation,
.single_variation_wrap > .sk-var-hint {
	grid-area: 1 / 1;
	margin: 0;
}

/* ⚠ ΚΑΙ ΑΥΤΟ ΤΟ ΜΕΤΡΗΣΑΜΕ. Το `grid-template-rows` κρατάει το ΥΨΟΣ της γραμμής
   1, δεν την κρατάει ΚΑΤΕΙΛΗΜΜΕΝΗ: αν κρυφτούν με `display:none` και η υπόδειξη
   και η τιμή, το κουμπί ανεβαίνει μόνο του εκεί (μετρήθηκε 687 -> 642 -> 707).
   Σήμερα η υπόδειξη μένει πάντα στη ροή με `visibility`, άρα δεν συμβαίνει —
   ο κανόνας μένει ως δίχτυ, μία γραμμή που κοστίζει μηδέν. */
.single_variation_wrap > .woocommerce-variation-add-to-cart {
	grid-row: 2;
}

/* Πάνω από την τιμή: 1em από το WooCommerce κάτω από τον πίνακα των χαπιών.
   Τα άλλα 10px, το padding του κελιού, έφυγαν στο home.css όπου γεννιούνται. */
.woocommerce div.product form.cart .variations {
	margin-bottom: 0.5em;
}

/* ── Οι καρτέλες στο κινητό: χάπια, όχι μαύρη κάθετη ───────────────────────
   Σημείωση Γιώργου 2026-08-19: «στο κινητό έχει μια άσχημη κάθετη πριν την
   Περιγραφή». Δεν ήταν δικό μας. Το ίδιο το WooCommerce, στο στυλ
   `is-style-minimal`, γυρίζει τον δείκτη της ανοιχτής καρτέλας από κάτω στα
   αριστερά κάτω από 768px:

     @media only screen and (max-width: 768px) {
       html body ... ul.tabs.wc-tabs li { border-bottom-width: 0; border-left-width: 2px }
     }

   Δύο συνέπειες. Πρώτη: ο δικός μας κανόνας βάφει `border-bottom-color` σε
   μπρούτζο, που στο κινητό είναι πλευρά με μηδέν πάχος — δεν έβαφε τίποτα.
   Δεύτερη: το χρώμα της κάθετης το έδινε το `border-color: inherit` του
   WooCommerce, δηλαδή το ανθρακί του κειμένου. Γι' αυτό έβγαινε μαύρη γραμμή
   αντί για χρώμα της ταυτότητας.

   Η υπογράμμιση δεν αξίζει να σωθεί στο κινητό: οι τρεις καρτέλες σπάνε σε δύο
   σειρές και μια σειρά από υπογραμμίσεις διαβάζεται σαν σπασμένος πίνακας.
   Μπαίνουν χάπια — ΑΚΡΙΒΩΣ τα ίδια με τα φίλτρα του καταστήματος και τα
   swatches των αρωμάτων (στρογγυλά, λευκά, και η επιλεγμένη γεμίζει πετρόλ).
   Καμία νέα γλώσσα σχεδιασμού: η ίδια που ήδη σημαίνει «αυτό διάλεξες».

   ⚠ Ο ΕΠΙΛΟΓΕΑΣ ΕΙΝΑΙ ΜΑΚΡΥΣ ΓΙΑ ΤΟΝ ΙΔΙΟ ΛΟΓΟ ΠΟΥ ΕΙΝΑΙ ΜΑΚΡΥΣ ΣΤΟ
   katastima.css: το WooCommerce γράφει `html body ...` (0,4,4). Το
   `body.woocommerce` μπροστά δίνει 0,5,3 και κερδίζει, χωρίς `!important`.
   Και ζει εδώ, όχι στο katastima.css, γιατί μόνο αυτό το αρχείο έχει `$ver`. */
@media only screen and (max-width: 768px) {
	body.woocommerce .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
		gap: 0.5rem;
		margin-bottom: 1.5rem;
		border-bottom: 0;
	}

	body.woocommerce .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li {
		border: 0;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 10px 24px -16px rgba(56, 104, 88, 0.4);
		transition: background 200ms ease;
	}

	body.woocommerce .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
		padding: 0.44rem 0.95rem;
		font-size: 0.82rem;
	}

	body.woocommerce .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active {
		background: var(--wp--preset--color--accent-1);
	}

	/* Ίδιο κρεμ με το γεμάτο χάπι του καταστήματος (`.sk-chip.on`). */
	body.woocommerce .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active a {
		color: #f6eedd;
	}
}

/* ── Η γκαλερί του προϊόντος ───────────────────────────────────────────────
   Σημείωση Γιώργου 2026-08-19/20. Ό,τι αφορά τη φωτογραφία του προϊόντος ζει
   από εδώ ως το τέλος του αρχείου: το κόλλημα στο κινητό, τα βελάκια, ο
   φακός, και η λωρίδα μέσα στον μεγεθυντή.

   ⚠ ΖΕΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ katastima.css. Το inline CSS του theme.json δεν έχει
   `$ver`, άρα αλλαγή του δεν φτάνει ποτέ σε browser που έχει ήδη τη σελίδα
   (7ήμερο cache). Το product.css έχει, και φορτώνει ΜΕΤΑ.                  */

/* ── 1. Καμία μικρογραφία κάτω από τη φωτό, πουθενά ────────────────────────
   Απόφαση Γιώργου 2026-08-20: οι μικρογραφίες να μη φαίνονται ούτε στο
   κινητό ούτε στον υπολογιστή — μόνο ΜΕΣΑ στον μεγεθυντή, όταν ο πελάτης
   έχει ήδη μπει στη φωτογραφία με πάτημα ή με τον φακό.

   Η πλοήγηση δεν χάνεται: στην αφή υπάρχει το σύρσιμο (επαληθεύτηκε με
   πραγματικά touch events, φωτό 01 -> 02), και παντού υπάρχουν τα δύο
   βελάκια του επόμενου κεφαλαίου.                                          */
.woocommerce-product-gallery .flex-control-thumbs {
	display: none;
}

/* ⚠ ΤΟ `margin-bottom: 2em` ΤΟΥ WooCommerce ΗΤΑΝ ΤΟ «ΠΑΡΑΞΕΝΟ ΚΕΝΟ». Ο
   Γιώργος το φωτογράφισε στο κινητό: μεγάλη άδεια λωρίδα κάτω από τη φωτό,
   που έκρυβε και την πρώτη σειρά αρωμάτων. Μετρήθηκε: η στήλη ήταν 47px
   ψηλότερη από τη γκαλερί ενώ το δικό μας padding είναι 11 — τα υπόλοιπα 36
   ήταν αυτό το margin (2em επί 18,29px).

   Πονάει διπλά όταν η στήλη κολλάει: το κενό ταξιδεύει μαζί της και σκεπάζει
   περιεχόμενο που περνάει από κάτω. Μηδενίζεται· την ανάσα τη δίνει το
   padding της στήλης και το gap των στηλών, που είναι ήδη ρυθμισμένα.      */
.woocommerce div.product div.images.woocommerce-product-gallery {
	margin-bottom: 0;
	/* ⚠ ΔΕΥΤΕΡΗ ΓΡΑΜΜΗ ΑΜΥΝΑΣ ΓΙΑ ΤΟ ΔΙΑΓΩΝΙΟ ΣΚΡΟΛ. Το FlexSlider καλεί
	   `preventDefault()` πάνω στο touchmove μόλις αποφασίσει ότι σέρνεις —
	   και αποφασίζει και σε αργό κάθετο σκρολ (δες το κεφάλαιο στο sk-v12.js).
	   Με `pan-y`, ο browser έχει ήδη δεσμεύσει το κάθετο σκρολ ως δική του
	   δουλειά και το `preventDefault()` δεν μπορεί να το ακυρώσει: η σελίδα
	   κυλάει ό,τι κι αν κάνει το plugin. Το `pinch-zoom` μένει, για να μη
	   χαθεί το ζούμ με δύο δάχτυλα πάνω στη φωτογραφία. */
	touch-action: pan-y pinch-zoom;
}

/* ── 2. Στο κινητό η φωτογραφία κολλάει όσο διαλέγεις ──────────────────────
   Ο μηχανισμός δούλευε ήδη: κάθε παραλλαγή του «Σκυλάκι» κουβαλάει δική της
   φωτογραφία και το WooCommerce άλλαζε σωστά την κύρια εικόνα. Το πρόβλημα
   ήταν αποκλειστικά θέση. Μετρημένο στα 393x852 πριν:

     φωτογραφία 188-604 · τίτλος 670 · περιγραφή 769 · τιμή 865 · σχέδια 954

   Δηλαδή 350px απόσταση. Όταν σκρολάρεις ως τα σχέδια, από τη φωτογραφία σου
   έμενε λωρίδα 76px — άλλαζες σχέδιο και δεν έβλεπες τίποτα να αλλάζει.

   ⚠ ΓΙΑΤΙ ΔΟΥΛΕΥΕΙ ΤΟ STICKY ΕΔΩ. Το `position: sticky` το ορίζει ο ΓΟΝΙΟΣ,
   όχι η σελίδα (η παγίδα του `.sk-filters-band`). Γονιός εδώ είναι το
   `.wp-block-columns`, που στο κινητό έχει ύψος 1222px ενώ η στήλη της φωτό
   453px — άρα 769px διαδρομή. Και ξεκολλάει ΑΚΡΙΒΩΣ εκεί που τελειώνουν οι
   στήλες, δηλαδή μόλις αρχίσουν οι καρτέλες. Δεν το ρυθμίζει κανείς, το
   ορίζει η ίδια η δομή του template.

   ⚠ ΤΟ ΦΟΝΤΟ ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ. Χωρίς αυτό ο τίτλος και η περιγραφή περνούν
   ΠΙΣΩ από τη φωτό και ξεπροβάλλουν δεξιά κι αριστερά της. Φαινόταν σπασμένο.

   Το `z-index: 1` κρατάει τη φωτό ΚΑΤΩ από την κεφαλίδα, που είναι στο 45.  */
@media (max-width: 781px) {
	body.single-product .wp-block-columns > .wp-block-column:first-child {
		position: sticky;
		top: 105px;
		z-index: 1;
		align-self: flex-start;
		background: var(--wp--preset--color--base);
		padding-bottom: 0.5rem;
	}

	/* Στο κινητό οι δύο στήλες είναι η μία κάτω από την άλλη, δεν είναι
	   πραγματικά «στήλες» — 30px ανάμεσά τους ήταν κενό χωρίς λόγο. */
	body.single-product .wp-block-columns {
		gap: 1rem;
	}

	/* ⚠⚠ ΚΑΜΙΑ ΜΟΝΑΔΑ vh ΕΔΩ ΜΕΣΑ. ΠΟΤΕ. Ο πρώτος γύρος μίκραινε τη φωτό με
	   `max-width: 30vh` για να μην τρώει μισή οθόνη κολλημένη. Στον υπολογιστή
	   φαινόταν σωστό. Στο κινητό ήταν σφάλμα, και το έπιασε ο Γιώργος με το
	   μάτι: «στην αρχή είναι μικρή η φωτογραφία και μετά μεγαλώνει».

	   Η αιτία: η μπάρα διεύθυνσης του κινητού κρύβεται μόλις σκρολάρεις, το
	   ύψος της οθόνης μεγαλώνει, και κάθε `vh` μεγαλώνει μαζί της. Μετρημένο
	   στο ίδιο τηλέφωνο: 393x740 με μπάρα -> φωτό 222x278, 393x852 χωρίς ->
	   256x319. Φούσκωνε 15% μπροστά στα μάτια του πελάτη.

	   Τώρα το μικρότερο μέγεθος είναι ΣΚΟΠΙΜΟ (η προδιαγραφή ήταν «να γίνεται
	   το ανάποδο»: μεγάλη σε ηρεμία, μικρή όταν κολλάει) και δένεται σε px.

	   ⚠ ΜΗΝ δοκιμάσεις `max-height` στην εικόνα ούτε `aspect-ratio` εδώ: το
	   ύψος το ορίζει `aspect-ratio: 4/5` του WooCommerce πάνω στο `__image`.
	   Με `max-height` η εικόνα μίκραινε αλλά το κουτί έμενε 416px, άρα έμενε
	   αόρατη λωρίδα που έκρυβε ό,τι περνούσε από κάτω.

	   Την κλάση τη βάζει το sk-v12.js, που ΜΕΤΑ ρίχνει ένα `resize` για να
	   ξαναμετρήσει το FlexSlider. Ο λόγος είναι γραμμένος εκεί.            */
	body.single-product .wp-block-column.sk-gal-pinned .woocommerce-product-gallery {
		max-width: 190px;
		margin-inline: auto;
	}
}

/* ── 3. Τα τρία κουμπιά της φωτογραφίας: ένα σετ, όχι τρία ─────────────────
   Δύο βελάκια αριστερά-δεξιά και ο μεγεθυντικός φακός. Ίδιο σχήμα και χρώμα
   με τα βελάκια της ράγας «Σχετικά προϊόντα» και της μπάρας φίλτρων: κύκλος,
   πετρόλ εικονίδιο, σκιά αντί για περίγραμμα. Καμία νέα γλώσσα σχεδιασμού.

   Ο φακός ερχόταν από αλλού (shop.css): συμπαγές άσπρο `#fff`, 36px. Δίπλα σε
   δύο ημιδιάφανα βελάκια έμοιαζε με ξένο κουμπί κολλημένο πάνω στη φωτό. Εδώ
   και τα τρία παίρνουν ΤΑ ΙΔΙΑ νούμερα: ίδιο μέγεθος, ίδια διαφάνεια, ίδια
   απόσταση από την άκρη — ώστε ο φακός να πέφτει στην ίδια κατακόρυφη με το
   δεξί βελάκι, σε μεγάλη και σε μικρή εικόνα (αίτημα Γιώργου 2026-08-20).

   ⚠ ΚΑΙ ΣΤΟΝ ΥΠΟΛΟΓΙΣΤΗ. Ο πρώτος γύρος τα είχε μόνο στο κινητό, με το
   σκεπτικό ότι εκεί λείπουν οι μικρογραφίες. Τώρα οι μικρογραφίες έφυγαν από
   παντού (κεφάλαιο 1), οπότε χωρίς βελάκια ο υπολογιστής δεν θα είχε ΚΑΝΕΝΑΝ
   τρόπο να δει τη δεύτερη φωτογραφία — δεν υπάρχει σύρσιμο με ποντίκι.

   ⚠ ΓΙΑΤΙ ΤΟΣΟ ΜΑΚΡΥΣ ΕΠΙΛΟΓΕΑΣ ΣΤΟΝ ΦΑΚΟ, ΚΑΙ ΓΙΑΤΙ ΧΩΡΙΣ `.woocommerce`.
   Το shop.css τον γράφει με διπλή κλάση για να νικήσει το core, δηλαδή 0,5,3.
   Ο πρώτος γύρος εδώ έγραφε `body.single-product .woocommerce div.product ...`
   και ΔΕΝ έπιανε καθόλου: το `.woocommerce` ΕΙΝΑΙ το body, δεν κάθεται μέσα
   του. Μετρήθηκε — ο φακός έμενε συμπαγές άσπρο ενώ τα βελάκια είχαν γίνει
   διάφανα. Χωρίς αυτό, `body.single-product div.product div.images` δίνει
   0,5,4 και κερδίζει. Κανένα `!important`, όπως σε όλο το αρχείο.

   ⚠ ΤΟ blur ΔΕΝ ΕΙΝΑΙ ΣΤΟΛΙΔΙ. Στο 45% διαφάνειας ένα σκούρο σημείο της
   φωτογραφίας από πίσω κατάπινε το εικονίδιο. Το θόλωμα το κρατάει
   ευανάγνωστο πάνω σε οποιαδήποτε φωτό, χωρίς να γυρίσουμε σε συμπαγές
   φόντο. Όπου δεν υποστηρίζεται, μένει απλώς ημιδιάφανο.                   */
.sk-gal-arrow,
body.single-product div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
	width: 34px;
	height: 34px;
	background-color: rgba(253, 249, 241, 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 12px -8px rgba(35, 40, 43, 0.5);
	/* ⚠ ΜΟΝΟ ΤΟ ΧΡΩΜΑ ΚΙΝΕΙΤΑΙ. Ο πρώτος γύρος κινούσε και width/height:
	   κίνηση σε ιδιότητα διάταξης, που αναγκάζει τον browser να ξαναϋπολογίσει
	   σε κάθε καρέ. Και οπτικά ήταν λάθος: η ΙΔΙΑ η φωτογραφία δεν κινείται
	   όταν κολλάει, πέφτει ακαριαία στα 190px (το FlexSlider ξαναμετράει, δεν
	   κάνει μετάβαση). Τώρα τα κουμπιά μικραίνουν ΜΑΖΙ της. */
	transition: background-color 200ms ease;
}

.sk-gal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
}

.sk-gal-arrow[data-dir="-1"] {
	left: 10px;
}

/* Ίδιο νούμερο με τον φακό παρακάτω: μία κατακόρυφη, όχι δύο. */
.sk-gal-arrow[data-dir="1"] {
	right: 10px;
}

body.single-product div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
	top: 10px;
	right: 10px;
	background-size: 18px 18px;
}

@media (hover: hover) and (pointer: fine) {
	.sk-gal-arrow:hover,
	body.single-product div.product div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger:hover {
		background-color: rgba(253, 249, 241, 0.85);
	}
}

/* ── Κολλημένη: και τα τρία μικραίνουν μαζί ────────────────────────────────
   Η φωτό πέφτει από 333px σε 190px, δηλαδή στο 57%. Τα κουμπιά πάνε από 34px
   σε 26px, περίπου το ίδιο ποσοστό — αλλιώς τρία κουμπιά 34px πάνω σε φωτό
   190px θα σκέπαζαν το ίδιο το προϊόν. Η κλάση υπάρχει μόνο στο κινητό.    */
.sk-gal-pinned .sk-gal-arrow,
body.single-product div.product .sk-gal-pinned div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
	width: 26px;
	height: 26px;
}

.sk-gal-pinned .sk-gal-arrow svg {
	width: 14px;
	height: 14px;
}

.sk-gal-pinned .sk-gal-arrow[data-dir="-1"] {
	left: 6px;
}

.sk-gal-pinned .sk-gal-arrow[data-dir="1"] {
	right: 6px;
}

body.single-product div.product .sk-gal-pinned div.images .woocommerce-product-gallery__trigger.woocommerce-product-gallery__trigger {
	top: 6px;
	right: 6px;
	background-size: 14px 14px;
}

/* ── 4. Οι υπόλοιπες φωτογραφίες μέσα στον μεγεθυντή ───────────────────────
   Ο μεγεθυντής (PhotoSwipe) άνοιγε μία φωτογραφία και τελείωνε εκεί: καμία
   ένδειξη ότι υπάρχουν άλλες τέσσερις, κανένας τρόπος να πας κατευθείαν σε
   μία. Η λωρίδα κάθεται στο κάτω μέρος, κυλάει οριζόντια, και η τρέχουσα
   ξεχωρίζει με μπρούτζινο δαχτυλίδι. Τη χτίζει το sk-v12.js.

   Εδώ ΕΙΝΑΙ η θέση των μικρογραφιών πλέον — και μόνο εδώ.                  */
.sk-pswp-strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1600;
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	overflow-x: auto;
	background: rgba(15, 20, 18, 0.55);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sk-pswp-strip::-webkit-scrollbar {
	display: none;
}

.sk-pswp-strip[hidden] {
	display: none;
}

.sk-pswp-thumb {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.1);
	background-size: cover;
	background-position: center;
	opacity: 0.55;
	cursor: pointer;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity 160ms ease, outline-color 160ms ease;
}

.sk-pswp-thumb.is-on {
	opacity: 1;
	outline-color: var(--wp--preset--color--accent-2);
}

@media (prefers-reduced-motion: reduce) {
	.sk-gal-arrow,
	.sk-pswp-thumb,
	body.single-product .woocommerce-product-gallery__trigger {
		transition: none;
	}
}