/* =========================================================
   VISION GROUP — κοινό stylesheet για τα δύο frontends.

   Η δομή (grid, cards, φόρμες, footer) είναι κοινή. Ό,τι δίνει
   ταυτότητα — χρώματα, γραμματοσειρές, το σήμα κάθε ενότητας —
   ορίζεται ως μεταβλητή και αλλάζει ανά site μέσω της κλάσης
   .theme-hotels / .theme-adv στο <body>.

   HOTELS SUPPLIES — "Εξοπλισμένοι χώροι"
     Ένα ξενοδοχείο δεν είναι λίστα κωδικών, είναι χώροι που
     πρέπει να εξοπλιστούν. Βαθύ μπλε Αιγαίου + ορείχαλκος.
     Σήμα: το "V" της Vision ως λεπτό chevron.

   VISION ADV — "Τετραχρωμία"
     Τυπογραφείο και παραγωγή. Ανθρακί με ματζέντα και κυανό,
     τα χρώματα του τυπογραφικού μηχανήματος.
     Σήμα: το color bar του τυπογράφου.

   ─────────────────────────────────────────────────────────
   Η ΚΛΙΜΑΚΑ — ΜΕΙΝΕΤΕ ΠΑΝΩ ΤΗΣ
   ─────────────────────────────────────────────────────────

   ΓΡΑΜΜΑΤΑ, έξι σκαλιά. Τίποτα ανάμεσα, ποτέ μισό εικονοστοιχείο:

     12px  μικρές κεφαλαίες ετικέτες, λεζάντες, βοηθητικά
     14px  δεύτερο επίπεδο κειμένου, πίνακες, μικρά κουμπιά
     16px  σώμα κειμένου, πεδία φόρμας, κουμπιά
     20px  εισαγωγικά κείμενα, τίτλοι καρτών
     26px  τίτλοι ενοτήτων
     34px  μεγάλοι τίτλοι σελίδας
     (ο τίτλος του hero είναι clamp — μεγαλώνει με την οθόνη)

   ΑΠΟΣΤΑΣΕΙΣ: πολλαπλάσια του 4. Κάτω από 6px επιτρέπονται ελεύθερες
   τιμές — εκεί ζουν οι οπτικές διορθώσεις ενός-δύο εικονοστοιχείων και
   τα πάχη περιγραμμάτων, που αν στρογγυλοποιηθούν χαλάνε στοιχίσεις.

   ΓΙΑΤΙ: το αρχείο είχε φτάσει τα 31 διαφορετικά μεγέθη γραμμάτων και 37
   αποστάσεις, με τιμές όπως 13,5px · 14,5px · 7px · 9px. Δεν ήταν κλίμακα —
   ήταν αποφάσεις που πάρθηκαν μία-μία, σε διαφορετικές στιγμές, ανά
   στοιχείο. Καμία μεμονωμένη δεν φαινόταν λάθος· όλες μαζί έκαναν τη
   σελίδα να μοιάζει συναρμολογημένη αντί για σχεδιασμένη.

   ΠΡΙΝ ΠΡΟΣΘΕΣΕΤΕ ΝΕΟ ΜΕΓΕΘΟΣ: σχεδόν πάντα υπάρχει ήδη σκαλί που κάνει
   τη δουλειά. Αν πραγματικά λείπει, προσθέστε το ΕΔΩ πρώτα.
   ========================================================= */

:root {
  /* Ink */
  --ink:        #0B1A26;
  --ink-2:      #55677A;
  --ink-3:      #8496A6;

  /* Brand — Aegean */
  --brand:      #0D5578;
  --brand-dk:   #093D57;
  --brand-dp:   #06293B;
  --brand-lt:   #EAF2F7;

  /* Accent — Brass.
     Σκουρότερο από το «καθαρό» ορειχάλκινο ώστε τα μικρά γράμματα (eyebrow,
     ετικέτες κατηγορίας) και το λευκό κείμενο στα κουμπιά να περνούν
     το όριο αντίθεσης 4.5:1 σε λευκό φόντο. */
  --accent:     #8C6221;   /* 5.5:1 σε λευκό */
  --accent-dk:  #6E4C19;
  --accent-lt:  #FAF3E6;

  /* Ο τονισμός ΩΣ ΚΕΙΜΕΝΟ, ξεχωριστά από τον τονισμό ως γέμισμα.

     Είναι δύο διαφορετικές δουλειές με διαφορετικές απαιτήσεις: ένα πλαίσιο
     ή μια γραμμή μπορεί να είναι όσο ανοιχτή θέλει, ένα γράμμα 12px όχι.
     Εδώ ταυτίζονται — ο ορειχάλκινος δίνει ήδη 5,5:1. Το ADV τον χωρίζει,
     γιατί ο μπρούντζος του είναι ανοιχτότερος. */
  --accent-text: var(--accent);

  /* Surfaces */
  --paper:      #FFFFFF;
  --surface:    #F4F7F9;
  --line:       #E2E8ED;
  --line-2:     #CBD5DD;

  /* Status */
  --ok:         #0F6B4F;
  --ok-lt:      #E6F3EE;
  --alert:      #A63A2C;
  --alert-lt:   #FAECE9;

  /* Σκούρες επιφάνειες (hero, CTA, footer) */
  --dark-1:         #093D57;
  --dark-2:         #06293B;
  --glow:           rgba(176,125,43,.20);
  --on-dark-accent: #E3B463;
  --on-dark-soft:   #D5E3EC;
  --on-dark-muted:  #C3D6E2;
  --on-dark-dim:    #9FB2C0;
  --chip-bg:        rgba(11,26,38,.82);
  --footer-bg:      #0B1A26;
  --footer-link:    #C3D2DC;
  --footer-dim:     #7D93A3;

  /* Γραμματοσειρές */
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.022em;

  /* Το σήμα που προηγείται κάθε τίτλου ενότητας και κάθε στοιχείου λίστας.
     Hotels: το "V" της Vision. */
  --mark-w: 13px;
  --mark-h: 9px;
  --mark-bg: currentColor;
  --mark-clip: polygon(0 0, 16% 0, 50% 62%, 84% 0, 100% 0, 50% 100%);
  --mark-radius: 0;

  /* Geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(11,26,38,.05);
  --shadow:    0 2px 4px rgba(11,26,38,.04), 0 8px 24px rgba(11,26,38,.06);
  --shadow-lg: 0 4px 8px rgba(11,26,38,.05), 0 18px 44px rgba(11,26,38,.10);
  --max: 1200px;
  --gut: 24px;
}

/* =========================================================
   VISION ADV — η δεύτερη ταυτότητα.
   Μόνο μεταβλητές· η δομή παραμένει κοινή.
   ========================================================= */
/* ==========================================================================
   Vision ADV — λάδι, μπρούντζος και λευκό
   ==========================================================================

   ΤΙ ΑΛΛΑΞΕ ΚΑΙ ΓΙΑΤΙ

   Το site είχε τιρκουάζ ταυτότητα, δειγματοληπτημένη από το λογότυπο. Μόλις
   τα κείμενα έγιναν λαδί και μπρούντζος, η σελίδα κουβαλούσε ΔΥΟ ταυτότητες
   ταυτόχρονα: γήινα γράμματα και τιρκουάζ κουμπιά. Λειτουργούσε, αλλά δεν
   διαβαζόταν ως ένα πράγμα.

   Τώρα υπάρχει μία οικογένεια, χτισμένη πάνω στα τρία χρώματα που δόθηκαν —
   λευκό, #757554, #927c4c — με δύο παράγωγα όπου η αναγνωσιμότητα το απαιτεί.

   ΟΙ ΡΟΛΟΙ, ΚΑΙ ΤΑ ΜΕΤΡΗΜΕΝΑ ΝΟΥΜΕΡΑ (WCAG AA: 4,5:1 κείμενο · 3:1 μεγάλα)

     #2A281C  σκούρο λαδί       το σώμα των κειμένων         14,80:1  ✓✓
     #757554  λαδί              → βλ. παρακάτω, γιατί έφυγε από το σώμα
     #6B6B4E  λαδί σκουρότερο   δεύτερα κείμενα, περιγραφές   5,47:1  ✓
     #927c4c  μπρούντζος        τίτλοι σε λευκό               4,03:1  ✓ μεγάλα
     #7E6A3F  σκούρος μπρούντζος  σύνδεσμοι και κουμπιά        5,22:1  ✓
     λευκό                       πάνω σε κουμπί #7E6A3F        5,22:1  ✓
     λευκό                       πάνω στο σκούρο του hero     15,57:1  ✓
     #D8B978  χρυσό τονισμού     πάνω σε σκούρο                8,25:1  ✓

   ΤΟ #7E6A3F ΚΑΝΕΙ ΔΙΠΛΗ ΔΟΥΛΕΙΑ, και γι' αυτό επιλέχθηκε: διαβάζεται ως
   σύνδεσμος πάνω σε λευκό ΚΑΙ σηκώνει λευκά γράμματα ως φόντο κουμπιού, με
   το ίδιο 5,22:1. Ένα χρώμα αντί για δύο, χωρίς έκπτωση στην αναγνωσιμότητα.

   Ο μπρούντζος #927c4c μένει στους τίτλους και στα γεμίσματα: σε μέγεθος
   κειμένου δεν περνά το όριο, σε μέγεθος τίτλου περνά άνετα.

   ΓΙΑΤΙ ΤΟ ΛΑΔΙ ΕΦΥΓΕ ΑΠΟ ΤΟ ΣΩΜΑ ΤΩΝ ΚΕΙΜΕΝΩΝ

   Στην πρώτη εκδοχή το #757554 ήταν το κύριο κείμενο. Σε λευκό δίνει 4,74:1,
   δηλαδή περνά οριακά — αλλά η σελίδα δεν είναι μόνο λευκή. Πάνω στα ανοιχτά
   πάνελ (#F8F6F0), που καλύπτουν τις κάρτες, τα πλαϊνά φίλτρα και τη λίστα
   προσφοράς, πέφτει στο 4,46:1 και δεν το περνά.

   Οπτικά αυτό φαίνεται ως εξής: κάθε παράγραφος μοιάζει ξεθωριασμένη, σαν
   υποσημείωση. Το λαδί είναι όμορφο χρώμα, αλλά σε 16px και σε μεγάλες
   ποσότητες κειμένου κουράζει.

   Το σώμα πήγε λοιπόν στο #2A281C — ΤΟ ΙΔΙΟ σκούρο λαδί που έχει ήδη το
   footer. Διαβάζεται σαν μαύρο, αλλά δεν είναι το ψυχρό #000 που θα ξένιζε
   δίπλα στον μπρούντζο. Και τα τρία χρώματα που ζητήθηκαν μένουν στη σελίδα:
   το λευκό στα σκούρα, το λαδί στα δεύτερα κείμενα, ο μπρούντζος στους
   τίτλους. Άλλαξε μόνο ποιο απ' όλα σηκώνει το βάρος της ανάγνωσης.

   ΤΟ ΣΚΟΥΡΟ ΖΕΣΤΑΘΗΚΕ. Ήταν ψυχρό ανθρακί (#21282B), φτιαγμένο για να δένει
   με τιρκουάζ. Πάνω σε λαδί και μπρούντζο έμοιαζε γκρίζο και ξένο· έγινε
   σκούρο λαδί, ώστε οι σκούρες ζώνες να ανήκουν στην ίδια παλέτα.

   ΤΟ ΛΟΓΟΤΥΠΟ ΠΑΡΑΜΕΝΕΙ ΤΙΡΚΟΥΑΖ — είναι το μόνο τιρκουάζ που έμεινε στη
   σελίδα, και είναι δική σας απόφαση μάρκας αν θα αλλάξει.
   ========================================================================== */
.theme-adv {
  /* ΤΟ ΣΩΜΑ ΤΩΝ ΚΕΙΜΕΝΩΝ: ΜΑΥΡΟ ΠΟΥ ΕΧΕΙ ΛΑΔΙ ΜΕΣΑ ΤΟΥ

     Ήταν #757554 — καθαρό λαδί. Δίνει 4,74:1 σε λευκό, δηλαδή περνά το όριο
     αναγνωσιμότητας οριακά· πάνω στα ανοιχτά πάνελ (#F8F6F0) πέφτει στο
     4,46:1 και ΔΕΝ το περνά. Και μεγάλο μέρος της σελίδας είναι πάνελ.

     Στην πράξη: μια παράγραφος σε λαδί μοιάζει ξεθωριασμένη, σαν να είναι
     δευτερεύουσα. Δεν είναι ζήτημα γούστου — το μάτι κουράζεται πραγματικά
     όταν το κείμενο δεν έχει αρκετή διαφορά από το χαρτί.

     Δεν πάμε όμως σε #000. Το απόλυτο μαύρο είναι ψυχρό και θα ξένιζε δίπλα
     στο λαδί και τον μπρούντζο. Παίρνουμε το ΣΚΟΥΡΟ ΛΑΔΙ που ήδη υπάρχει στην
     παλέτα (--dark-1, το φόντο του footer): διαβάζεται ως μαύρο, αλλά είναι
     της ίδιας οικογένειας. 14,80:1 σε λευκό, 13,94:1 στα πάνελ.

     Το λαδί ΔΕΝ φεύγει — κατεβαίνει ένα επίπεδο, στα δεύτερα κείμενα, όπου
     ακριβώς πρέπει να δείχνει λιγότερο έντονο από το κύριο. Ο μπρούντζος
     μένει στους τίτλους, όπου το μέγεθος τον κάνει να περνά άνετα.          */
  --ink:        #2A281C;   /* σκούρο λαδί — το σώμα των κειμένων */
  --ink-2:      #6B6B4E;   /* λαδί, για δεύτερο επίπεδο και περιγραφές */
  /* Το τρίτο επίπεδο ήταν #8E8E72 — 3,35:1, δηλαδή κάτω από το όριο. Και
     χρησιμοποιείται ΑΚΡΙΒΩΣ εκεί που πονάει: σε 12px («Κατηγορίες»,
     «Ταξινόμηση», «/ τεμ.», οι κωδικοί κάτω από τα ονόματα). Μικρό ΚΑΙ
     ξεθωριασμένο μαζί είναι ό,τι χειρότερο. Κατέβηκε στο #6F6F55: 5,15:1 σε
     λευκό, 4,76:1 στα πάνελ — εξακολουθεί να διαβάζεται ως δευτερεύον, αλλά
     διαβάζεται. */
  --ink-3:      #6F6F55;   /* ήπιο, για λεζάντες και βοηθητικά */

  /* Ο μπρούντζος των τίτλων. Ξεχωριστή μεταβλητή ώστε να αλλάζει μόνος του. */
  --heading:    #96814A;   /* χρυσός, μόνο για τίτλους ≥24px: 3,79:1 σε λευκό */

  /* Ενέργειες: σύνδεσμοι, κουμπιά, ό,τι πατιέται. */
  /* ΧΡΥΣΟΣ ΠΑΛΕΤΑ — από το mockup «Νέα τσάντα παραλίας».
     Ο χρυσός του mockup #A08A4E με λευκά γράμματα δίνει 3,37:1: δεν διαβάζεται
     σε κουμπί 16px. Για ό,τι είναι ΓΡΑΜΜΑ ή έχει λευκό γράμμα πάνω του, ο ίδιος
     τόνος (H43) σκουραίνει ως το πρώτο σκαλί που περνά με περιθώριο σε ΟΛΑ τα
     ανοιχτά φόντα: 5,44 σε λευκό, 4,88 στη λωρίδα #F6F2EC. */
  --brand:      #79683C;
  --brand-dk:   #716138;   /* hover — 6,05:1 με λευκό */
  --brand-dp:   #2E2717;   /* βαθύ, για σκούρα φόντα */
  --brand-lt:   #F6F2EC;   /* απόχρωση για ήπια γεμίσματα */

  /* Τονισμός: γεμίσματα, σήματα, ό,τι θέλει να τραβήξει το μάτι χωρίς να
     διαβαστεί ως κείμενο μεγέθους 16px. */
  --accent:     #A08A4E;   /* ο χρυσός του mockup — γεμίσματα, γραμμές, ποτέ γράμμα σε ανοιχτό */
  --accent-dk:  #79683C;
  --accent-lt:  #F6F2EC;

  /* Ο μπρούντζος #927c4c είναι σωστός για τίτλους 24px και πάνω (4,03:1 —
     περνά ως «μεγάλο κείμενο»). Στα 12px των eyebrow και των ετικετών
     κατηγορίας ΔΕΝ περνά, ούτε καν στο λευκό. Εκεί μπαίνει ο σκούρος
     μπρούντζος, που είναι ήδη το χρώμα των συνδέσμων: 5,22:1 σε λευκό,
     4,83:1 στα πάνελ. Ίδια οικογένεια, ένα σκαλί πιο βαθιά. */
  --accent-text: #79683C;

  --surface:    #F6F2EC;   /* η κρεμ λωρίδα του mockup */
  --line:       #E6DECF;
  --line-2:     #CDBF9F;

  --dark-1:         #2A281C;   /* σκούρο λαδί, όχι ψυχρό ανθρακί */
  --dark-2:         #17160E;
  --glow:           rgba(160,138,78,.30);
  --on-dark-accent: #B8A46F;   /* χρυσός σε σκούρο: 6,05:1 σε #2A281C, 7,41:1 σε #17160E */
  --on-dark-soft:   #EDEADF;
  --on-dark-muted:  #CFCBBA;
  --on-dark-dim:    #948F7C;
  --chip-bg:        rgba(42,40,28,.85);
  --footer-bg:      #2A281C;
  --footer-link:    #DAD5C6;
  /* Ήταν #918C7A — 4,40:1 πάνω στο σκούρο του footer, δηλαδή λίγο κάτω από
     το όριο. Το φορούν το copyright και οι νομικοί σύνδεσμοι, ακριβώς τα
     κείμενα που κάποιος ψάχνει όταν τα χρειάζεται. Ένα σκαλί ανοιχτότερα:
     5,06:1. */
  --footer-dim:     #9C9784;

  /* Manrope, όχι Space Grotesk.
     Το Space Grotesk ΔΕΝ έχει ελληνικά — υπάρχουν μόνο τα λατινικά αρχεία του.
     Σε ελληνικό site αυτό σημαίνει ότι κάθε τίτλος έπεφτε σιωπηλά στο Inter,
     δηλαδή οι τίτλοι έμοιαζαν με το κείμενο και η ταυτότητα χανόταν. Το
     Manrope έχει ελληνικά σε 600, 700 και 800 — τα τρία βάρη που ζητά το θέμα. */
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --display-weight: 700;
  /* Το Manrope είναι ήδη σφιχτό· -0.03em θα κολλούσε τα γράμματα. */
  --display-tracking: -0.015em;

  /* Το σήμα κάτω από τα eyebrow: το τιρκουάζ που σβήνει στο ανθρακί —
     τα δύο χρώματα του λογοτύπου, με τη σειρά που τα διαβάζει το μάτι. */
  --mark-w: 22px;
  --mark-h: 4px;
  --mark-clip: none;
  --mark-radius: 2px;
  /* Η γραμμούλα κάτω από τους τίτλους ενοτήτων: μπρούντζος και σκούρο λαδί,
     όπως το υπόλοιπο θέμα. Ήταν τιρκουάζ/ανθρακί, αντιγραμμένη από το λογότυπο. */
  --mark-bg: linear-gradient(90deg, #A08A4E 0 55%, #2A281C 55% 100%);

  /* Οι σκιές παίρνουν τη ζεστή απόχρωση της παλέτας. Ψυχρή μπλε σκιά κάτω από
     γήινα χρώματα διαβάζεται ως βρωμιά, όχι ως βάθος. */
  --shadow-sm: 0 1px 2px rgba(42,40,28,.07);
  --shadow:    0 2px 4px rgba(42,40,28,.06), 0 8px 24px rgba(42,40,28,.10);
}

/* ΠΡΟΣΟΧΗ — ΑΥΤΟΣ Ο ΚΑΝΟΝΑΣ ΑΝΤΙΣΤΡΑΦΗΚΕ.

   Παλιά έγραφε «color: var(--ink)»: το φωτεινό τιρκουάζ δεν σήκωνε λευκά
   γράμματα (2,6:1), οπότε το κείμενο γύριζε στο ανθρακί.

   Με τη γήινη παλέτα αυτό γίνεται ΑΟΡΑΤΟ: λαδί #757554 πάνω σε μπρούντζο
   #927c4c δίνει 1,19:1 — πρακτικά το ίδιο χρώμα. Το κουμπί τονισμού παίρνει
   πλέον τον σκούρο μπρούντζο με λευκά γράμματα, 5,22:1.

   Το ίδιο και το hover των social: το ξεθωριασμένο λαδί δεν ξεχώριζε. */
.theme-adv .btn-accent {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.theme-adv .btn-accent:hover {
  background: var(--brand-dk);
  color: #fff;
  border-color: var(--brand-dk);
}
.theme-adv .social-row a:hover { color: var(--brand); }

/* ΤΟ ΚΟΥΜΠΙ ΣΤΑ ΣΚΟΥΡΑ ΦΟΝΤΑ: Ο ΦΩΤΕΙΝΟΣ ΧΡΥΣΟΣ ΤΟΥ MOCKUP.

   Στο banner και στη λωρίδα «Πείτε μας τι χρειάζεστε» το σκούρο χρυσό κουμπί
   χανόταν στο σκούρο λαδί (2,83:1 το σχήμα). Εδώ μπαίνει ο φωτεινός χρυσός
   #A08A4E — ΜΕ ΣΚΟΥΡΑ ΓΡΑΜΜΑΤΑ, γιατί με λευκά δίνει 3,37:1 και δεν
   διαβάζεται. Σκούρο #1A1A1A πάνω του: 5,17:1. Το σχήμα στο φόντο: 4,40:1. */
.theme-adv .hero-carousel .btn-accent,
.theme-adv .hero .btn-accent,
.theme-adv .cta-band .btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #1A1A1A;
}
.theme-adv .hero-carousel .btn-accent:hover,
.theme-adv .hero .btn-accent:hover,
.theme-adv .cta-band .btn-accent:hover {
  background: #B39A5C;   /* 6,38:1 με το σκούρο γράμμα */
  border-color: #B39A5C;
  color: #1A1A1A;
}

/* Στις σκούρες επιφάνειες, το ADV αντικαθιστά το διαγώνιο μοτίβο του Hotels
   με τράμα ημιτονίας — η κουκκίδα της τυπογραφικής εκτύπωσης. */
.theme-adv .hero::after,
.theme-adv .cta-band::after,
.theme-adv .fr-visual::after {
  background-image: radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.4px);
  background-size: 13px 13px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: var(--display-tracking);
  line-height: 1.18;
}

/* ΤΟ ΧΡΩΜΑ ΤΩΝ ΤΙΤΛΩΝ ΠΑΕΙ ΜΟΝΟ ΣΤΟΥΣ ΜΕΓΑΛΟΥΣ

   Ο μπρούντζος του ADV δίνει 4,03:1 σε λευκό. Για το πρότυπο αυτό αρκεί σε
   «μεγάλο κείμενο» — 24px και πάνω, ή 18,66px σε έντονη γραφή — και δεν αρκεί
   σε τίποτα μικρότερο.

   Οι h1 και h2 είναι ΠΑΝΤΑ μεγάλες: 32-52px και 24-34px. Οι h3 όμως δεν
   είναι· ξεκινούν στα 20px αλλά πέφτουν στα 16px μέσα σε κάρτες, στα νομικά
   κείμενα και στο πλάι της επικοινωνίας. Εκεί ο μπρούντζος γίνεται δυσανάγνωστος.

   Αντί να κυνηγάμε κάθε εξαίρεση — και να ξεχάσουμε την επόμενη — ο κανόνας
   είναι απλός: ο μπρούντζος στις h1/h2 και στο .display, το κανονικό μελάνι
   στις h3/h4. Έχει και τυπογραφικό όφελος: όταν ΚΑΘΕ επικεφαλίδα είναι
   μπρούντζινη, ο μπρούντζος παύει να σημαίνει κάτι. Όποιος μικρός τίτλος
   πρέπει οπωσδήποτε να τον έχει, παίρνει .h-accent. */
h1, h2, .display { color: var(--heading, var(--ink)); }
.h-accent { color: var(--heading, var(--accent-text)); }
h1 { font-size: clamp(32px, 4.4vw, 52px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.012em; }

p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--gut); }

.mono, .code {
  font-family: var(--font-mono);
  letter-spacing: .01em;
}

/* Default size for inline icons from icon(). Context rules (.ico svg, .ic svg)
   are more specific and win where a fixed pixel size is wanted. */
.ico-inline { width: 1.05em; height: 1.05em; flex: none; }

.lede { font-size: 20px; color: var(--ink-2); line-height: 1.62; }
.muted { color: var(--ink-2); }

/* Accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 20px; z-index: 100;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   The V-tick — brand signature on every section label
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: var(--mark-w); height: var(--mark-h);
  background: var(--mark-bg);
  clip-path: var(--mark-clip);
  border-radius: var(--mark-radius);
  flex: none;
}
.eyebrow.on-dark { color: var(--on-dark-accent); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dk); color: #fff; }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dk); color: #fff; }

.btn-outline { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-lt); }

.btn-ghost-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }

.btn-block { display: flex; width: 100%; }

/* ΤΟ ΚΟΥΜΠΙ ΠΡΟΣΘΗΚΗΣ ΤΗΣ ΚΑΡΤΑΣ.

   Δύο προβλήματα λύνονται εδώ:

   1. Το «+» ήταν χαρακτήρας κειμένου. Στη γραμματοσειρά κάθεται ψηλά, έχει
      άλλο πάχος από τα γράμματα δίπλα του και δεν στοιχίζεται μαζί τους —
      φαινόταν κολλημένο. Τώρα είναι σχήμα SVG με το ίδιο πάχος γραμμής με τα
      υπόλοιπα εικονίδια.

   2. Η ετικέτα «+ Στην παραγγελία» έπιανε δύο σειρές στο πλέγμα των τεσσάρων
      στηλών, και οι κάρτες έβγαιναν άνισες σε ύψος. Έγινε μία λέξη, και το
      nowrap εγγυάται ότι δεν θα ξανασπάσει σε καμία οθόνη. */
.btn-add {
  align-items: center; justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-add .ba-ico { display: inline-flex; flex: none; }
.btn-add .ba-ico svg { width: 15px; height: 15px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   Header
   ========================================================= */
.topbar {
  background: var(--dark-2);
  color: var(--on-dark-dim);
  font-size: 14px;
}
.topbar .wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap;
  /* Ακολουθεί τη μπάρα από κάτω: αν η μία πιάνει όλο το πλάτος και η άλλη όχι,
     τα δύο κείμενα ξεκινούν σε διαφορετικό σημείο και φαίνεται λάθος. */
  max-width: none;
}
.topbar a { color: var(--on-dark-soft); }
.topbar a:hover { color: #fff; }
.topbar .tb-group { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
/* Το τηλέφωνο και το email της μπάρας ήταν 134×22. Το πρότυπο ζητά 24×24 για
   ό,τι πατιέται, ακόμη και με ποντίκι — 22 σημαίνει ότι ο στόχος αστοχεί σε
   όποιον δεν έχει σταθερό χέρι. Δύο pixel, καμία οπτική διαφορά. */
.topbar .tb-item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 24px;
}
/* Σύνδεσμος προς το αδελφό site του ομίλου */
.topbar .sister-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding-left: 20px; border-left: 1px solid rgba(255,255,255,.18);
  font-weight: 500;
}
.topbar .sister-link:hover { color: var(--on-dark-accent); text-decoration: none; }
@media (max-width: 760px) { .topbar .sister-link { border-left: none; padding-left: 0; } }
/* The opening hours are the first thing to drop when the bar gets tight. */
@media (max-width: 900px) { .topbar .tb-hours { display: none; } }

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .bar {
  /* Τρεις ζώνες: πλοήγηση | λογότυπο | αναζήτηση + παραγγελία.

     Grid και όχι flex, ώστε το λογότυπο να πέφτει στο ΠΡΑΓΜΑΤΙΚΟ κέντρο της
     οθόνης. Με flex θα κουνιόταν κάθε φορά που αλλάζει το πλάτος μιας από τις
     δύο άκρες — π.χ. όταν ο μετρητής της παραγγελίας πάει από 9 σε 10. */
  display: grid;
  /* Τα minmax(0,…) επιτρέπουν στις ζώνες να συρρικνωθούν κάτω από το πλάτος
     του περιεχομένου τους. Χωρίς αυτά, σε οθόνη 360px η μπάρα ξεχειλίζει και
     εμφανίζεται οριζόντια κύλιση σε ΟΛΗ τη σελίδα. */
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;

  /* Η μπάρα αγνοεί το πλαίσιο των 1200px και πιάνει όλο το πλάτος.

     Χωρίς αυτό, σε οθόνη 1920 το περιεχόμενο ξεκινά 360px μέσα και η
     πλοήγηση κάθεται στη μέση του πουθενά αντί στην άκρη. */
  max-width: none;
}

/* Αριστερά: οι σύνδεσμοι, κολλητά στην άκρη. */
.bar-left {
  display: flex; align-items: center; gap: 2px;
  justify-self: start; min-width: 0;
}
/* Δεξιά: αναζήτηση και παραγγελία, κολλητά στην άλλη άκρη. */
.bar-right {
  display: flex; align-items: center; gap: 8px;
  justify-self: end; min-width: 0;
  /* Παίρνει όλη τη ζώνη του ώστε η αναζήτηση να απλωθεί όσο επιτρέπεται. */
  width: 100%; justify-content: flex-end;
}
/* Το λογότυπο κρατά το πλάτος του όσο υπάρχει χώρος· στα πολύ στενά κινητά
   κόβεται με αποσιωπητικά αντί να σπάσει σε δύο γραμμές ή να σπρώξει τη μπάρα. */
.brand { flex: none; min-width: 0; }
.brand .words { min-width: 0; }
.brand .name, .brand .sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand:hover { text-decoration: none; }
/* object-fit: ενα σημα που ανεβαινει απο το διαχειριστικο δεν ειναι παντα
   τετραγωνο. Χωρις αυτο ενα φαρδυ λογοτυπο θα τεντωνοταν στα 40x40. */
.brand .mark { width: 40px; height: 40px; flex: none; object-fit: contain; }
/* Φαρδύ σήμα (λογότυπο με όνομα): ίδιο ύψος, πλάτος κατά την αναλογία του.
   Χωρίς αυτό ένα σήμα 2:1 χωρούσε στο τετράγωνο 40×40 και δεν διαβαζόταν. */
.brand .mark--wide { width: auto; height: 48px; max-width: 220px; }

/* ΜΟΝΟ ΤΟ ΣΗΜΑ. Όταν το site έχει δικό του σήμα, το όνομα δίπλα του είναι
   διπλό. Δεν σβήνεται από τη σελίδα: κρύβεται μόνο από την οθόνη, ώστε ο
   σύνδεσμος της αρχικής να έχει όνομα για τους αναγνώστες οθόνης. */
.brand--logo-only .words,
.f-brand--logo-only .name,
.f-brand--logo-only .name + br {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.brand .words { display: flex; flex-direction: column; line-height: 1.1; }
.brand .name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.brand .sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* =========================================================
   Αναζήτηση στο header, με ζωντανά αποτελέσματα
   ========================================================= */
/*
 * Πλάτος της μπάρας αναζήτησης.
 *
 * Το min-width είναι ο πραγματικός φύλακας: χωρίς αυτό, το flexbox τη
 * συρρικνώνει όσο χρειάζεται για να χωρέσει το μενού, και το placeholder
 * κόβεται στη μέση.
 *
 * Το placeholder «Όνομα ή κωδικός…» θέλει 134px, συν 47px για το εικονίδιο,
 * τα περιθώρια και το κουμπί καθαρισμού. Τα 200px είναι το σημείο κάτω από το
 * οποίο αρχίζει να κόβεται· κρατάμε 210px για μια ανάσα ασφαλείας.
 */
.header-search {
  position: relative;
  /* Μεγαλύτερη μπάρα: με 5.900 προϊόντα η αναζήτηση είναι ο δεύτερος βασικός
     δρόμος μετά τις κατηγορίες, και οι κωδικοί του προμηθευτή είναι μακριοί —
     σε στενό πεδίο ο επισκέπτης δεν βλέπει τι πληκτρολόγησε. */
  /* Ίδιο περίπου πλάτος με τους συνδέσμους απέναντι.

     Οι τέσσερις σύνδεσμοι αριστερά πιάνουν γύρω στα 420px. Η αναζήτηση
     σταματά στο ίδιο σημείο, ώστε οι δύο πλευρές να ζυγίζουν το ίδιο γύρω
     από το λογότυπο. Όταν τεντωνόταν στα 680px, η μπάρα έγερνε δεξιά. */
  flex: 1 1 380px;
  min-width: 210px;
  max-width: 440px;
}

.hs-form {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  padding: 0 8px 0 16px;
  transition: border-color .15s, background .15s;
}
.hs-form:focus-within { border-color: var(--brand); background: var(--paper); }
.hs-icon { display: inline-flex; color: var(--ink-2); flex: none; }
.hs-icon svg { width: 17px; height: 17px; }
.hs-form:focus-within .hs-icon { color: var(--brand); }

.hs-form input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  /* Ίδιο μέγεθος γραμμάτων με τους συνδέσμους του μενού. */
  font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 0;
}
.hs-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.hs-form input::placeholder { color: var(--ink-2); }

/* Το «καθάρισμα» της αναζήτησης ήταν 28×24. Περνά το ελάχιστο, αλλά κάθεται
   μέσα στο πεδίο δίπλα σε άλλα στοιχεία — εκεί η αστοχία κοστίζει. Ο ορατός
   κύκλος μένει μικρός· ΜΕΓΑΛΩΝΕΙ Η ΠΕΡΙΟΧΗ ΑΦΗΣ, με το ίδιο κόλπο που
   χρησιμοποιούν οι κουκκίδες του banner: αόρατο τετράγωνο 44px από πάνω. */
.hs-clear {
  position: relative;
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-2); font-size: 20px; line-height: 1;
  padding: 2px 8px; border-radius: 999px;
}
.hs-clear::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.hs-clear:hover { color: var(--ink); background: var(--line); }

/* Το κουμπί υποβολής μένει προσβάσιμο από πληκτρολόγιο αλλά δεν καταλαμβάνει
   χώρο: το Enter και το εικονίδιο καλύπτουν την ορατή λειτουργία. */
.hs-submit {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.hs-submit:focus {
  position: static; width: auto; height: auto; clip: auto; margin: 0;
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ---- Αναδυόμενο πλαίσιο αποτελεσμάτων ---- */
.hs-panel {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  min-width: 340px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  z-index: 60;
  overflow: hidden;
}
.hs-panel[hidden] { display: none; }

.hs-list { max-height: 62vh; overflow-y: auto; }

.hs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.hs-item:last-child { border-bottom: 0; }
.hs-item:hover, .hs-item.active {
  background: var(--brand-lt); text-decoration: none;
}
.hs-item img {
  width: 46px; height: 46px; flex: none;
  object-fit: contain;                 /* ολόκληρη η εικόνα, χωρίς περικοπή */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.hs-item .hs-text { min-width: 0; }
.hs-item .hs-name {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-item .hs-meta {
  display: block; margin-top: 3px;
  font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-item .hs-sku { font-family: var(--font-mono); }

.hs-foot { border-top: 1px solid var(--line); background: var(--surface); }
.hs-foot[hidden] { display: none; }
.hs-foot a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--brand);
}
.hs-foot a:hover { background: var(--brand-lt); text-decoration: none; }
.hs-foot a.active { background: var(--brand-lt); }

.hs-note { padding: 20px 16px; font-size: 14px; color: var(--ink-2); text-align: center; }
.hs-note strong { color: var(--ink); }

/* flex: none — το μενού κρατά το πλάτος του και δεν σπάνε οι ετικέτες. */
.bar-left a.nav-link {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.bar-left a.nav-link:hover { color: var(--brand); background: var(--brand-lt); text-decoration: none; }
.bar-left a.nav-link.active { color: var(--brand); font-weight: 600; }
/* Ο πρώτος σύνδεσμος ευθυγραμμίζεται με την άκρη, χωρίς την εσοχή του. */
.bar-left > a.nav-link:first-child { margin-left: -12px; }

/* ΔΙΑΚΟΠΤΗΣ ΓΛΩΣΣΑΣ.

   Δύο κοντοί σύνδεσμοι με μια κάθετη γραμμή ανάμεσα — «ΕΛ | EN». Καταλαμβάνει
   ελάχιστο πλάτος, που το χρειάζεται: στην κεφαλίδα κάθονται ήδη το μενού, η
   αναζήτηση και το καλάθι. Η ενεργή γλώσσα είναι έντονη, η άλλη ξεθωριασμένη
   αλλά ευανάγνωστη — όχι τόσο σβηστή ώστε να μη φαίνεται πατήσιμη. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
}
.lang-switch .lang-opt {
  padding: 8px 8px;
  color: var(--ink-3);
  border-radius: var(--r-sm);
  line-height: 1;
}
.lang-switch .lang-opt + .lang-opt {
  border-left: 1px solid var(--line-2);
}
.lang-switch .lang-opt:hover {
  color: var(--brand);
  text-decoration: none;
}
.lang-switch .lang-opt.current {
  color: var(--ink);
  font-weight: 800;
  cursor: default;
}

@media (max-width: 640px) {
  /* Σε τηλέφωνο μένει, αλλά πιο σφιχτά: η γλώσσα είναι από τα πρώτα πράγματα
     που ψάχνει ένας ξένος επισκέπτης και δεν πρέπει να κρυφτεί σε μενού. */
  .lang-switch { margin-left: 4px; font-size: 12px; }
  .lang-switch .lang-opt { padding: 8px 5px; }
}

.basket-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}
/*
 * Στο οριζόντιο μενού το κουμπί είναι εικονίδιο + μετρητής, χωρίς ετικέτα.
 *
 * Ο λόγος είναι αριθμητικός: το .wrap κλειδώνει στα 1200px, άρα η μπάρα έχει
 * πάντα 1152px ωφέλιμα, όσο πλατιά κι αν είναι η οθόνη. Λογότυπο (224) και
 * μενού με ετικέτα (700) αφήνουν 188px για την αναζήτηση — λιγότερα απ' όσα
 * χρειάζεται για να φανεί το κείμενό της. Χωρίς την ετικέτα μένουν 312px.
 *
 * Η ενέργεια δεν χάνεται: το floating κουμπί κάτω δεξιά τη γράφει ολόκληρη,
 * υπάρχει title, και στο μενού κινητού η ετικέτα επανέρχεται.
 */
.basket-pill .pill-label { display: none; }
.basket-pill .pill-icon { display: inline-flex; }
/* Το «Κλείστε ραντεβού» (sites χωρίς κατάλογο) δεν μοιράζεται τη μπάρα με
 * αναζήτηση: εκεί η ετικέτα χωράει και χρειάζεται — ένα σκέτο ρολόι δεν λέει
 * τι κάνει. Στο κινητό μένει το εικονίδιο (με title). */
@media (min-width: 900px) {
  .basket-pill--appt .pill-label { display: inline; }
}
.basket-pill:hover { background: var(--brand-dk); text-decoration: none; color: #fff; }
/* Ο μετρητής ήταν ΑΝΟΙΧΤΟ πέπλο πάνω στο κουμπί: λευκό 22% πάνω σε
   #7E6A3F βγάζει #9A8B69, και τα λευκά ψηφία πάνω του δίνουν 3,35:1. Ένας
   αριθμός 12px που δεν διαβάζεται είναι χειρότερος από κανέναν αριθμό.
   Το πέπλο γύρισε ανάποδα — σκουραίνει αντί να ξανοίγει, 7,50:1. */
.basket-pill .count {
  background: rgba(0,0,0,.22);
  border-radius: 999px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}


/* =========================================================
   Συρτάρι κατηγοριών (offcanvas)

   Αντικατέστησε το πτυσσόμενο mega menu. Με 16 κύριες κατηγορίες και 92
   υποκατηγορίες, το αιωρούμενο πάνελ γέμιζε την οθόνη και ήθελε δική του
   κύλιση· το συρτάρι έχει όλο το ύψος και κυλάει φυσιολογικά. Ένα στοιχείο
   για κινητό και υπολογιστή, αντί για δύο διαφορετικές συμπεριφορές.
   ========================================================= */
.nav-item { display: flex; align-items: center; }

/* Το «Προϊόντα» έχει το ΙΔΙΟ στυλ με την «Επικοινωνία» — απλός σύνδεσμος.
   Κρατά μόνο τις τρεις γραμμές, γιατί αυτές λένε ότι ανοίγει λίστα και όχι
   ότι φορτώνει σελίδα. */
.cat-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Γίνονται Χ όταν το συρτάρι είναι ανοιχτό, ώστε το ίδιο κουμπί να το κλείνει. */
.cat-bars {
  position: relative; display: block; flex: none;
  width: 16px; height: 2px; background: currentColor; border-radius: 2px;
}
.cat-bars::before, .cat-bars::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease;
}
.cat-bars::before { top: -5px; }
.cat-bars::after  { top: 5px; }
.cat-btn[aria-expanded="true"] { color: var(--brand); }
.cat-btn[aria-expanded="true"] .cat-bars { background: transparent; }
.cat-btn[aria-expanded="true"] .cat-bars::before { transform: translateY(5px) rotate(45deg); }
.cat-btn[aria-expanded="true"] .cat-bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .cat-bars::before, .cat-bars::after { transition: none; }
}

.offcanvas { position: fixed; inset: 0; z-index: 80; }
.oc-backdrop {
  position: absolute; inset: 0; background: rgba(15, 18, 24, .45);
  opacity: 0; transition: opacity .22s ease;
}
.offcanvas.open .oc-backdrop { opacity: 1; }

.oc-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(400px, 92vw);
  display: flex; flex-direction: column;
  background: var(--paper); box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.offcanvas.open .oc-panel { transform: none; }

.oc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 20px; border-bottom: 1px solid var(--line);
  flex: none;
}
.oc-head h2 { font-size: 20px; margin: 0; }
.oc-close {
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-2);
  padding: 2px 8px; border-radius: var(--r-sm);
}
.oc-close:hover { background: var(--surface); color: var(--ink); }

/* Μόνο το σώμα κυλάει — κεφαλίδα και υποσέλιδο μένουν στη θέση τους. */
.oc-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 0; }

.oc-all {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 12px 12px; padding: 12px 16px;
  background: var(--brand-lt); color: var(--brand);
  border-radius: var(--r-sm); font-weight: 600; font-size: 14px;
}
.oc-all:hover { text-decoration: none; filter: brightness(.97); }

.oc-tree { display: block; }

.oc-group { border-bottom: 1px solid var(--line); }
.oc-group:last-child { border-bottom: none; }

.oc-group > summary,
.oc-leaf {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink);
  list-style: none;
}
/* Το προεπιλεγμένο τριγωνάκι του <details> φεύγει — έχουμε δικό μας βελάκι. */
.oc-group > summary::-webkit-details-marker { display: none; }
.oc-group > summary::marker { content: ""; }
.oc-group > summary:hover, .oc-leaf:hover { background: var(--surface); text-decoration: none; }

.oc-leaf { border-bottom: 1px solid var(--line); }
.oc-leaf:last-child { border-bottom: none; }

.oc-name { flex: 1; min-width: 0; }

.oc-arrow {
  flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.oc-group[open] > summary { color: var(--brand); }
.oc-group[open] > summary .oc-arrow { transform: rotate(45deg); border-color: var(--brand); }

.oc-subs { padding: 2px 0 12px; background: var(--surface); }
.oc-sub {
  display: block;
  padding: 8px 20px 8px 32px;
  /* Μαύρα γράμματα, όπως και οι κύριες κατηγορίες: η ιεραρχία φαίνεται από την
     εσοχή και το βάρος, δεν χρειάζεται να ξεθωριάσει και το κείμενο. */
  font-size: 14px; color: var(--ink);
}
.oc-sub:hover { background: var(--brand-lt); color: var(--brand); text-decoration: none; }
.oc-sub-all { font-weight: 600; color: var(--brand); }

/* Η σελίδα στην οποία βρίσκεται ο επισκέπτης. */
.oc-sub.current, .oc-leaf.current, .oc-all.current {
  color: var(--brand); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Οι σελίδες του site μέσα στο συρτάρι — για τα κινητά, όπου δεν χωρούν πάνω.
   Στον υπολογιστή φαίνονται όλες στη μπάρα, οπότε εδώ θα ήταν διπλοεγγραφή. */
.oc-pages {
  /* Δύο στήλες: με flex-wrap η τέταρτη («Επικοινωνία») έπεφτε μόνη της σε
     δεύτερη γραμμή. Μέσα στο .oc-body, στην κορυφή — βλ. header.php. */
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px;
  padding: 4px 12px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.oc-pages a {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.oc-pages a:hover { background: var(--brand-lt); color: var(--brand); text-decoration: none; }
.oc-pages a.current { color: var(--brand); font-weight: 600; }

/* Στον υπολογιστή η λίστα σελίδων του συρταριού δεν χρειάζεται — εκτός αν
   κάποιος σύνδεσμος δεν χώρεσε στη μπάρα (η «Επικοινωνία» κάτω από 960px, ή
   ό,τι κρύψει το script nav-overflow στο app.js). */
@media (min-width: 961px) { .oc-pages { display: none; } }
.nav-has-overflow .oc-pages { display: grid; }
.site-header .bar-left .nav-link.nav-overflow { display: none; }

.oc-foot {
  flex: none; padding: 16px 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2); background: var(--paper);
}
.oc-foot a { color: var(--brand); font-weight: 500; }

/* Χαμηλή οθόνη (κινητό οριζόντια): κεφαλίδα και υποσέλιδο του πάνελ σφίγγουν,
   ώστε να μένει χώρος για τη λίστα που κυλάει. */
@media (max-height: 520px) {
  .oc-head { padding: 10px 16px; }
  .oc-head h2 { font-size: 17px; }
  .oc-foot { padding: 8px 16px; font-size: 13px; }
  .oc-body { padding: 6px 0; }
}

/* Χωρίς JavaScript το συρτάρι δεν ανοίγει ποτέ — μένει κρυφό και ο
   σύνδεσμος «Προϊόντα» πηγαίνει κανονικά στον κατάλογο. */
.offcanvas[hidden] { display: none; }

/* ---------------------------------------------------------
   Και οι 16 κατηγορίες σε μία οθόνη, χωρίς κύλιση

   Στο κινητό οι σειρές πρέπει να πατιούνται με το δάχτυλο, οπότε μένουν
   άνετες. Στον υπολογιστή σφίγγουν: με ποντίκι μια σειρά 38px πατιέται
   άνετα, και 16 από αυτές χωράνε σε κάθε κανονική οθόνη.

   Ο λογαριασμός: κεφαλίδα 58 + «Όλα τα προϊόντα» 56 + 16×38 = 608 +
   υποσέλιδο 47 + περιθώρια 20 ≈ 789px. Χωράει σε παράθυρο ύψους 800px
   και πάνω. Πιο χαμηλά, ο δεύτερος κανόνας σφίγγει κι άλλο.
   --------------------------------------------------------- */
@media (min-width: 861px) {
  /* Λίγο φαρδύτερο: η μεγαλύτερη κατηγορία («Εκδηλώσεις, αθλητισμός &
     ελεύθερος χρόνος», 41 χαρακτήρες) πρέπει να χωρά σε μία γραμμή —
     αν τσακίσει στα δύο, χαλάει ο λογαριασμός του ύψους. */
  .oc-panel { width: min(430px, 92vw); }
  .oc-group > summary, .oc-leaf { padding: 8px 20px; }
  .oc-all { margin: 2px 12px 8px; padding: 12px 16px; }
  .oc-head { padding: 16px 20px; }
  .oc-foot { padding: 12px 20px; font-size: 14px; }
  .oc-body { padding: 8px 0; }
}

@media (min-width: 861px) and (max-height: 800px) {
  .oc-group > summary, .oc-leaf { padding: 8px 20px; font-size: 14px; }
  .oc-all { margin: 2px 12px 8px; padding: 8px 12px; font-size: 14px; }
  .oc-head { padding: 12px 20px; }
  .oc-head h2 { font-size: 16px; }
  .oc-foot { padding: 8px 20px; font-size: 12px; }
  .oc-sub { padding: 8px 20px 8px 32px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-panel, .oc-backdrop { transition: none; }
}

/* =========================================================
   Floating λίστα προσφοράς
   ========================================================= */
/* =========================================================
   Ραντεβού — appointment.visionadv.gr
   ========================================================= */
.appt-head p { max-width: 60ch; }

.appt { max-width: 780px; margin: 0 auto; padding: 8px 0 64px; }

/* Το header είναι κολλημένο πάνω. Χωρίς αυτό, το αυτόματο σκρολ στο επόμενο
   βήμα θα έφερνε τον τίτλο ακριβώς από κάτω του και θα φαινόταν μισός. */
.appt-step,
.appt-address,
.appt-slots { scroll-margin-top: 92px; }

.appt-step { margin-bottom: 44px; }
.appt-step h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 20px; margin: 0 0 20px;
}
.appt-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
}

/* ---- Επιλογή χώρου ---- */
.appt-locations { display: grid; gap: 12px; }
.appt-loc { display: block; cursor: pointer; }
.appt-loc input { position: absolute; opacity: 0; width: 0; height: 0; }
.appt-loc-body {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 20px;
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  background: var(--paper);
  transition: border-color .15s, background .15s;
}
.appt-loc:hover .appt-loc-body { border-color: var(--brand); }
.appt-loc input:checked + .appt-loc-body {
  border-color: var(--brand); background: var(--brand-lt);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.appt-loc input:focus-visible + .appt-loc-body { outline: 2px solid var(--brand); outline-offset: 2px; }
.appt-loc-icon { display: inline-flex; color: var(--brand); flex: none; margin-top: 2px; }
.appt-loc-icon svg { width: 22px; height: 22px; }
.appt-loc strong { display: block; font-size: 16px; }
.appt-loc-where, .appt-loc-note, .appt-loc-meta {
  display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; line-height: 1.5;
}
.appt-loc-meta { font-family: var(--font-mono); font-size: 12px; margin-top: 8px; }

.appt-address { margin-top: 20px; max-width: none; }
.appt-address[hidden] { display: none; }

/* ---- Ημέρα και ώρα ---- */
/* Η αριστερή στήλη πρέπει να χωράει το ημερολόγιο: επτά κελιά συν τα κενά
   και το περίγραμμα. Με στενότερη στήλη το πλέγμα ξεχείλιζε πάνω στις ώρες. */
.appt-when { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.appt-when .field { max-width: none; }
.appt-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }

.appt-slots {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 46px; align-content: flex-start;
}
.appt-slots .help { margin: 0; align-self: center; }
.appt-slot {
  border: 1.5px solid var(--line-2); background: var(--paper);
  border-radius: var(--r-sm); padding: 8px 16px; cursor: pointer;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  transition: border-color .12s, background .12s, color .12s;
}
.appt-slot:hover { border-color: var(--brand); color: var(--brand); }
.appt-slot.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- Ημερολόγιο ----

   Οι κλειστές μέρες ΔΕΝ κρύβονται: μένουν στη θέση τους, ξεθωριασμένες. Ο
   επισκέπτης πρέπει να βλέπει ότι το Σαββατοκύριακο υπάρχει και απλώς είναι
   κλειστό — αλλιώς μετράει λάθος τις μέρες. */
.appt-cal {
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  padding: 12px; background: var(--paper);
  /* Γεμίζει τη στήλη του αντί να έχει δικό του σταθερό πλάτος — έτσι δεν
     ξεχειλίζει ποτέ, όποιο κι αν είναι το πλάτος της οθόνης. */
  width: 100%; max-width: 340px; box-sizing: border-box;
}
.appt-cal[hidden] { display: none; }

.appt-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.appt-cal-title {
  font-weight: 600; font-size: 16px; color: var(--ink);
  text-align: center; flex: 1;
}
.appt-cal-nav {
  border: 1.5px solid var(--line-2); background: var(--paper);
  border-radius: var(--r-sm); width: 32px; height: 32px; flex: none;
  cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink);
  transition: border-color .12s, color .12s;
}
.appt-cal-nav:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.appt-cal-nav:disabled { opacity: .32; cursor: default; }

.appt-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.appt-cal-wd {
  text-align: center; font-size: 12px; font-weight: 600;
  color: var(--ink-2); padding: 4px 0 8px; letter-spacing: .04em;
}
.appt-cal-blank { visibility: hidden; }

.appt-cal-day {
  /* Χωρίς σταθερό min-height: σε στενή στήλη θα ανάγκαζε το πλέγμα να
     ξεχειλίσει. Το τετράγωνο σχήμα το κρατά το aspect-ratio. */
  aspect-ratio: 1; min-height: 32px; padding: 0;
  border: 1.5px solid transparent; background: none;
  border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
  transition: border-color .12s, background .12s, color .12s;
}
.appt-cal-day:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.appt-cal-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.appt-cal-day.active {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
/* Κλειστή μέρα: ορατή αλλά σβηστή, χωρίς δείκτη «πατήσου». */
.appt-cal-day:disabled { color: var(--ink-2); opacity: .35; cursor: default; }

/* ---- Σύνοψη και σφάλματα ---- */
.appt-summary {
  background: var(--brand-lt); border-radius: var(--r-sm);
  padding: 12px 16px; margin: 4px 0 16px; font-size: 14px; line-height: 1.55;
}
.appt-summary[hidden] { display: none; }
.appt-summary-dur { color: var(--ink-2); font-size: 14px; }

.appt-alert {
  padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 16px;
  font-size: 14px; line-height: 1.5;
}
.appt-alert[hidden] { display: none; }
.appt-alert.appt-error { background: #FCEBEA; color: #8C1D18; }

/* ---- Η σελίδα του ραντεβού (ticket) ---- */
.appt-ticket {
  max-width: 620px; margin: 50px auto 20px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 32px 32px 32px;
  box-shadow: var(--shadow);
}
.appt-ticket-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.appt-ticket-head h1 { margin: 4px 0 0; font-family: var(--font-mono); font-size: 26px; letter-spacing: .02em; }

.appt-status {
  flex: none; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.appt-status-pending   { background: #FDF1DF; color: #8A5A16; }
.appt-status-confirmed { background: #E4F2EC; color: #0E4E43; }
.appt-status-cancelled,
.appt-status-no_show    { background: #FCEBEA; color: #8C1D18; }
.appt-status-completed { background: var(--surface); color: var(--ink-2); }

.appt-ticket-note {
  margin: 0 0 24px; padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--surface); font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.appt-ticket-note.appt-ok { background: #E4F2EC; color: #0E4E43; }
.appt-ticket-note.appt-cancelled { background: #FCEBEA; color: #8C1D18; }

.appt-details { margin: 0; display: grid; gap: 2px; }
.appt-details > div {
  display: grid; grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.appt-details > div:last-child { border-bottom: 0; }
.appt-details dt { color: var(--ink-2); font-size: 14px; }
.appt-details dd { margin: 0; font-size: 16px; font-weight: 500; }

.appt-cancel {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.appt-cancel .help { margin: 0; flex: 1; min-width: 220px; }

@media (max-width: 720px) {
  .appt-when { grid-template-columns: 1fr; gap: 20px; }
  .appt-ticket { padding: 24px 20px 28px; margin-top: 32px; }
  .appt-ticket-head { flex-direction: column; gap: 12px; }
  .appt-details > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================
   Newsletter — banner εγγραφής

   Κάθεται κάτω δεξιά, πάνω από το κουμπί προσφοράς. Δεν σκεπάζει
   το περιεχόμενο και κλείνει με ένα κλικ.
   ========================================================= */
.nl-banner {
  position: fixed; right: 20px; bottom: 92px; z-index: 70;
  width: min(360px, calc(100vw - 40px));
  /*
   * Το ύψος ΠΡΕΠΕΙ να δένεται με το παράθυρο. Χωρίς αυτό, σε κοντή οθόνη
   * (κινητό σε οριζόντια θέση, μικρό παράθυρο) το banner ξεπερνά το πάνω
   * μέρος και σκεπάζει τη σελίδα — και επειδή είναι fixed, τα κλικ πάνε σ'
   * αυτό. Στα ραντεβού αυτό σήμαινε ότι δεν πατιόταν καμία ώρα.
   */
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 14px 44px rgba(0,0,0,.20);
  opacity: 0; transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.nl-banner.open { opacity: 1; transform: none; }
.nl-banner[hidden] { display: none; }

.nl-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-2); padding: 4px 8px;
}
.nl-close:hover { color: var(--ink); }

.nl-body { padding: 20px 20px 20px; }
.nl-body h2 { margin: 8px 0 8px; font-size: 16px; }
.nl-body > p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.nl-row { display: flex; gap: 8px; }
.nl-row input[type="email"] {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  padding: 12px 12px; font-family: inherit; font-size: 14px; background: var(--surface);
}
.nl-row input[type="email"]:focus { border-color: var(--brand); background: var(--paper); outline: none; }
.nl-row .btn { flex: none; }

.nl-consent {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  font-size: 12px; line-height: 1.5; color: var(--ink-2); cursor: pointer;
}
.nl-consent input { margin: 2px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--brand); }
.nl-consent a { color: var(--brand); font-weight: 600; }

.nl-msg { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.nl-msg[hidden] { display: none; }
.nl-ok { color: var(--brand); font-weight: 600; }
.nl-error { color: #B3261E; }

@media (max-width: 640px) {
  /* Πάνω από τα δύο floating κουμπιά, σε όλο το πλάτος */
  .nl-banner {
    left: 14px; right: 14px; bottom: 78px; width: auto;
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
  }
}

/* =========================================================
   Συγκατάθεση cookies

   Το banner κάθεται κάτω-κέντρο και ΔΕΝ σκεπάζει τη σελίδα: ο επισκέπτης
   μπορεί να διαβάσει πριν αποφασίσει. Τα δύο κουμπιά έχουν ίδιο βάρος —
   η απόρριψη δεν είναι κρυμμένη ούτε πιο δύσκολη από την αποδοχή.
   ========================================================= */
.consent-banner {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 90;
  width: min(880px, calc(100vw - 32px));
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
  overflow: hidden;
}
.consent-banner[hidden] { display: none; }

.cb-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 20px 24px;
}
/* Ο τίτλος του μπάνερ είναι 16px, δηλαδή μέγεθος κειμένου και όχι τίτλου —
   ο μπρούντζος των επικεφαλίδων δίνει εκεί 4,03:1 και δεν περνά. Παίρνει το
   κανονικό χρώμα κειμένου: είναι νομική ενημέρωση, πρέπει να διαβάζεται. */
.cb-text h2 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.cb-text p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.cb-text a { color: var(--brand); font-weight: 600; }

.cb-actions { display: flex; align-items: center; gap: 12px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.cb-link {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--ink-2); text-decoration: underline;
}
.cb-link:hover { color: var(--brand); }

.cb-detail {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px 24px 20px;
}
.cb-detail[hidden] { display: none; }
.cb-cat { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; }
.cb-cat + .cb-cat { border-top: 1px solid var(--line); }
.cb-cat input { margin: 3px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--brand); }
.cb-cat input:disabled { opacity: .55; cursor: not-allowed; }
.cb-cat strong { display: block; font-size: 14px; }
.cb-cat strong em { font-style: normal; font-weight: 400; color: var(--ink-2); font-size: 12px; }
.cb-cat > span > em { display: block; font-style: normal; font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.cb-detail-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }

@media (max-width: 720px) {
  .cb-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cb-actions { justify-content: stretch; }
  .cb-actions .btn { flex: 1; text-align: center; }
}

/* ---- Κουτάκι αποδοχής μέσα στις φόρμες ---- */
.consent-field { margin: 4px 0 20px; }
.consent-check {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.55; color: var(--ink-2); cursor: pointer;
}
.consent-check input {
  margin: 2px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--brand);
}
.consent-check a { color: var(--brand); font-weight: 600; }
.consent-check .req { color: var(--alert, #B3261E); }

/* ---- Νομικές σελίδες ---- */
.legal-layout {
  display: grid; grid-template-columns: 210px minmax(0,1fr) 240px;
  gap: 40px; padding: 44px 0 64px; align-items: start;
}
.legal-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.legal-nav a {
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-2);
}
.legal-nav a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.legal-nav a.active { background: var(--brand-lt); color: var(--brand); font-weight: 600; }

.legal-body { max-width: 74ch; }
.legal-body h2 {
  font-size: 20px; margin: 40px 0 12px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: 16px; margin: 28px 0 8px; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.72; color: var(--ink-2); }
.legal-body strong { color: var(--ink); }
.legal-body ul { padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--brand); }

.legal-meta { font-size: 14px; color: var(--ink-2); margin-top: 12px; }

.legal-note {
  background: var(--surface); border-left: 3px solid var(--brand);
  padding: 16px 20px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 20px 0;
}

.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; }
.legal-table th, .legal-table td {
  text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.55; vertical-align: top;
}
.legal-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.legal-table td { color: var(--ink-2); }

.legal-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.legal-badge-req { background: var(--brand-lt); color: var(--brand); }

.legal-aside {
  position: sticky; top: 96px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
}
.legal-aside h3 { margin: 0 0 8px; font-size: 16px; }
.legal-aside p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.legal-aside .btn { width: 100%; text-align: center; }
/* Το τηλέφωνο στο πλάι των νομικών σελίδων ήταν 282x22: αρκετά φαρδύ,
   πολύ κοντό. Ο σύνδεσμος τηλεφώνου είναι από τα λίγα πράγματα που
   πατιούνται εν κινήσει, με το ένα χέρι. */
.legal-aside-tel {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; margin-top: 12px; font-size: 14px;
}
.legal-aside-link {
  display: block; width: 100%; min-height: 44px; margin-top: 16px; padding-top: 16px;
  border: 0; border-top: 1px solid var(--line); background: none;
  font-family: inherit; font-size: 14px; color: var(--ink-2);
  text-decoration: underline; cursor: pointer; text-align: center;
}
.legal-aside-link:hover { color: var(--brand); }

.footer-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-legal-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit;
  text-decoration: underline; opacity: .85;
}
.footer-legal-btn:hover { opacity: 1; }

@media (max-width: 1000px) {
  .legal-layout { grid-template-columns: 1fr; gap: 28px; }
  .legal-nav, .legal-aside { position: static; }
  .legal-nav { flex-direction: row; flex-wrap: wrap; }
  .legal-table, .legal-table thead, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; margin-bottom: 12px; }
  .legal-table td { border: 0; padding: 5px 0; }
  .legal-table td::before {
    content: attr(data-label); display: block;
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-2); margin-bottom: 3px;
  }
}

/* =========================================================
   «Vision» — βοηθός συνομιλίας

   Κάθεται αριστερά από το κουμπί προσφοράς. Τα δύο floating κουμπιά έχουν
   επίτηδες διαφορετικό σχήμα και χρώμα: το ένα είναι ενέργεια (λίστα), το
   άλλο συζήτηση — δεν πρέπει να μοιάζουν.
   ========================================================= */
.chat-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border: none; border-radius: 999px;
  background: var(--brand); color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 26px rgba(0,0,0,.22);
  transition: background .16s ease, transform .16s ease, opacity .16s ease;
}
.chat-fab:hover { background: var(--brand-dk); transform: translateY(-2px); }
.chat-fab.hidden { opacity: 0; pointer-events: none; }
.cf-ico { display: inline-flex; }

.chat-panel {
  position: fixed; left: 20px; bottom: 20px; z-index: 61;
  width: min(390px, calc(100vw - 40px));
  max-height: min(600px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
  overflow: hidden;
  opacity: 0; transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}
.chat-panel.open { opacity: 1; transform: none; }
.chat-panel[hidden] { display: none; }

.cp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--ink); color: #fff; flex: none;
}
.cp-id { display: flex; align-items: center; gap: 12px; }
.cp-id strong { display: block; font-family: var(--font-display); font-size: 16px; }
.cp-sub { display: block; font-size: 12px; opacity: .72; margin-top: 1px; }
.cp-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.22); flex: none;
}
.cp-close {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 0 4px; opacity: .8;
}
.cp-close:hover { opacity: 1; }

.cp-log {
  flex: 1; overflow-y: auto; padding: 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface);
  min-height: 180px;
}
.cp-msg { display: flex; }
.cp-msg-user { justify-content: flex-end; }
.cp-bubble {
  max-width: 84%; padding: 12px 12px; border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.cp-msg-assistant .cp-bubble {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 5px;
}
.cp-msg-user .cp-bubble {
  background: var(--brand); color: #fff; border-bottom-right-radius: 5px;
}
.cp-bubble a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.cp-msg-user .cp-bubble a { color: #fff; }

.cp-handover {
  margin: 2px 0 0; text-align: center;
  font-size: 12px; color: var(--brand); font-weight: 600;
}

/* Οι τρεις τελείες όσο σκέφτεται */
.cp-dots { display: inline-flex; gap: 4px; padding: 3px 2px; }
.cp-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2);
  animation: cpBlink 1.1s infinite ease-in-out;
}
.cp-dots i:nth-child(2) { animation-delay: .16s; }
.cp-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes cpBlink { 0%, 80%, 100% { opacity: .28; } 40% { opacity: 1; } }

.cp-starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: var(--surface); }
.cp-starters[hidden] { display: none; }
.cp-starter {
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 999px; padding: 8px 12px; font-size: 14px; cursor: pointer;
  font-family: inherit;
}
.cp-starter:hover { border-color: var(--brand); color: var(--brand); }

.cp-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 12px; border-top: 1px solid var(--line); background: var(--paper); flex: none;
}
.cp-form textarea {
  flex: 1; resize: none; border: 1.5px solid var(--line-2); border-radius: 18px;
  padding: 8px 12px; font-family: inherit; font-size: 14px; line-height: 1.4;
  color: var(--ink); background: var(--surface); max-height: 110px; outline: none;
}
.cp-form textarea:focus { border-color: var(--brand); background: var(--paper); }
.cp-send {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cp-send:hover { background: var(--brand-dk); }
.cp-send:disabled { opacity: .5; cursor: default; }

.cp-note {
  margin: 0; padding: 8px 16px 12px; background: var(--paper);
  font-size: 12px; color: var(--ink-2); line-height: 1.45; text-align: center;
  border-top: 1px solid var(--line);
}

.quote-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 20px; border: none; border-radius: 999px;
  background: var(--ink); color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 26px rgba(0,0,0,.24);
  transition: background .16s ease, transform .16s ease;
}
.quote-fab:hover { transform: translateY(-2px); }
.quote-fab.has-items { background: var(--brand); }
.quote-fab.has-items:hover { background: var(--brand-dk); }
.qf-ico { display: inline-flex; }
.qf-ico svg { width: 19px; height: 19px; }
/* Ίδια ιστορία με τον μετρητή του header — σκούρο πέπλο, όχι ανοιχτό. */
.qf-count {
  background: rgba(0,0,0,.24); border-radius: 999px;
  padding: 2px 8px; font-family: var(--font-mono); font-size: 14px;
}

.quote-drawer { position: fixed; inset: 0; z-index: 70; }
.qd-backdrop {
  position: absolute; inset: 0; background: rgba(11,26,38,.5);
  opacity: 0; transition: opacity .26s ease;
}
.quote-drawer.open .qd-backdrop { opacity: 1; }

.qd-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -10px 0 44px rgba(0,0,0,.20);
}
.quote-drawer.open .qd-panel { transform: none; }
body.drawer-open { overflow: hidden; }

.qd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 24px 24px 20px; border-bottom: 1px solid var(--line);
}
.qd-head h2 { font-size: 20px; margin: 0; }
.qd-head .eyebrow { margin-bottom: 8px; }
.qd-close {
  background: none; border: none; cursor: pointer;
  font-size: 34px; line-height: 1; color: var(--ink-2);
  padding: 0 4px; flex: none;
}
.qd-close:hover { color: var(--ink); }

.qd-body { flex: 1; overflow-y: auto; padding: 8px 0; }

.qd-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.qd-row:last-child { border-bottom: none; }
.qd-row img {
  width: 58px; height: 58px; object-fit: contain; flex: none; padding: 3px;
  border-radius: var(--r-sm); background: var(--surface);
}
.qd-main { flex: 1; min-width: 0; }
.qd-name {
  display: block; color: var(--ink); font-weight: 600; font-size: 14px;
  line-height: 1.35; margin-bottom: 2px;
}
.qd-name:hover { color: var(--brand); }
.qd-variant {
  display: inline-block; margin: 2px 0; padding: 1px 8px;
  background: var(--brand-lt); color: var(--brand);
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
.qd-sku { display: block; font-size: 12px; color: var(--ink-3); }

/* Η παραλλαγή στη σελίδα της λίστας προσφοράς */
.basket-variant {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: var(--brand-lt); color: var(--brand);
  border-radius: 999px; font-size: 12px; font-weight: 600;
}

.qd-qty { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; }
.qd-qty button {
  width: 28px; height: 28px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink); cursor: pointer;
  border-radius: var(--r-sm); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.qd-qty button:hover { border-color: var(--brand); color: var(--brand); }
/* Η ποσότητα στο συρτάρι γράφεται πλέον κατευθείαν.

   Τα βελάκια του browser φεύγουν: έχουμε ήδη + και − δίπλα, και τα δικά του
   είναι 12px στόχοι που δεν πατιούνται με δάχτυλο. Το πεδίο κρατά όψη
   κειμένου — χωρίς πλαίσιο μέχρι να το πατήσει κανείς — για να μη γεμίσει
   κάδρα η λίστα. */
.qd-num {
  min-width: 52px; width: 52px; text-align: center;
  font-family: var(--font-mono); font-size: 14px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink);
  padding: 4px 2px; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.qd-num::-webkit-outer-spin-button,
.qd-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qd-num:hover { border-color: var(--line-2); }
.qd-num:focus { border-color: var(--brand); background: #fff; outline: none; }
.qd-qty button:disabled { opacity: .35; cursor: not-allowed; }
.qd-qty button:disabled:hover { border-color: var(--line-2); color: var(--ink); }
.qd-remove {
  background: none; border: none; cursor: pointer; flex: none;
  font-size: 20px; line-height: 1; color: var(--ink-3); padding: 4px 2px;
}
.qd-remove:hover { color: var(--alert); }

.qd-empty { text-align: center; padding: 56px 28px; color: var(--ink-2); }
.qd-empty h3 { color: var(--ink); font-size: 16px; margin-bottom: 8px; }
.qd-empty p { font-size: 14px; margin: 0; }

.qd-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.qd-foot-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.qd-link {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--ink-2);
  text-decoration: underline; padding: 2px;
}
.qd-link:hover { color: var(--ink); }

/* =========================================================
   Modal (άμεσο αίτημα προσφοράς)
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 85; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(11,26,38,.62);
  opacity: 0; transition: opacity .22s ease;
}
.modal.open .modal-backdrop { opacity: 1; }

.modal-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(.98);
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(11,26,38,.28);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  overflow: hidden;
}
.modal.open .modal-panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 24px 24px 16px;
}
.modal-head h2 { font-size: 20px; margin: 0; }
.modal-head .eyebrow { margin-bottom: 8px; }
.modal-close {
  background: none; border: none; cursor: pointer; flex: none;
  font-size: 34px; line-height: 1; color: var(--ink-2); padding: 0 4px;
}
.modal-close:hover { color: var(--ink); }

.modal-product {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px; background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.modal-product img {
  width: 56px; height: 56px; object-fit: contain; flex: none; padding: 3px;
  border-radius: var(--r-sm); background: var(--paper);
}
.modal-product strong { display: block; font-size: 16px; line-height: 1.35; }
.qq-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); margin-top: 3px;
}

.modal-body { padding: 24px 24px 28px; overflow-y: auto; }
.modal-alert {
  padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 20px;
  font-size: 14px; border: 1px solid;
  background: var(--alert-lt); color: var(--alert); border-color: #EDC7C0;
}
.modal-alert.is-success {
  background: var(--ok-lt); color: var(--ok); border-color: #BFDFD2;
}

/* Επιτυχία: κρύβουμε τα πεδία και αφήνουμε μόνο το μήνυμα */
.modal-body.is-done .field-row,
.modal-body.is-done .field,
.modal-body.is-done [data-qq-submit],
.modal-body.is-done .muted { display: none; }

@media (max-width: 560px) {
  .modal-panel {
    top: auto; bottom: 0; left: 0;
    transform: translateY(24px);
    width: 100%; max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .modal.open .modal-panel { transform: none; }
}

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 90; }
.lb-backdrop {
  position: absolute; inset: 0; background: rgba(6,10,14,.95);
  opacity: 0; transition: opacity .22s ease;
}
.lightbox.open .lb-backdrop { opacity: 1; }

.lb-shell {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px;
  opacity: 0; transform: scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}
.lightbox.open .lb-shell { opacity: 1; transform: none; }

/* Το figure παίρνει ρητό πλάτος. Με μόνο max-width θα συρρικνωνόταν στο
   περιεχόμενό του — και επειδή η εικόνα είναι max-width:100% του figure, τα δύο
   κατέρρεαν το ένα πάνω στο άλλο και η φωτογραφία άνοιγε ελάχιστη. */
.lb-figure {
  margin: 0;
  width: min(1100px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* Χωρίς ρητό width: η εικόνα κλιμακώνεται μόνη της μέσα στα δύο όρια και το
   κουτί της ταιριάζει ακριβώς με την αναλογία της — κανένα κενό γύρω της. */
.lb-figure img {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  width: auto;
  height: auto;
  border-radius: var(--r);
}
.lb-figure figcaption {
  color: #E4E8EC; font-size: 14px;
  font-family: var(--font-mono); letter-spacing: .02em; text-align: center;
}

.lb-close {
  position: absolute; top: 18px; right: 22px;
  background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,.24); }

.lb-nav {
  flex: none; background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center;
}
.lb-nav:hover { background: rgba(255,255,255,.24); }
.lb-nav svg { width: 22px; height: 22px; }

@media (max-width: 640px) {
  /* Στο κινητό τα βελάκια πάνε πάνω από την εικόνα αντί να τρώνε πλάτος από
     δίπλα της — αλλιώς η φωτογραφία περιοριζόταν σε λίγα εκατοστά. */
  .lb-shell { padding: 64px 12px 80px; gap: 0; }
  .lb-figure { width: 100%; }
  .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; background: rgba(255,255,255,.2);
  }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  /* Η λεζάντα εδώ είναι απόλυτα τοποθετημένη, οπότε δεν σπρώχνει τίποτα.
     Χωρίς δικό της χώρο θα καθόταν πάνω στη μπάρα zoom, που τώρα βρίσκεται
     μέσα στη ροή. Το padding της κρατά τη λωρίδα. */
  .lb-figure { padding-bottom: 36px; }
  .lb-figure figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
  }
}

/* =========================================================
   Ειδοποιήσεις
   ========================================================= */
.toast-stack {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 80; display: grid; gap: 8px; width: max-content; max-width: 92vw;
}
.toast {
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: var(--r-sm);
  font-size: 14px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
}
.toast.in { opacity: 1; transform: none; }
.toast-error { background: var(--alert); }

/* =========================================================
   Hero (home)
   ========================================================= */
.hero {
  background:
    radial-gradient(1100px 520px at 78% -10%, var(--glow), transparent 60%),
    linear-gradient(158deg, var(--dark-1) 0%, var(--dark-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Με φωτογραφία στο banner: η εικόνα από κάτω, το σκούρο στρώμα από πάνω.
   Το στρώμα δεν είναι διακόσμηση — χωρίς αυτό τα λευκά γράμματα χάνονται
   πάνω σε ανοιχτόχρωμο σημείο της φωτογραφίας. */
.hero.has-photo {
  /* ΤΟ ΣΤΡΩΜΑ ΑΚΟΛΟΥΘΕΙ ΤΗΝ ΠΑΛΕΤΑ ΤΟΥ ΘΕΜΑΤΟΣ.

     Ήταν σκληρά γραμμένο rgba(18,24,26) — ψυχρό μπλε-γκρι (B > R), υπόλειμμα
     της παλιάς τιρκουάζ ταυτότητας. Το banner ΧΩΡΙΣ φωτογραφία έπαιρνε ήδη
     σωστά το ζεστό λαδί από τις μεταβλητές· με φωτογραφία έπεφτε στο ψυχρό.

     Η απογραφή χρώματος το έδειξε καθαρά: το ψυχρό αυτό στρώμα κάλυπτε
     ΤΟ 25% της επιφάνειας της αρχικής — δηλαδή το μεγαλύτερο μονοκόμματο
     χρώμα της σελίδας δεν ανήκε στην παλέτα.

     Το color-mix κρατά το ίδιο βάθος σκίασης, με τη σωστή απόχρωση. */
  background:
    linear-gradient(158deg,
      color-mix(in srgb, var(--dark-2) 90%, transparent) 0%,
      color-mix(in srgb, var(--dark-1) 74%, transparent) 55%,
      color-mix(in srgb, var(--dark-2) 88%, transparent) 100%),
    var(--hero-photo) center / cover no-repeat;
}
/* subtle repeating V motif */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.hero .inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 84px var(--gut) 76px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero p.lede { color: var(--on-dark-muted); max-width: 52ch; margin-bottom: 32px; font-size: 20px; }
.hero .btn-group { margin-bottom: 8px; }

.hero-panel {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: 32px 32px;
  backdrop-filter: blur(2px);
}
/* h2 ΚΑΙ h3: η επικεφαλίδα του πάνελ έγινε h2 για τη σωστή ιεραρχία (είναι η
   πρώτη μετά την h1). Χωρίς το λευκό, ως h2 έπαιρνε τον μπρούντζο των τίτλων
   πάνω στο σκούρο banner — 2,57:1, δηλαδή δυσανάγνωστη.

   Το ίδιο λάθος με το footer h4→h3. Και τις δύο φορές το έπιασε ο έλεγχος
   αντίθεσης· εδώ μόνο αφού διορθώθηκε ο σαρωτής να διαβάζει color-mix. */
.hero-panel h2,
.hero-panel h3 { color: #fff; font-size: 16px; margin-bottom: 20px; }
.hero-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.hero-panel li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--on-dark-soft); font-size: 16px; line-height: 1.5;
}
.hero-panel li::before {
  content: ""; flex: none; margin-top: 8px;
  width: var(--mark-w); height: var(--mark-h);
  background: var(--mark-bg); color: var(--on-dark-accent);
  clip-path: var(--mark-clip); border-radius: var(--mark-radius);
}

/* Stat strip under hero */
.stat-strip { background: var(--footer-bg); color: #fff; }
.stat-strip .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  padding-top: 32px; padding-bottom: 32px;
}
.stat .num {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  color: var(--on-dark-accent); line-height: 1.1; letter-spacing: -0.02em;
}
.stat .label { font-size: 14px; color: var(--on-dark-dim); margin-top: 4px; }

/* =========================================================
   Sections
   ========================================================= */
.section { padding: 80px 0; }
.section-alt { background: var(--surface); }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: 16px; margin-bottom: 0; }

.section-title-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.section-title-row h2 { font-size: 26px; margin: 0; }
.result-count {
  color: var(--ink-2); font-size: 14px;
  font-family: var(--font-mono);
}

/* =========================================================
   Zone cards — hotel spaces (home signature block)
   ========================================================= */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.zone-card {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 24px 24px;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.zone-card:hover {
  text-decoration: none;
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.zone-card .zn {
  font-family: var(--font-mono);
  font-size: 12px;
  /* 12px: μέγεθος κειμένου, όχι τίτλου — θέλει το «κείμενο» του τονισμού. */
  color: var(--accent-text);
  letter-spacing: .1em;
}
.zone-card h3 { margin: 12px 0 8px; color: var(--ink); font-size: 20px; }
.zone-card p { color: var(--ink-2); font-size: 14px; margin: 0; line-height: 1.55; }
.zone-card .go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--brand);
}
.zone-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.zone-card:hover::before { transform: scaleX(1); }

/* =========================================================
   Service cards
   ========================================================= */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.service-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 32px 28px;
}
.section-alt .service-card { box-shadow: var(--shadow-sm); }
.service-card .ico {
  width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--brand-lt); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 20px;
}
.service-card .ico svg { width: 24px; height: 24px; }
.service-card h3 { margin-bottom: 8px; }
.service-card p { color: var(--ink-2); font-size: 16px; margin: 0; }

/* Numbered process steps */
.steps { display: grid; gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step { background: var(--paper); padding: 28px 32px; display: grid; grid-template-columns: 58px 1fr; gap: 24px; align-items: start; }
.step .n {
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  color: var(--accent); line-height: 1; letter-spacing: -0.03em;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); margin: 0; font-size: 16px; }

/* =========================================================
   Feature rows (about page)
   ========================================================= */
.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 20px 0;
}
.feature-row + .feature-row { margin-top: 40px; }
.feature-row.flip .fr-text { order: 2; }
.feature-row p { color: var(--ink-2); }
.fr-visual {
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 300px at 70% 0%, var(--glow), transparent 65%),
    linear-gradient(158deg, var(--dark-1), var(--dark-2));
  min-height: 300px;
  display: grid; place-items: center;
  padding: 40px;
  position: relative; overflow: hidden;
}
.fr-visual::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px);
}
.fr-visual .quote {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: #fff; text-align: center; line-height: 1.4; letter-spacing: -0.015em;
}
.fr-visual .quote span { color: var(--on-dark-accent); }

/* Με φωτογραφία: φεύγει το σκούρο πλαίσιο και το διαγώνιο μοτίβο, μένει
   μόνο η εικόνα. Εδώ το «cover» είναι σωστό — είναι εικαστικό ενότητας,
   όχι φωτογραφία προϊόντος (εκεί τίποτα δεν κόβεται ποτέ). */
.fr-visual.has-photo {
  background: var(--surface);
  padding: 0;
  min-height: 0;
  aspect-ratio: 4 / 3;
}
.fr-visual.has-photo::after { content: none; }
.fr-visual.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Value list with V ticks */
.tick-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.tick-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.tick-list li::before {
  content: ""; flex: none; margin-top: 8px;
  width: var(--mark-w); height: var(--mark-h);
  background: var(--mark-bg); color: var(--accent);
  clip-path: var(--mark-clip); border-radius: var(--mark-radius);
}
.tick-list li strong { color: var(--ink); }

/* =========================================================
   Κάρτες κατηγοριών της αρχικής — με φωτογραφία προϊόντος
   Η εικόνα είναι φωτογραφία προϊόντος: contain, ποτέ κομμένη. Το alt είναι
   κενό γιατί το όνομα της κατηγορίας ακολουθεί αμέσως — αλλιώς ο αναγνώστης
   οθόνης θα το διάβαζε δύο φορές.
   ========================================================= */
.cat-tiles { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-tile { padding: 14px 14px 18px; display: flex; flex-direction: column; }
.cat-tile .ct-img {
  display: block; aspect-ratio: 4 / 3; margin-bottom: 14px;
  background: #fff; border-radius: calc(var(--r) - 4px); overflow: hidden;
}
.cat-tile .ct-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: 10px; box-sizing: border-box;
  transition: transform .25s ease;
}
.cat-tile:hover .ct-img img { transform: scale(1.04); }
.cat-tile .ct-name {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  line-height: 1.3; color: var(--ink); padding: 0 4px;
}
.cat-tile .ct-count { margin-top: 4px; padding: 0 4px; font-size: 14px; color: var(--ink-2); }
.cat-tiles-more { margin: 26px 0 0; }
.cat-tiles-more a { font-weight: 600; color: var(--accent-text, var(--brand)); }
@media (prefers-reduced-motion: reduce) {
  .cat-tile .ct-img img { transition: none; }
  .cat-tile:hover .ct-img img { transform: none; }
}
@media (max-width: 1024px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cat-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 380px)  { .cat-tile .ct-name { font-size: 15px; } }

/* =========================================================
   Πώς δουλεύουμε — τέσσερα βήματα σε σειρά
   Λίστα <ol>: ο αναγνώστης οθόνης ανακοινώνει «1 από 4». Ο μεγάλος
   αριθμός είναι διακοσμητικός (aria-hidden) — τη σειρά τη λέει η λίστα.
   Ο αριθμός σε --accent-text: στο ADV #79683C, 5,1:1 πάνω στο --surface.
   ========================================================= */
.how-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.how-step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 24px 26px;
}
.how-step::before {                       /* η χρυσή γραμμή πάνω από κάθε βήμα */
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
}
.how-n {
  display: block; margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 34px;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--accent-text, var(--accent));
}
.how-step h3 { font-size: 18px; margin: 0 0 8px; }
.how-step p { margin: 0; color: var(--ink-2); font-size: 15px; }
.how-cta { margin: 32px 0 0; }
@media (max-width: 1024px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how-steps { grid-template-columns: 1fr; gap: 14px; }
  .how-step { padding: 22px 20px; }
  .how-cta .btn { width: 100%; justify-content: center; }
}
.cta-band .btn .icon, .cta-band .btn svg { width: 18px; height: 18px; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  background:
    radial-gradient(800px 400px at 20% 0%, var(--glow), transparent 60%),
    linear-gradient(120deg, var(--dark-1), var(--dark-2));
  color: #fff;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 20px);
}
.cta-band .wrap {
  position: relative; z-index: 1;
  padding-top: 64px; padding-bottom: 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: var(--on-dark-muted); margin: 0; max-width: 56ch; }

/* =========================================================
   Promo band — παραπομπή σε ξεχωριστό site.
   Σκόπιμα ανοιχτόχρωμο, ώστε να ξεχωρίζει από το σκούρο CTA
   στο τέλος της σελίδας και να διαβάζεται ως «άλλος προορισμός».
   ========================================================= */
.promo-band {
  background: var(--accent-lt);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--line);
}
.promo-band .wrap {
  padding-top: 44px; padding-bottom: 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.promo-text { flex: 1 1 420px; }
.promo-text h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 12px; }
.promo-text p { color: var(--ink-2); margin: 0; max-width: 58ch; }
.promo-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.promo-note { font-size: 14px; color: var(--ink-2); }

/* =========================================================
   Page head (inner pages)
   ========================================================= */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.page-head .wrap { padding-top: 56px; padding-bottom: 48px; }
.page-head h1 { max-width: 20ch; margin-bottom: 12px; }
.page-head p { color: var(--ink-2); font-size: 16px; max-width: 62ch; margin: 0; }
.page-head .head-flex {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
}
.page-head .stamp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 12px 16px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  letter-spacing: .06em;
}

.breadcrumb {
  font-size: 14px; color: var(--ink-2); margin-bottom: 16px;
  font-family: var(--font-mono);
}
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--brand); }

/* =========================================================
   Search + category tabs (catalogue)
   ========================================================= */
.search-bar { border-bottom: 1px solid var(--line); background: var(--paper); }
.search-bar form {
  display: flex; gap: 12px;
  padding: 16px var(--gut); max-width: var(--max); margin: 0 auto;
}
.search-bar input[type="text"] {
  flex: 1; padding: 12px 16px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 16px; font-family: inherit; background: #fff; color: var(--ink);
}
.search-bar input[type="text"]:focus { border-color: var(--brand); }
.search-bar button {
  padding: 12px 24px; background: var(--brand); color: #fff; border: none;
  border-radius: var(--r-sm); font-weight: 700; font-family: var(--font-display);
  font-size: 16px; cursor: pointer;
}
.search-bar button:hover { background: var(--brand-dk); }

.category-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 20px var(--gut) 4px; max-width: var(--max); margin: 0 auto;
  scrollbar-width: thin;
}
.category-tabs a {
  white-space: nowrap; padding: 8px 16px;
  background: var(--paper); color: var(--ink-2);
  border: 1.5px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: all .15s ease;
}
.category-tabs a:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }
.category-tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* =========================================================
   Κατάλογος: πλευρικά φίλτρα + αποτελέσματα
   ========================================================= */
.catalogue-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 36px;
  padding: 32px 0 48px;
  align-items: start;
}

/* Το κουμπί φίλτρων φαίνεται μόνο σε μικρές οθόνες */
.filter-toggle {
  display: none;
  align-items: center; gap: 8px;
  background: var(--paper); border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm); padding: 12px 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--ink); cursor: pointer; width: 100%;
  margin-bottom: 20px;
}
.filter-toggle .filter-count {
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-family: var(--font-mono);
}

.filters {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  position: sticky;
  top: 92px;              /* κάτω από το sticky header */
  max-height: calc(100vh - 112px);
  overflow-y: auto;
}
.filter-block { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.filter-block:last-of-type { border-bottom: none; margin-bottom: 8px; }
.filter-label {
  display: block; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}

.filter-search { display: flex; gap: 8px; }
.filter-search input {
  flex: 1; min-width: 0; padding: 12px 12px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.filter-search input:focus { border-color: var(--brand); }
.filter-search button {
  flex: none; width: 40px; border: none; cursor: pointer;
  background: var(--brand); color: #fff; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.filter-search button:hover { background: var(--brand-dk); }
.filter-search svg { width: 17px; height: 17px; }

.filter-tree, .filter-subtree { list-style: none; margin: 0; padding: 0; }
.filter-subtree {
  margin: 2px 0 8px 16px; padding-left: 12px;
  border-left: 2px solid var(--line);
}
.filter-radio {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 4px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 14px; color: var(--ink-2);
  line-height: 1.4;
}
.filter-radio:hover { background: var(--surface); color: var(--ink); }
.filter-radio input { margin: 2px 0 0; flex: none; accent-color: var(--brand); }

/* Οι κύριες κατηγορίες με έντονα γράμματα. Με 108 εγγραφές στη στήλη, το βάρος
   ξεχωρίζει τα 16 κεφάλαια από τις υποκατηγορίες τους — η εσοχή μόνη της
   χάνεται όταν ο κατάλογος είναι τόσο μεγάλος.

   ΠΡΟΣΟΧΗ ΣΤΗ ΣΕΙΡΑ: μπαίνει ΠΡΙΝ τον κανόνα του επιλεγμένου, γιατί έχουν
   ίδια βαρύτητα — αν ήταν από κάτω, η επιλεγμένη κύρια κατηγορία θα έχανε
   το χρώμα της μάρκας. */
.filter-tree > li > .filter-radio > span { font-weight: 600; color: var(--ink); }

.filter-radio input:checked + span { color: var(--brand); font-weight: 600; }

.filter-actions { display: grid; gap: 12px; justify-items: center; }
.filter-reset { font-size: 14px; color: var(--ink-2); }

/* Πλήθος ανά κατηγορία στη σελίδα αναζήτησης. Το span με το όνομα είναι flex
   ώστε ο αριθμός να πηγαίνει δεξιά και οι στήλες να ευθυγραμμίζονται. */
.filter-radio > span { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.facet-count {
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--ink-2); background: var(--surface);
  border-radius: 999px; padding: 1px 8px;
}
.filter-radio input:checked + span .facet-count { background: var(--brand-lt); color: var(--brand); }

.result-scope { color: var(--ink-2); font-weight: 400; }
.help-note { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ---- Μπάρα αποτελεσμάτων ---- */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
/* Ταξινόμηση. Κάθεται ανάμεσα στο πλήθος και στον διακόπτη στηλών, με το
   ίδιο μικρό κεφαλαίο λεκτικό ώστε οι δύο έλεγχοι να διαβάζονται ως ζευγάρι
   και όχι ως δύο άσχετα στοιχεία. Σε στενή οθόνη πέφτει σε δική της σειρά και
   απλώνεται, γιατί οι ετικέτες των επιλογών είναι μεγάλες. */
.sort-switch { display: flex; align-items: center; gap: 8px; }
.sort-label {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sort-switch select {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm); padding: 8px 32px 8px 12px;
  cursor: pointer; appearance: none;
  /* Το βελάκι ζωγραφίζεται εδώ ώστε να μη διαφέρει από browser σε browser. */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sort-switch select:hover { border-color: var(--brand); }
.sort-switch select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.sort-go { font: inherit; font-size: 14px; padding: 8px 12px; cursor: pointer;
           border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.sort-go[hidden] { display: none; }

@media (max-width: 620px) {
  .sort-switch { width: 100%; }
  .sort-switch select { flex: 1; }
}

.col-switch { display: flex; align-items: center; gap: 8px; }
.col-switch-label {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  margin-right: 4px;
}
.col-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; padding: 0;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer;
}
.col-btn:hover { border-color: var(--line-2); }
.col-btn.active { border-color: var(--brand); background: var(--brand-lt); }
.col-icon { display: flex; gap: 2px; align-items: center; }
.col-icon i {
  display: block; width: 3px; height: 14px; border-radius: 1px;
  background: var(--ink-3);
}
.col-btn.active .col-icon i { background: var(--brand); }
.col-icon-4 i { height: 12px; }

/* ---- Σταδιακή φόρτωση ---- */
.load-more-zone { text-align: center; padding: 28px 0 8px; }
.load-progress {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-3); margin: 12px 0 0;
}
[data-product-grid][aria-busy="true"] { opacity: .5; transition: opacity .15s ease; }
.load-more-zone .btn[disabled] { opacity: .6; }

@media (max-width: 1000px) {
  /* minmax(0, 1fr) και όχι σκέτο 1fr.

     Το «1fr» δεν επιτρέπει στη στήλη να μικρύνει κάτω από το min-content του
     περιεχομένου της. Στα 320px οι κάρτες προϊόντων απαιτούσαν 5px παραπάνω,
     και η στήλη μεγάλωνε αντί να τις στριμώξει — το κουμπί των φίλτρων και
     όλο το πλέγμα αποτελεσμάτων ξεχείλιζαν από το πλαίσιο.

     Το minmax(0, …) λέει «μπορείς να πέσεις ως το μηδέν», και τότε το
     πλέγμα των καρτών κάνει τη δουλειά του κανονικά. Ίδιο μοτίβο με τη
     μπάρα του header παραπάνω, για τον ίδιο ακριβώς λόγο. */
  .catalogue-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filter-toggle { display: inline-flex; }
  .filters {
    position: static; max-height: none; overflow: visible;
    margin-bottom: 24px;
  }
  .filters:not(.open) { display: none; }
}

/* =========================================================
   Product grid
   ========================================================= */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

/* Ρητός αριθμός στηλών όταν ο επισκέπτης επιλέγει προβολή στον κατάλογο.
   Το minmax(0,1fr) αποτρέπει τις κάρτες να ξεχειλίζουν σε στενές οθόνες. */
.product-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1240px) {
  .product-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .product-grid.cols-3, .product-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .product-grid.cols-3, .product-grid.cols-4 { grid-template-columns: 1fr; }
}
.product-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  /* Το άγκυρο για τον απλωμένο σύνδεσμο παρακάτω. */
  position: relative;
}

/* ΟΛΗ Η ΚΑΡΤΑ ΠΑΤΙΕΤΑΙ.

   Ο σύνδεσμος του τίτλου απλώνεται πάνω σε ολόκληρη την κάρτα με ένα κενό
   ψευδοστοιχείο. Έτσι το κλικ δουλεύει παντού — εικόνα, όνομα, τιμή, κενός
   χώρος — χωρίς να τυλίξουμε την κάρτα σε <a>, που θα ήταν άκυρο HTML γιατί
   μέσα της υπάρχει φόρμα με κουμπί.

   Πλεονέκτημα και για την προσβασιμότητα: ο αναγνώστης οθόνης ακούει ΕΝΑΝ
   σύνδεσμο με το όνομα του προϊόντος, αντί για τρεις που πηγαίνουν στο ίδιο
   μέρος (εικόνα, τίτλος, τιμή). */
.product-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Ό,τι είναι πραγματικά διαδραστικό ανεβαίνει ΠΑΝΩ από τον απλωμένο σύνδεσμο,
   αλλιώς το «+ Στην παραγγελία» και το «Ρωτήστε μας» θα άνοιγαν το προϊόν. */
.product-card form,
.product-card .body > .btn,
.product-card > .btn {
  position: relative;
  z-index: 2;
}

/* Το πλαίσιο εστίασης ανήκει σε ολόκληρη την κάρτα, όχι στις τρεις λέξεις του
   τίτλου — αλλιώς όποιος πλοηγείται με πληκτρολόγιο δεν βλέπει πού βρίσκεται. */
.product-card:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.product-card .card-link:focus-visible { outline: none; }
.product-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--line-2);
}
.product-card .thumb {
  /* Τετράγωνο κουτί με ολόκληρη την εικόνα μέσα.
     Οι φωτογραφίες του καταλόγου είναι ανάμεικτες — κάθετες 1000×1300,
     οριζόντιες 1300×1000 και τετράγωνες. Το τετράγωνο κρατά τις κάρτες
     ισοϋψείς και δίνει στα δύο σχήματα ισορροπημένο περιθώριο. */
  aspect-ratio: 1/1; background: #fff;
  position: relative; overflow: hidden; display: block;
}
.product-card .thumb img {
  width: 100%; height: 100%;
  object-fit: contain;          /* ποτέ κομμένο προϊόν */
  padding: 12px;
  transition: transform .3s ease;
}
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .code-tab {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: var(--chip-bg); color: #fff;
  font-family: var(--font-mono); font-size: 12px;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .03em;
  backdrop-filter: blur(4px);
}
.product-card .body { padding: 16px 20px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card .cat-label {
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .09em; color: var(--accent-text);
}
.product-card h3 {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  margin: 0; line-height: 1.4; letter-spacing: 0;
}
.product-card h3 a { color: var(--ink); }
.product-card h3 a:hover { color: var(--brand); text-decoration: none; }
/* Τα sites δεν εμφανίζουν τιμές. Στη θέση τους η σύντομη περιγραφή,
   κομμένη στις δύο γραμμές ώστε οι κάρτες να μένουν ισοϋψείς. */
.product-card .card-note {
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
  margin: 2px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card form { padding: 0 20px 20px; }

/* Empty state */
.empty-state { text-align: center; padding: 72px 24px; color: var(--ink-2); }
/* Η ΕΠΙΚΕΦΑΛΙΔΑ ΤΟΥ ΑΔΕΙΟΥ ΚΟΥΤΙΟΥ ΔΕΝ ΕΧΕΙ ΣΤΑΘΕΡΟ ΕΠΙΠΕΔΟ.

   Όταν το κουτί ΕΙΝΑΙ η σελίδα — «το προϊόν δεν βρέθηκε» — η επικεφαλίδα του
   είναι η πρώτη της σελίδας, άρα h1. Όταν κάθεται μέσα σε σελίδα που έχει ήδη
   h1, είναι h2. Και στις δύο περιπτώσεις πρέπει να ΦΑΙΝΕΤΑΙ ίδια: αλλάζει η
   σημασία για τον αναγνώστη οθόνης, όχι η εμφάνιση για το μάτι. */
.empty-state h1,
.empty-state h2,
.empty-state h3 { color: var(--ink); font-size: 20px; margin: 0 0 8px; }

/* =========================================================
   Product detail
   ========================================================= */
.product-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 52px;
  padding: 44px 0 72px;
}

/*
 * ΤΑ ΠΑΙΔΙΑ ΤΟΥ ΠΛΕΓΜΑΤΟΣ ΠΡΕΠΕΙ ΝΑ ΜΠΟΡΟΥΝ ΝΑ ΣΤΕΝΕΨΟΥΝ.
 *
 * Ένα στοιχείο πλέγματος έχει από προεπιλογή «min-width: auto», δηλαδή δεν
 * κατεβαίνει κάτω από το ελάχιστο πλάτος του περιεχομένου του. Η λωρίδα
 * μικρογραφιών είναι 5 τετράγωνα των 74px, άρα 410px — και τα επέβαλλε σε
 * ολόκληρη τη στήλη. Σε οθόνη 375px η σελίδα έβγαινε 53px έξω και κυλούσε
 * οριζόντια ΟΛΟΚΛΗΡΗ, με τον τίτλο και την τιμή να κόβονται.
 *
 * Με μηδενικό ελάχιστο, η στήλη στενεύει κανονικά και η λωρίδα κυλά μόνη της
 * — έχει ήδη overflow-x: auto γι' αυτόν ακριβώς τον λόγο.
 */
.product-detail > * { min-width: 0; }
.product-detail .gallery {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; position: relative;
}
.product-detail .gallery img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.product-detail .code-tab {
  position: absolute; top: 16px; left: 16px;
  background: var(--chip-bg); color: #fff;
  font-family: var(--font-mono); font-size: 12px;
  padding: 8px 12px; border-radius: 999px; backdrop-filter: blur(4px);
}
/* Γκαλερί: κύρια εικόνα + λωρίδα μικρογραφιών ανά παραλλαγή */
.gallery-zoom {
  display: block; width: 100%; padding: 0; border: none;
  background: none; cursor: zoom-in; position: relative;
}
.gallery-zoom img {
  width: 100%; aspect-ratio: 1/1;
  object-fit: contain;          /* ολόκληρο το προϊόν, χωρίς περικοπή */
  padding: 16px;
  background: #fff;
  display: block;
}
.zoom-hint {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--chip-bg); color: #fff;
  padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  opacity: 0; transition: opacity .16s ease; backdrop-filter: blur(4px);
}
.gallery-zoom:hover .zoom-hint,
.gallery-zoom:focus-visible .zoom-hint { opacity: 1; }
.zoom-hint svg { width: 15px; height: 15px; }

.thumb-strip {
  display: flex; gap: 12px; margin-top: 12px;
  overflow-x: auto; padding-bottom: 4px;
}
.thumb-item {
  flex: none; width: 74px; height: 74px; padding: 0;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; overflow: hidden;
  transition: border-color .15s ease;
}
.thumb-item img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.thumb-item:hover { border-color: var(--line-2); }
.thumb-item.active { border-color: var(--brand); }

/* Επιλογή παραλλαγής */
/* Η ΕΠΙΛΟΓΗ ΧΡΩΜΑΤΟΣ ΕΙΝΑΙ ΔΙΚΗ ΤΗΣ ΕΝΟΤΗΤΑ.

   Καθόταν κολλημένη στην περιγραφή από πάνω της και διαβαζόταν ως συνέχειά
   της — ο επισκέπτης δεν καταλάβαινε ότι εδώ πρέπει να ΕΠΙΛΕΞΕΙ κάτι. Παίρνει
   δικό της κουτί με φόντο και πλαίσιο, όπως το κουτί της τιμής από κάτω, ώστε
   η σελίδα να διαβάζεται ως τρία ξεχωριστά βήματα: τι είναι → διάλεξε χρώμα →
   πόσα και πόσο. */
.variant-picker {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r);
  padding: 16px 20px;
  margin: 24px 0;
}
/*
 * ΤΟ LEGEND ΠΡΕΠΕΙ ΝΑ ΜΠΕΙ ΜΕΣΑ ΣΤΟ ΠΛΑΙΣΙΟ.
 *
 * Από προεπιλογή το <legend> ενός <fieldset> δεν είναι κανονικό παιδί: ο
 * browser το κάθεται ΠΑΝΩ στη γραμμή του πλαισίου, κόβοντάς την, και αγνοεί
 * το padding του fieldset. Μόλις μπήκε περίγραμμα, η ετικέτα «ΧΡΩΜΑ Black»
 * βγήκε έξω από το κουτί.
 *
 * Το float το κάνει κανονικό στοιχείο ροής — είναι ο μοναδικός τρόπος που
 * δουλεύει σε όλους τους browsers χωρίς να χαθεί η σημασιολογία του fieldset,
 * που τη χρειάζονται οι αναγνώστες οθόνης για να ανακοινώσουν την ομάδα.
 * Το «clear» στο επόμενο αδέρφι εμποδίζει τα δείγματα να ανέβουν δίπλα του.
 */
.variant-picker legend {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.variant-picker legend + * { clear: both; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option { position: relative; cursor: pointer; }
.variant-option input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.variant-option span {
  display: inline-block; padding: 8px 16px;
  border: 1.5px solid var(--line-2); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: all .15s ease;
}
.variant-option:hover span { border-color: var(--brand); color: var(--brand); }
.variant-option input:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.variant-option input:focus-visible + span {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* Χρωματικά δείγματα.
   Το όνομα του χρώματος δεν χωράει μέσα στην κουκκίδα, οπότε φαίνεται δίπλα
   στον τίτλο και ενημερώνεται με την επιλογή — και ως title/aria-label, ώστε
   να το διαβάζουν και οι αναγνώστες οθόνης. */
/* Το όνομα του χρώματος δεν ακολουθεί τα κεφαλαία της ετικέτας: είναι
   περιεχόμενο, όχι τίτλος, και «ΜΠΛΕ ΡΟΥΑ» φωνάζει χωρίς λόγο. */
.variant-current {
  font-weight: 700; color: var(--ink); margin-left: 8px;
  font-size: 14px; text-transform: none; letter-spacing: 0;
}
.swatch-row { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { position: relative; cursor: pointer; line-height: 0; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch-dot {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 0 2px #fff;
  transition: box-shadow .15s ease, transform .12s ease;
}
.swatch:hover .swatch-dot { transform: scale(1.08); }
.swatch input:checked + .swatch-dot {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--brand);
  border-color: var(--brand);
}
.swatch input:focus-visible + .swatch-dot {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

.product-detail .info h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.product-detail .price-row {
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  color: var(--brand); margin: 16px 0 24px; letter-spacing: -0.02em;
}
.product-detail .desc { color: var(--ink-2); margin-bottom: 28px; }
.meta-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: 14px; }
.meta-table td { padding: 12px 0; border-bottom: 1px solid var(--line); }
.meta-table td:first-child { color: var(--ink-2); width: 170px; }
.qty-form {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px 20px;
}

/* Μέσα στο κουτί της τιμής το πλαίσιο περισσεύει: το κουτί ΕΙΝΑΙ ήδη πλαίσιο.
   Η ποσότητα κάθεται κάτω από τον πίνακα σαν συνέχειά του, χωρισμένη με μια
   γραμμή αντί για δεύτερο κάδρο. */
.price-box .qty-form {
  background: transparent; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 16px 0 0; margin-top: 16px;
  gap: 12px;
}
.price-box .qty-form label {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  letter-spacing: .02em;
}
/* Τα δύο κουμπιά μαζί, και σε μία σειρά με το πεδίο όσο χωράνε. */
.qty-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.qty-actions .btn { flex: 1 1 auto; white-space: nowrap; }

.price-box .qty-summary {
  margin-top: 12px; font-size: 14px;
}

@media (max-width: 560px) {
  /* Σε στενή οθόνη η ποσότητα παίρνει τη δική της σειρά και τα κουμπιά
     απλώνονται από κάτω — αλλιώς στριμώχνονται σε τρεις στήλες των 90px. */
  .price-box .qty-form { flex-direction: column; align-items: stretch; }
  .price-box .qty-form .qty-stepper { align-self: flex-start; }
  .qty-actions .btn { flex: 1 1 100%; }
}
/* Ποσότητα με κουμπιά + και −.

   Το πεδίο και τα δύο κουμπιά είναι ΕΝΑ πλαίσιο, όχι τρία ξεχωριστά στοιχεία:
   έτσι διαβάζεται ως ένας μοχλός. Τα κουμπιά είναι 44px, δηλαδή στο μέγεθος
   που συνιστάται για πάτημα με δάχτυλο. */
.qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); overflow: hidden;
}
.qty-form input[type=number] {
  width: 78px; padding: 12px; border: 0;
  background: transparent; font-size: 16px; font-family: inherit;
  text-align: center; font-variant-numeric: tabular-nums;
  outline: none; color: var(--ink);
}
.qty-stepper:focus-within { border-color: var(--brand); }

.qty-btn {
  flex: none; width: 44px; border: 0; cursor: pointer;
  background: var(--surface); color: var(--ink);
  font-size: 20px; line-height: 1; font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.qty-btn:first-child { border-right: 1px solid var(--line); }
.qty-btn:last-child  { border-left: 1px solid var(--line); }
.qty-btn:hover:not(:disabled) { background: var(--brand-lt); color: var(--brand); }
.qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.qty-btn[hidden] { display: none; }

/* Τα βελάκια του browser φεύγουν ΜΟΝΟ όταν η JavaScript έχει βάλει τα δικά
   μας κουμπιά — αλλιώς το πεδίο θα έμενε χωρίς κανέναν τρόπο αυξομείωσης. */
.qty-stepper.qty-ready input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.qty-stepper.qty-ready input[type=number]::-webkit-outer-spin-button,
.qty-stepper.qty-ready input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* =========================================================
   Quote / basket
   ========================================================= */
.quote-layout {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px;
  padding: 40px 0 72px; align-items: start;
}
.basket-list {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.basket-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.basket-row:last-child { border-bottom: none; }
.basket-row img {
  width: 62px; height: 62px; object-fit: contain; padding: 3px;
  border-radius: var(--r-sm); background: var(--surface); flex: none;
}
.basket-row .name { flex: 1; font-weight: 600; font-size: 14px; }
/* Κείμενο μόνο για τους αναγνώστες οθόνης: υπάρχει στο έγγραφο, δεν πιάνει
   χώρο. Το «Ποσότητα» δίπλα σε κάθε πεδίο της λίστας θα ήταν θόρυβος για τον
   βλέποντα — έχει τη φωτογραφία και το όνομα μπροστά του — αλλά χωρίς αυτό ο
   αναγνώστης οθόνης ανακοινώνει σκέτο «πεδίο αριθμού». */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* Η ποσότητα στη λίστα: πεδίο, όχι ετικέτα.

   Ήταν ένα «x250» σε γκρι πλαίσιο, που έμοιαζε με πληροφορία και όχι με
   ρύθμιση — για να την αλλάξει κανείς έπρεπε να διαγράψει τη γραμμή και να
   ξαναμπεί στο προϊόν. Τώρα είναι ο ίδιος μοχλός με τη σελίδα προϊόντος,
   μικρότερος για να χωρέσει στη σειρά. */
.basket-qty { display: flex; align-items: center; gap: 8px; flex: none; }
.basket-qty .qty-stepper { border-width: 1px; }
.basket-qty input[type=number] {
  width: 62px; padding: 8px 4px; border: 0; background: transparent;
  font-family: inherit; font-size: 15px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ink); outline: none;
}
.basket-qty .qty-btn { width: 34px; font-size: 17px; }

/* Το «Ενημέρωση» υπάρχει για όποιον δεν έχει JavaScript· με αυτήν, ο κώδικας
   το κρύβει και στέλνει μόνος του την αλλαγή. */
.basket-qty .qty-go {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--brand); text-decoration: underline; padding: 4px;
}
.basket-qty.qty-live .qty-go { display: none; }
/* Όσο τρέχει το αίτημα, η γραμμή «παγώνει» οπτικά — αλλιώς δύο γρήγορες
   αλλαγές θα φαίνονταν σαν να μην έγινε τίποτα. */
.basket-qty.is-busy { opacity: .55; pointer-events: none; }

@media (max-width: 560px) {
  /* Σε στενή οθόνη η γραμμή σπάει σε δύο ζώνες:

       εικόνα | όνομα και κωδικός
       ποσότητα ............. Αφαίρεση

     Η σειρά ορίζεται ΡΗΤΑ και για τα τέσσερα παιδιά. Χωρίς το order στο
     κουμπί της αφαίρεσης, έπαιρνε την προεπιλογή 0 και κατέληγε δίπλα στη
     φωτογραφία — σαν να αφορούσε αυτήν. */
  .basket-row { flex-wrap: wrap; row-gap: 12px; }
  .basket-row img  { order: 0; }
  /* Το όνομα πιάνει ΑΚΡΙΒΩΣ ό,τι περισσεύει από τη φωτογραφία (62px) και το
     κενό (16px). Έτσι η πρώτη σειρά γεμίζει και η ποσότητα σπρώχνεται από
     μόνη της στη δεύτερη — χωρίς κενό στοιχείο για να σπάσει η γραμμή. */
  .basket-row .name { order: 1; flex: 1 1 calc(100% - 78px); min-width: 0; }
  .basket-qty { order: 2; flex: 0 0 auto; }
  /* Το κουμπί είναι μέσα σε <form>, και το <form> είναι το παιδί του flex —
     η σειρά μπαίνει εκεί, όχι στο κουμπί. */
  .basket-remove { order: 3; margin-left: auto; }
}
.basket-row .remove {
  color: var(--alert); font-size: 14px; background: none;
  border: none; cursor: pointer; font-family: inherit; padding: 4px;
}
.basket-row .remove:hover { text-decoration: underline; }

.card-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card-form h2 { font-size: 20px; margin-bottom: 8px; }
.card-form > p { color: var(--ink-2); font-size: 14px; margin-bottom: 24px; }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: 16px; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.field textarea { min-height: 120px; resize: vertical; }
.field .req { color: var(--alert); }
.field .hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Notices */
.notice {
  padding: 16px 20px; border-radius: var(--r-sm);
  margin-bottom: 24px; font-size: 14px; border: 1px solid;
}
.notice-success { background: var(--ok-lt); color: var(--ok); border-color: #BFDFD2; }
.notice-error   { background: var(--alert-lt); color: var(--alert); border-color: #EDC7C0; }

/* =========================================================
   Contact page
   ========================================================= */
.contact-layout {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px;
  padding: 56px 0 72px; align-items: start;
}
.info-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px;
}
.info-card + .info-card { margin-top: 20px; }
.info-card h3 { font-size: 16px; margin-bottom: 16px; }
.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.info-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 16px; }
.info-list .ic { color: var(--brand); margin-top: 2px; }
.info-list .ic svg { width: 19px; height: 19px; }
.info-list .k {
  display: block; font-size: 12px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
  font-family: var(--font-mono); margin-bottom: 1px;
}
.info-list .v { color: var(--ink); font-weight: 500; }

.map-frame {
  margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--surface); line-height: 0;
}
.map-frame iframe { width: 100%; height: 320px; border: 0; display: block; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--footer-bg); color: var(--on-dark-dim); margin-top: 0; }
.site-footer .cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px;
  padding-top: 60px; padding-bottom: 48px;
}
/* h3 ΚΑΙ h4: οι επικεφαλίδες των στηλών έγιναν h3 για τη σωστή ιεραρχία
   (η τελευταία επικεφαλίδα πάνω από το footer είναι πάντα h2, οπότε το h4
   πηδούσε επίπεδο). Ο κανόνας κρατά και τα δύο ώστε τα άλλα τρία sites, που
   έχουν δικά τους πρότυπα footer, να μη χαλάσουν.

   ΓΙΑΤΙ h2 ΚΑΙ ΟΧΙ h3: οι τρεις στήλες του footer είναι ενότητες της σελίδας,
   στο ίδιο επίπεδο με τις ενότητες του σώματος. Ως h3 δημιουργούσαν πήδημα
   επιπέδου σε κάθε σελίδα που δεν είχε δικό της h2 — τυπικά στις σελίδες
   σφάλματος, που είναι ακριβώς εκεί που ο επισκέπτης ψάχνει τη δομή.

   ΤΟ ΛΕΥΚΟ ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ: χωρίς αυτό οι τίτλοι έπαιρναν το σκούρο χρώμα των
   τίτλων του σώματος και γίνονταν σκούρο πάνω σε σκούρο — 1:1, δηλαδή
   αόρατες. Το έπιασε ο έλεγχος αντίθεσης αμέσως μετά την αλλαγή. */
.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: #fff; font-size: 14px; font-weight: 700;
  margin-bottom: 20px; letter-spacing: .01em;
}
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: #fff; }
.site-footer .f-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.site-footer .f-brand .mark { width: 38px; height: 38px; flex: none; object-fit: contain; }
/* Στο σκούρο footer το φαρδύ σήμα κάθεται σε λευκή πλακέτα. Τα λογότυπα με
   όνομα έχουν σχεδόν πάντα σκούρα γράμματα, ή έρχονται ως JPG με λευκό
   φόντο — χωρίς πλακέτα, το πρώτο χάνεται στο σκούρο και το δεύτερο
   φαίνεται σαν λευκό ορθογώνιο που ξέχασε κάποιος. */
.site-footer .f-brand .mark--wide {
  width: auto; height: 36px; max-width: 160px;
  background: #fff; padding: 6px 10px; border-radius: 8px; box-sizing: content-box;
}
.site-footer .f-brand .name {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff;
}
.site-footer .f-brand .sub {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--footer-dim); margin-top: 2px;
}
.site-footer p { font-size: 14px; line-height: 1.6; }
.f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.f-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.f-contact li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.f-contact .ic { color: var(--on-dark-accent); margin-top: 2px; }
.f-contact .ic svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer-bottom .wrap {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
  font-size: 14px; color: var(--footer-dim);
}
.social-row { display: flex; gap: 12px; }
.social-row a {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--footer-link);
}
.social-row a:hover { background: var(--accent); color: #fff; }
.social-row svg { width: 17px; height: 17px; }

/* =========================================================
   Pagination
   ========================================================= */
.pagination { display: flex; gap: 8px; justify-content: center; padding: 20px 0 64px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 12px 16px; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); font-family: var(--font-mono);
  font-size: 14px; color: var(--ink-2);
}
.pagination a:hover { background: var(--brand-lt); border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* =========================================================
   Responsive
   ========================================================= */
/* =========================================================
   Header σε ενδιάμεσα πλάτη

   Λογότυπο, αναζήτηση και μενού διεκδικούν την ίδια γραμμή. Όσο στενεύει η
   οθόνη, παραχωρεί χώρο πρώτα το λιγότερο σημαντικό: η ετικέτα του κουμπιού
   προσφοράς, μετά όλη η γραμμή του μενού. Η αναζήτηση δεν συρρικνώνεται κάτω
   από το σημείο που κόβεται το κείμενό της.
   ========================================================= */
@media (max-width: 1120px) {
  /* Τελευταία περικοπή πριν σπάσει η γραμμή: πιο σφιχτά padding στο μενού. */
  .bar-left a.nav-link { padding: 8px 8px; font-size: 14px; }
  .bar-left > a.nav-link:first-child { margin-left: -8px; }
  .basket-pill { padding: 12px 12px; }
  .header-search { max-width: 380px; }
}

@media (max-width: 1040px) {
  /* Δεν χωρούν πια και τα τρία: η αναζήτηση παίρνει δική της γραμμή, σε όλο
     το πλάτος. Προτιμότερο από μια μπάρα 150px όπου δεν φαίνεται τι γράφετε.

     Το «display: contents» διαλύει το δεξί μπλοκ ώστε τα δύο παιδιά του να
     τοποθετηθούν μόνα τους στο grid — αλλιώς η αναζήτηση θα έμενε κλεισμένη
     μέσα στη στήλη του και δεν θα μπορούσε να πιάσει όλη τη γραμμή. */
  .site-header .bar {
    grid-template-areas: "left brand pill" "search search search";
    row-gap: 12px;
  }
  .bar-left  { grid-area: left; }
  .brand     { grid-area: brand; }
  .bar-right { display: contents; }
  .header-search { grid-area: search; max-width: none; }
  .basket-pill { grid-area: pill; justify-self: end; }
  .hs-panel { min-width: 0; }
}

/* ---------------------------------------------------------
   Όσο στενεύει η οθόνη, φεύγουν σύνδεσμοι με σειρά προτεραιότητας.

   Πρώτη η «Αρχική» (το λογότυπο δίπλα της κάνει την ίδια δουλειά), μετά
   «Η εταιρεία», τελευταία η «Επικοινωνία». Το «Προϊόντα» δεν φεύγει ποτέ.

   Ό,τι κρύβεται εδώ ΔΕΝ χάνεται: υπάρχει μέσα στο συρτάρι, στην ενότητα
   «σελίδες» κάτω από τις κατηγορίες.
   --------------------------------------------------------- */
/* Κάτω από 900px φεύγουν η «Αρχική» (το λογότυπο κάνει το ίδιο) και η
   «Επικοινωνία» (τηλέφωνο και email είναι στη μαύρη γραμμή από πάνω, και η
   σελίδα μένει στο συρτάρι). Η «Επικοινωνία» έφευγε μόνο κάτω από 560px —
   και στο tablet (768px) πατούσε πάνω στο λογότυπο σε promo-gifts, hotels
   και group. Μετρήθηκε, σε έξι sites και δέκα πλάτη. */
/* Η «Αρχική» φεύγει ήδη κάτω από 1100px: το σήμα δίπλα οδηγεί εκεί, και
   ο χώρος χρειάζεται — με τους «Καταλόγους» στο μενού του Promo Gifts, οι
   σύνδεσμοι πατούσαν το σήμα στα 915–1010px. */
@media (max-width: 1100px) { .bar-left .nav-index { display: none; } }
/* Στα πολύ στενά κινητά ο σύνδεσμος προς άλλο site (π.χ. «Κατάλογοι») ζει
   μόνο μέσα στο μενού — στη γραμμή ακουμπούσε το σήμα (8px στα 320px). */
@media (max-width: 360px) { .bar-left .nav-external { display: none; } }
@media (max-width: 960px) { .bar-left .nav-index, .bar-left .nav-contact { display: none; } }
@media (max-width: 760px) { .bar-left .nav-about { display: none; } }

@media (max-width: 1000px) {
  .hero .inner { grid-template-columns: 1fr; gap: 40px; padding: 64px var(--gut) 58px; }
  .hero h1 { max-width: none; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row.flip .fr-text { order: 0; }
}

@media (max-width: 860px) {
  .product-detail, .quote-layout { grid-template-columns: 1fr; gap: 32px; }
  .page-head .head-flex { grid-template-columns: 1fr; }
  .stat-strip .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .section { padding: 60px 0; }

  /* Δεν υπάρχει αναδιπλούμενο μενού «χάμπουργκερ»: όσοι σύνδεσμοι δεν χωρούν
     πάνω, βρίσκονται μέσα στο συρτάρι που ανοίγει ούτως ή άλλως. */
  .site-header .bar { position: relative; gap: 12px 16px; }
  .bar-left a.nav-link { font-size: 16px; }
  .basket-pill .pill-label { display: none; }
  .basket-pill .pill-icon { display: inline-flex; }
}

@media (max-width: 560px) {
  /* Το σύνθημα κάτω από το όνομα φεύγει — υπάρχει στην αρχική και στο
     υποσέλιδο. Η «Επικοινωνία» επίσης: τηλέφωνο και email είναι ήδη στη
     μαύρη γραμμή από πάνω, και η σελίδα μένει στο συρτάρι. */
  .brand .sub { display: none; }
  .site-header .bar { gap: 12px; }
  .bar-left a.nav-link { padding: 8px 8px; }
  .bar-left > a.nav-link:first-child { margin-left: -8px; }
  .cat-btn .cat-label { font-size: 14px; }
}

@media (max-width: 400px) {
  /* Τα πιο στενά κινητά που κυκλοφορούν ακόμη (iPhone SE, 320–375px).
     Όλα συρρικνώνονται λίγο ώστε η μπάρα να μείνει σε μία γραμμή. */
  .site-header .bar { gap: 8px; }

  /* Οι τρεις ζώνες ΣΤΑΜΑΤΟΥΝ να είναι ίσες. Με ίσες πλευρές το λογότυπο
     μένει στο ακριβές κέντρο, αλλά στα 320px κάθε πλευρά παίρνει 36px ενώ το
     κουμπί της παραγγελίας θέλει 69 — και πατούσε πάνω στο «Hotels
     Supplies». Εδώ οι άκρες παίρνουν ό,τι χρειάζονται και το λογότυπο
     στενεύει (με αποσιωπητικά) στο κέντρο του χώρου που μένει. */
  .site-header .bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-header .brand { justify-self: center; max-width: 100%; }

  /* Το «Προϊόντα» μένει μόνο εικονίδιο. Η λέξη ΔΕΝ σβήνεται: κρύβεται μόνο
     από την οθόνη, ώστε ο αναγνώστης οθόνης να λέει ακόμη «Προϊόντα». */
  .cat-btn .cat-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .brand .mark { width: 34px; height: 34px; }
  .brand .name { font-size: 16px; }
  .cat-btn { gap: 8px; }
  .cat-bars, .cat-bars::before, .cat-bars::after { width: 15px; }
  .basket-pill { padding: 8px 12px; }
}

/* ΦΑΡΔΥ ΣΗΜΑ ΣΤΟ ΚΙΝΗΤΟ (λογότυπο με όνομα, π.χ. 2:1).
   Το όνομα του site δεν γράφεται δίπλα του (βλ. .brand--logo-only), οπότε
   το σήμα παίρνει τον χώρο. Κάτω από 560px οι άκρες της κεφαλίδας παίρνουν
   ό,τι χρειάζονται και το σήμα μικραίνει σταδιακά — μετρήθηκε σε 320–560px
   ώστε να μην ακουμπά ούτε το «Προϊόντα» ούτε το καλάθι. */
@media (max-width: 560px) {
  .site-header .bar:has(.mark--wide) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-header .brand:has(.mark--wide) { justify-self: center; max-width: 100%; }
  .brand .mark--wide { width: auto; height: 46px; max-width: 170px; }
}
@media (max-width: 440px) {
  .brand .mark--wide { width: auto; height: 42px; max-width: 140px; }
}
@media (max-width: 360px) {
  .brand .mark--wide { width: auto; height: 40px; max-width: 120px; }
}

@media (max-width: 640px) {
  :root { --gut: 18px; }
  .topbar .wrap { justify-content: center; gap: 16px; font-size: 12px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 32px; }
  .field-row { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .cta-band .wrap { padding-top: 48px; padding-bottom: 48px; }
  .stat-strip .wrap { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .product-card .body { padding: 12px 16px 12px; }
  .product-card form { padding: 0 16px 16px; }

  /* Στο κινητό τα δύο floating κουμπιά κρατούν μόνο το εικονίδιό τους,
     και οι ειδοποιήσεις ανεβαίνουν για να μην τα καλύπτουν. */
  .quote-fab { right: 14px; bottom: 14px; padding: 12px 16px; }
  .qf-label { display: none; }
  .toast-stack { bottom: 88px; }

  .chat-fab { left: 14px; bottom: 14px; padding: 12px 16px; }
  .cf-label { display: none; }
  /* Σε κινητό το παράθυρο πιάνει όλη την οθόνη: μια στήλη 340px με
     πληκτρολόγιο ανοιχτό δεν αφήνει χώρο να διαβαστεί τίποτα. */
  .chat-panel {
    left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 88vh; border-radius: var(--r) var(--r) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  /* Σε πολύ στενές οθόνες το συρτάρι πιάνει όλο το πλάτος. */
  .oc-panel { width: 100%; }
}

/* =========================================================
   ΚΙΝΗΣΗ

   Τρεις κανόνες διέπουν ό,τι ακολουθεί:

   1. ΜΟΝΟ transform και opacity. Είναι οι δύο ιδιότητες που ο browser
      χειρίζεται στην κάρτα γραφικών, χωρίς να ξαναϋπολογίσει διάταξη ή να
      ξαναζωγραφίσει. Κίνηση σε width, top ή margin θα κόλλαγε σε κινητό.

   2. Τίποτα δεν μετακινεί τη σελίδα. Τα στοιχεία εμφανίζονται στη θέση τους
      ανεβαίνοντας λίγα pixel — ο χώρος τους είναι ήδη δεσμευμένος, οπότε δεν
      χοροπηδά το κείμενο κάτω από το δάχτυλο του επισκέπτη.

   3. Η κίνηση είναι στολίδι. Ζει ολόκληρη μέσα στο «.has-motion», που μπαίνει
      μόνο όταν υπάρχει JavaScript ΚΑΙ ο επισκέπτης δεν έχει ζητήσει λιγότερη
      κίνηση. Χωρίς αυτήν, το site είναι ακριβώς όπως ήταν.
   ========================================================= */

:root {
  /* Γρήγορη αρχή, μαλακό φρένο — η καμπύλη που κάνει την κίνηση να μοιάζει
     με αντικείμενο που ακουμπά, όχι με στοιχείο που σβήνει. */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .18s;
  --t-mid: .32s;
  --t-slow: .55s;
}

/* ---------------------------------------------------------
   Εμφάνιση καθώς κυλά η σελίδα
   --------------------------------------------------------- */

.has-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.has-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Κλιμάκωση μέσα σε πλέγματα: οι κάρτες έρχονται η μία μετά την άλλη αντί για
   μπλοκ. Το όριο των οκτώ φτάνει — πιο πέρα η αναμονή θα ενοχλούσε. */
.has-motion [data-reveal-stagger] > *:nth-child(1)   { transition-delay: 0ms; }
.has-motion [data-reveal-stagger] > *:nth-child(2)   { transition-delay: 55ms; }
.has-motion [data-reveal-stagger] > *:nth-child(3)   { transition-delay: 110ms; }
.has-motion [data-reveal-stagger] > *:nth-child(4)   { transition-delay: 165ms; }
.has-motion [data-reveal-stagger] > *:nth-child(5)   { transition-delay: 200ms; }
.has-motion [data-reveal-stagger] > *:nth-child(6)   { transition-delay: 235ms; }
.has-motion [data-reveal-stagger] > *:nth-child(7)   { transition-delay: 265ms; }
.has-motion [data-reveal-stagger] > *:nth-child(n+8) { transition-delay: 290ms; }

/* ---------------------------------------------------------
   Είσοδος του hero — καθαρό CSS, καμία JavaScript
   --------------------------------------------------------- */

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

.has-motion .hero .inner > div > *,
.has-motion .hero-panel {
  animation: riseIn .6s var(--ease-out) backwards;
}
.has-motion .hero .eyebrow   { animation-delay: .05s; }
.has-motion .hero h1         { animation-delay: .12s; }
.has-motion .hero .lede      { animation-delay: .20s; }
.has-motion .hero .btn-group { animation-delay: .28s; }
.has-motion .hero-panel      { animation-delay: .34s; }

/* ---------------------------------------------------------
   Κάρτες
   --------------------------------------------------------- */

/* Η φωτογραφία μεγαλώνει μέσα στο κάδρο της, το κάδρο μένει ακίνητο. */
.product-card .thumb,
.cat-card .thumb { overflow: hidden; }

.product-card .thumb img,
.cat-card .thumb img { transition: transform .6s var(--ease-soft); }

.product-card:hover .thumb img,
.cat-card:hover .thumb img { transform: scale(1.06); }

/* Ανασήκωμα με το ποντίκι, βύθισμα με το πάτημα: η κάρτα απαντά. */
.product-card:hover, .zone-card:hover { transform: translate3d(0, -3px, 0); }
.product-card:active, .zone-card:active { transform: translate3d(0, -1px, 0); }

.service-card {
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}
.service-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: var(--shadow);
  border-color: var(--line-2);
}
.service-card .ico { transition: transform var(--t-mid) var(--ease-out); }
.service-card:hover .ico { transform: scale(1.08) rotate(-4deg); }

/* ---------------------------------------------------------
   Κουμπιά και σύνδεσμοι
   --------------------------------------------------------- */

.btn {
  transition: background-color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translate3d(0, -1px, 0); }
.btn:active { transform: translate3d(0, 1px, 0); transition-duration: .06s; }

/* Το βέλος προχωρά — μικρή υπόσχεση ότι κάτι ακολουθεί. */
.btn .arrow {
  display: inline-block;
  transition: transform var(--t-mid) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

/* Το μενού έχει ήδη «χάπι» στο hover. Δεν προσθέτουμε υπογράμμιση από πάνω —
   θα ήταν δύο σινιάλα για το ίδιο πράγμα. Απλώς το κάνουμε να έρχεται ομαλά. */
.bar-left a.nav-link {
  transition: color var(--t-fast) var(--ease-soft),
              background-color var(--t-fast) var(--ease-soft);
}

/* ---------------------------------------------------------
   Το header όταν φύγει η σελίδα από την κορυφή
   --------------------------------------------------------- */

.site-header {
  transition: box-shadow var(--t-mid) var(--ease-soft);
}
.site-header.is-stuck { box-shadow: 0 4px 20px rgba(11, 26, 38, .10); }

/* Ο «φρουρός»: ένα αόρατο pixel στην κορυφή της σελίδας. Όταν βγει από την
   οθόνη ξέρουμε ότι κυλήσαμε — χωρίς να ακούμε το scroll σε κάθε καρέ. */
.scroll-sentinel {
  position: absolute; top: 0; left: 0;
  height: 1px; width: 1px;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Σκελετοί φόρτωσης

   Αντί για κενό ή σπίνερ, δείχνουμε το σχήμα αυτού που έρχεται. Ο επισκέπτης
   καταλαβαίνει ότι φορτώνει κάτι συγκεκριμένο και η αναμονή μοιάζει μικρότερη.
   --------------------------------------------------------- */

@keyframes shimmer { to { background-position-x: -200%; } }

.skeleton-card {
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--paper);
}
.skeleton-card .sk-thumb { aspect-ratio: 1; }
.skeleton-card .sk-line { height: 12px; border-radius: 4px; margin: 12px 16px; }
.skeleton-card .sk-line.short { width: 55%; }

.sk-thumb, .sk-line {
  background: linear-gradient(90deg, var(--surface) 40%, var(--line) 50%, var(--surface) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ---------------------------------------------------------
   Εστίαση με πληκτρολόγιο

   Ορατή, ενιαία, και μόνο όταν πλοηγείται κανείς με tab — όχι μετά από κλικ.
   --------------------------------------------------------- */

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------
   Ασφαλιστική δικλείδα

   Ο καθολικός κανόνας πιο πάνω σβήνει transitions και animations. Εδώ όμως
   υπάρχουν αρχικές καταστάσεις (opacity: 0) που δεν είναι κίνηση αλλά στυλ —
   χωρίς αυτό το μπλοκ θα έμεναν κρυμμένες για πάντα.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  .has-motion .hero .inner > div > *,
  .has-motion .hero-panel { animation: none !important; opacity: 1 !important; }
  .sk-thumb, .sk-line { animation: none !important; }
}

/* =========================================================
   VWEAR — custom στολές

   Η τρίτη ταυτότητα, και η πιο διαφορετική από τις άλλες δύο.

   Τα δύο πρώτα sites πουλάνε ΕΙΔΗ: ο επισκέπτης διαβάζει προδιαγραφές και
   συγκρίνει. Εδώ πουλάμε ΡΟΥΧΑ — αποφασίζει από τη ραφή, την πτώση και το
   ύφασμα. Άρα η φωτογραφία παίρνει τον χώρο και η σελίδα κάνει στην άκρη.

   Η ΤΥΠΟΓΡΑΦΙΑ κάνει τη μισή δουλειά, και είναι το ακριβώς αντίθετο από τα
   άλλα δύο:

     Hotels  → Manrope 700-800, σφιχτό, κεφαλαία σε ετικέτες
     ADV     → Manrope 700, γεωμετρικό, ελαφρώς αρνητικό tracking
     Vwear   → ΣΕΡΙΦ, πεζά, σφιχτά — τίτλος περιοδικού, όχι ταμπέλα

   Η σερίφ έρχεται από το ίδιο το λειτουργικό (Georgia και τα αδέλφια της).
   Δεν κατεβαίνει τίποτα: μηδέν επιπλέον αίτημα, μηδέν ζήτημα ιδιωτικότητας.
   Αν κάποτε θέλετε δική σας σερίφ, αλλάζει μία γραμμή — η --font-display.
   ========================================================= */

.theme-vwear {
  --ink:        #26241F;   /* ζεστό σκούρο, όχι μαύρο */
  --ink-2:      #6B675E;
  --ink-3:      #9A958A;

  /* Η «μάρκα» εδώ είναι το ίδιο το μελάνι. Τα κουμπιά είναι σκούρα, όχι
     έγχρωμα — όπως σε κάθε σοβαρό site μόδας. */
  --brand:      #26241F;
  --brand-dk:   #14130F;
  --brand-dp:   #14130F;
  --brand-lt:   #EAE0D0;

  /* Μπρούντζος, μόνο για μικρές λεπτομέρειες. */
  --accent:     #8A6D2F;
  --accent-dk:  #6B5424;
  --accent-lt:  #EFE6D5;

  /* Ανοιχτό μπεζ. Πάνω του τα λευκά και τα ανοιχτόχρωμα υφάσματα ξεχωρίζουν,
     ενώ σε λευκό φόντο θα «έλιωναν». Αντίθεση μελανιού 14:1. */
  --paper:      #F4EDE2;
  --surface:    #EBE2D4;
  --line:       #DFD4C2;
  --line-2:     #C7B9A2;

  --dark-1:         #26241F;
  --dark-2:         #14130F;
  --glow:           rgba(200,169,106,.14);
  --on-dark-accent: #C8A96A;
  --on-dark-soft:   #EDEAE2;
  --on-dark-muted:  #C6C2B8;
  --on-dark-dim:    #8F8B81;
  --chip-bg:        rgba(38,36,31,.82);
  --footer-bg:      #26241F;
  --footer-link:    #DAD6CC;
  --footer-dim:     #8F8B81;

  /* Σερίφ του συστήματος: Georgia στα Windows και Mac, Charter/Noto στο
     Linux, Times ως τελευταία λύση. Όλες έχουν ελληνικά. */
  --font-display: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --display-weight: 400;
  --display-tracking: -0.015em;   /* σφιχτά, όπως σε εξώφυλλο περιοδικού */

  /* Το σήμα ενότητας: μια λεπτή γραμμή, όχι σύμβολο. */
  --mark-w: 22px;
  --mark-h: 1px;
  --mark-clip: none;
  --mark-radius: 0;
  --mark-bg: #26241F;

  --r-sm: 0;
  --r:    0;
  --r-lg: 0;

  --shadow-sm: none;
  --shadow:    0 18px 50px rgba(38,36,31,.10);
  --shadow-lg: 0 30px 80px rgba(38,36,31,.14);
}

/* Γωνίες: καμία. Σε editorial σελίδα η στρογγυλή γωνία «μαλακώνει» την εικόνα
   και χαλάει την αίσθηση του τυπωμένου. */
.theme-vwear .btn,
.theme-vwear .product-card,
.theme-vwear input,
.theme-vwear select,
.theme-vwear textarea { border-radius: 0; }

/* ---------------------------------------------------------
   Τίτλοι: σερίφ, ΠΕΖΑ, σφιχτά.

   Τα κεφαλαία με αραιά γράμματα φωνάζουν «ταμπέλα». Τα πεζά με σερίφ
   διαβάζονται σαν τίτλος άρθρου — και αυτό ακριβώς είναι ένα lookbook.
   --------------------------------------------------------- */
.theme-vwear h1,
.theme-vwear h2,
.theme-vwear h3,
.theme-vwear .section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: var(--display-tracking);
  line-height: 1.06;
}
.theme-vwear h1 { font-size: clamp(34px, 5vw, 68px); }
.theme-vwear h2 { font-size: clamp(26px, 3.4vw, 44px); }

/* Οι ετικέτες μένουν κεφαλαίες και μικροσκοπικές — η αντίθεση με τους
   σερίφ τίτλους είναι που δίνει τον χαρακτήρα. */
.theme-vwear .eyebrow {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Κείμενο διεπαφής: διακριτικό. Μικρό, αραιό, ποτέ βαρύ. */
.theme-vwear .btn {
  font-family: 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
  font-size: 12px;
  padding: 16px 36px;
}
.theme-vwear .btn-primary,
.theme-vwear .btn-accent { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.theme-vwear .btn-primary:hover,
.theme-vwear .btn-accent:hover { background: var(--brand-dk); border-color: var(--brand-dk); }
.theme-vwear .btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.theme-vwear .btn-outline:hover { background: var(--ink); color: var(--paper); }

/* Το header χωρίς σκιά όσο είμαστε στην κορυφή. */
.theme-vwear .site-header { border-bottom: 1px solid transparent; }
.theme-vwear .site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: none;
  background: var(--paper);
}

/* Η πάνω γραμμή γίνεται λεπτή λωρίδα ανακοίνωσης. */
.theme-vwear .topbar {
  background: var(--ink); color: var(--on-dark-soft);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.theme-vwear .topbar a { color: var(--on-dark-soft); }

/* =========================================================
   Lookbook — τα δομικά κομμάτια του Vwear
   ========================================================= */

/* ---- Πρώτη οθόνη: κείμενο και ρούχο δίπλα-δίπλα ----

   ΟΧΙ φωτογραφία σε όλο το πλάτος: για να γεμίσει την οθόνη πρέπει να κοπεί,
   και εδώ δείχνει ΡΟΥΧΟ. Στη μία μεριά το κείμενο πάνω σε μπεζ, στην άλλη το
   ρούχο ολόκληρο. */
.vw-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--paper);
  overflow: hidden;
}
.vw-hero .inner {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vw, 100px) clamp(20px, 5vw, 78px);
  color: var(--ink);
}
.vw-hero-figure {
  position: relative;
  background: var(--surface);
  min-height: min(74vh, 680px);
}
.vw-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* ολόκληρο το ρούχο, ποτέ κομμένο */
  padding: clamp(16px, 3vw, 44px);
  transform: scale(1.03);
}
.has-motion .vw-hero-img { animation: vwSettle 1.6s var(--ease-out) forwards; }
@keyframes vwSettle { to { transform: scale(1); } }

.vw-hero h1 { margin: 16px 0 20px; max-width: 13ch; }
.vw-hero .lede {
  color: var(--ink-2);
  max-width: 40ch; font-size: 16px; line-height: 1.8;
  margin-bottom: 32px;
}
.vw-hero .btn { align-self: flex-start; }

/* ---- Ενότητες σε όλο το πλάτος ----

   Λίγες και μεγάλες, όχι πολλές και μικρές: κάθε μία πιάνει μισή οθόνη και
   έχει ένα μόνο πράγμα να πει. */
.vw-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--surface);
}
.vw-band + .vw-band .vw-band-figure { order: 2; }   /* εναλλάξ πλευρά */

.vw-band-figure { position: relative; min-height: clamp(320px, 46vw, 560px); }
.vw-band-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* ποτέ κομμένο ρούχο */
  padding: clamp(18px, 3vw, 46px);
}
.vw-band-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(34px, 5vw, 78px);
  background: var(--paper);
}
.vw-band-text p {
  color: var(--ink-2); line-height: 1.9; max-width: 42ch; margin: 16px 0 0;
  font-size: 16px;
}
/* Ηταν 320x25. Η υπογραμμιση κατω απο το κειμενο ειναι το σχεδιο και
   μενει· αυτο που μεγαλωνει ειναι η περιοχη που πατιεται. */
.vw-more {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
  border-bottom: 1px solid var(--ink); padding-bottom: 5px;
  color: var(--ink); text-decoration: none;
}
.vw-more:hover { color: var(--accent-dk); border-color: var(--accent-dk); }

/* ---- Πλέγμα συλλογής ----

   Ελάχιστα κενά, ώστε οι φωτογραφίες να διαβάζονται σαν συνεχής επιφάνεια
   αντί για σκόρπιες κάρτες. Η αίσθηση είναι «σελίδα καταλόγου», όχι «λίστα
   προϊόντων». */
.vw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px;
}
.vw-card {
  position: relative; display: block;
  text-decoration: none; color: inherit;
  background: var(--surface);
  padding-bottom: 24px;
}

.vw-shot {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--surface);
}
.vw-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* ΠΟΤΕ κομμένο ρούχο: το «cover» θα έκοβε ώμους ή στρίφωμα, ακριβώς τη
     λεπτομέρεια για την οποία ήρθε ο επισκέπτης. */
  object-fit: contain;
  padding: 16px;
  transition: opacity .5s var(--ease-soft), transform .9s var(--ease-soft);
}
.vw-shot .vw-alt { opacity: 0; }
.vw-card:hover .vw-shot .vw-alt { opacity: 1; }
.vw-card:hover .vw-shot img { transform: scale(1.03); }

.vw-card .vw-name {
  display: block; margin: 16px 20px 3px;
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: -0.01em; line-height: 1.25;
}
.vw-card .vw-meta {
  display: block; margin: 0 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}

.vw-card .vw-tag {
  position: absolute; top: 0; left: 0; z-index: 1;
  background: var(--ink); color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  padding: 8px 12px;
}

/* =========================================================
   Σελίδα ρούχου
   ========================================================= */

.vw-product { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px, 3vw, 56px); }

/* Οι φωτογραφίες η μία κάτω από την άλλη — έτσι διαβάζεται ένα ρούχο, όχι με
   μικρογραφίες που πρέπει να πατήσεις μία-μία. */
.vw-shots { display: grid; gap: 4px; }
.vw-shots figure { margin: 0; position: relative; background: var(--surface); }
.vw-shots img { width: 100%; height: auto; display: block; }
.vw-shots figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--ink); color: var(--paper);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px;
}
.vw-zoom { cursor: zoom-in; border: 0; padding: 0; background: none; display: block; width: 100%; }

/* Η στήλη στοιχείων ακολουθεί καθώς κατεβαίνουν οι φωτογραφίες. */
.vw-info { position: sticky; top: 96px; align-self: start; padding-top: 8px; }
.vw-info h1 { margin: 12px 0 20px; }
.vw-info .vw-sku {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  color: var(--ink-2); letter-spacing: .18em; text-transform: uppercase;
}
.vw-info .vw-desc { color: var(--ink-2); line-height: 1.9; margin: 20px 0 28px; font-size: 16px; }

.vw-specs { border-top: 1px solid var(--line-2); margin: 28px 0; }
.vw-specs div {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.vw-specs dt {
  color: var(--ink-2); text-transform: uppercase; letter-spacing: .14em;
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  align-self: center;
}
.vw-specs dd { margin: 0; color: var(--ink); }

/* ---- Κουμπιά χρωματολογίου ---- */
.vw-charts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 28px; }
.vw-chart-btn {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  padding: 12px 16px; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em;
  transition: background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.vw-chart-btn:hover { background: var(--ink); color: var(--paper); }
/* Μικρή πολύχρωμη λωρίδα, ώστε να καταλαβαίνει κανείς τι είναι με μια ματιά. */
.vw-chart-btn::before {
  content: ''; width: 24px; height: 9px; flex: none;
  background: linear-gradient(90deg, #26241F 0 25%, #8A6D2F 25% 50%, #7C8B7A 50% 75%, #B9A88F 75% 100%);
}

/* ---- Το popup του χρωματολογίου ---- */
.vw-chart-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: rgba(20,19,15,.88);
  padding: clamp(12px, 3vw, 40px);
}
.vw-chart-modal[hidden] { display: none; }
.has-motion .vw-chart-modal { animation: vwFade .22s var(--ease-out); }
@keyframes vwFade { from { opacity: 0; } to { opacity: 1; } }

.vw-chart-box {
  background: var(--paper);
  max-width: 1000px; width: 100%;
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
}
.vw-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.vw-chart-head h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 20px; letter-spacing: -0.01em; text-transform: none;
}
.vw-chart-close {
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-2); padding: 2px 8px;
}
.vw-chart-close:hover { color: var(--ink); }
.vw-chart-body { overflow: auto; padding: 20px 24px 24px; }
.vw-chart-body img { width: 100%; height: auto; display: block; }
.vw-chart-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* =========================================================
   Μικρότερες οθόνες
   ========================================================= */
@media (max-width: 900px) {
  .vw-product { grid-template-columns: 1fr; }
  .vw-info { position: static; }
  .vw-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 860px) {
  /* Η φωτογραφία πάει πάνω και το κείμενο από κάτω — και στις δύο διατάξεις. */
  .vw-hero { grid-template-columns: 1fr; }
  .vw-hero-figure { order: -1; min-height: 58vh; }
  .vw-hero .inner { padding: 32px 20px 44px; }

  .vw-band { grid-template-columns: 1fr; }
  .vw-band .vw-band-figure,
  .vw-band + .vw-band .vw-band-figure { order: -1; min-height: 300px; }
  .vw-band-text { padding: 32px 20px 40px; }
}

/* =========================================================
   ΜΕΓΕΘΥΝΣΗ ΣΤΑ ΠΑΡΑΘΥΡΑ ΕΙΚΟΝΑΣ

   Δύο σημεία τη χρειάζονται και δουλεύουν με τον ίδιο τρόπο:
   το lightbox των φωτογραφιών και το παράθυρο του χρωματολογίου.

   Σε κατάλογο ρούχων δεν αρκεί να δεις τη φωτογραφία μεγάλη — θέλεις να
   πλησιάσεις στη ραφή, στο κουμπί, στην πλέξη του υφάσματος. Και στο
   χρωματολόγιο θέλεις να δεις την απόχρωση, όχι τη λωρίδα.
   ========================================================= */

/* Το κουτί που κυλά όταν η εικόνα μεγαλώσει πέρα από την οθόνη. */
.zoomable {
  overflow: auto;
  overscroll-behavior: contain;
  /* Σε κινητό αφήνουμε τον browser να κάνει τη δουλειά του: δύο δάχτυλα
     μεγεθύνουν φυσικά μέσα στο κουτί. */
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

/* Η εικόνα σε κατάσταση «χωράει στην οθόνη». */
.zoomable img { cursor: zoom-in; transition: none; }

/* Και σε κατάσταση μεγέθυνσης: βγαίνει από τα όρια και σέρνεται. */
.zoomable.is-zoomed img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: grab;
}
.zoomable.is-zoomed.is-dragging img { cursor: grabbing; }

/* Η ένδειξη ποσοστού και τα κουμπιά. */
.zoom-bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  background: rgba(20, 20, 18, .78);
  border-radius: 999px; padding: 5px 8px;
  z-index: 3;
}
.zoom-bar button {
  border: 0; background: none; color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.zoom-bar button:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.zoom-bar button:disabled { opacity: .35; cursor: default; }
.zoom-bar .zoom-level {
  color: #fff; font-family: var(--font-mono); font-size: 12px;
  min-width: 48px; text-align: center; letter-spacing: .04em;
  user-select: none;
}

/* ---- Στο lightbox ---- */
.lb-figure { position: relative; }
.lb-figure .zoomable {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  display: grid; place-items: center;
}
.lb-figure .zoomable img { max-width: 100%; max-height: calc(100vh - 190px); }
/* Στο lightbox η μπάρα ΔΕΝ είναι απόλυτα τοποθετημένη.
   Ως absolute καθόταν στο κάτω μέρος του figure — δηλαδή ακριβώς πάνω στη
   λεζάντα. Μέσα στη ροή της στήλης μπαίνει ανάμεσα σε εικόνα και λεζάντα,
   και δεν μπορεί να επικαλύψει τίποτα όσο κι αν αλλάξουν τα μεγέθη. */
.lb-figure .zoom-bar {
  position: static;
  transform: none;
  align-self: center;
}

/* ---- Στο χρωματολόγιο ---- */
.vw-chart-box { position: relative; }
.vw-chart-body.zoomable { max-height: 78vh; }
.vw-chart-body.zoomable img { max-width: 100%; }

/*
 * Η ΑΡΣΗ ΤΩΝ ΟΡΙΩΝ, τελευταία και με τους δύο γονείς στον επιλογέα.
 *
 * Χωρίς αυτό, οι κανόνες «max-height» των δύο παραθύρων πιο πάνω έχουν την
 * ίδια βαρύτητα με το «.zoomable.is-zoomed img» και, επειδή γράφτηκαν μετά,
 * κερδίζουν: η εικόνα πλάταινε αλλά το ύψος της έμενε καθηλωμένο και το ρούχο
 * παραμορφωνόταν αντί να μεγαλώσει.
 */
.lb-figure .zoomable.is-zoomed img,
.vw-chart-body.zoomable.is-zoomed img {
  max-width: none;
  max-height: none;
}

@media (max-width: 640px) {
  .zoom-bar { bottom: 10px; }
  .zoom-bar button { width: 38px; height: 38px; }   /* δάχτυλο, όχι δείκτης */
}


/* =========================================================
   Τιμοκατάλογος
   ========================================================= */
.price-box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px 16px;
  margin: 0 0 24px;
  background: var(--surface);
}
.price-box .pb-main { display: flex; align-items: baseline; gap: 8px; }
.price-box .pb-from { font-size: 16px; color: var(--ink-2); }
.price-box .pb-price {
  font-family: var(--font-display);
  font-weight: var(--display-weight, 700);
  letter-spacing: var(--display-tracking, 0);
  font-size: 34px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-box .pb-unit { font-size: 14px; color: var(--ink-3); }
.price-box .pb-min {
  margin-top: 8px; font-size: 14px; color: var(--ink-2);
}
.price-box .pb-min strong { color: var(--brand); }
.price-box .pb-step { color: var(--ink-3); }
.price-box .pb-note {
  margin: 12px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5;
}

/* Η κλίμακα ποσότητας.

   Μικρή και ήσυχη: δεν ανταγωνίζεται τη βασική τιμή από πάνω της, αλλά είναι
   αρκετά ευανάγνωστη ώστε ο πελάτης να συγκρίνει δύο γραμμές με μια ματιά.
   Τα νούμερα σε tabular-nums για να στοιχίζονται κάθετα. */
.price-tiers {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 14px;
}
.price-tiers caption {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 8px;
}
.price-tiers th,
.price-tiers td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  color: var(--ink);
}
.price-tiers tbody tr:last-child th,
.price-tiers tbody tr:last-child td { border-bottom: 0; }

/* ΟΙ ΣΤΗΛΕΣ ΞΕΧΩΡΙΖΟΥΝ.

   Τρεις στήλες με νούμερα η μία δίπλα στην άλλη μπερδεύονται εύκολα: κάθετη
   γραμμή ανάμεσά τους και επικεφαλίδα από πάνω, ώστε κανείς να μη χρειάζεται
   να μαντέψει αν το «0,44 €» είναι τιμή τεμαχίου ή σύνολο παραγγελίας. */
.price-tiers thead th {
  font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--line-2);
  padding-bottom: 8px;
  white-space: nowrap;
}
.price-tiers thead th:first-child { text-align: left; }
.price-tiers thead th + th        { text-align: right; }

.price-tiers th + th,
.price-tiers td + td,
.price-tiers th + td { border-left: 1px solid var(--line); }

/* Οι ποσότητες σε tabular-nums ώστε οι χιλιάδες να στοιχίζονται κάθετα και ο
   πελάτης να συγκρίνει δύο γραμμές με μια ματιά αντί να διαβάζει ψηφία. */
.price-tiers tbody th {
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.price-tiers tbody td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Η τιμή τεμαχίου είναι το νούμερο που συγκρίνει ο πελάτης — αυτή βαραίνει. */
.price-tiers .pt-unit { font-weight: 700; }

@media (max-width: 480px) {
  .price-tiers th, .price-tiers td { padding: 8px 8px; font-size: 14px; }
}

/* Η γραμμή που ισχύει για την τρέχουσα ποσότητα.

   Με φόντο και μπάρα στο πλάι, όχι μόνο με χρώμα κειμένου: ο πίνακας έχει
   3–5 γραμμές που μοιάζουν μεταξύ τους και η επιλεγμένη πρέπει να βρίσκεται
   χωρίς να την ψάχνει κανείς. */
.price-tiers tr.is-current th,
.price-tiers tr.is-current td {
  background: var(--brand-lt);
  color: var(--brand);
  font-weight: 700;
}
.price-tiers tr.is-current th {
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ══════════ «Γιατί εμείς» — τα τρία επιχειρήματα στην αρχική ══════════

   Τρεις στήλες χωρίς πλαίσια και χωρίς φόντο. Κουτιά με σκιές θα τα έκαναν
   να μοιάζουν με κάρτες προϊόντων, και το πλέγμα προϊόντων ξεκινά λίγο πιο
   κάτω — δύο διαφορετικά πράγματα δεν πρέπει να έχουν το ίδιο σχήμα.

   Η ενότητα κάθεται πάνω σε ανοιχτό φόντο αμέσως μετά το σκούρο banner: η
   αλλαγή τόνου κάνει τη δουλειά που θα έκανε ένα πλαίσιο. */
.why-us { padding-top: 40px; padding-bottom: 40px; }

/* Οι στήλες ακολουθούν τον αριθμό των καρτών, που τον γράφει η σελίδα στο
   --why-cols. Με σταθερό «3» μια κάρτα που αφαιρείται αφήνει κενή στήλη. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(var(--why-cols, 3), 1fr);
  gap: 32px;
}
.why-item h3 {
  font-size: 20px;
  margin: 12px 0 8px;
  text-wrap: balance;
}
.why-item p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
}
/* Το εικονίδιο σε κύκλο απόχρωσης: αρκετά ώστε να σταματά το μάτι, όχι τόσο
   ώστε να ανταγωνίζεται τον τίτλο. */
.why-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--brand-lt); color: var(--brand);
}
.why-ico svg { width: 20px; height: 20px; }

.why-more { margin: 32px 0 0; font-size: 16px; }
.why-more a { font-weight: 600; }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ΤΑ ΧΡΩΜΑΤΑ ΣΤΗΝ ΚΑΡΤΑ.

   Κουκκίδες 12px με λεπτό περίγραμμα — το περίγραμμα δεν είναι διακόσμηση:
   χωρίς αυτό το λευκό και το μπεζ εξαφανίζονται πάνω στο λευκό της κάρτας.
   Δεν τυλίγονται σε δεύτερη σειρά· ό,τι δεν χωράει γίνεται «+4». */
.card-colours {
  display: flex; align-items: center; gap: 4px;
  margin-top: 8px; min-height: 12px;
}
.cc-dot {
  width: 12px; height: 12px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background-size: cover; background-position: center;
  flex: none;
}
.cc-more {
  font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-left: 2px;
}

/* Η ΤΙΜΗ: το δεύτερο δυνατότερο στοιχείο μετά τη φωτογραφία.

   Το «από» και το «/ τεμ.» υποχωρούν σε 12px και ξεθωριασμένο χρώμα, ώστε το
   νούμερο να μένει μόνο του. Στοίχιση σε baseline και όχι σε κέντρο: τα μικρά
   κομμάτια πρέπει να κάθονται στη γραμμή του νούμερου, αλλιώς κρέμονται. */
.card-price {
  margin: 8px 0 0;
  display: flex; align-items: baseline; gap: 4px;
  font-size: 12px; color: var(--ink-3);
}
.card-price strong {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.card-price .cp-unit { white-space: nowrap; }

.qty-summary { margin: 12px 0 0; font-size: 14px; min-height: 20px; }
.qty-summary .qs-total { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.qty-summary .qs-warn { color: #B4442F; }

.no-specs {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: 20px 24px; margin: 0 0 24px;
}
.no-specs h3 { font-size: 16px; margin: 0 0 8px; }
.no-specs p { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }

/* Διαθεσιμότητα */
.stock-line { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.stock-line .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #1D9E75; margin-right: 8px; vertical-align: 1px;
}
.no-specs.stock-out { border-color: #E6C9A8; background: #FDF6EE; }
.no-specs.stock-out h3 { color: #8A5A1F; }

.out-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(40,40,40,.88); color: #fff;
  font-size: 12px; letter-spacing: .02em;
  padding: 4px 8px; border-radius: 999px;
}

/* ============================================================
   Ανέβασμα λογοτύπου
   ============================================================ */
.logo-upload {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 20px; margin: 0 0 20px; background: var(--surface);
}
.logo-upload legend { font-weight: 600; font-size: 14px; padding: 0 8px; color: var(--ink); }
.logo-upload .help { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; }
.logo-upload .help strong { color: var(--ink); font-weight: 600; }

/* Το κουμπί επιλογής αρχείου.
   Το πραγματικό <input type="file"> είναι διάφανο και απλώνεται πάνω από το
   κουμπί: κρατάμε πάτημα, πληκτρολόγιο και οθόνες ανάγνωσης όπως τα δίνει ο
   browser, αλλά η εμφάνιση είναι δική μας και στα ελληνικά. */
.uploader { margin: 0; }
.uploader-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.uploader-help { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin: 0 0 8px; }

.uploader-face {
  position: relative; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  border: 1px dashed var(--line-2, var(--line)); border-radius: var(--r-sm);
  background: var(--paper); padding: 12px 12px;
  transition: border-color .15s ease, background .15s ease;
}
.uploader-face:hover { border-color: var(--brand); background: var(--brand-lt); }

.uploader-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.uploader-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  background: var(--ink); color: var(--paper);
  font-size: 14px; font-weight: 600; line-height: 1;
  padding: 8px 16px; border-radius: var(--r-sm);
}
.uploader-btn svg { width: 15px; height: 15px; }
.uploader-face:hover .uploader-btn { background: var(--brand); }
.uploader-hint { font-size: 12px; color: var(--ink-3); }

/* Ο δακτύλιος εστίασης δεν χάνεται επειδή το πεδίο είναι αόρατο. */
.uploader-input:focus-visible ~ .uploader-btn { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Εμφανίζεται μόνο από τη JavaScript, όταν όντως επιλεγεί αρχείο. */
.uploader-picked {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; color: var(--ink-2);
  background: var(--surface); border-radius: var(--r-sm); padding: 8px 12px;
}
.uploader-picked[hidden] { display: none; }
.uploader-picked svg { width: 15px; height: 15px; flex: none; color: var(--brand); }
.up-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-clear {
  flex: none; background: none; border: none; cursor: pointer; padding: 2px 4px;
  font-family: inherit; font-size: 12px; color: var(--alert);
}
.up-clear:hover { text-decoration: underline; }
.uploader-error { color: var(--alert); }
.uploader-error svg { color: var(--alert); }

/* Το πεδίο ανά προϊόν, μέσα στη γραμμή της λίστας. */
.basket-logo-lead {
  font-size: 14px; color: var(--ink-2); line-height: 1.55;
  margin: 0 0 12px; padding: 0 2px;
}
.basket-logo-lead strong { color: var(--ink); font-weight: 600; }
.basket-row { flex-wrap: wrap; }
.basket-logo { flex: 0 0 100%; margin: 12px 0 2px; }
@media (min-width: 620px) {
  /* Στοιχισμένο κάτω από το όνομα, όχι κάτω από τη φωτογραφία. */
  .basket-logo { margin-left: 80px; flex-basis: calc(100% - 78px); }
}

/* Όταν το site έχει δικό του υποσέλιδο, το παλιό μένει μόνο ως νομική γραμμή. */
.site-footer-slim { padding-top: 0; }
.site-footer-slim .footer-bottom { border-top: 1px solid rgba(255,255,255,.10); }



/* ============================================================
   Τα φίλτρα κατηγοριών: δέντρο με πτυσσόμενες ομάδες

   Ίδια λογική με το συρτάρι του μενού, ώστε ο επισκέπτης να συναντά την ίδια
   δομή σε δύο σημεία. Κλειστές, οι 16 κύριες κατηγορίες χωρούν σε μία ματιά —
   ανοιχτές θα ήταν 108 γραμμές και δύο οθόνες σκρολ.
   ============================================================ */
.filter-tree { display: block; }

.filter-tree .ft-all {
  display: block; padding: 8px 12px; margin-bottom: 8px;
  background: var(--surface); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.filter-tree .ft-all:hover { background: var(--brand-lt); color: var(--brand); text-decoration: none; }

.ft-group { border-bottom: 1px solid var(--line); }
.ft-group:last-child { border-bottom: none; }

.ft-group > summary,
.ft-leaf {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink);
  list-style: none;
}
/* Το τριγωνάκι του browser φεύγει — έχουμε δικό μας βελάκι. */
.ft-group > summary::-webkit-details-marker { display: none; }
.ft-group > summary::marker { content: ""; }
.ft-group > summary:hover, .ft-leaf:hover { color: var(--brand); text-decoration: none; }

.ft-leaf { border-bottom: 1px solid var(--line); }
.ft-name { flex: 1; min-width: 0; }

.ft-arrow {
  flex: none; width: 7px; height: 7px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.ft-group[open] > summary { color: var(--brand); }
.ft-group[open] > summary .ft-arrow { transform: rotate(45deg); border-color: var(--brand); }

.ft-subs { padding: 2px 0 12px 16px; border-left: 2px solid var(--line); margin-left: 4px; }
.ft-sub {
  display: block; padding: 8px 12px;
  font-size: 14px; color: var(--ink); border-radius: var(--r-sm);
  line-height: 1.4;
}
.ft-sub:hover { background: var(--brand-lt); color: var(--brand); text-decoration: none; }
.ft-sub-all { font-weight: 600; color: var(--brand); }

/* Η επιλεγμένη κατηγορία, με μπάρα στο πλάι. */
.ft-sub.current, .ft-leaf.current, .filter-tree .ft-all.current {
  color: var(--brand); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
  background: var(--brand-lt);
}

/* ── Τρίτο επίπεδο ──

   Η υποκατηγορία που έχει δικές της υποκατηγορίες γίνεται κι αυτή <details>.
   Δεν παίρνει το βαρύ στυλ της κύριας κατηγορίας: μοιάζει με τα αδέρφια της
   (ίδιο μέγεθος, ίδιο padding) και ξεχωρίζει μόνο από το βελάκι. Αλλιώς το
   μάτι διαβάζει τρία διαφορετικά «είδη» γραμμών και χάνει την ιεραρχία. */
.ft-group-sub {
  border-bottom: none;
}
.ft-group-sub > summary {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--r-sm);
}
.ft-group-sub > summary:hover {
  background: var(--brand-lt);
}
.ft-group-sub[open] > summary {
  font-weight: 600;
}

/* Η φωλιά του τρίτου επιπέδου είναι πιο ρηχή από του δεύτερου — με ίδια
   εσοχή, η στήλη τελειώνει πριν τελειώσουν τα ονόματα. */
.ft-group-sub .ft-subs {
  padding-left: 12px;
  margin-left: 12px;
}
.ft-group-sub .ft-sub {
  font-size: 14px;
  color: var(--ink-2);
}

/* =========================================================================
   ΑΦΗ ΚΑΙ ΣΤΕΝΕΣ ΟΘΟΝΕΣ
   =========================================================================

   Οι διορθώσεις μετά από συστηματικό έλεγχο σε 320, 360, 375, 414, 560, 768,
   1024, 1280 και 1440 πλάτος, σε όλες τις σελίδες του ADV. Είναι μαζεμένες
   εδώ και όχι σκορπισμένες, ώστε να φαίνεται ΤΙ αλλάζει όταν το site πιάνεται
   με δάχτυλο αντί για ποντίκι.

   Η ΚΛΙΜΑΚΑ ΤΩΝ ΣΗΜΕΙΩΝ ΑΛΛΑΓΗΣ

   Το φύλλο έχει μαζέψει δεκατέσσερα διαφορετικά πλάτη (400, 460, 480, 560,
   620, 640, 720, 760, 860, 900, 1000, 1040, 1120, 1240). Τα περισσότερα
   μπήκαν για συγκεκριμένο στοιχείο που «έσπαγε» εκεί, και αυτό είναι θεμιτό —
   το σημείο αλλαγής το ορίζει το περιεχόμενο, όχι μια λίστα συσκευών.

   Οι ΤΡΕΙΣ όμως που αφορούν όλη τη σελίδα είναι:

       ≤ 900px   συμπαγής διάταξη — εδώ αρχίζει η αφή
       ≤ 640px   μία στήλη
       ≤ 400px   πολύ στενό (iPhone SE, Galaxy Fold κλειστό)

   Ό,τι νέο μπαίνει, μπαίνει σε ένα από αυτά τα τρία.
   ========================================================================= */

/* ── 1. Η παγίδα zoom του iPhone ──────────────────────────────────────────

   Ο Safari σε iPhone ΜΕΓΕΘΥΝΕΙ αυτόματα τη σελίδα όταν εστιάσει σε πεδίο με
   γράμματα κάτω από 16px — και δεν την επαναφέρει όταν φύγει η εστίαση. Ο
   επισκέπτης μένει με μια σελίδα που δεν χωρά στην οθόνη και δεν καταλαβαίνει
   γιατί.

   Ο έλεγχος βρήκε τρία: το «Ταξινόμηση» του καταλόγου (14px), η ποσότητα στη
   λίστα προσφοράς (15px) και το πεδίο αρχείου (13px).

   Ισχύει μόνο σε στενή οθόνη: στον υπολογιστή τα 14px είναι σωστό μέγεθος
   για ένα select μέσα σε γραμμή εργαλείων, και δεν υπάρχει zoom να πυροδοτηθεί. */
@media (max-width: 900px) {
  input, select, textarea,
  .sort-switch select,
  .basket-qty input[type=number],
  .qd-num {
    font-size: 16px;
  }
}

/* ── 2. Στόχοι που πατιούνται με δάχτυλο ──────────────────────────────────

   Το δάχτυλο δεν είναι δείκτης ποντικιού: θέλει περίπου 44px για να πετύχει
   στόχο χωρίς δεύτερη προσπάθεια. Ο έλεγχος βρήκε τα παρακάτω αρκετά κάτω
   από αυτό. Δεν μεγαλώνουν τα ΓΡΑΜΜΑΤΑ — μεγαλώνει η περιοχή γύρω τους. */
@media (max-width: 900px), (pointer: coarse) {

  /* Το τηλέφωνο και το email στην πάνω μπάρα ήταν 19px ύψος. Είναι ό,τι πιο
     πιθανό θα πατήσει κάποιος από κινητό — και ό,τι πιο δύσκολο ήταν. */
  /* ΠΡΟΣΟΧΗ ΣΤΗΝ ΕΜΒΕΛΕΙΑ: μόνο τα ΠΑΤΗΣΙΜΑ, δηλαδή η δεξιά ομάδα.

     Πρώτη γραφή έλεγε σκέτο «.topbar .tb-item» — ίδια ειδικότητα με το
     «.topbar .tb-hours { display: none }» παραπάνω, αλλά πιο κάτω στο αρχείο,
     οπότε ΞΑΝΑΕΜΦΑΝΙΣΕ το ωράριο σε κινητό και η μπάρα ξεχείλισε κατά 53px.
     Η τοποθεσία και το ωράριο δεν πατιούνται· δεν τα αφορά ο κανόνας. */
  .topbar .tb-actions .tb-item,
  .site-footer .f-contact a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Η εναλλαγή γλώσσας ήταν 27×28.

     Το ύψος γίνεται 44px, το πλάτος ΟΧΙ: δύο επιλογές των 44px δεν χωρούν
     στη δεξιά ζώνη του header σε οθόνη 320px — ξεχείλιζαν κατά 29px. Στόχος
     40×44 είναι ήδη πολύ πάνω από το ελάχιστο και δεν σπάει τη διάταξη. */
  .lang-switch .lang-opt {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* ΤΟ ΚΑΤΩΦΛΙ ΤΩΝ 375px ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΟ, ΟΧΙ ΔΙΑΛΕΓΜΕΝΟ

   Η εναλλαγή γλώσσας κάθεται στη δεξιά ζώνη του header, μαζί με την
   αναζήτηση και το κουμπί της παραγγελίας. Δύο επιλογές των 44px θέλουν
   περίπου 90px, και τόσα δεν υπάρχουν σε κάθε οθόνη.

   Δοκιμάστηκαν τέσσερα κατώφλια, με μέτρηση κάθε φορά:

       341px → ξεχείλιζε 17px στα 344 και 9px στα 360
       361px → ξεχείλιζε 9px στα 360
       375px → φαινόταν καθαρό, ΑΛΛΑ ΔΕΝ ΗΤΑΝ (βλ. παρακάτω)
       401px → καθαρό, αλλά άφηνε απ' έξω το iPhone

   Η ΠΑΓΙΔΑ ΤΗΣ ΜΠΑΡΑΣ ΚΥΛΙΣΗΣ

   Το 375px πέρασε τον έλεγχο και μπήκε. Σε δεύτερη μέτρηση, σε σελίδα με
   περισσότερο περιεχόμενο, ξεχείλιζε 4px — σε ΟΛΕΣ τις σελίδες, όχι μόνο σε
   μία.

   Ο λόγος: το «min-width» των media queries μετράει το viewport ΜΑΖΙ με την
   μπάρα κύλισης, ενώ η διάταξη έχει στη διάθεσή της το πλάτος ΧΩΡΙΣ αυτήν.
   Σε παράθυρο 375px με κλασική μπάρα 15px, ο κανόνας ενεργοποιείται αλλά ο
   πραγματικός χώρος είναι 360px — ακριβώς το πλάτος που είχαμε ήδη μετρήσει
   ότι δεν φτάνει.

   Το κατώφλι ανέβηκε στα 390px: 375 + 15 για τη μπάρα. Καλύπτει και τα
   iPhone 14/15 (390 και 393 λογικά pixel), που σε πραγματικό κινητό δεν
   έχουν καν μπάρα να κλέψει πλάτος.

   Στα 375 και κάτω μένει 27×44: στενή αλλά ψηλή λωρίδα, που πατιέται εύκολα
   και δεν σπάει τη μπάρα. Ένα στοιχείο εκτός οθόνης θα ήταν χειρότερο. */
@media (min-width: 390px) and (max-width: 900px), (min-width: 390px) and (pointer: coarse) {
  .lang-switch .lang-opt { min-width: 44px; }
}

/* Συνέχεια των στόχων αφής, σε ΟΛΑ τα πλάτη αφής.

   Αυτό το άνοιγμα λείπει σε πρώτη γραφή: το προηγούμενο μπλοκ έκλεισε νωρίς
   για να μπει η εξαίρεση των 401px, και όλοι οι παρακάτω κανόνες βρέθηκαν
   μέσα σε αυτήν. Αποτέλεσμα: στα 414px η σελίδα έβγαινε καθαρή, στα 320-375
   — δηλαδή στα πιο κοινά τηλέφωνα — δεν εφαρμοζόταν τίποτα. */
@media (max-width: 900px), (pointer: coarse) {

  /* Το κουμπί της παραγγελίας στο header: 37px. */
  .basket-pill { min-height: 44px; }

  /* Οι σύνδεσμοι της κύριας πλοήγησης: 38px. */
  .bar-left a.nav-link { min-height: 44px; align-items: center; }

  /* «Προσθήκη» σε κάθε κάρτα — το κουμπί που οδηγεί στην παραγγελία,
     35px ύψος. Το πιο σημαντικό από όλα σε αυτή τη λίστα. */
  .btn-sm { min-height: 44px; }

  /* Η εναλλαγή 3/4 στηλών και το κλείσιμο του συρταριού. */
  .col-btn { width: 44px; height: 44px; }
  .oc-close, .qd-close, .lb-close { min-width: 44px; min-height: 44px; }

  /* Τα +/− της ποσότητας στο συρτάρι ήταν 28px. */
  .qd-qty button { width: 40px; height: 40px; }

  /* Οι νομικοί σύνδεσμοι στο κάτω μέρος του footer: 17-22px ύψος.
     Είναι τα κείμενα που κάποιος ψάχνει όταν ΤΑ ΧΡΕΙΑΖΕΤΑΙ — απόρρητο,
     cookies, όροι — και ήταν τα δυσκολότερα να πατηθούν σε όλη τη σελίδα. */
  .footer-legal a,
  .footer-legal-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Το «Προσαρμογή» του μπάνερ cookies: 33px. Η εναλλακτική στο «Αποδοχή
     όλων» δεν πρέπει να είναι δυσκολότερη στο πάτημα από αυτό. */
  .cb-link { min-height: 44px; }

  /* Η διαδρομή πάνω από το προϊόν («Κατάλογος › Τσέπης»): 18px ύψος.
     Είναι ο τρόπος να γυρίσει κανείς πίσω στην κατηγορία αφού δει ένα
     προϊόν — δηλαδή ό,τι κάνει κανείς συνεχώς όταν ψάχνει. */
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Το κουτάκι συναίνεσης GDPR ήταν 17×17.

     ΤΟ ΜΕΤΡΟ ΛΕΕΙ 20px, Ο ΠΡΑΓΜΑΤΙΚΟΣ ΣΤΟΧΟΣ ΕΙΝΑΙ ΟΛΟ ΤΟ ΚΕΙΜΕΝΟ

     Το input κάθεται μέσα σε <label for="...">, οπότε πατώντας οπουδήποτε
     στην πρόταση «Έχω διαβάσει και αποδέχομαι…» το κουτάκι τσεκάρεται. Ο
     στόχος δηλαδή δεν είναι 20px· είναι τρεις γραμμές κειμένου.

     Δοκιμάστηκε και ένα ::before στο ίδιο το input, για να απλώσει την
     περιοχή σε 44×44. ΔΕΝ ΔΟΥΛΕΥΕΙ: τα input είναι αντικαταστημένα στοιχεία
     και δεν δέχονται ψευδοστοιχεία σε κανέναν browser. Αφαιρέθηκε αντί να
     μείνει νεκρός κώδικας που δείχνει λυμένο κάτι που δεν είναι.

     Μένει μόνο η μεγέθυνση του ίδιου του τετραγώνου, από 17 σε 20px — για να
     φαίνεται, όχι για να πατιέται. */
  .consent-check input { width: 20px; height: 20px; }

  /* Το «Ταξινόμηση» ξεχείλιζε κατά 5px στα 320px, αφότου τα γράμματά του
     πήγαν στα 16px για να μην κάνει zoom ο Safari. Παίρνει όλο το πλάτος
     της σειράς του αντί να παλεύει για χώρο δίπλα στην ετικέτα. */
  .sort-switch { flex-wrap: wrap; }
  .sort-switch select { flex: 1 1 100%; min-width: 0; }

  /* Το λογότυπο, 34px. Είναι ο δρόμος επιστροφής στην αρχική. */
  .brand { min-height: 44px; }

  /* Όταν το email μένει μόνο με το εικονίδιό του (κάτω από 400px), ο στόχος
     έπεφτε στα 14px πλάτος — μικρότερος από το ίδιο το εικονίδιο συν το
     δάχτυλο που το ψάχνει. */
  .topbar .tb-email { min-width: 44px; justify-content: center; }
}

/* ── 3. Η πάνω μπάρα σε κινητό ────────────────────────────────────────────

   Έπιανε 70px επειδή «Ηράκλειο Κρήτης», τηλέφωνο και email δεν χωρούσαν σε
   μία σειρά και τύλιγαν σε δύο — με την τοποθεσία να κάθεται μόνη της στη
   μέση, που έμοιαζε λάθος. Μαζί με το header, ο επισκέπτης έβλεπε 231px
   διακόσμηση πριν από οποιοδήποτε περιεχόμενο.

   Η τοποθεσία είναι πληροφορία· το τηλέφωνο και το email είναι ΕΝΕΡΓΕΙΕΣ.
   Σε στενή οθόνη μένουν μόνο οι ενέργειες, σε μία σειρά. */
@media (max-width: 640px) {
  .topbar .tb-location { display: none; }
  .topbar .wrap {
    justify-content: center;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: nowrap;
  }
  .topbar .tb-group { gap: 8px; flex-wrap: nowrap; }
  /* Το email σε πλήρη μορφή δεν χωρά δίπλα στο τηλέφωνο κάτω από 400px· το
     εικονίδιο αρκεί για να καταλάβει κανείς τι είναι. */
  .topbar .tb-item { font-size: 13px; }
}
@media (max-width: 400px) {
  .topbar .tb-email .tb-text { display: none; }
}

/* ── 4. Πολύ στενές οθόνες (320px) ────────────────────────────────────────

   Στα 320px — iPhone SE πρώτης γενιάς, Galaxy Fold κλειστό — τρία στοιχεία
   ξεχείλιζαν από τον γονιό τους. Δεν προκαλούσαν οριζόντια κύλιση (τα έκοβε
   κάποιο overflow), αλλά έκρυβαν κείμενο: ο επισκέπτης έβλεπε μισή τιμή. */
@media (max-width: 400px) {

  /* Ο πίνακας κλιμακωτών τιμών ξεχείλιζε κατά 21px. Με display:block κυλάει
     μόνος του, αντί να στριμώξει τα νούμερα σε δυσανάγνωστο πλάτος — μια
     τιμή που δεν διαβάζεται δεν εξυπηρετεί κανέναν. */
  .price-tiers {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Η ετικέτα και τα κουμπιά της ποσότητας ξεχείλιζαν κατά 40px.

     ΔΥΟ ΞΕΧΩΡΙΣΤΕΣ ΑΙΤΙΕΣ, ΚΑΙ ΟΙ ΔΥΟ ΧΡΕΙΑΖΟΝΤΑΙ ΔΙΟΡΘΩΣΗ

     Η πρώτη ήταν η διάταξη: ετικέτα, πεδίο και κουμπιά προσπαθούσαν να
     μείνουν σε μία σειρά. Σπάνε σε τρεις.

     Η δεύτερη είναι πιο ύπουλη. Τα κουμπιά έχουν «white-space: nowrap» ώστε
     να μη σπάει το κείμενό τους στη μέση — σωστό σε κανονική οθόνη. Αλλά το
     «Προσθήκη στην παραγγελία» σε μία γραμμή θέλει 267px, ενώ το κουτί της
     τιμής δίνει 229px. Και επειδή ένα στοιχείο flex έχει από προεπιλογή
     «min-width: auto», ΔΕΝ επιτρέπεται να μικρύνει κάτω από το κείμενό του:
     έτσι σπρώχνει τον γονιό του και ξεχειλίζει.

     Κάτω από 400px το κείμενο τυλίγεται σε δύο γραμμές. Ένα κουμπί δύο
     σειρών είναι μια χαρά· ένα κουμπί που βγαίνει έξω από την οθόνη όχι. */
  .price-box .qty-form { flex-direction: column; align-items: stretch; }
  .qty-actions { flex-direction: column; min-width: 0; }
  .qty-actions .btn {
    width: 100%;
    white-space: normal;
    line-height: 1.3;
  }

  /* Το κουμπί επιλογής αρχείου ξεχείλιζε κατά 14px από το πλαίσιό του. */
  .uploader-face { flex-wrap: wrap; gap: 8px; }
  .uploader-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── 5. Η ετικέτα του κουμπιού αλλάζει με το πλάτος ───────────────────────

   Το ίδιο κουμπί ανοίγει το ίδιο πάνελ, αλλά το πάνελ ΔΕΝ έχει το ίδιο
   περιεχόμενο σε κάθε πλάτος:

     πάνω από 900px   κατηγορίες προϊόντων → «Προϊόντα»
     κάτω από 900px   κατηγορίες + οι σελίδες του site → «Μενού»

   Το σημείο αλλαγής είναι το ίδιο 900px όπου αρχίζει να κρύβεται ο πρώτος
   σύνδεσμος πλοήγησης («Αρχική»). Από εκεί και κάτω, το κουμπί έχει
   αναλάβει δουλειά που δεν είχε πριν, και το λέει. */
.cat-label-narrow { display: none; }
@media (max-width: 900px) {
  .cat-label-wide   { display: none; }
  .cat-label-narrow { display: inline; }
}

/* ── Σφάλματα φορμών: περίληψη + μήνυμα ανά πεδίο ──────────────────────────

   Δείτε includes/form-errors.php για το γιατί υπάρχουν ΚΑΙ ΤΑ ΔΥΟ. */
.form-errors { margin: 0 0 24px; }
.form-errors .fe-intro { margin: 0 0 8px; font-weight: 700; }
.form-errors .fe-list { margin: 0; padding-left: 20px; }
.form-errors .fe-list li + li { margin-top: 4px; }
.form-errors .fe-list a { color: inherit; }

/* Η περίληψη παίρνει εστίαση από τη JavaScript. Χωρίς αυτόν τον κανόνα το
   περίγραμμα δεν θα φαινόταν, γιατί το tabindex="-1" δεν είναι «κανονική»
   εστίαση και πολλοί browsers δεν ζωγραφίζουν τίποτα. */
.form-errors:focus-visible,
.form-errors:focus { outline: 3px solid var(--alert, #B3261E); outline-offset: 3px; }

.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 6px 0 0;
  font-size: 14px; line-height: 1.45;
  color: var(--alert, #B3261E);
}
/* Το εικονίδιο δεν αντικαθιστά το κείμενο — το συνοδεύει. Πληροφορία που
   δίνεται ΜΟΝΟ με χρώμα ή μόνο με σχήμα χάνεται από όποιον δεν τα διακρίνει. */
.field-error svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* Το πεδίο με λάθος έχει κόκκινο περίγραμμα ΚΑΙ μήνυμα από κάτω. Μόνο το
   περίγραμμα θα ήταν «πληροφορία με χρώμα», που ο κανόνας απαγορεύει. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--alert, #B3261E);
}
.consent-field.has-error { color: var(--alert, #B3261E); }

/* ── Ο χάρτης της επιλεγμένης τοποθεσίας ραντεβού ──────────────────────────

   Όλοι οι χάρτες γράφονται στη σελίδα και η JavaScript δείχνει έναν. Το
   [hidden] χρειάζεται ρητή δήλωση επειδή το .appt-map ορίζει display. */
.appt-map {
  margin: 18px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.appt-map[hidden] { display: none; }

/* Σταθερή αναλογία αντί για σταθερό ύψος: ο χάρτης δεν «πηδάει» καθώς
   φορτώνει, και δεν γίνεται λωρίδα σε κινητό. */
.appt-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  border: 0;
}
@media (max-width: 560px) {
  .appt-map iframe { aspect-ratio: 4 / 3; }
}

.appt-map-foot {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  align-items: center; justify-content: space-between;
  margin: 0; padding: 12px 16px;
  font-size: 14px; color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.appt-map-foot a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; white-space: nowrap;
}
.appt-map-foot svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════════════════
   BANNER ΜΕ ΔΙΑΦΑΝΕΙΕΣ
   ══════════════════════════════════════════════════════════════════════════

   Φωτογραφία αριστερά, κείμενο στο κέντρο, φωτογραφία δεξιά.

   ΟΙ ΔΙΑΦΑΝΕΙΕΣ ΣΤΟΙΒΑΖΟΝΤΑΙ ΣΤΟ ΙΔΙΟ ΣΗΜΕΙΟ, με grid και όχι με absolute:
   έτσι το ύψος του banner το ορίζει η ΨΗΛΟΤΕΡΗ διαφάνεια και δεν αναπηδά η
   σελίδα σε κάθε εναλλαγή. Με absolute θα χρειαζόταν σταθερό ύψος, που σε
   κινητό κόβει κείμενο. */

.hero-carousel {
  position: relative;
  display: grid;
  background: var(--ink, #1E2A38);
  color: #fff;
  overflow: hidden;
}

/* ── Τρεις στήλες που πιάνουν ΟΛΟ το ύψος ──

   Οι φωτογραφίες δεν κάθονται μέσα σε πλαίσιο με αέρα γύρω τους: πιάνουν
   άκρη σε άκρη το κελί τους και ακουμπούν το κεντρικό πλαίσιο. Το κείμενο
   ζει σε μια λωρίδα ανάμεσά τους. */
.hc-slide {
  grid-area: 1 / 1;              /* όλες στο ίδιο κελί */
  display: grid;
  grid-template-columns: 1fr minmax(320px, 32%) 1fr;
  align-items: stretch;
  min-height: clamp(320px, 31vw, 470px);

  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
}

.hc-slide.is-active { opacity: 1; visibility: visible; }

/* Χωρίς JavaScript καμία διαφάνεια δεν παίρνει ποτέ «is-active» πέρα από την
   πρώτη — που την έχει από τον server. Άρα το banner δείχνει σωστά ακόμη κι
   αν το script δεν φορτώσει. */

.hc-side { overflow: hidden; }

/* ΕΔΩ ΤΟ COVER ΕΙΝΑΙ ΣΩΣΤΟ, ΚΑΙ ΜΟΝΟ ΕΔΩ.

   Παντού αλλού στο site οι φωτογραφίες προϊόντων είναι «contain», ποτέ
   κομμένες: ο πελάτης πρέπει να δει ολόκληρο αυτό που αγοράζει. Οι εικόνες
   του banner όμως δεν είναι φωτογραφίες προϊόντος — είναι σκηνικά, φτιαγμένα
   εξαρχής για να γεμίζουν τη στήλη τους. Το «contain» εδώ θα άφηνε κενές
   λωρίδες δεξιά κι αριστερά, που είναι ακριβώς το πλαίσιο που δεν θέλουμε. */
.hc-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hc-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(26px, 3vw, 46px) clamp(20px, 2.6vw, 34px) clamp(104px, 10vw, 132px);
}

.hc-text h1,
.hc-text h2 {
  color: #fff;
  margin: 0 0 12px;
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.15;
}

.hc-sub {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 34ch;
}

/* Το κουμπί: σταθερό, ίδιο σε κάθε διαφάνεια, πάνω στη μεσαία λωρίδα.
   Το «justify-self: center» το φέρνει στο κέντρο του banner — και η μεσαία
   στήλη είναι κι αυτή στο κέντρο, οπότε πέφτει πάντα μέσα της. */
.hc-action {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: end;
  margin-bottom: clamp(52px, 6vw, 70px);
  z-index: 3;
}

.hc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 3;
}

.hc-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.hc-dot.is-active { background: #fff; transform: scale(1.25); }

/* Ο στόχος αφής είναι 44px ακόμη κι όταν η κουκκίδα είναι 10 — αλλιώς σε
   κινητό χρειάζεται ακρίβεια που κανείς δεν έχει με τον αντίχειρα. */
.hc-dot::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-17px, -17px);
}

.hc-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Παύση / συνέχιση — αριστερά από τις κουκκίδες. Ορατό 26px, στόχος αφής
   44px όπως οι κουκκίδες. Λευκό περίγραμμα στο σκούρο πάνελ: 3:1 και πάνω. */
.hc-dots { align-items: center; }
.hc-pause {
  position: relative;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; padding: 0; margin-right: 8px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
}
.hc-pause[hidden] { display: none; }
.hc-pause::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.hc-pause svg { width: 9px; height: 11px; fill: currentColor; }
.hc-pause .i-play { display: none; margin-left: 2px; }
.hc-pause.is-paused .i-play { display: block; }
.hc-pause.is-paused .i-pause { display: none; }
.hc-pause:hover { background: rgba(0, 0, 0, .45); border-color: #fff; }
.hc-pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Κινητό: οι φωτογραφίες πάνε κάτω από το κείμενο ──

   Τρεις στήλες σε 375px σημαίνει τρία πράγματα που δεν διαβάζεται κανένα.

   ΤΟ ΚΟΥΜΠΙ ΒΓΑΙΝΕΙ ΑΠΟ ΤΗ ΣΤΟΙΒΑ. Σε μεγάλη οθόνη κάθεται πάνω στη μεσαία
   λωρίδα, όπου δεν εμποδίζει τίποτα. Σε κινητό όμως οι φωτογραφίες πάνε κάτω
   από το κείμενο, και το κουμπί βρισκόταν ΠΑΝΩ τους — μισό κουμπί πάνω σε
   φωτογραφία, που δεν διαβάζεται και μοιάζει με λάθος. */
@media (max-width: 720px) {
  .hero-carousel { grid-template-rows: auto auto; padding-bottom: 52px; }

  .hc-slide {
    grid-row: 1;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text text" "left right";
    min-height: 0;
  }

  .hc-text  { grid-area: text; padding: 26px 18px 22px; }
  .hc-left  { grid-area: left; }
  .hc-right { grid-area: right; }
  .hc-side  { height: clamp(150px, 42vw, 210px); }

  .hc-action {
    grid-area: auto;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    /* 10px από κάτω: το κουμπί παύσης και οι κουκκίδες έχουν στόχο αφής 44px,
       που με 6px απόσταση έπεφτε πάνω στο «Δείτε τα προϊόντα». */
    margin: 16px 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-slide { transition: none; }
  .hc-dot   { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ΟΙ ΣΥΝΔΕΣΜΟΙ ΤΩΝ FOOTER — ΕΛΑΧΙΣΤΟΣ ΣΤΟΧΟΣ
   ══════════════════════════════════════════════════════════════════════════

   Μετρημενα: 18 εως 22px υψος σε ΚΑΘΕ site. Το προτυπο ζητα 24x24 για ο,τι
   πατιεται, με ποντικι ή με δαχτυλο. Δεκαοχτω pixel σημαινει οτι ο
   συνδεσμος αστοχει σε οποιον δεν εχει σταθερο χερι — και τα footer ειναι
   ακριβως εκει που παει καποιος που ψαχνει τηλεφωνο ή διευθυνση.

   ΓΙΑΤΙ 24 ΚΑΙ ΟΧΙ 44: το 44 ειναι το ιδανικο για αφη, αλλα σε στηλη με
   εξι συνδεσμους προσθετει 150px σε καθε στηλη και αλλαζει τη σελιδα. Το 24
   περναει το οριο με 5px διαφορα και δεν φαινεται. Οι συνδεσμοι μεσα σε
   παραγραφο (π.χ. «Πολιτικη Cookies») εξαιρουνται απο το προτυπο και δεν
   πειραζονται — αλλιως θα εσπαγε η στοιχιση της γραμμης.
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer .f-col ul a,
.site-footer .f-contact a,
.hsf-col ul a,
.hsf-where a,
.vwf-col ul a,
.vwf-reach a,
.vgf-nav a,
.vgf-side dd a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Τα εικονιδια των κοινωνικων δικτυων στους καταλογους ειναι 20x20 και
   ΠΡΕΠΕΙ να μεινουν 20x20: ο χρηστης ζητησε τη σελιδα ακριβως οπως την
   ειχε. Μεγαλωνει μονο η αορατη περιοχη αφης — ιδιο κολπο με τις κουκκιδες
   του banner, καμια οπτικη διαφορα. */
.public-footer .social-icons a { position: relative; }
.public-footer .social-icons a::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
}

/* ΟΙ ΤΡΕΙΣ ΠΟΥ ΘΕΛΟΥΝ 44 ΚΑΙ ΟΧΙ 24.

   Ο κανονας απο πανω ειναι «.vwf-reach a» — δυο κλασεις, δηλαδη πιο ισχυρος
   απο το σκετο «.vwf-phone». Οταν μπηκε, κατεβασε σε 24px τρεις στοχους που
   ειχαν επιτηδες 44: τα δυο τηλεφωνα και το email των footer, που ειναι ο,τι
   πατιεται πιο συχνα απο κινητο. Ξαναδηλωνονται εδω με αρκετη ειδικοτητα. */
.hsf-where a.hsf-phone,
.hsf-where a.hsf-mail,
.hsf-where a.hsf-sister,
.vwf-reach a.vwf-phone { min-height: 44px; }

/* Η κατω μπαρα με τα νομικα: «Απορρητο», «Cookies», «Οροι Χρησης» και το
   κουμπι «Επιλογες cookies» — 19 εως 22px. Ειναι πλοηγηση μεσα σε <nav>,
   οχι συνδεσμοι μεσα σε προταση, οπως το «Πολιτικη Cookies» του πλαισιου
   συγκαταθεσης — εκεινο εξαιρειται απο το προτυπο και μενει ως εχει. */
.footer-legal a,
.footer-legal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* =========================================================================
   ΚΙΝΗΤΟ: ΚΕΦΑΛΙΔΑ ΣΕ ΔΥΟ ΓΡΑΜΜΕΣ ΚΑΙ ΟΜΟΙΟΜΟΡΦΟ SLIDER (19/10/2026)

   1. ΓΛΩΣΣΑ ΣΤΗ ΜΑΥΡΗ ΓΡΑΜΜΗ. Κάτω από 1040px η δεξιά ζώνη της κεφαλίδας
      διαλύεται (display: contents) για να πάρει η αναζήτηση δική της γραμμή —
      και το «ΕΛ | EN», χωρίς θέση στο grid, έπεφτε μόνο του σε ΤΡΙΤΗ γραμμή,
      στοιχισμένο αριστερά: ~50px κενό πριν από το περιεχόμενο. Εκεί δείχνεται
      πια το αντίγραφό του στην πάνω μπάρα, δεξιά από τηλέφωνο/email.

   2. ΠΑΝΤΑ ΤΑ ΙΔΙΑ ΣΤΟ ΚΙΝΗΤΟ. Ο «Κατάλογοι» και το «Μενού» εμφανίζονταν ή όχι
      ανάλογα με το πλάτος (340: τίποτα, 375: «Κατάλογοι», 430: «Μενού» +
      «Κατάλογοι»), και το λογότυπο μετακινούνταν μαζί τους. Κάτω από 560px:
      μόνο ☰ (όλα υπάρχουν στο συρτάρι), λογότυπο στο ΠΡΑΓΜΑΤΙΚΟ κέντρο.
      Μετρήθηκε στα 320: πλευρές 76px, το καλάθι θέλει 69.

   3. SLIDER. Όλες οι διαφάνειες είναι στο ίδιο κελί (ίδιο συνολικό ύψος), αλλά
      ο τίτλος πιάνει 2 ή 3 γραμμές — οι φωτογραφίες ξεκινούσαν σε άλλο ύψος σε
      κάθε διαφάνεια και «χοροπηδούσαν». Η γραμμή του κειμένου τεντώνεται
      (1fr) και οι φωτογραφίες κάθονται πάντα στο κάτω μέρος.
   ========================================================================= */
.topbar .lang-switch--top { display: none; }
@media (max-width: 1040px) {
  .site-header .lang-switch { display: none; }
  .topbar .lang-switch--top { display: inline-flex; margin-left: 0; }
  .topbar .wrap:has(.lang-switch--top) { justify-content: space-between; flex-wrap: nowrap; }
  .topbar .lang-switch--top .lang-opt {
    color: var(--on-dark-soft);
    min-height: 36px; display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 8px;
  }
  .topbar .lang-switch--top .lang-opt:hover { color: #fff; }
  .topbar .lang-switch--top .lang-opt.current { color: #fff; }
  .topbar .lang-switch--top .lang-opt + .lang-opt { border-left-color: rgba(255,255,255,.22); }
}
/* «Κατάλογοι» (σύνδεσμος προς άλλο site) μόνο στο ☰ κάτω από 1040px, σε
   κινητό ΚΑΙ tablet — όπου η αναζήτηση έχει πάει σε δική της γραμμή. Στα
   560–1040px έμενε στην κεφαλίδα επειδή χωρούσε· ο χρήστης τον ήθελε μόνο
   στο μενού. Στον υπολογιστή μένει στην κεφαλίδα. */
@media (max-width: 1040px) {
  .site-header .bar-left .nav-external { display: none; }
}
@media (max-width: 560px) {
  .site-header .bar-left .cat-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .site-header .bar,
  .site-header .bar:has(.mark--wide) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}
/* 4. SLIDER ΣΤΟ ΚΙΝΗΤΟ: Η ΦΩΤΟΓΡΑΦΙΑ ΩΣ ΦΟΝΤΟ (μόνο κινητό, 19/10/2026).
   Μία φωτογραφία της διαφάνειας (η αριστερή) γεμίζει όλο
   το banner, και ο τίτλος, το κείμενο και το κουμπί κάθονται στο κάτω μέρος,
   πάνω σε σκούρο σβήσιμο ώστε να διαβάζονται σε οποιαδήποτε φωτογραφία.
   Δοκιμάστηκαν πρώτα «φωτο — κείμενο — φωτο» (έκοβε σε λωρίδες), «φωτογραφίες
   πάνω, κείμενο κάτω» και η αρχική «κείμενο, φωτογραφίες κάτω».
   Ίδιο ύψος σε όλες τις διαφάνειες (το κελί του grid παίρνει το ψηλότερο) και
   το κουμπί πάντα στην ίδια θέση. Ο υπολογιστής μένει σε τρεις στήλες. */
@media (max-width: 720px) {
  .hero-carousel { grid-template-rows: auto; padding-bottom: 0; }
  .hc-slide {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
    grid-template-rows: 1fr;
    min-height: clamp(400px, 112vw, 500px);
  }
  /* ΜΙΑ φωτογραφία, σε όλο το πλάτος: τα δύο μισά δίπλα-δίπλα σε ψηλό πλαίσιο
     κόβονταν πολύ (~39% το καθένα) και φαινόταν η ραφή τους. Η αριστερή —
     ή η δεξιά, αν η αριστερή λείπει. */
  .hc-left  { grid-area: 1 / 1 / 2 / 3; }
  .hc-right { display: none; }
  .hc-slide:not(:has(.hc-left img)) .hc-right { display: block; grid-area: 1 / 1 / 2 / 3; }
  .hc-side  { height: auto; }
  .hc-text {
    grid-area: 1 / 1 / 2 / 3;
    align-self: end;
    z-index: 2;
    /* Κάτω χώρος για το κουμπί και τις κουκκίδες, που κάθονται από πάνω. */
    padding: 72px 20px 124px;
    background: linear-gradient(to top, rgba(14, 13, 9, .94) 0%, rgba(14, 13, 9, .82) 58%, rgba(14, 13, 9, 0) 100%);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
  }
  .hc-action {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: center;
    margin: 0 0 56px;
  }
}