/* ═══════════════════════════════════════════════════════════════
   GLD SYSTEMS — σχεδιαστικό σύστημα «Κλινικό Ανθρακί»

   Η παλέτα ΔΕΝ είναι επινοημένη: προέρχεται από το ίδιο το επίσημο
   έντυπο της εταιρείας (Presentation Dermaqual, εξώφυλλο/οπισθόφυλλο):
     #444141  το ανθρακί φόντο πάνω στο οποίο κάθεται το λογότυπο
     #ED1C24  το κόκκινο τετράγωνο μέσα στο «E» του SYSTEMS
     #FFFFFF  το wordmark

   Τυπογραφία: Manrope + Inter. Και οι δύο έχουν επιβεβαιωμένη ελληνική
   κάλυψη στο Google Fonts (unicode-range greek) — ελέγχθηκε.

   ΚΑΝΟΝΑΣ: καμία text-transform:uppercase σε ελληνικό κείμενο.
   Χάνει τους τόνους. Όπου χρειάζονται κεφαλαία, γράφονται κεφαλαία.
   ═══════════════════════════════════════════════════════════════ */

/* ΜΕΤΡΗΜΕΝΗ ΑΝΤΙΘΕΣΗ, ΟΧΙ ΕΚΤΙΜΩΜΕΝΗ. Τέσσερις δείκτες άλλαξαν επειδή
   υπολογίστηκε ο λόγος αντίθεσης πάνω στην ΠΡΑΓΜΑΤΙΚΗ επιφάνεια που έχουν από
   κάτω — που δεν είναι πάντα το φόντο της σελίδας:

   --ink-3  #7C828C → #868C96
     Πάνω στη σελίδα (--bg) μετρούσε 4,85:1 και περνούσε. Αλλά το ΙΔΙΟ χρώμα
     γράφει και την περιγραφή μέσα στην κάρτα (--panel, ανοιχτότερο φόντο):
     εκεί μετρήθηκε 4,27:1 — κάτω από το 4,5:1. Τώρα 4,94:1 στην κάρτα,
     4,54:1 και στην κάρτα σε hover (--panel-2), 5,59:1 στη σελίδα.

   --line-3 (νέος) #60666F
     Το --line-2 (#383D45) έντυνε ΠΕΡΙΓΡΑΜΜΑΤΑ ΣΤΟΙΧΕΙΩΝ ΕΛΕΓΧΟΥ — πεδία
     φόρμας, chip φίλτρων, ghost κουμπιά, burger. Μετρήθηκε 1,72:1, έναντι
     ορίου 3:1 (WCAG 1.4.11). Το --line-2 μένει ως ΔΙΑΚΟΣΜΗΤΙΚΗ γραμμή
     (διαχωριστικά), όπου δεν ισχύει το όριο.
     Η ΠΡΩΤΗ ΤΙΜΗ ΗΤΑΝ ΛΑΘΟΣ: υπολογίστηκε πάνω στο φόντο της ΣΕΛΙΔΑΣ (3,24:1)
     — αλλά τα chip των σειρών κάθονται μέσα σε ΚΑΡΤΑ (--panel), που είναι
     ανοιχτότερη, και εκεί μετρήθηκαν 2,86:1. Κάθε δείκτης πρέπει να μετριέται
     πάνω στην πιο ανοιχτή επιφάνεια όπου εμφανίζεται, όχι στη συνηθέστερη.
     Το #6A707A δίνει 3,32:1 στην κάρτα και 3,55:1 στη σελίδα.

   --red-btn / --red-btn-hi
     Λευκά γράμματα πάνω στο εταιρικό #ED1C24 δίνουν 4,38:1. Το κείμενο των
     κουμπιών είναι 12,96–14,4px έντονο, δηλαδή ΔΕΝ πιάνει το όριο «μεγάλο
     κείμενο» (18,66px έντονο) και άρα θέλει 4,5:1. Το #D9141B δίνει 5,16:1
     και είναι οπτικά το ίδιο κόκκινο. Στο hover ανεβαίνει σε #EA1219 (4,57:1)
     — δηλαδή ΑΚΡΙΒΩΣ το εταιρικό κόκκινο. Το #ED1C24 μένει άθικτο παντού
     όπου δεν κουβαλά κείμενο: τετράγωνο του eyebrow, κουκκίδες λίστας,
     λάμψη της ζώνης CTA, υπογράμμιση συνδέσμων. */
:root{
  --ink:#F2F3F5; --ink-2:#AFB4BC; --ink-3:#868C96;
  --bg:#111214; --bg-2:#17191C; --panel:#1C1F23; --panel-2:#22262B;
  --brand:#444141; --line:#2A2E34; --line-2:#383D45; --line-3:#6A707A;
  --red:#ED1C24; --red-hi:#FF2A33; --red-btn:#D9141B; --red-btn-hi:#EA1219;
  /* ΤΟ ΣΗΜΑ ΚΑΙ ΤΟ ΚΕΙΜΕΝΟ ΔΕΝ ΜΠΟΡΟΥΝ ΝΑ ΕΙΝΑΙ ΤΟ ΙΔΙΟ ΚΟΚΚΙΝΟ (v0.8.2).
     Το --red είναι φτιαγμένο για ΕΠΙΦΑΝΕΙΕΣ (κουμπιά, τετραγωνάκια, γραμμές),
     όπου το όριο είναι 3:1. Ως ΚΕΙΜΕΝΟ πάνω στο --panel μετρήθηκε 3,77:1 και
     το όριο για 11,2px είναι 4,5:1 — αστοχία WCAG 1.4.3 στα «01/02/03» των
     τριών λόγων. Ίδια απόχρωση (357,7°) και ίδιος κορεσμός (0,853), μόνο
     φωτεινότητα 0,520 → 0,610· μετρημένο και στα τέσσερα φόντα του θέματος:
       --panel 4,62 · --bg-2 4,92 · --bg 5,23 · --panel-2 4,25
     ΜΗΝ το βάλεις σε στοιχείο με φόντο --panel-2: εκεί δεν φτάνει. */
  --red-txt:#F14B51;
  --plate:#F5F6F7; --plate-2:#E7E9EB; --plate-ink:#15171A;
  --r:14px; --r-lg:20px;
  --pad:clamp(20px,4vw,64px);
  --maxw:1240px;
  --f-display:"Manrope","Manrope Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Inter","Inter Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* ΤΟ ΘΕΜΑ ΕΙΝΑΙ ΣΚΟΤΕΙΝΟ ΚΑΙ Ο ΦΥΛΛΟΜΕΤΡΗΤΗΣ ΔΕΝ ΤΟ ΗΞΕΡΕ. Χωρίς
     color-scheme, ό,τι ζωγραφίζει ΤΟ ΛΕΙΤΟΥΡΓΙΚΟ και όχι το CSS βγαίνει
     φωτεινό: το ΥΠΟΧΡΕΩΤΙΚΟ κουτάκι συγκατάθεσης στην Επικοινωνία ήταν
     ΛΕΥΚΟ τετράγωνο πάνω σε σκοτεινή φόρμα, ακριβώς πάνω από το «Αποστολή»
     (μετρήθηκε accent-color:auto, color-scheme:normal). Μαζί διορθώνονται
     η μπάρα κύλισης, η λαβή αλλαγής μεγέθους του textarea, το αναδυόμενο
     του <select> και το κίτρινο φόντο της αυτόματης συμπλήρωσης. */
  color-scheme:dark;
  accent-color:var(--red-btn);
  caret-color:var(--red);

  /* ⛔ ΔΟΚΙΜΑΣΤΗΚΕ ΚΟΚΚΟΣ (feTurbulence) ΚΑΙ ΑΠΟΡΡΙΦΘΗΚΕ ΜΕ ΜΕΤΡΗΣΗ.
     Το --bg είναι 18/255 σε φωτεινότητα. Κάθε προσθετική υφή είναι αναλογικά
     τεράστια: μετρήθηκε η μέση φωτεινότητα 200×200 εικονοστοιχείων —
       opacity .55 → 64   .30 → 43   .18 → 33   .12 → 28   .05 → 22
     δηλαδή ο κόκκος ΔΕΝ πρόσθετε υφή, ΑΝΤΙΚΑΘΙΣΤΟΥΣΕ το χρώμα του θέματος.
     Με background-blend-mode:overlay/soft-light η μέση κόλλησε στο 26,3 και
     36,7 ΑΝΕΞΑΡΤΗΤΑ από την ένταση — άρα ούτε εκεί υπάρχει ουδέτερο σημείο.
     Το βάθος χτίζεται με ΔΟΜΗ (ντεγκραντέ + πλέγμα + φωτισμένες ακμές), που
     είναι ελεγχόμενη: κάθε στρώμα ξέρω πόσο ανεβάζει και πού. */
  --grid:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'><path%20d='M64%200H0V64'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1'%20opacity='.05'/></svg>");
}

*{box-sizing:border-box}
/* Το [hidden] έχει display:none με ΧΑΜΗΛΗ προτεραιότητα. Η .card έχει
   display:flex, που το νικάει — τα φίλτρα μετρούσαν σωστά αλλά δεν έκρυβαν
   τίποτα. Χρειάζεται !important για να λειτουργήσει το el.hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media(min-width:1061px){html{scroll-padding-top:92px}}
/* ΤΟ ΙΔΙΟ ΓΙΑ ΤΟΝ ΠΑΤΟ, ΣΤΟ ΚΙΝΗΤΟ. Η μπάρα ενεργειών είναι position:fixed,
   οπότε ο περιηγητής τη θεωρεί «αέρα»: όταν το Tab πήγαινε στο επόμενο πεδίο
   της φόρμας, το έφερνε ακριβώς ΑΠΟ ΚΑΤΩ της και σταματούσε — μετρήθηκε το
   <select> «ΙΔΙΟΤΗΤΑ» 46 από 46 pixel κρυμμένο στα 390px. Ο χρήστης πατούσε
   «επόμενο» στο πληκτρολόγιο και πληκτρολογούσε σε πεδίο που δεν έβλεπε. */
@media(max-width:700px),(max-height:500px){
  html{scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}


/* ΒΑΘΟΣ ΣΤΟ ΕΔΑΦΟΣ, ΣΕ ΤΡΙΑ ΣΤΡΩΜΑΤΑ.
   ⚠ ΤΟ background-color ΜΕΝΕΙ ΔΗΛΩΜΕΝΟ ΧΩΡΙΣΤΑ, ΔΕΝ ΓΙΝΕΤΑΙ shorthand:
   ο έλεγχος διαβάζει getComputedStyle(body).backgroundColor, και ένα
   `background:` shorthand με εικόνες θα κρατούσε μεν το χρώμα, αλλά κάθε
   μελλοντική προσθήκη στρώματος θα το έσβηνε σιωπηλά.
   ⚠ ΚΑΜΙΑ background-attachment:fixed: σε iOS Safari το fixed φόντο σε σελίδα
   12.000px τρεμοπαίζει στην κύλιση. Τα ντεγκραντέ κάθονται στην ΚΟΡΥΦΗ της
   σελίδας (εκεί που είναι το βλέμμα στην πρώτη οθόνη) και ο κόκκος πλακώνεται. */
body{
  margin:0;color:var(--ink);
  background-color:var(--bg);
  background-image:
    /* 1. φως από πάνω — η πρώτη οθόνη δεν είναι επίπεδη */
    radial-gradient(1180px 640px at 50% -240px,rgba(255,255,255,.075),transparent 70%),
    /* 2. υπόνοια μάρκας στη γωνία, όχι κηλίδα */
    radial-gradient(820px 560px at 103% -80px,rgba(237,28,36,.05),transparent 64%),
    none;
  background-repeat:no-repeat;
  background-size:auto;
  font-family:var(--f-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* Σε αφή, το πάτημα κάρτας άναβε το προεπιλεγμένο γκρι ορθογώνιο του
     Android/iOS πάνω από τη δική μας ανάδραση (.card:active{scale}). */
  -webkit-tap-highlight-color:rgba(237,28,36,.16);
}

/* Η επιλογή κειμένου ήταν το μπλε του φυλλομετρητή — το μόνο χρώμα στη
   σελίδα που δεν ανήκε στη μάρκα. Το κόκκινο στο 30% πάνω στο --bg αφήνει
   το --ink στα 9,8:1, δηλαδή διαβάζεται καλύτερα από το προεπιλεγμένο. */
::selection{background:rgba(237,28,36,.30);color:var(--ink)}

/* ΠΛΕΓΜΑ ΟΡΓΑΝΟΥ — ΞΕΧΩΡΙΣΤΟ ΣΤΡΩΜΑ, ΓΙΑΤΙ ΠΡΕΠΕΙ ΝΑ ΣΒΗΝΕΙ.
   Ως στρώμα του body θα επαναλαμβανόταν σε 12.000px ύψος, δηλαδή ταπετσαρία.
   Εδώ είναι fixed, σβήνει προς τα κάτω και προς τα πλάγια, και ζει ΜΟΝΟ στο
   πάνω μέρος της οθόνης — υφή εκεί που κοιτάς, καθαρό εκεί που διαβάζεις.

   ⚠ z-index:-1 ΚΑΙ ΤΙΠΟΤΑ ΠΑΝΩ ΑΠΟ ΤΟ body ΜΕ transform/filter/opacity:
   οτιδήποτε από αυτά φτιάχνει πλαίσιο στοίβαξης και το ψευδοστοιχείο θα
   εξαφανιζόταν πίσω από το φόντο. Το background-color του body μένει ως έχει,
   οπότε η μέτρηση αντίθεσης (που διαβάζει CSS χρώμα) δεν αλλάζει. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grid);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 78% at 50% 0%,#000 0%,transparent 72%);
}
@media print{body::before{display:none}}
/* Σε «αυξημένη αντίθεση» η διακόσμηση φεύγει: ο χρήστης ζήτησε καθαρότητα. */
@media(prefers-contrast:more){body::before{display:none}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
/* Δακτύλιος εστίασης ΔΙΠΛΟΣ: σκούρος μέσα (box-shadow), ανοιχτός έξω (outline).
   Ο μονός κόκκινος μετρήθηκε 2.31:1 πάνω στη ζώνη CTA (--brand #444141) —
   κάτω από το 3:1 του WCAG 1.4.11, και ακριβώς εκεί κάθονται τα δύο κουμπιά.
   Με τους δύο δακτυλίους η χειρότερη μέτρηση σε ΟΠΟΙΑΔΗΠΟΤΕ επιφάνεια του
   θέματος είναι 9.10:1: ό,τι επιφάνεια κι αν υπάρχει από κάτω, ο ένας από
   τους δύο δακτυλίους έχει πάντα αντίθεση. */
:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:3px;
  box-shadow:0 0 0 2px var(--bg);
}
.skip{position:absolute;left:-9999px}
/* Η δεύτερη παράκαμψη οδηγεί στη μπάρα ενεργειών, που πάνω από 700px είναι
   display:none — σύνδεσμος προς το πουθενά. Κρύβεται μαζί της. */
.skip-actions{display:none}
@media(max-width:700px){.skip-actions{display:inline}}
.skip:focus{left:var(--pad);top:10px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;border-radius:8px}

/* ── τυπογραφία ────────────────────────────────────────────── */
/* text-wrap:balance — 78 από τις επικεφαλίδες 89 σελίδων άφηναν ΜΙΑ λέξη μόνη
   στην τελευταία γραμμή («…και προληπτική κρέμα / προσώπου»). Δεν προσθέτει
   γραμμές, μόνο τις ισοσταθμίζει· ο Chromium παύει να ισοσταθμίζει πάνω από
   ~6 γραμμές, οπότε οι ελάχιστες πολύ μακριές μένουν ως έχουν. */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.12;margin:0;
  text-wrap:balance}
h1{font-size:clamp(2.05rem,5.2vw,3.85rem);font-weight:800;letter-spacing:-.034em}
h2{font-size:clamp(1.58rem,3.3vw,2.6rem);letter-spacing:-.028em}
h3{font-size:clamp(1.1rem,1.7vw,1.4rem)}
h4{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.lead{font-size:clamp(1.01rem,1.45vw,1.18rem);color:var(--ink-2);line-height:1.72;max-width:40.38em}
.small{font-size:.855rem;line-height:1.6;color:var(--ink-3)}
.muted{color:var(--ink-3)}

/* eyebrow — το κείμενο γράφεται ΗΔΗ με κεφαλαία στο markup */
.eyebrow{
  font-family:var(--f-display);font-size:.7rem;font-weight:700;
  letter-spacing:.19em;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:.62em;margin:0 0 1.05rem;
  /* Ρητό, επειδή το «ΑΝΑΛΥΤΙΚΑ» είναι πλέον h2: χωρίς αυτό θα κληρονομούσε
     το line-height:1.12 του κανόνα h1..h4 και θα κουνούσε το κόκκινο
     τετραγωνάκι σε σχέση με τα υπόλοιπα eyebrow. */
  line-height:1.62;
}
/* Το --eb επιτρέπει στο τετραγωνάκι να πάρει το χρώμα της σειράς (σελίδα
   προϊόντος). Χωρίς μεταβλητή έμενε πάντα κόκκινο, και δίπλα του υπήρχε
   ΔΕΥΤΕΡΟ σημάδι με το σωστό χρώμα — δύο δείκτες για το ίδιο πράγμα. */
.eyebrow::before{content:"";width:6px;height:6px;background:var(--eb,var(--red));flex:none}

/* ── κέλυφος ───────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(52px,7.5vw,110px)}
.section-sm{padding-block:clamp(36px,5vw,68px)}

/* ── πλοήγηση ──────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(17,18,20,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:15px var(--pad);
  display:flex;align-items:center;gap:clamp(12px,2.2vw,32px)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
/* Το λογότυπο είναι στοιβαγμένο (GLD / γραμμή / SYSTEMS). Κάτω από ~40px
   το «SYSTEMS» γίνεται μουτζούρα, γι' αυτό η κεφαλίδα κρατά ύψος γι' αυτό. */
.brand img{height:44px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{font-family:var(--f-display);font-size:1.24rem;font-weight:800;letter-spacing:.02em}
.brand-txt span{font-family:var(--f-display);font-size:.56rem;font-weight:700;letter-spacing:.34em;color:var(--ink-3);margin-top:3px}
.brand-txt em{font-style:normal;color:var(--red)}
.nav .nav-links{display:flex;gap:clamp(8px,1.4vw,20px);margin-inline-start:auto;
  align-items:center;list-style:none;margin-block:0;padding:0}
.nav .nav-links a{font-family:var(--f-display);font-size:.81rem;font-weight:600;letter-spacing:.05em;
  color:var(--ink-2);padding:7px 2px;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s;white-space:nowrap;display:block}
.nav .nav-links a:hover{color:var(--ink)}
.nav .nav-links .current-menu-item>a,.nav .nav-links a.on{color:var(--ink);border-bottom-color:var(--red)}
.nav-cta{font-family:var(--f-display);font-size:.81rem;font-weight:700;
  background:var(--red-btn);color:#fff;padding:9px 17px;border-radius:999px;white-space:nowrap;
  transition:background .18s,transform .18s;flex:none}
.nav-cta:hover{background:var(--red-btn-hi);transform:translateY(-1px)}
.burger{display:none;border:1px solid var(--line-3);
  border-radius:9px;padding:9px 11px;cursor:pointer;line-height:0}
.burger span{display:block;width:17px;height:2px;background:var(--ink);margin:3px 0;transition:.2s}
/* ── ΤΡΕΙΣ ΔΗΛΩΜΕΝΕΣ ΜΕΤΑΒΑΣΕΙΣ, ΔΥΟ ΝΕΚΡΕΣ ──────────────────────
   Μετρήθηκε ηρεμία vs κατάσταση σε κάθε χειριστήριο της κεφαλίδας:
     .nav-search  δηλώνει color/border-color/background — αλλάζουν ΚΑΙ ΤΑ ΤΡΙΑ. ✓
     .nav-cta     δηλώνει background/transform — το transform ΔΕΝ εφαρμόζεται
                  ποτέ, ενώ το αδελφό του .btn-red σηκώνεται translateY(-1px).
                  Το ίδιο κουμπί, δύο συμπεριφορές, επειδή λείπει μία γραμμή.
     .burger span δηλώνει transition:.2s και οι τρεις γραμμές μετρήθηκαν
                  ΤΑΥΤΟΣΗΜΕΣ ανοιχτό/κλειστό (transform none, opacity 1,
                  y 28/36/44 και στις δύο καταστάσεις): το συρτάρι άνοιγε και
                  το εικονίδιο έμενε τρεις γραμμές. Το aria-expanded ΗΤΑΝ ήδη
                  σωστό από τη JavaScript — έλειπε μόνο ο κανόνας που το βλέπει,
                  άρα μηδέν νέα JavaScript.
   Το βήμα είναι 8px, ΜΕΤΡΗΜΕΝΟ και όχι εικασμένο: γραμμή 2px + margin 3+3,
   κέντρα στα y=28/36/44. Με 5px οι γραμμές δεν θα συναντιόνταν. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Η υπογράμμιση ΔΕΝ κοστίζει διάταξη: το border-bottom:2px υπάρχει ήδη
   δεσμευμένο ως transparent σε κάθε σύνδεσμο — μόνο το χρώμα ανάβει.
   Γκρι στο πέρασμα, ΚΟΚΚΙΝΟ στην τρέχουσα σελίδα.
   ⚠ ΤΟ ΔΕΥΤΕΡΟ ΖΕΥΓΟΣ ΔΕΝ ΕΙΝΑΙ ΠΛΕΟΝΑΣΜΑ — ΜΕΤΡΗΘΗΚΕ. Υπολόγισα ότι ο
   κανόνας της τρέχουσας σελίδας θα κέρδιζε μόνος του και ΕΚΑΝΑ ΛΑΘΟΣ: οι δύο
   επιλογείς είναι ΙΣΟΒΑΘΜΟΙ (0,3,1 — η ψευδοκλάση :hover μετρά όσο μια
   κλάση, ακριβώς όπως το .current-menu-item), οπότε κέρδιζε ο τελευταίος
   γραμμένος, δηλαδή ο δικός μου. Μετρήθηκε ζωντανά: περνώντας πάνω από την
   τρέχουσα σελίδα η υπογράμμιση γύριζε από κόκκινο (237,28,36) σε γκρι
   (106,112,122) — ο δείκτης «είσαι εδώ» ΕΣΒΗΝΕ ακριβώς όταν ο επισκέπτης
   στόχευε εκεί. Η επαναβεβαίωση στο (0,4,1) τον κρατά.
   Στο συρτάρι του κινητού ο .nav-links.open a (0,4,1) κερδίζει το hover,
   άρα η αφή δεν κληρονομεί εφέ ποντικιού. */
.nav .nav-links a:hover{border-bottom-color:var(--line-3)}
.nav .nav-links .current-menu-item>a:hover,.nav .nav-links a.on:hover{border-bottom-color:var(--red)}

/* ── κουμπιά ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-display);
  font-weight:700;font-size:.9rem;padding:13px 24px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.btn-red{background:var(--red-btn);color:#fff}
.btn-red:hover{background:var(--red-btn-hi);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-3);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--panel)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}

/* ── ήρωας ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(44px,6.5vw,92px) clamp(44px,6.5vw,84px)}
.hero::before{content:"";position:absolute;inset:-30% -8% auto auto;width:min(720px,84vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(237,28,36,.13),transparent 62%);filter:blur(30px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4.5vw,64px);align-items:center;position:relative}
.hero h1{margin-bottom:1.05rem}
/* ΜΟΝΟ ΒΑΡΟΣ, ΟΧΙ ΧΡΩΜΑ. Ήταν 300 + --ink-2 πάνω στο ΔΕΥΤΕΡΟ μισό: έσβηνε
   ακριβώς τη φράση που ξεχωρίζει την εταιρεία. Η αντιστροφή με το χρώμα
   μέσα δοκιμάστηκε και απορρίφθηκε — έσβηνε το «Μηχανήματα», δηλαδή το
   ουσιαστικό που σαρώνει ο γιατρός. Με σκέτο βάρος 400→800 η ιεραρχία
   ακούγεται και τα δύο μισά μένουν στο --ink. Ο άξονας της Manrope
   μετρήθηκε γραμμικός σε κάθε βήμα 200→800 (17,8px ανά 100 στα 200px),
   άρα το 400 είναι αληθινό βάρος και όχι συνθετικό. */
.hero h1 .soft{font-weight:400}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.85rem}

/* ── ΛΩΡΙΔΑ ΟΝΟΜΑΤΩΝ ΠΙΣΩ ΑΠΟ ΤΟΝ ΗΡΩΑ ─────────────────────────
   ΓΙΑΤΙ ΟΧΙ Remotion/React. Το ζητούμενο εφέ είναι perspective + μία
   μετατόπιση. Το `@remotion/player` θα έφερνε React + ReactDOM + τη
   βιβλιοθήκη (εκατοντάδες KB) και θα έτρεχε ΣΥΝΕΧΗ βρόχο καρέ με
   useCurrentFrame() — για διακόσμηση, πάνω σε site που έχει σήμερα LCP
   192ms/96ms και συνολικά 48KB χειρόγραφης JavaScript. Εδώ: 0 KB.

   Η ΚΙΝΗΣΗ ΕΙΝΑΙ transform, ΟΧΙ left/margin: μένει στον συνθέτη και δεν
   προκαλεί ανακατανομή σε κάθε καρέ.

   ΤΟ ΣΒΗΣΙΜΟ ΓΙΝΕΤΑΙ ΜΕ mask ΚΑΙ ΟΧΙ ΜΕ ΕΠΙΣΤΡΩΣΗ ΧΡΩΜΑΤΟΣ. Το πρωτότυπο
   σβήνει βάζοντας από πάνω βαθμίδες σε συμπαγές χρώμα φόντου. Εδώ το φόντο
   ΔΕΝ είναι συμπαγές — είναι δύο ακτινικές βαθμίδες συν το πλέγμα — οπότε
   επίστρωση σε σκέτο --bg θα έσβηνε και το βάθος που χτίστηκε στο v0.8.5. */
.hero-mq{position:absolute;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  perspective:1200px;
  -webkit-mask-image:radial-gradient(118% 88% at 50% 50%,#000 22%,transparent 76%);
  mask-image:radial-gradient(118% 88% at 50% 50%,#000 22%,transparent 76%)}
.hero-mq-plane{position:absolute;top:50%;left:-12%;width:124%;
  display:flex;flex-direction:column;gap:.26em;
  transform:translateY(-50%) rotateX(8deg) rotateY(-28deg);transform-style:preserve-3d}
.hero-mq-row{display:flex;width:max-content;white-space:nowrap;
  animation:gld-mq 104s linear infinite}
/* ΕΝΑΛΛΑΞ ΚΑΤΕΥΘΥΝΣΗ ΚΑΙ ΤΑΧΥΤΗΤΑ. Με τρεις σειρές στην ίδια φορά και
   ταχύτητα, το επίπεδο διαβάζεται ως ΕΝΑ φύλλο που γλιστράει — η αίσθηση
   βάθους χάνεται. Οι διαφορετικοί χρόνοι δίνουν παράλλαξη. */
.hero-mq-row:nth-child(2){animation-duration:138s;animation-direction:reverse}
.hero-mq-row:nth-child(3){animation-duration:119s}
.hero-mq-row span{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(24px,2.4vw,34px);line-height:1.06;
  color:rgba(255,255,255,.050)}
@keyframes gld-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Το περιεχόμενο ΠΑΝΩ από τη λωρίδα. Χωρίς αυτό ο τίτλος μοιράζεται
   επίπεδο με κείμενο που κινείται, και η στοίχιση τρεμοπαίζει. */
.hero-grid{z-index:1}
/* Ο χρήστης ζήτησε ακινησία — η λωρίδα μένει, σταματά. */
@media(prefers-reduced-motion:reduce){.hero-mq-row{animation:none}}
@media(prefers-contrast:more){.hero-mq{display:none}}
@media print{.hero-mq{display:none}}

/* ── ΗΡΩΑΣ ΣΕΛΙΔΑΣ ΠΡΟΪΟΝΤΟΣ ──────────────────────────────────
   ΤΡΙΑ ΠΑΙΔΙΑ ΣΤΗ ΡΟΗ, ΔΥΟ ΣΤΗΛΕΣ ΣΤΗΝ ΟΘΟΝΗ.
   Στο τηλέφωνο διαβάζονται με τη σειρά του σήματος — σειρά, όνομα, ΕΙΚΟΝΑ,
   περιγραφή, κουμπί — γιατί σε κατάλογο καλλυντικών η συσκευασία είναι η
   ταυτότητα και ήταν στο y=699 σε οθόνη 390×844, δηλαδή κάτω από το τσάκισμα.
   Στον υπολογιστή τα δύο κείμενα ξανασμίγουν αριστερά και η εικόνα πιάνει
   ολόκληρη τη δεξιά στήλη. ΧΩΡΙΣ JavaScript, χωρίς διπλό σήμα. */
.hero-prod{row-gap:0}
.hp-tech{margin-top:.75rem;font-family:var(--f-display);letter-spacing:.11em;color:var(--ink-2)}
.hp-media{margin-block:1.4rem}
.hp-body>.lead{margin-top:0}
.hp-prose{margin-top:1.2rem}
/* ⚠ 901, ΟΧΙ 701. Το .hero-grid γίνεται ΜΟΝΗ ΣΤΗΛΗ στα ≤900 (βλ. τον κανόνα
   «.hero-grid,.band-grid,.cta{grid-template-columns:1fr}» πιο κάτω). Με τις
   περιοχές δηλωμένες από τα 701, στα 768 το πλέγμα προσπαθούσε να τοποθετήσει
   δύο ονόματα περιοχών σε μία στήλη και η εικόνα έπεφτε ΤΕΛΕΥΤΑΙΑ: μετρήθηκε
   y=798, χειρότερα από τα 560 που ήταν πριν την αλλαγή. Οι περιοχές ισχύουν
   ΜΟΝΟ εκεί που υπάρχουν όντως δύο στήλες· από 701 ως 900 η σειρά του σήματος
   (κεφαλή → εικόνα → σώμα) είναι ήδη η σωστή. */
@media(min-width:901px){
  .hero-prod{grid-template-areas:"head media" "body media";align-items:start;
    grid-template-rows:auto 1fr}
  .hero-prod .hp-head{grid-area:head}
  .hero-prod .hp-body{grid-area:body}
  /* Η εικόνα κεντράρεται ΣΤΟ ΥΨΟΣ ΤΩΝ ΔΥΟ ΣΕΙΡΩΝ ΜΑΖΙ — αλλιώς κολλάει στην
     κορυφή και το κείμενο κρέμεται δίπλα της. */
  .hero-prod .hp-media{grid-area:media;align-self:center;margin-block:0}
  .hero-prod .hp-body>.lead{margin-top:1.1rem}
}

/* ΣΥΝΤΟΜΑ ΓΕΓΟΝΟΤΑ ΔΙΠΛΑ ΣΤΟ ΚΕΙΜΕΝΟ, όχι ζώνη πλήρους πλάτους για 28px.
   Αφορά ~125 από τα 145 προϊόντα: 74 έχουν μόνο πρωτόκολλο, και άλλα 53 έχουν
   «ενεργά συστατικά» που στην πραγματικότητα είναι μία-δύο λέξεις χωρίς δράση. */
.facts{margin:1.5rem 0 0;display:grid;grid-template-columns:auto 1fr;
  gap:.2rem 1rem;align-items:baseline;
  border-inline-start:2px solid var(--line-2);padding-inline-start:1rem}
.facts dt{font-family:var(--f-display);font-size:.7rem;font-weight:700;
  letter-spacing:.19em;color:var(--ink-3);text-transform:uppercase;white-space:nowrap}
.facts dd{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.66}
/* Δύο ζεύγη στη σειρά θέλουν αέρα ανάμεσά τους, όχι μόνο στο εσωτερικό. */
.facts dd+dt{margin-top:.75rem}
@media(max-width:520px){
  /* Στα στενά, η ετικέτα και το κείμενο σε δύο γραμμές: με 12 χαρακτήρες
     ετικέτας η στήλη του κειμένου έμενε 180px και έσπαγε σε 5 γραμμές. */
  .facts{grid-template-columns:1fr}
}
.facts+.note-fine{margin-top:.55rem;padding-inline-start:1rem}
.hero-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/4.4;background:var(--panel)}
.hero-fig img{width:100%;height:100%;object-fit:cover;object-position:52% 20%}
.hero-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(192deg,transparent 42%,rgba(17,18,20,.9) 100%)}
.hero-cap{position:absolute;left:18px;right:18px;bottom:15px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hero-cap .t{font-family:var(--f-display);font-size:.68rem;font-weight:700;letter-spacing:.15em;color:var(--ink-2);max-width:60%}

/* ── μετρητές ──────────────────────────────────────────────── */
/* Η ΖΩΝΗ ΜΕΝΕΙ FULL-BLEED, ΤΑ ΝΟΥΜΕΡΑ ΜΠΑΙΝΟΥΝ ΣΤΗ ΣΤΗΛΗ. Το πλέγμα πέρασε
   στο εσωτερικό .wrap ώστε το «17» να στοιχίζεται με τον τίτλο και το
   υποσέλιδο (πριν: 340px απόκλιση στα 1920, 660px στα 2560).
   ΟΙ ΓΡΑΜΜΕΣ ΕΓΙΝΑΝ BORDER, ΟΧΙ GAP: με gap:1px το χρώμα ερχόταν από το
   φόντο του γονέα — μέσα σε .wrap αυτό θα έβαφε και τις δύο λωρίδες padding
   δεξιά κι αριστερά. */
.stats{background:var(--bg);border-block:1px solid var(--line)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{background:var(--bg);padding:clamp(19px,2.5vw,30px) clamp(14px,2vw,26px);
  border-inline-start:1px solid var(--line)}
.stats-in .stat:first-child{border-inline-start:0}
/* ΤΑ ΑΚΡΑΙΑ ΚΕΛΙΑ ΧΩΡΙΣ ΕΣΩΤΕΡΙΚΟ ΠΕΡΙΘΩΡΙΟ. Το .wrap βάζει ήδη το περιθώριο
   της σελίδας· αν το κρατήσει και το κελί, το «17» ξεκινά 26px δεξιότερα από
   κάθε τίτλο της σελίδας — μετρήσιμη, ορατή απόκλιση σε κάθε πλάτος. Τα
   εσωτερικά κελιά κρατούν το δικό τους περιθώριο, γιατί εκεί χωρίζει γραμμή. */
.stats-in .stat:first-child{padding-inline-start:0}
.stats-in .stat:last-child{padding-inline-end:0}
/* ΙΣΟΠΛΑΤΕΙΣ ΑΡΙΘΜΟΙ. Μετρημένο στη Manrope 800: αναλογικά το «1» πιάνει
   45,4px και το «0» 67,4px — διαφορά 48%. Με μετρητή που ανεβαίνει, κάθε
   αλλαγή ψηφίου θα μετακινούσε ό,τι ακολουθεί («χρόνια», «οίκοι») δεξιά κι
   αριστερά σε κάθε καρέ. Με tabular-nums κάθε ψηφίο είναι ακριβώς 62px, άρα
   το πλάτος είναι σταθερό από το «0» ως το «17». Είναι ούτως ή άλλως η σωστή
   τυπογραφία για ζώνη μεγεθών. */
.stat b{font-variant-numeric:tabular-nums;display:block;font-family:var(--f-display);font-size:clamp(1.45rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1}
/* ⚠ ΑΜΕΣΟ ΠΑΙΔΙ, ΚΑΙ ΟΧΙ ΤΟ ΚΡΥΦΟ. Ο κανόνας ήταν «.stat span» και έπιανε
   ΚΑΘΕ span μέσα στον μετρητή. Όταν ο μετρητής που ανεβαίνει τύλιξε τα ψηφία
   σε δικό του span, ο αριθμός αποδόθηκε 12,4px γκρι block αντί για 23,2px
   λευκό — και το κείμενο παρέμενε σωστό, οπότε κάθε έλεγχος σε innerText
   περνούσε. Το «17» έσπαγε σε δική του γραμμή από τη λέξη που ακολουθεί.
   Το :not() εξαιρεί το αντίγραφο για τον αναγνώστη οθόνης, που είναι επίσης
   άμεσο παιδί. */
.stat > span:not(.screen-reader-text){display:block;margin-top:.5rem;font-size:.775rem;color:var(--ink-3);line-height:1.45}

/* ── κεφαλίδα ενότητας ─────────────────────────────────────── */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(24px,3.4vw,46px)}
/* min-width:0 ΜΑΖΙ με το overflow-wrap. Το .sec-head είναι flex: χωρίς το
   min-width:0 το παιδί αρνείται να συρρικνωθεί κάτω από το πλάτος της
   μεγαλύτερης λέξης, όσο overflow-wrap κι αν βάλεις. Φάνηκε στην αναζήτηση,
   όπου ο όρος τυπώνεται μέσα στον τίτλο: μια κολλημένη λέξη 120 χαρακτήρων
   έδινε 2.339px οριζόντιας κύλισης στο κινητό — έξι οθόνες κενό πλάι. */
/* ΤΟ ΠΛΑΤΟΣ ΤΗΣ ΣΤΗΛΗΣ ΔΕΝ ΠΡΕΠΕΙ ΝΑ ΕΞΑΡΤΑΤΑΙ ΑΠΟ ΤΗ ΓΡΑΜΜΑΤΟΣΕΙΡΑ.
   Ήταν 64ch. Το ch ισούται με το πλάτος του ψηφίου «0» ΤΗΣ ΤΡΕΧΟΥΣΑΣ
   γραμματοσειράς — άρα όσο έπαιζε η εφεδρική, η στήλη ήταν 588px αντί 646px.
   Μετρημένο 14/09/2026 στο /proionta/: αυτά τα 58px έριχναν τον τίτλο από 2 σε
   3 γραμμές και την εισαγωγή από 3 σε 4, δηλαδή 125px μετατόπιση σε όλη τη
   σελίδα από κάτω. Για σύγκριση, όλη η ρύθμιση μετρικών στο fonts.css κερδίζει
   ~1px. Το 40.375rem είναι ΑΚΡΙΒΩΣ όσο ήταν το 64ch με το Inter (646px στα
   16px ρίζας) — ίδια εμφάνιση, αλλά σταθερή. */
.sec-head .txt{max-width:40.38em;min-width:0}
.sec-head h1,.sec-head .lead{overflow-wrap:anywhere}
/* ΕΝΑΣ κανόνας για το κενό κάτω από τον h1, σε ΟΛΑ τα σημεία που ο τίτλος
   ακολουθείται από κείμενο. Ήταν δύο inline styles σε δύο πρότυπα και
   τίποτα στα υπόλοιπα πέντε — δηλαδή τρεις διαφορετικές αλήθειες.
   ΟΧΙ στο .hero-grid: εκεί το κενό το δίνει ήδη η διάταξη. */
.sec-head h1,
.band-txt h1,
.wrap > h1{margin-bottom:1.05rem}
.sec-head h2{margin-bottom:.65rem}
.sec-head p{margin:0}

/* ── ΠΛΑΚΕΤΑ: η λύση για packshot σε λευκό φόντο ──────────── */
/* Η ΓΡΑΜΜΗ minmax(0,1fr) ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΗ — χωρίς αυτήν κόβονται τα
   μηχανήματα. Το grid με υπονοούμενη γραμμή «auto» δεν δίνει ΟΡΙΣΤΙΚΟ ύψος,
   οπότε το max-height:100% της εικόνας δεν έχει τι να επιλύσει, συμπεριφέρεται
   σαν none, η εικόνα στρώνεται στο φυσικό της ύψος και το overflow:hidden την
   κόβει. Μετρήθηκε: διάμεση ορατότητα packshot 39,4%, χειρότερη 27,3%
   (CAM-Sterilizer: πλακέτα 358×269, εικόνα 314×904). Με τη ρητή γραμμή: 100%.
   Δοκιμάστηκε και το height:100%+object-fit — ΑΠΕΤΥΧΕ, που επιβεβαιώνει ότι
   η αιτία είναι η auto γραμμή και όχι το object-fit. */
/* ΧΡΩΜΑ ΚΕΙΜΕΝΟΥ ΓΙΑ ΤΗ ΜΙΑ ΦΟΡΑ ΠΟΥ ΘΑ ΧΡΕΙΑΣΤΕΙ. Η πλακέτα είναι λευκή
   μέσα σε σκούρο θέμα, οπότε κληρονομούσε ανοιχτό κείμενο: όταν μια εικόνα
   δεν φόρτωνε, το ελληνικό alt τυπωνόταν με αντίθεση 1,03:1 — αόρατο. Το
   --plate-ink υπήρχε ήδη στο :root και δεν το χρησιμοποιούσε κανείς. */
.plate{background:linear-gradient(168deg,var(--plate) 0%,var(--plate-2) 100%);
  display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  place-items:center;padding:22px;position:relative;overflow:hidden;
  color:var(--plate-ink)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.92),transparent 58%)}
.plate img{position:relative;z-index:1}
/* Κομμένο packshot: κάθεται μέσα στην πλακέτα με αέρα γύρω του. */
.plate.is-cutout img{max-height:100%;max-width:100%;width:auto;height:auto;min-height:0;
  object-fit:contain;mix-blend-mode:multiply}
/* Φωτογραφία με δικό της φόντο: γεμίζει την πλακέτα, χωρίς blend — αλλιώς
   το φόντο της εμφανίζεται ως ορατό γκρι κουτί μέσα στο λευκό. */
.plate.is-photo{padding:0}
.plate.is-photo img{width:100%;height:100%;object-fit:cover}
.plate.is-photo::after{display:none}
/* Φωτογραφία με ομοιόμορφο ΑΝΟΙΧΤΟ φόντο: μπαίνει ΟΛΟΚΛΗΡΗ αντί να κοπεί.
   ΔΕΝ προσπαθούμε να «σβήσουμε» το φόντο της βάφοντας την πλακέτα με το
   δειγματοληπτημένο χρώμα: το φόντο αυτών των φωτογραφιών είναι απαλή
   ΔΙΑΒΑΘΜΙΣΗ (spread έως 45), οπότε καμία επίπεδη τιμή δεν ταιριάζει και
   έμενε ορατή ραφή — ένα γκρι ορθογώνιο μέσα σε λευκή πλακέτα.
   Αντ' αυτού το δηλώνουμε: η φωτογραφία είναι πλακίδιο ΠΑΝΩ στην πλακέτα,
   με στρογγυλεμένη γωνία και απαλή σκιά. Η ραφή γίνεται περίγραμμα. */
.plate.is-photo.is-fit{background:linear-gradient(168deg,var(--plate) 0%,var(--plate-2) 100%);padding:10px}
.plate.is-photo.is-fit img{width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;mix-blend-mode:normal;border-radius:var(--tile-r,5px);
  box-shadow:0 1px 3px rgba(20,24,28,.10),0 6px 18px rgba(20,24,28,.10)}
/* ΜΕΓΕΘΥΝΣΗ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ. Οι φωτογραφίες της Summe είναι ένα έγχρωμο
   τετράγωνο τυπωμένο πάνω σε λευκό καμβά· χωρίς αυτό το προϊόν έπιανε το
   ένα τέταρτο της κάρτας μέσα σε τρία ομόκεντρα ορθογώνια.
   Η ΣΕΙΡΑ ΕΧΕΙ ΣΗΜΑΣΙΑ: translate ΠΡΩΤΑ, scale ΜΕΤΑ — γραμμένο ανάποδα, η
   μετατόπιση πολλαπλασιάζεται με τον συντελεστή και το προϊόν φεύγει εκτός. */
.plate.is-trim img{
  transform:translate(var(--plate-dx,0),var(--plate-dy,0)) scale(var(--plate-k,1));
  transform-origin:center center}
/* Το πλαίσιο και η σκιά ήταν για να διαβαστεί η φωτογραφία ως πλακίδιο. Όταν
   κόβουμε το περιθώριο δεν υπάρχει πια περιθώριο για να πλαισιωθεί. */
.plate.is-photo.is-fit.is-trim img{border-radius:0;box-shadow:none}
/* ── Η ΑΥΤΟΝΟΜΗ ΠΛΑΚΕΤΑ ΗΤΑΝ Η ΜΟΝΗ ΤΕΤΡΑΓΩΝΗ ΕΠΙΦΑΝΕΙΑ ΤΗΣ ΣΕΛΙΔΑΣ ──
   Μετρημένο στη σελίδα προϊόντος στα 1440 (κάθε επιφάνεια >60×40 με φόντο ή
   περίγραμμα): κάρτες 14px · ζώνη CTA 20px · κουμπιά 999px · ΦΩΤΟΓΡΑΦΙΑ 0px.
   Δεν ήταν απόφαση, ήταν κενό — και δύο ανεξάρτητες μετρήσεις το δείχνουν:
     α) Η ΙΔΙΑ πλακέτα μέσα σε κάρτα διαβάζεται ΗΔΗ στρογγυλή, επειδή την
        κόβει το overflow:hidden της .card στα 14px. Ίδιο στοιχείο, δύο
        αναγνώσεις, ανάλογα με το πού κάθεται.
     β) Στην ΑΡΧΙΚΗ η φωτογραφία-ήρωας (.hero-fig) είναι ήδη --r-lg, και στο
        κινητό το ίδιο --r-lg περνά στο <img>. Ίδιος ρόλος, άλλη ακτίνα.
   Μπαίνει --r-lg και όχι --r: αυτές οι πλακέτες είναι 499×623 (προϊόν) και
   499×339 (μηχάνημα) — μεγέθους πάνελ, δηλαδή στη βαθμίδα του .hero-fig και
   του .cta, όχι της κάρτας των 263px.

   ⛔ ΔΕΝ ΜΠΑΙΝΕΙ ΣΤΟ .plate ΓΕΝΙΚΑ. Μέσα σε κάρτα οι ΠΑΝΩ γωνίες θα έπεφταν
   πάνω στην ήδη κομμένη γωνία της κάρτας (αδιάφορο), αλλά οι ΚΑΤΩ γωνίες θα
   στρογγύλευαν πάνω στο σώμα της κάρτας και θα άνοιγαν δύο ορατές εγκοπές
   φόντου. Ο κανόνας στοχεύει ΜΟΝΟ τις δύο αυτόνομες θέσεις. */
.hp-media .plate,.plate-hero{border-radius:var(--r-lg);--tile-r:10px}
/* ΟΜΟΚΕΝΤΡΕΣ ΑΚΤΙΝΕΣ: εσωτερική = εξωτερική − padding. Η .is-fit κρατά το
   πλακίδιο με padding:10px μέσα στην πλακέτα· με εξωτερική 20 και εσωτερική
   5 η γωνία του πλακιδίου έμπαινε ΜΕΣΑ στην καμπύλη της πλακέτας. 20−10=10.
   Περνά ως μεταβλητή και όχι ως νέος επιλογέας ΕΠΙΤΗΔΕΣ: ο κανόνας
   .plate.is-photo.is-fit.is-trim img{border-radius:0} πιο κάτω πρέπει να
   συνεχίσει να κερδίζει — εκεί δεν υπάρχει περιθώριο για να πλαισιωθεί. */
.plate-empty{display:block;width:52px;height:52px;border:2px dashed #C6CACE;border-radius:8px}
.print-id{display:none}

/* ── κάρτες ────────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(13px,1.6vw,22px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
/* ⛔ ΔΟΚΙΜΑΣΤΗΚΕ ΦΩΤΙΣΜΕΝΗ ΑΚΜΗ ΣΤΗΝ ΚΑΡΤΑ ΚΑΙ ΑΦΑΙΡΕΘΗΚΕ: ΔΕΝ ΖΩΓΡΑΦΙΖΕΙ.
   Η πλακέτα της εικόνας πιάνει ΟΛΟΚΛΗΡΗ την πάνω ακμή, οπότε και το
   inset highlight και η λάμψη των πρώτων 96px μένουν από κάτω της. Μετρημένο
   στις τρεις πρώτες σειρές εικονοστοιχείων μιας κάρτας προϊόντος:
     με ακμή  44,3 / 239,6 / 244,1
     χωρίς    44,3 / 239,6 / 244,1   — πανομοιότυπα.
   Το βάθος της κάρτας το δίνει ήδη η φωτεινή πλακέτα πάνω σε --panel. */
/* ΤΟ ΣΗΚΩΜΑ ΚΙΝΕΙ `translate`, ΟΧΙ `transform` — ΚΑΙ ΑΥΤΟ ΕΙΝΑΙ Η ΔΙΟΡΘΩΣΗ.
   Το σύστημα αποκάλυψης (.js .reveal / .in) ΚΑΤΕΧΕΙ το transform: το δηλώνει
   με ειδικότητα (0,3,0) και το κρατά ΜΟΝΙΜΑ αφού τελειώσει η είσοδος. Όσο το
   σήκωμα ήταν κι αυτό transform, ο ένας κανόνας έσβηνε τον άλλον — μετρημένο
   στην ίδια σελίδα δύο φορές: χωρίς JavaScript hover → matrix(1,0,0,1,0,-3)·
   με JavaScript hover → none. ΚΑΘΕ κάρτα του site είχε χάσει το σήκωμά της.
   Το `translate` είναι ΞΕΧΩΡΙΣΤΗ ιδιότητα από το `transform` και συνθέτονται:
   η ΕΙΣΟΔΟΣ κρατά το transform, η ΑΛΛΗΛΕΠΙΔΡΑΣΗ παίρνει το translate. Καμία
   μάχη ειδικότητας, τίποτα να ξεχαστεί την επόμενη φορά. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:background .2s,border-color .2s,translate .2s}
.card:hover{border-color:var(--line-2);translate:0 -3px;background:var(--panel-2)}
/* ΤΕΤΡΑΓΩΝΗ ΠΛΑΚΕΤΑ ΣΤΑ ΠΡΟΪΟΝΤΑ. Οι 132 από τις 146 φωτογραφίες προϊόντος
   είναι τετράγωνες (960×960 ή 2362×2362). Μέσα σε πλακέτα 4/3 μια τετράγωνη
   εικόνα άφηνε μπάρες δεξιά-αριστερά: μετρήθηκε εικόνα 165×165 σε πλακέτα
   263×197, δηλαδή το προϊόν έπιανε το 53% της πλακέτας. Με 1/1 πιάνει 100%.
   Τα μηχανήματα μένουν 4/3: οι φωτογραφίες τους είναι κάθετες και ανομοιογενείς. */
.card .plate{aspect-ratio:4/3}
.card-prod .plate{aspect-ratio:1}
.card-b{padding:16px 18px 19px;display:flex;flex-direction:column;gap:.4rem;flex:1}
/* ΗΤΑΝ ΚΟΚΚΙΝΟ ΚΕΙΜΕΝΟ: #ED1C24 πάνω στο --panel μετρήθηκε 3,77:1. Κόκκινο
   που περνά 4,5:1 πάνω σε σχεδόν μαύρο είναι αναγκαστικά ροζ κοραλί — δηλαδή
   δεν είναι πια το χρώμα της εταιρείας. Αντ' αυτού το κόκκινο γίνεται ΣΗΜΑΔΙ
   και το κείμενο ουδέτερο (7,94:1), ίδιο μοτίβο με το .eyebrow. */
/* ΑΝΑΔΙΠΛΩΣΗ, ΟΧΙ ΜΙΑ ΓΡΑΜΜΗ: «ΣΩΜΑ — ΑΝΑΔΙΑΜΟΡΦΩΣΗ, ΛΙΠΟΛΥΣΗ ΚΑΙ
   ΚΥΤΤΑΡΙΤΙΔΑ» είναι 46 χαρακτήρες με letter-spacing .15em — σε κάρτα 168px
   ξεχειλίζει οριζόντια, στον άξονα που καμία μέτρηση «ύψους» δεν βλέπει. */
/* ΟΡΙΟ ΔΥΟ ΓΡΑΜΜΩΝ. Με το overflow-wrap:anywhere (που ΠΡΕΠΕΙ να μείνει —
   αλλιώς οι μακριές κεφαλαίες λέξεις ξεχειλίζουν οριζόντια και ψαλιδίζονται
   χωρίς σημάδι) μια ετικέτα σαν «ΣΩΜΑ — ΑΝΑΔΙΑΜΟΡΦΩΣΗ, ΛΙΠΟΛΥΣΗ ΚΑΙ
   ΚΥΤΤΑΡΙΤΙΔΑ» έπιανε 5–6 γραμμές μέσα σε στενή κάρτα, δηλαδή περισσότερο
   χώρο από τον ίδιο τον τίτλο του προϊόντος. */
.card-cat{font-family:var(--f-display);font-size:.645rem;font-weight:700;letter-spacing:.15em;
  color:var(--ink-2);display:flex;align-items:flex-start;gap:.6em;line-height:1.4;
  min-width:0;overflow-wrap:anywhere}
.card-cat > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-width:0}

/* ── ΜΙΚΤΟ ΠΛΕΓΜΑ: ΑΠΟΤΕΛΕΣΜΑΤΑ ΑΝΑΖΗΤΗΣΗΣ ──────────────────
   Είναι το ΜΟΝΟ σημείο όπου μηχάνημα και προϊόν στέκονται δίπλα-δίπλα, και
   οι δύο τύποι έχουν διαφορετική πλακέτα (4/3 έναντι 1/1) και ετικέτα μιας ή
   δύο γραμμών. Αποτέλεσμα: οι τίτλοι της ΙΔΙΑΣ γραμμής προσγειώνονταν 113px
   χώρια και το μάτι δεν έβρισκε πού να σαρώσει.
   Η εξίσωση γίνεται ΜΟΝΟ εδώ — στους καταλόγους η τετράγωνη πλακέτα δίνει
   στο packshot 100% κάλυψη και δεν θυσιάζεται. */
.search .grid .card .plate,
.search .grid .card-prod .plate{aspect-ratio:4/3}
/* v0.7.8 — ΜΕ ΤΟΝ ΙΔΙΟ ΦΥΛΑΚΑ ΠΟΥ ΕΧΕΙ ΚΑΙ Ο ΚΑΤΑΛΟΓΟΣ. Το ίδιο μοτίβο στο
   .grid .card-cat είναι κλεισμένο σε @media(min-width:701px), επειδή σε
   στενή οθόνη δεσμεύει δύο γραμμές ύψους για ετικέτα μίας γραμμής. Εδώ είχε
   ξεφύγει αφύλαχτο και χρέωνε ~19px σε κάθε κάρτα αποτελέσματος στο κινητό. */
@media(min-width:701px){
  .search .grid .card-cat{min-height:calc(2 * 1.4em)}
}
/* ΙΔΙΟ ΠΡΟΒΛΗΜΑ, ΚΑΙ ΣΤΟΥΣ ΚΑΤΑΛΟΓΟΥΣ. Όταν η ετικέτα μιας κάρτας τυλίγεται σε
   δεύτερη γραμμή και της διπλανής όχι, οι δύο τίτλοι της ίδιας σειράς ξεκινούν
   ώς 23,9px χώρια — το μάτι που σαρώνει 24 ονόματα χάνει τη βάση του. Η εξίσωση
   είχε γίνει ΜΟΝΟ για τα αποτελέσματα αναζήτησης. Μόνο από 701px και πάνω: σε
   μία στήλη δεν υπάρχει διπλανή κάρτα να στοιχιστείς μαζί της, και το ύψος
   θα ήταν καθαρό κόστος. */
@media(min-width:701px){
  .grid .card-cat{min-height:calc(2 * 1.4em)}
}
.card-cat::before{content:"";width:5px;height:5px;margin-top:.5em;background:var(--red);flex:none}
/* Περικοπή και στον ΤΙΤΛΟ, όχι μόνο στην περιγραφή — αλλά στις ΤΡΕΙΣ
   γραμμές, όχι στις δύο. Ο μακρύτερος πραγματικός τίτλος του καταλόγου
   είναι 69 χαρακτήρες («2 Ισχυρή αποτοξινωτική και ανανεωτική μάσκα
   προσώπου κατά της ρύπανσης») και στις 2 γραμμές κοβόταν το όνομα του
   ίδιου του προϊόντος. Χωρίς min-height: οι κάρτες ισοϋψώνονται ήδη από
   το grid και το «Δείτε →» κάθεται στον πάτο με margin-top:auto. */
/* overflow-wrap ΚΑΙ ΕΔΩ, όχι μόνο στο .card-cat. Το line-clamp κόβει μόνο
   ΓΡΑΜΜΕΣ· μια λέξη πλατύτερη από την κάρτα ξεχειλίζει ΟΡΙΖΟΝΤΙΑ και το
   overflow:hidden την ψαλιδίζει ΧΩΡΙΣ αποσιωπητικά — «DERMAÉCLA» αντί για
   «DERMAÉCLAT». 11 στις 24 κάρτες στα 320px. Το «…» εμφανίζεται μόνο όταν
   κοπεί γραμμή, ποτέ όταν κοπεί πλάτος. */
.card h3{font-size:1.04rem;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-width:0;overflow-wrap:anywhere}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:2}

/* ΔΑΚΤΥΛΙΟΣ ΕΣΤΙΑΣΗΣ ΣΤΗΝ ΚΑΡΤΑ, ΟΧΙ ΣΤΟΝ ΤΙΤΛΟ. Ο υπολογιστής έλεγε
   «outline 2px solid» — στην εικόνα υπήρχαν 42 λευκά pixel από τα 2.880 της
   ζώνης (1,5%). Το overflow:hidden του h3 έκοβε τρεις από τις τέσσερις ακμές,
   γιατί το outline-offset πέφτει ΕΞΩ από το κουτί περικοπής. Ο σύνδεσμος
   καλύπτει ούτως ή άλλως όλη την κάρτα (h3 a::after, inset:0), οπότε το σωστό
   περίγραμμα είναι της κάρτας. ΘΕΤΙΚΟ offset υποχρεωτικά: η .card έχει και
   αυτή overflow:hidden, άρα αρνητικό offset θα ξανακοβόταν. */
.card h3 a:focus-visible{outline:none}
.card:has(h3 a:focus-visible){outline:2px solid var(--ink);outline-offset:3px;
  box-shadow:0 0 0 2px var(--bg)}
/* Περικοπή σε 3 γραμμές: τα κείμενα του πελάτη έχουν πολύ άνισο μήκος και
   χωρίς όριο οι κάρτες γίνονται σκάλα. */
.card p{margin:0;font-size:.85rem;color:var(--ink-3);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .more{margin-top:auto;padding-top:.7rem;font-family:var(--f-display);font-size:.755rem;
  font-weight:700;letter-spacing:.05em;color:var(--ink-2);display:flex;align-items:center;gap:.4em;flex-wrap:wrap}
.card:hover .more{color:var(--ink)}
/* ΝΕΚΡΗ ΖΩΝΗ ΠΑΝΩ ΑΠΟ ΤΟΝ ΣΥΝΔΕΣΜΟ. Και τα δύο διακριτικά κάθονται με z-index:3
   πάνω στην επικάλυψη-σύνδεσμο της κάρτας: σε αφή, το πάτημα στην πάνω γωνία
   της φωτογραφίας δεν έκανε ΤΙΠΟΤΑ, χωρίς καμία ένδειξη. Είναι καθαρές
   ενδείξεις (το ένα είναι ήδη aria-hidden), άρα δεν χάνεται τίποτα. */
.card-award,.card-step{pointer-events:none}
.card-award{position:absolute;top:10px;inset-inline-end:10px;z-index:3;height:44px;width:auto;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.2))}
/* ── βήμα πρωτοκόλλου ──────────────────────────────────────── */
/* Οι σειρές Cell C, De-Pollution και Nicely είναι ΡΟΥΤΙΝΕΣ με σειρά χρήσης.
   Ο αριθμός ήταν κολλημένος μπροστά στον τίτλο· εδώ γίνεται σήμα. */
/* Λωρίδα προδιαγραφών στο hero μηχανήματος: τρία νούμερα, με την ετικέτα από
   κάτω. Η ετικέτα είναι μικρή αλλά στο --ink-2 (7,4:1) — όχι στο --ink-3 που
   κόβεται στο 4,3:1 όπως είχε συμβεί στο σήμα βήματος. */
.specstrip{display:flex;flex-wrap:wrap;gap:0;margin:1.6rem 0 0;padding:0;list-style:none;
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.specstrip li{flex:1 1 140px;min-width:0;padding:14px 18px;
  border-inline-start:1px solid var(--line-2)}
.specstrip li:first-child{border-inline-start:0}
.specstrip b{display:block;font-family:var(--f-display);font-weight:800;
  font-size:clamp(1rem,1.5vw,1.22rem);letter-spacing:-.01em;color:var(--ink);
  overflow-wrap:anywhere}
.specstrip span{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.08em;
  text-transform:none;color:var(--ink-2)}
@media(max-width:560px){
  /* Σε τηλέφωνο τρεις στήλες δίνουν ~100px η καθεμία — μία στήλη ανά γραμμή. */
  .specstrip{flex-direction:column}
  /* Σε στήλη το flex-basis γίνεται ΥΨΟΣ. Χωρίς αυτό, τα τρία στοιχεία
     μοιράζονταν σταθερό ύψος και η λωρίδα έπιανε 422px σε οθόνη 800px, με
     185px κενά μέσα της. */
  .specstrip li{flex:0 0 auto}
  .specstrip li{border-inline-start:0;border-top:1px solid var(--line-2)}
  .specstrip li:first-child{border-top:0}
  /* ΤΙΜΗ ΚΑΙ ΕΤΙΚΕΤΑ ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ. Στοιβαγμένες, οι τρεις σειρές
     έτρωγαν 237px από 844 — το 28% της πρώτης οθόνης για τρία νούμερα. */
  .specstrip li{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;padding:12px 16px}
  .specstrip b{flex:0 1 auto}
  .specstrip span{margin-top:0;flex:0 1 auto;text-align:end}
}
/* ΚΑΨΟΥΛΑ, ΟΧΙ ΚΥΚΛΟΣ. Η λέξη «ΒΗΜΑ» μετράει 31,2px και κάθεται 10,7px κάτω
   από το κέντρο· εκεί η χορδή ενός δίσκου 38px είναι 31,4px και στο κάτω άκρο
   των γραμμάτων μόλις 22,3px — τα ακραία γράμματα έβγαιναν έξω από το σκούρο
   φόντο και έπεφταν πάνω στη λευκή πλακέτα. Το ίδιο μοτίβο κάψουλας
   χρησιμοποιεί ήδη το .card-award. */
.card-step{position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  display:grid;place-items:center;line-height:1;
  width:auto;min-width:38px;height:auto;padding:5px 9px;border-radius:999px;
  background:rgba(17,18,20,.9);backdrop-filter:blur(6px);
  border:1px solid rgba(242,243,245,.22)}
.card-step b{font-family:var(--f-display);font-size:.95rem;font-weight:800;color:var(--ink)}
/* ΗΤΑΝ 6,72px στο #868C96 = 4,30:1 πάνω στο #28292b της κάρτας — κάτω από το
   όριο. Το --ink-2 δίνει ~7,4:1 και το μέγεθος ανεβαίνει σε ~9,3px.
   ΤΟ ΜΙΣΟ ΑΥΤΗΣ ΤΗΣ ΔΙΟΡΘΩΣΗΣ ΕΙΧΕ ΜΕΙΝΕΙ ΣΤΟ ΣΧΟΛΙΟ: το μέγεθος είχε
   ανέβει, το χρώμα είχε μείνει --ink-3, δηλαδή 4,30:1 — το σχόλιο περιέγραφε
   αλλαγή που δεν είχε γίνει ποτέ. */
.card-step span{font-family:var(--f-display);font-size:.58rem;font-weight:700;
  letter-spacing:.12em;color:var(--ink-2);margin-top:1px}
.step-tag{margin-inline-start:.9em;padding:2px 8px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line-3);color:var(--ink-2);letter-spacing:.12em}

/* ── φίλτρα ────────────────────────────────────────────────── */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(20px,2.8vw,32px)}
/* v0.7.7 — Ο ΠΕΡΙΤΥΛΙΓΜΕΝΟΣ ΦΟΡΕΑΣ: chip αριστερά, ζωντανό πλήθος δεξιά.
   Υπάρχει επειδή κάτω από 700px τα chip μπαίνουν σε διάδρομο που κυλά, και
   το «17 μηχανήματα» ΔΕΝ πρέπει να ταξιδεύει μαζί τους. Στον υπολογιστή η
   διάταξη μένει αυτή που ήταν. */
.filterbar{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,2.8vw,32px)}
.filterbar > .filters{flex:1 1 auto;min-width:0;margin-bottom:0}
.filterbar > [data-count]{flex:none}
@media(max-width:700px){
  .filterbar{display:block}
  .filterbar > [data-count]{display:block;margin-top:10px}
}
.chip{font-family:var(--f-display);font-size:.79rem;font-weight:600;
  padding:8px 15px;border-radius:999px;border:1px solid var(--line-3);color:var(--ink-2);
  cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.chip:hover{color:var(--ink);border-color:var(--ink-3)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ── ζώνη οίκου ────────────────────────────────────────────── */
/* ΒΑΘΟΣ ΜΕΣΑ ΣΤΗΝ ΕΠΙΦΑΝΕΙΑ, ΟΧΙ ΔΕΥΤΕΡΗ ΓΡΑΜΜΗ ΣΤΗΝ ΑΚΜΗ. Η πρώτη δοκιμή
   έβαλε inset highlight· μετρήθηκε ότι ανεβάζει τη σειρά 1 από 24,8 σε 32,8 —
   ορατό, αλλά ακριβώς από πάνω υπάρχει ΗΔΗ το περίγραμμα στο 45,6. Δύο
   γραμμές στη σειρά διαβάζονται ως αστοχία απόδοσης, όχι ως ανάγλυφο.
   Το ντεγκραντέ δίνει πτώση φωτός στα πρώτα 220px: η ζώνη παύει να είναι
   ένα επίπεδο 24,8 για εκατοντάδες εικονοστοιχεία. */
.band{background-color:var(--bg-2);border-block:1px solid var(--line);
  background-image:linear-gradient(180deg,rgba(255,255,255,.024),transparent 220px)}
.band-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,58px);align-items:center}
/* ══════════════════════════════════════════════════════════════════
   Η ΚΑΡΤΑ ΟΙΚΟΥ ΕΧΕΙ ΤΑΒΑΝΙ (v0.8.2)

   Οι τέσσερις κάρτες κάθε οίκου ζουν σε ΔΥΟ σταθερές στήλες μέσα σε μια
   στήλη-κλάσμα. Ο κατάλογος προσθέτει ΣΤΗΛΕΣ όσο μεγαλώνει η οθόνη και
   κρατά την κάρτα στα 240-303px· η ζώνη κρατά δύο στήλες και μεγαλώνει
   την ΚΑΡΤΑ γραμμικά. Μετρημένο, κάρτα ζώνης προς κάρτα καταλόγου:
     561-850 (στοιβαγμένη)  252→384px   1,53×   ← 407px στα 900
     901-1024               207→235px   0,78×
     1100-1440              253→283px   1,05×   ← ΕΔΩ είναι σωστή
     1600-2560              345→414px   1,63×
   Δηλαδή ένα μπουκαλάκι ζωγραφιζόταν 414px σε οθόνη όπου ο κατάλογος το
   δείχνει 254px, και 407px στα 900 όπου ο κατάλογος λέει 273px.
   Το ταβάνι είναι το ΠΑΝΩ ΑΚΡΟ ΤΗΣ ΙΔΙΑΣ ΤΗΣ ΖΩΝΗΣ στο εύρος όπου
   μετρήθηκε σωστή (283px), στρογγυλεμένο: 290px. Δεν είναι breakpoint —
   δένει κάτω από τα 580px διαθέσιμα και αφήνει το τηλέφωνο ανέγγιχτο
   (στα 390 οι δύο στήλες βγαίνουν 169px, ίδιο με τον κατάλογο).

   ⚠ ΤΟ .band-grid ΖΕΙ ΣΕ ΤΡΙΑ ΠΡΟΤΥΠΑ (αρχική, σελίδα μηχανήματος,
   επικοινωνία) ΚΑΙ ΤΟ .grid.g-2 ΣΕ ΤΡΙΑ ΑΛΛΑ. Δεν υποτέθηκε — μετρήθηκε
   σε 15 τύπους σελίδας ζωντανά: ο επιλογέας πιάνει ΑΚΡΙΒΩΣ 2 στοιχεία,
   και τα δύο στην αρχική. Η σελίδα μηχανήματος έχει και .band-grid και
   .grid.g-2 αλλά ΔΕΝ είναι φωλιασμένα (0 ταιριάσματα), και η επικοινωνία
   έχει .band-grid χωρίς κανένα g-2. Το :has(.card-prod) είναι η τρίτη
   δικλείδα: κελιά πίνακα δεν πιάνονται ποτέ.
   ══════════════════════════════════════════════════════════════════ */
.band-grid .grid.g-2:has(.card-prod){grid-template-columns:repeat(2,minmax(0,290px))}
.band-grid.flip .band-txt{order:2}
.brandmark{height:40px;width:auto;margin-bottom:1.3rem}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:1.35rem 0 0;padding:0;list-style:none}
.pill{font-family:var(--f-display);font-size:.75rem;font-weight:600;
  padding:6px 13px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2)}

/* ── λόγοι / υποστήριξη ────────────────────────────────────── */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.reason{background:var(--panel);padding:clamp(21px,2.7vw,34px)}
.reason .n{font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--red-txt);display:block;margin-bottom:1rem}
.reason h3{margin-bottom:.55rem;font-size:1.08rem}
.reason p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.62}

/* ── βραβεία ───────────────────────────────────────────────── */
.awards{display:flex;gap:clamp(14px,3vw,40px);align-items:flex-start;flex-wrap:wrap;justify-content:center}
.award{display:flex;flex-direction:column;align-items:center;gap:.65rem;max-width:156px;text-align:center}
.award img{height:76px;width:auto}
.award span{font-size:.705rem;color:var(--ink-3);line-height:1.42}

/* ── specs ─────────────────────────────────────────────────── */
/* Ο πίνακας κυλά ΜΕΣΑ στο δικό του κουτί. Το body έχει overflow-x:hidden,
   που θα ΕΚΡΥΒΕ την υπερχείλιση αντί να τη λύσει: το «755nm / 808nm / 1064nm»
   απλώς θα κοβόταν αθόρυβα σε στενή οθόνη. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
/* ΧΩΡΙΣ ΑΥΤΟ ΤΟ overflow-x:auto ΔΕΝ ΕΝΕΡΓΟΠΟΙΕΙΤΑΙ ΠΟΤΕ: τα παιδιά ενός grid
   έχουν εξ ορισμού min-width:auto, δηλαδή ΜΕΓΑΛΩΝΟΥΝ για να χωρέσουν το
   περιεχόμενό τους αντί να αφήσουν το παιδί τους να κυλήσει. Μετρήθηκε:
   πλέγμα 350px, παιδί 504px — και το body{overflow-x:hidden} έκρυβε τη
   διαφορά, οπότε καμία μέτρηση «πλάτους σελίδας» δεν το έδειχνε ποτέ. */
.band-grid>*,.hero-grid>*,.grid>*{min-width:0}
.specs{width:100%;min-width:min(430px,100%);border-collapse:collapse;font-size:.885rem}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:last-child{border-bottom:0}
.specs th{text-align:start;font-family:var(--f-display);font-weight:600;color:var(--ink-3);
  padding:11px 18px 11px 0;width:40%;min-width:170px;vertical-align:top;font-size:.83rem}
.specs td{padding:11px 0;color:var(--ink);vertical-align:top;font-variant-numeric:tabular-nums}
/* ΣΕ ΤΗΛΕΦΩΝΟ Η ΕΤΙΚΕΤΑ ΔΕΝ ΚΡΑΤΑΕΙ ΣΤΑΘΕΡΟ ΠΛΑΤΟΣ. Το th είναι 170px σε
   κάθε πλάτος· στα 360px αυτό είναι ΠΛΑΤΥΤΕΡΟ από τη στήλη τιμών, οπότε οι
   τιμές τυλίγονταν σε 150px και ο πίνακας διπλασίαζε ύψος (frf 641px αντί
   για 504). Σταθερή αναλογία δεν λύνει: στο CAM-Sterilizer οι ετικέτες είναι
   μακρύτερες από τις τιμές και κάθε ποσοστό το χειροτέρευε (+80px). Με
   width:auto η κάθε στήλη παίρνει όσο θέλει το ΔΙΚΟ της κείμενο. */
@media(max-width:464px){
  .specs th{width:auto;min-width:0}
}

/* ── λίστες με τικ ─────────────────────────────────────────── */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-inline-start:1.5rem;font-size:.9rem;color:var(--ink-2);line-height:1.6}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;
  background:var(--red);border-radius:1px}

/* ── CTA ───────────────────────────────────────────────────── */
.cta{background:var(--brand);border-radius:var(--r-lg);padding:clamp(28px,4.4vw,58px);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,42px);
  align-items:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:auto auto -55% -12%;width:min(520px,70%);aspect-ratio:1;
  background:radial-gradient(circle,rgba(237,28,36,.32),transparent 66%);filter:blur(26px)}
.cta>*{position:relative}
.cta h2{margin-bottom:.7rem}
.cta p{color:#DCDEE1;margin:0}
.cta-actions{display:flex;flex-direction:column;gap:11px}
.cta-actions .btn{justify-content:center}

/* ── άρθρο / περιεχόμενο συντάκτη ──────────────────────────── */
.prose{max-width:44.16em}
.prose p{color:var(--ink-2)}
.prose h2{margin:2.2rem 0 .9rem}
.prose h3{margin:1.7rem 0 .7rem}
/* ΚΕΝΗ ΠΑΡΑΓΡΑΦΟΣ ΑΠΟ ΤΟΝ ΣΥΝΤΑΚΤΗ = 17px ΝΕΚΡΟ ΚΕΝΟ.
   Στην «Τεχνική υποστήριξη» το περιεχόμενο περιέχει ένα σχόλιο-υπενθύμιση προς
   τον πελάτη («ΕΚΚΡΕΜΕΙ: όροι εγγύησης, χρόνοι απόκρισης…»), και η WordPress
   το τυλίγει σε <p>. Το σχόλιο ΔΕΝ διαγράφεται — είναι χρήσιμο, και είναι
   αόρατο στον επισκέπτη· απλώς δεν πρέπει να πιάνει ύψος.
   Ο επιλογέας :empty ΑΓΝΟΕΙ τα σχόλια, άρα πιάνει ακριβώς αυτή την περίπτωση —
   και κάθε άλλη κενή παράγραφο που αφήνει ο συντάκτης. ⚠ ΔΕΝ πιάνει παράγραφο
   με σκέτα κενά (είναι κόμβος κειμένου) ούτε με <img>· αυτά ΘΕΛΟΥΜΕ να μένουν.
   Μετρημένο: 1 κενή παράγραφος σε 4 σελίδες, κόστος 17px. */
.prose p:empty{display:none}
.prose ul,.prose ol{color:var(--ink-2);padding-inline-start:1.2rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--ink);border-bottom:1px solid var(--red)}
.prose img{border-radius:var(--r);margin:1.6rem 0}

/* ── ψίχουλα ───────────────────────────────────────────────── */
.crumb{font-size:.785rem;color:var(--ink-3);padding-top:26px}
.crumb a:hover{color:var(--ink)}
.crumb .sep{margin-inline:.5em;opacity:.5}

/* ── φόρμα ─────────────────────────────────────────────────── */
.form{display:grid;gap:13px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-family:var(--f-display);font-size:.735rem;font-weight:600;letter-spacing:.09em;color:var(--ink-3)}
.field input,.field select,.field textarea{
  background:var(--bg-2);border:1px solid var(--line-3);border-radius:9px;padding:11px 13px;
  color:var(--ink);font-family:var(--f-body);font-size:.92rem;width:100%}
.field textarea{min-height:120px;resize:vertical}
/* Το placeholder ήταν το ΠΡΟΕΠΙΛΕΓΜΕΝΟ γκρι του περιηγητή (#757575): 3,82:1
   πάνω στο --bg-2, δηλαδή η οδηγία «πώς να συμπληρώσω» ήταν πιο σβηστή από
   την ετικέτα της (5,54:1). Το --ink-3 δίνει 5,22:1 στο --bg-2 και 4,91:1
   στην ανοιχτότερη επιφάνεια όπου μπορεί να σταθεί πεδίο.
   Το opacity:1 δεν είναι διακοσμητικό: ο Firefox βάζει μόνος του .54. */
.field input::placeholder,.field textarea::placeholder,
.form input::placeholder,.form textarea::placeholder{color:var(--ink-3);opacity:1}
/* ΤΟ ΑΣΤΕΡΑΚΙ «ΥΠΟΧΡΕΩΤΙΚΟ». Το --red στα 11,76px μετρήθηκε 4,28:1 και,
   με την εξομάλυνση, ο πυρήνας του γλύφου έπεφτε στο 3,28:1. Το --red-hi
   υπάρχει ήδη στο :root ακριβώς γι' αυτό: κρατά το κόκκινο ως σήμα χωρίς να
   γίνει ουδέτερο κείμενο. */
.req{color:var(--red-hi);font-weight:700}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.searchform{max-width:none}
.searchrow{display:flex;gap:9px}
.searchrow input{flex:1;min-width:0}
.searchrow .btn{flex:none;white-space:nowrap}
/* v0.7.8 — ΣΤΟΙΒΑΖΕΤΑΙ ΣΤΑ 389, ΟΧΙ ΣΤΑ 520. Το κατώφλι ήταν 131px πλατύτερο
   απ' όσο χρειαζόταν και κόστιζε 55px ΠΑΝΩ από τα αποτελέσματα σε κάθε οθόνη
   390 και 430 — ακριβώς εκεί που η πρώτη κάρτα έχανε το τσάκισμα για 13,5px.
   Στα 390 το πεδίο σε μία γραμμή βγαίνει 213,6px με 186,0px εσωτερικό κείμενο
   και χωρά την υπόδειξη με 21px περίσσευμα· στα 360 δεν χωρά τίποτα, γι' αυτό
   εκεί συνεχίζει να στοιβάζεται. Σε μία γραμμή το πεδίο ψηλώνει 46,0→51,3px,
   δηλαδή πάνω από το δάπεδο αφής των 44px. */
@media(max-width:389px){
  .searchrow{flex-direction:column}
  .searchrow .btn{justify-content:center}
}

/* ── υποσέλιδο ─────────────────────────────────────────────── */
.footer{background-color:var(--bg-2);border-top:1px solid var(--line);padding-block:clamp(38px,5vw,64px) 24px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.024),transparent 220px)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(20px,3vw,42px)}
.f-grid h4{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  color:var(--ink-3);margin-bottom:1rem}
.f-grid ul{list-style:none;margin:0;padding:0}
.f-grid a,.f-grid p,.f-grid li{font-size:.86rem;color:var(--ink-2);margin:0 0 .5rem;line-height:1.55}
/* Η υπογράμμιση γίνεται με text-decoration και ΟΧΙ με border-bottom: εδώ, σε
   αντίθεση με την κεφαλίδα, δεν υπάρχει δεσμευμένο διάφανο περίγραμμα, οπότε
   ένα border θα πρόσθετε 1px ύψος τη στιγμή ακριβώς του περάσματος. */
.f-grid a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.f-bot{margin-top:clamp(26px,4vw,44px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.775rem;color:var(--ink-3)}

/* ── υπογραφή κατασκευής ───────────────────────────────────── */
/* Πιο μικρή και πιο σβηστή από τη νομική γραμμή από πάνω: είναι υπογραφή,
   δεν διεκδικεί προσοχή από το ΑΦΜ ή την Πολιτική Απορρήτου. Το όνομα
   ζωντανεύει μόνο στο hover. */
/* Ο ΜΟΝΙΜΟΣ ΔΡΟΜΟΣ ΑΝΑΚΛΗΣΗΣ. Μοιάζει με τον σύνδεσμο δίπλα του, όχι με
   .btn: είναι τρίτο νομικό κείμενο στην ίδια γραμμή, όχι κάλεσμα δράσης.
   Στο κινητό αποκτά ζώνη αφής 44px — ΜΟΝΟ εκεί, ώστε η γραμμή του desktop
   να μη μεγαλώσει. */
/* ⚠ ΤΟ `display:inline-flex` ΕΦΑΓΕ ΤΑ ΚΕΝΑ ΓΥΡΩ ΑΠΟ ΤΗΝ ΤΕΛΕΙΑ.
   Το footer.php βάζει τα κενά ΜΕΣΑ στο κείμενο του διαχωριστή (« · ») —
   σωστή πρόθεση, γραμμένη ρητά σε σχόλιο. Μέσα όμως σε flex δοχείο κάθε παιδί
   γίνεται block, και το πρωτεύον κενό στην αρχή/τέλος ΚΟΒΕΤΑΙ.
   ΜΕΤΡΗΜΕΝΟ: πλάτος διαχωριστή 3,6px, κενό αριστερά 0, κενό δεξιά 0 —
   «Πολιτική Απορρήτου·Ρυθμίσεις απορρήτου» κολλητά. Το innerText δείχνει
   τρία ξεχωριστά αντικείμενα χωρίς κενά ανάμεσα.
   Ο αναγνώστης οθόνης ΔΕΝ επηρεάστηκε ποτέ (η τελεία είναι aria-hidden και
   εκατέρωθεν υπάρχουν δύο ξεχωριστά χειριστήρια), άρα η ζημιά ήταν ΜΟΝΟ
   οπτική — γι' αυτό δεν την έπιασε κανένας έλεγχος κειμένου.
   Το .34em είναι η ΙΔΙΑ τιμή που ήδη χρησιμοποιεί το .f-credit .sep. */
.f-legal{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.34em}
/* ΔΥΟ ΧΕΙΡΙΣΤΗΡΙΑ ΔΙΠΛΑ-ΔΙΠΛΑ ΠΡΕΠΕΙ ΝΑ ΜΟΙΑΖΟΥΝ — ΚΑΙ ΔΕΝ ΜΟΙΑΖΑΝ.
   Το σχόλιο από πάνω λέει «Μοιάζει με τον σύνδεσμο δίπλα του». Μετρήθηκε το
   αντίθετο: το κουμπί είχε ΜΟΝΙΜΗ υπογράμμιση 1px var(--line-2), ο σύνδεσμος
   border-bottom-width 0 και text-decoration none. Ίδια γραμμή, ίδια δουλειά
   (απόρρητο), το ένα φαινόταν πατήσιμο και το άλλο όχι.
   Γίνονται ταυτόσημα: ΚΑΝΕΝΑ στην ηρεμία, ΚΑΙ ΤΑ ΔΥΟ στο πέρασμα — το ίδιο
   μοτίβο δεσμευμένου διάφανου περιγράμματος με το .f-credit a, άρα μηδέν
   μετατόπιση διάταξης. */
.f-consent{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.f-legal a,.f-consent{border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease}
.f-legal a:hover,.f-consent:hover{color:var(--ink);border-bottom-color:var(--line-3)}
.f-legal .sep{color:var(--line-3)}
@media(max-width:900px){
  .f-legal a,.f-consent{display:inline-flex;align-items:center;min-height:44px}
}
.f-credit{margin:13px 0 0;text-align:right;font-size:.75rem;letter-spacing:.015em;
  color:var(--ink-3)}
.f-credit a{display:inline-block;color:var(--ink-2);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.f-credit a:hover{color:var(--ink);border-bottom-color:var(--line-3)}
.f-credit .sep{color:var(--line-3);margin:0 .34em}
@media(max-width:700px){.f-credit{text-align:left;margin-top:16px}}

/* ── σημείωση draft (αφαιρείται πριν το go-live) ──────────── */
.draftnote{background:rgba(237,28,36,.07);border:1px solid rgba(237,28,36,.3);
  border-radius:11px;padding:14px 17px;font-size:.83rem;color:var(--ink-2);line-height:1.6}
.draftnote b{color:var(--ink)}
/* Η κολλητή κεφαλίδα είναι 75px: χωρίς αυτό η άγκυρα προσγειώνει το μήνυμα
   ακριβώς από κάτω της και κόβεται η πρώτη του γραμμή. */
#gld-status{scroll-margin-top:92px;scroll-margin-bottom:80px}
#gld-status:focus{outline:none}
/* v0.7.8 — ΙΔΙΟΣ ΛΟΓΟΣ, ΔΥΟ ΑΚΟΜΗ ΣΤΟΧΟΙ. Το #main και η μπάρα ενεργειών
   πήραν tabindex="-1" ώστε οι σύνδεσμοι παράκαμψης να μετακινούν ΟΝΤΩΣ την
   εστίαση· χωρίς αυτό το σβήσιμο, θα ζωγραφιζόταν δακτύλιος γύρω από όλο το
   κύριο περιεχόμενο. */
#main:focus,#gld-actions:focus{outline:none}

/* ── μόνο για αναγνώστες οθόνης ────────────────────────────── */
/* ΔΕΝ ΗΤΑΝ ΟΡΙΣΜΕΝΗ. Η κεφαλίδα έγραφε ήδη <span class="screen-reader-text">
   μέσα στον σύνδεσμο του λογότυπου, και ο πυρήνας τη χρησιμοποιεί σε φόρμες
   και σελιδοποίηση — χωρίς κανόνα, όλα αυτά τυπώνονταν ΟΡΑΤΑ στη σελίδα.
   ΟΧΙ display:none: αυτό τα κρύβει και από τους αναγνώστες οθόνης. */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
  margin:-1px;padding:0;border:0;
}

.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;clip:auto;clip-path:none;margin:0;
}

/* ── εργαλεία κεφαλίδας: αναζήτηση + burger ────────────────── */
.nav-tools{display:flex;align-items:center;gap:8px;flex:none}
/* Τηλέφωνο και κουμπί αιτήματος υπάρχουν ΜΕΣΑ στο <ul> του μενού ώστε να
   εμφανιστούν όταν ανοίγει το burger. Σε υπολογιστή είναι διπλοεγγραφή —
   το ίδιο κουμπί κάθεται ήδη δεξιά ως .nav-cta — γι' αυτό κρύβονται. */
.nav-x{display:none}
.nav-search{display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line-3);border-radius:10px;color:var(--ink-2);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s}
.nav-search:hover{color:var(--ink);border-color:var(--ink-3);background:var(--panel)}
.nav-search[aria-expanded="true"]{color:var(--ink);border-color:var(--ink);background:var(--panel)}

/* Το πλαίσιο ΚΡΕΜΕΤΑΙ από την κεφαλίδα. Χωρίς το position:absolute «κρεμόταν»
   μόνο στα λόγια: μετρήθηκε να σπρώχνει ΟΛΗ τη σελίδα 96px κάτω (τα ψίχουλα
   έπεφταν από y=75 σε y=171). Η .nav είναι sticky, άρα είναι ήδη το πλαίσιο
   αναφοράς — δεν χρειάζεται δεύτερος κανόνας. */
.searchpanel{position:absolute;top:100%;left:0;right:0;z-index:70;
  border-top:1px solid var(--line);background:var(--bg-2);
  box-shadow:0 24px 44px rgba(0,0,0,.45);
  padding-block:clamp(14px,2vw,22px)}
.searchpanel .form{max-width:640px;margin:0 auto}

/* ── μπάρα ενεργειών κινητού ───────────────────────────────── */
/* Κρυφή σε υπολογιστή. Εμφανίζεται κάτω από 700px, όπου η κεφαλίδα δεν
   χωράει ούτε το μενού ούτε το κουμπί επικοινωνίας. */
.actionbar{display:none}

/* ── σελιδοποίηση ──────────────────────────────────────────── */
.pager{margin-top:clamp(28px,4vw,44px)}
.pager ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;
  justify-content:center;align-items:center}
.pager .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;
  padding-inline:13px;border:1px solid var(--line-3);border-radius:10px;
  font-family:var(--f-display);font-size:.84rem;font-weight:600;color:var(--ink-2);
  transition:color .18s,border-color .18s,background .18s}
.pager a.page-numbers:hover{color:var(--ink);border-color:var(--ink-3);background:var(--panel)}
.pager .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pager .page-numbers.dots{border-color:transparent;min-width:22px;padding-inline:0}

/* ── κάρτες οίκων στον κατάλογο προϊόντων ──────────────────── */
.linegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(13px,1.6vw,22px)}
.linecard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:.5rem}
.linecard h2,.linecard h3{font-size:clamp(1.18rem,1.9vw,1.5rem)}
.linecard h2 a:hover,.linecard h3 a:hover{color:var(--ink)}

/* ── λωρίδα οίκων και σειρών ────────────────────────────────── */
/* Οι ίδιοι 22 σύνδεσμοι που πριν έπιαναν δύο κάρτες ύψους 454px (1.285px σε
   κινητό) και έσπρωχναν ΚΑΘΕ προϊόν κάτω από το τσάκισμα. Ο οίκος ξεχωρίζει
   με βάρος και περίγραμμα, όχι με χρώμα — το κόκκινο μένει για τις ενέργειες. */
/* Πυκνότερα από τα φίλτρα των μηχανημάτων: εκεί είναι 6 chip και είναι ΤΟ
   εργαλείο της σελίδας· εδώ είναι 22 και είναι πλοήγηση. Στα 1440 η λωρίδα
   πέφτει από 181px σε ~120px, δηλαδή μία σειρά λιγότερη πάνω από τα προϊόντα. */
.catstrip{margin-bottom:clamp(20px,2.6vw,32px);gap:7px}
.catstrip .chip{padding:6px 12px;font-size:.75rem}
.chip-brand{font-weight:800;border-color:var(--line-3);color:var(--ink)}
.chip-brand:hover{border-color:var(--ink);background:var(--panel-2)}

/* ΜΟΝΗ ΓΡΑΜΜΗ ΠΟΥ ΚΥΛΑ, ΣΕ ΣΤΕΝΗ ΟΘΟΝΗ. Αναδιπλωμένα, τα 22 chip πιάνουν
   814px στα 390px — δηλαδή σχεδόν ολόκληρη οθόνη πριν φανεί προϊόν. Σε μία
   γραμμή πέφτουν στα ~48px· ο χρήστης σύρει, όπως σε κάθε κατάλογο κινητού.
   Το flex:none είναι υποχρεωτικό: χωρίς αυτό τα chip συμπιέζονται αντί να
   βγουν έξω, και η κύλιση δεν ενεργοποιείται ΠΟΤΕ. */
/* v0.7.7 — ΚΑΙ Η ΜΠΑΡΑ ΦΙΛΤΡΩΝ ΤΩΝ ΜΗΧΑΝΗΜΑΤΩΝ, ΟΧΙ ΜΟΝΟ Η .catstrip.
   Η πυκνότητα μένει όπως αποφασίστηκε πιο πάνω (6 chip = ΤΟ εργαλείο της
   σελίδας, άρα μεγαλύτερα): αυτό που αλλάζει είναι ΜΟΝΟ η αναδίπλωση.
   ΜΕΤΡΗΜΕΝΟ στα 360×800: τα 6 chip έπιαναν 310px σε 6-7 σειρές — 39% της
   οθόνης — και έσπρωχναν την πρώτη κάρτα στο y=923, δηλαδή 180px ΚΑΤΩ από
   το ορατό. Σε μία γραμμή: 50px, πρώτη κάρτα 664. Στα 390: 827→599.
   Το scroll-padding-inline-start ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ: χωρίς αυτό το
   scroll-snap-align:start κουμπώνει την αρχή του πρώτου chip στην ακμή του
   scrollport και ΤΡΩΕΙ το padding-inline — η λωρίδα φόρτωνε με scrollLeft
   ίσο ακριβώς με το --pad (20px στα 360/390/430, 28px στα 700) και το πρώτο
   chip κολλούσε στο x=0 ενώ όλη η σελίδα είναι μέσα 20px. Και στις 29
   επιφάνειες με .catstrip. */
@media(max-width:700px){
  .catstrip,.filters[data-filters]{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-bottom:6px;
    /* το περιθώριο της σελίδας γίνεται εσωτερικό, ώστε το τελευταίο chip να
       μη χάνεται κολλημένο στην άκρη */
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    scroll-padding-inline-start:var(--pad)}
  .catstrip .chip,.filters[data-filters] .chip{flex:none;scroll-snap-align:start}
}
.linecard p{margin:0 0 .5rem}
.linecard .filters{margin-top:auto}
.chip-n{display:inline-block;margin-inline-start:.5em;font-size:.72em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.chip:hover .chip-n{color:var(--ink-2)}

/* ── συγκατάθεση cookies ───────────────────────────────────── */
/* Το z-index είναι ΠΑΝΩ από τη μπάρα ενεργειών (80): σε κινητό οι δύο
   κάθονται στον ίδιο πάτο, και το μπάνερ πρέπει να απαντηθεί πρώτο. */
.consent{position:fixed;inset:auto 0 0 0;z-index:90;background:var(--panel);
  border-top:1px solid var(--line-2);box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.consent-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap}
.consent p{margin:0;flex:1 1 320px;font-size:.855rem;color:var(--ink-2);line-height:1.55}
.consent p a,
.form label a{color:var(--ink);border-bottom:1px solid var(--red)}
/* ΤΑ ΔΥΟ ΚΟΥΜΠΙΑ ΕΧΟΥΝ ΙΔΙΟ ΒΑΡΟΣ. Η άρνηση δεν κρύβεται πίσω από
   «Ρυθμίσεις» και δεν γίνεται μικρότερη — αλλιώς η συγκατάθεση δεν είναι
   ελεύθερη, και ένα μπάνερ που εκβιάζει το «ναι» είναι χειρότερο από
   κανένα μπάνερ. */
.consent-h{font-family:var(--f-display);font-size:.94rem;font-weight:700;color:var(--ink);
  margin:0 0 .3rem;letter-spacing:.005em}
.consent-txt{flex:1 1 320px}
/* ΠΛΕΓΜΑ, ΟΧΙ FLEX: δύο ΙΣΑ κουτιά. Με flex το πλάτος βγαίνει από το μήκος
   της λέξης — μετρήθηκε «Μόνο τα απαραίτητα» 178px και «Αποδοχή» 101px. Εδώ
   η άρνηση έτυχε να είναι η μεγαλύτερη, δηλαδή το σφάλμα έγερνε προς τη
   σωστή πλευρά· δεν αλλάζει ότι η απαίτηση («ίσο μέγεθος») μετριέται σε
   pixel και δεν πρέπει να εξαρτάται από το ποια λέξη είναι πιο μακριά. */
.consent-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:none}
.consent-btns .btn{padding:11px 20px;font-size:.85rem;min-height:44px;justify-content:center}
/* Η ΑΡΝΗΣΗ ΓΕΜΙΖΕΙ ΚΙ ΑΥΤΗ. Το .btn-ghost είναι περίγραμμα σε διάφανο φόντο:
   δίπλα σε γεμάτο κόκκινο διαβάζεται ως δεύτερης κατηγορίας, ακόμη κι όταν
   έχει το ίδιο μέγεθος. Η Οδηγία 1/2020 της ΑΠΔΠΧ (Γ7) ζητά «ίσο μέγεθος,
   έμφαση και χρώμα». Ίδιο κουτί, ίδιο βάρος γραμματοσειράς, ίδιο ύψος —
   διαφορά μόνο στην απόχρωση, και η άρνηση ΔΕΝ είναι η πιο σβηστή. */
.consent-btns .btn-ghost,.cp-btns .btn-ghost{background:var(--panel-2);border-color:var(--line-3)}
.consent-btns .btn-ghost:hover,.cp-btns .btn-ghost:hover{background:var(--line);border-color:var(--ink-3)}
@media(max-width:560px){
  .consent-btns{width:100%}
  .consent-btns .btn{flex:1}
}

/* ── ΠΙΝΑΚΑΣ ΡΥΘΜΙΣΕΩΝ ────────────────────────────────────────
   Αυτός ΕΙΝΑΙ modal, σε αντίθεση με το μπάνερ: τον άνοιξε ο χρήστης
   επίτηδες και δεν υπάρχει τίποτα από πίσω που να αξίζει να διαβάσει.
   Το μπάνερ δεν παγιδεύει την εστίαση γιατί δεν επιτρέπεται να μπλοκάρει
   τη σελίδα — cookie wall απαγορεύεται ρητά. */
.consent-backdrop{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.55)}
.consent-panel{position:fixed;z-index:96;inset:auto 0 0 0;max-height:88vh;overflow:auto;
  background:var(--panel);border-top:1px solid var(--line-2);
  box-shadow:0 -18px 60px rgba(0,0,0,.5)}
@media(min-width:701px){
  .consent-panel{inset:50% auto auto 50%;transform:translate(-50%,-50%);
    width:min(620px,92vw);border:1px solid var(--line-2);border-radius:var(--r-lg);
    max-height:82vh;box-shadow:0 30px 90px rgba(0,0,0,.6)}
}
.cp-in{padding:clamp(20px,3vw,30px)}
.cp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.cp-head h2{font-family:var(--f-display);font-size:1.16rem;margin:0;color:var(--ink)}
.cp-x{width:44px;height:44px;margin:-11px -11px 0 0;flex:none;display:grid;place-items:center;
  border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:10px}
.cp-x:hover{color:var(--ink);background:var(--panel-2)}
.cp-intro{margin:.6rem 0 0;font-size:.85rem;color:var(--ink-2);line-height:1.6}
.cp-row{border-top:1px solid var(--line);margin-top:1.05rem;padding-top:1.05rem}
.cp-row-t{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cp-row-t h3{font-family:var(--f-display);font-size:.93rem;margin:0;color:var(--ink)}
.cp-row p{margin:.42rem 0 0;font-size:.83rem;color:var(--ink-2);line-height:1.62}
.cp-always{font-size:.74rem;color:var(--ink-3);flex:none;
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}
/* ⚠ ΣΤΕΝΟ ΠΕΔΙΟ, ΕΠΙΤΗΔΕΣ. Γενικός κανόνας min-height για στόχους αφής έχει
   ήδη μια φορά γίνει ΤΑΒΑΝΙ στο <textarea> της φόρμας (βλ. παρακάτω). */
.consent-sw{min-width:52px;min-height:44px;flex:none;position:relative;cursor:pointer;
  border:0;background:none;padding:0;display:grid;place-items:center}
.consent-sw::before{content:"";width:46px;height:26px;border-radius:999px;
  background:var(--line);border:1px solid var(--line-2);transition:background .18s,border-color .18s}
.consent-sw-k{position:absolute;left:5px;width:20px;height:20px;border-radius:50%;
  background:var(--ink-3);transition:transform .18s,background .18s}
.consent-sw[aria-checked="true"]::before{background:var(--red-btn);border-color:var(--red-btn)}
.consent-sw[aria-checked="true"] .consent-sw-k{transform:translateX(20px);background:#fff}
.consent-sw:focus-visible{outline:2px solid var(--red-hi);outline-offset:2px;border-radius:999px}
.cp-btns{display:flex;gap:10px;margin-top:1.5rem;flex-wrap:wrap}
.cp-btns .btn{flex:1 1 auto;padding:11px 16px;font-size:.85rem;min-height:44px;justify-content:center}
@media(max-width:560px){.cp-btns .btn{flex:1 1 100%}}
.cp-when{margin:1rem 0 0;font-size:.76rem;color:var(--ink-3)}
/* Κουμπί που μοιάζει με σύνδεσμο, όχι με .btn: ζει μέσα σε τρεχούμενο κείμενο. */
.linkish{border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;
  border-bottom:1px solid var(--line-3)}
.linkish:hover{color:var(--ink);border-bottom-color:var(--ink-3)}

/* ── responsive ────────────────────────────────────────────── */
/* ── Η ΚΕΦΑΛΙΔΑ ΓΥΡΙΖΕΙ ΣΕ BURGER ΣΤΑ 1060px, ΟΧΙ ΣΤΑ 900 ──────────
   Τα έξι στοιχεία του μενού (Μηχανήματα · Summe · Dermaqual · Προϊόντα ·
   Τεχνική υποστήριξη · Η εταιρεία) πιάνουν 650–682px. Μετρήθηκε: μαζί με
   λογότυπο, αναζήτηση και κουμπί χωρούν ως τα 1080px· στα 980px το κουμπί
   «Ζητήστε επίδειξη» βγήκε ΕΞΩ από την κεφαλίδα (δεξί άκρο 997 σε πλάτος
   980). Με το παλιό σημείο των 900px υπήρχε νεκρή ζώνη 900–1030px — δηλαδή
   ακριβώς τα tablet σε οριζόντια θέση. */
@media(max-width:1060px){
  .nav{position:relative}
  .burger{display:block}
  .nav-tools{margin-inline-start:auto}
  /* Στόχοι αφής: μετρήθηκαν 38px και 41×38. Στο κινητό είναι τα ΔΥΟ ΜΟΝΑ
     χειριστήρια της κεφαλίδας — πάνε στα 44. */
  .nav-search{width:44px;height:44px}
  .burger{width:44px;height:44px;display:grid;place-content:center}
  .nav .nav-links{display:none}
  .nav .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg-2);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    padding:12px var(--pad) 18px;gap:0;z-index:70}
  /* 44px ελάχιστος στόχος αφής — 12px padding + 20px γραμμή δεν έφταναν. */
  .nav .nav-links.open a{padding:13px 0;min-height:44px;display:flex;align-items:center;
    border-bottom:1px solid var(--line)}
  /* Τηλέφωνο και κουμπί αιτήματος ΜΕΣΑ στο ανοιχτό μενού. */
  .nav .nav-links.open .nav-x{display:block}
  .nav .nav-links.open .nav-x:first-of-type{margin-top:10px}
  .nav .nav-links.open .nav-x a{font-size:.95rem;color:var(--ink)}
  .nav .nav-links.open .nav-x-cta{justify-content:center;background:var(--red-btn);color:#fff;
    border-radius:999px;border-bottom:0;margin-top:12px;font-weight:700}
}

@media(max-width:1080px){
  .g-4{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero-grid,.band-grid,.cta{grid-template-columns:1fr}
  .band-grid.flip .band-txt{order:0}
  /* Η ΛΩΡΙΔΑ ΟΝΟΜΑΤΩΝ ΦΕΥΓΕΙ ΣΤΟ ΚΙΝΗΤΟ. Σε μία στήλη περνά ακριβώς πίσω
     από την παράγραφο και τα κουμπιά — εκεί είναι θόρυβος, όχι βάθος.
     display:none σταματά και την animation, άρα δεν ξυπνά τον συνθέτη
     στη συσκευή με τη λιγότερη μπαταρία. */
  .hero-mq{display:none}

  /* ΤΟ ΣΗΜΑ ΑΞΙΟΠΙΣΤΙΑΣ ΑΝΕΒΑΙΝΕΙ ΠΑΝΩ ΑΠΟ ΤΗΝ ΠΤΥΧΗ.
     ΜΕΤΡΗΜΕΝΟ ΠΡΙΝ: σε 390×844 ο ήρωας είναι 850px — 81px κάτω από την
     πτυχή — και η φωτογραφία ξεκινούσε στο y=663 δείχνοντας 217px, δηλαδή
     μια λωρίδα μέτωπο-ως-μάτια που έκοβε η μπάρα ενεργειών. Μέσα σε αυτή
     τη λωρίδα, ως επικάλυψη, ζούσε το «ΑΠΟΚΛΕΙΣΤΙΚΟΣ ΑΝΤΙΠΡΟΣΩΠΟΣ ΕΛΛΑΔΟΣ
     · DERMAQUAL PARIS · SUMME COSMETICS» — το ισχυρότερο σήμα αξιοπιστίας
     της σελίδας, εντελώς αόρατο σε κινητό.
     Η φωτογραφία είναι ΔΙΑΚΟΣΜΗΣΗ· η λεζάντα είναι ΠΛΗΡΟΦΟΡΙΑ. Σε μία
     στήλη η λεζάντα βγαίνει από την επικάλυψη και μπαίνει ΠΑΝΩ από την
     εικόνα, οπότε πέφτει αμέσως μετά τα κουμπιά και μέσα στην πρώτη οθόνη.
     Σε δύο στήλες τίποτα δεν αλλάζει: εκεί η επικάλυψη δουλεύει και
     μετρήθηκε στο 6,74:1 χειρότερης περίπτωσης. */
  .hero-fig{aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;gap:12px;
    border:0;background:none;overflow:visible;border-radius:0}
  .hero-fig::after{display:none}
  .hero-fig img{order:2;height:auto;aspect-ratio:16/10;max-height:300px;
    object-position:52% 24%;border-radius:var(--r-lg);border:1px solid var(--line);
    background:var(--panel)}
  .hero-cap{order:1;position:static;left:auto;right:auto;bottom:auto;display:block}
  .hero-cap .t{max-width:none;font-size:.72rem;line-height:1.55}
}

/* ΜΙΚΡΑ ΤΗΛΕΦΩΝΑ — ΤΟ ΠΕΡΙΘΩΡΙΟ ΤΕΛΕΙΩΝΕΙ ΕΔΩ. Στα 360×780 η λεζάντα
   έπεφτε 45px κάτω από την πτυχή ακόμη και μετά τη μετακίνησή της. Τα
   νούμερα που μαζεύονται χωρίς να χαλάσει τίποτα: το κενό πριν τα κουμπιά,
   το κενό μέσα στη φιγούρα και το διάστιχο της λεζάντας. */
@media(max-width:430px){
  .hero{padding-block:30px clamp(30px,5vw,44px)}
  .hero h1{margin-bottom:.82rem}
  .hero-actions{margin-top:1.2rem}
  .hero-fig{gap:8px}
  .hero-cap .t{line-height:1.42;letter-spacing:.12em}
  .reasons{grid-template-columns:1fr}
  /* Δύο στήλες: η γραμμή αλλάζει άξονα στα στοιχεία 3-4 και σβήνει στο 3ο. */
  .stats-in{grid-template-columns:1fr 1fr}
  .stats-in .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .stats-in .stat:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .stats-in .stat:nth-child(even){padding-inline-end:0}
  .linegrid{grid-template-columns:1fr}
}
@media(max-width:700px){
  /* ΣΤΟΧΟΙ ΑΦΗΣ 44px. Μετρήθηκαν 42px στα πεδία φόρμας και στους αριθμούς
     σελιδοποίησης — δύο pixel κάτω από το όριο, δηλαδή αστοχία πατήματος
     ακριβώς εκεί που ο επισκέπτης γράφει τα στοιχεία του. */
  /* ΟΧΙ στα checkbox: εκεί ο στόχος αφής είναι ΟΛΟΚΛΗΡΗ η ετικέτα (το input
     ζει μέσα της), και ένα κουτάκι 46px ύψους φαίνεται τεντωμένο. */
  .form input:not([type=checkbox]),.form select,.form textarea{min-height:46px}
  /* ΙΔΙΟΣ ΕΠΙΛΟΓΕΑΣ, ΟΧΙ ΑΣΘΕΝΕΣΤΕΡΟΣ. Το «.pager a,.pager span» έχει
     ειδικότητα 0,1,1 και έχανε από το «.pager .page-numbers» (0,2,0) της
     γραμμής 525: το min-height περνούσε, το min-width όχι — τα κουμπιά
     έμεναν 42px πλατιά ενώ όλο το υπόλοιπο κινητό είχε πάει στα 46. */
  .pager .page-numbers{min-height:46px;min-width:46px;display:inline-flex;
    align-items:center;justify-content:center}
  .pager ul{gap:10px}
  /* Το ΜΟΝΟ σημείο που δεν πήρε στόχο αφής: 16px ύψος με 13px κενό, δηλαδή
     βήμα 29px κέντρο-προς-κέντρο, εκεί που όλα τα άλλα είναι 44–56. */
  /* ΨΙΧΟΥΛΑ ΣΕ ΜΙΑ ΓΡΑΜΜΗ ΠΟΥ ΚΥΛΑΕΙ. Οι σύνδεσμοι ήταν ενσωματωμένο κείμενο
     15px ύψος — το ένα τρίτο του δαπέδου αφής του ίδιου του θέματος — και
     είναι ο ΜΟΝΟΣ δρόμος πίσω στην κατηγορία πάνω από το τσάκισμα.
     Το προφανές (min-height όπως είναι) τα τυλίγει σε τρεις γραμμές: το
     ψίχουλο 67px→122px και ο τίτλος 55px πιο κάτω. Σε ΜΙΑ γραμμή που κυλάει
     οριζόντια, και οι τρεις ζώνες γίνονται 44px ΚΑΙ το ψίχουλο πέφτει
     67px→58px, δηλαδή ο τίτλος ΑΝΕΒΑΙΝΕΙ. Ό,τι βγαίνει εκτός είναι η
     τρέχουσα σελίδα, που την ξαναλέει το h1 από κάτω. */
  .crumb{padding-top:14px;display:flex;align-items:center;flex-wrap:nowrap;
    overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .crumb::-webkit-scrollbar{display:none}
  .crumb a,.crumb>span{display:inline-flex;align-items:center;min-height:44px;flex:none}
  /* ΑΝΑΔΡΑΣΗ ΠΑΤΗΜΑΤΟΣ. Σε αφή δεν υπάρχει hover: χωρίς αυτό, το πάτημα
     δεν επιβεβαιώνεται με τίποτα και ο χρήστης πατά δεύτερη φορά. */
  .btn:active,.chip:active,.card:active,.actionbar a:active{transform:scale(.985)}
  .g-2,.g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .card .plate{aspect-ratio:1}
  /* Στόχοι αφής 44px: τα chip φίλτρων ήταν 34px ύψος. */
  .chip{padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}

  /* ΜΠΑΡΑ ΕΝΕΡΓΕΙΩΝ. Δύο ενέργειες, σταθερές στον πάτο.
     Το padding-bottom στο body ΔΕΝ είναι διακοσμητικό: χωρίς αυτό η μπάρα
     σκεπάζει τις τελευταίες γραμμές του υποσέλιδου — δηλαδή ακριβώς τη
     διεύθυνση και το ΑΦΜ. Το env(safe-area-inset-bottom) κρατά την μπάρα
     πάνω από τη γραμμή χειρονομιών του iPhone. */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .actionbar{display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;inset:auto 0 0 0;z-index:80;background:var(--line);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:.5em;
    min-height:56px;font-family:var(--f-display);font-size:.86rem;font-weight:700;
    background:var(--bg-2);color:var(--ink)}
  .actionbar .ab-cta{background:var(--red-btn);color:#fff}
  .actionbar .ab-tel svg{flex:none}
  /* Το μπάνερ δεν σκεπάζει τη μπάρα: κάθεται ακριβώς από πάνω της. */
  .consent{bottom:calc(57px + env(safe-area-inset-bottom,0px))}
  /* ΚΑΙ Η ΣΕΛΙΔΑ ΚΑΝΕΙ ΤΟΠΟ ΚΑΙ ΓΙ' ΑΥΤΟ. Το padding-bottom από πάνω κρατά
     62px για τη ΜΠΑΡΑ. Το μπάνερ ανοιχτό σε οθόνη 390px είναι άλλα ~205px:
     χωρίς αυτό εδώ, ο πάτος κάθε σελίδας μένει σκεπασμένος — δηλαδή ξανά η
     διεύθυνση και το ΑΦΜ, η ίδια ακριβώς αστοχία ένα επίπεδο πιο πάνω.
     Το ύψος το μετράει η JavaScript: αλλάζει με το κείμενο, με τη
     γραμματοσειρά του συστήματος και με το αν στοιβάζονται τα κουμπιά.
     Το scroll-padding-bottom δεν είναι διακοσμητικό: χωρίς αυτό ο χρήστης
     πατάει «επόμενο» στο πληκτρολόγιο και πληκτρολογεί σε πεδίο που δεν
     βλέπει — στη σελίδα που ΕΙΝΑΙ η μοναδική μετατροπή του site. */
  html.has-consent body{padding-bottom:calc(62px + var(--consent-h,0px) + env(safe-area-inset-bottom,0px))}
  html.has-consent{scroll-padding-bottom:calc(70px + var(--consent-h,0px) + env(safe-area-inset-bottom,0px))}
}

/* ── ΠΟΛΥ ΚΟΝΤΟ ΚΑΙ ΠΟΛΥ ΣΤΕΝΟ ΠΑΡΑΘΥΡΟ ────────────────────────
   Στο 400% μεγέθυνση (1280px → 320×200 CSS px) η πρώτη οθόνη ήταν 75px
   κεφαλίδα + 68px ψίχουλα + 57px σταθερή μπάρα = 200px ακριβώς: ΜΗΔΕΝ pixel
   περιεχομένου. Η μπάρα γίνεται κανονικό στοιχείο στο τέλος της σελίδας —
   τα δύο κουμπιά ΔΕΝ χάνονται, απλώς παύουν να τρώνε το 28% του ύψους.

   ΤΟ ΠΛΑΤΟΣ ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ ΣΤΗ ΣΥΝΘΗΚΗ. Σκέτο (max-height:420px) πιάνει
   ΚΑΘΕ τηλέφωνο σε οριζόντια θέση (667×375, 800×390) — εκεί η μπάρα χτίστηκε
   επίτηδες, γιατί το B2B κοινό τηλεφωνεί. Στα ≤500px πλάτος βρίσκεται μόνο
   μεγεθυμένο παράθυρο, όχι συσκευή. */
@media(max-width:500px) and (max-height:420px){
  .actionbar{position:static}
  body{padding-bottom:0}
  /* Ο ΙΔΙΟΣ ΛΟΓΟΣ ΜΕ ΤΗ ΜΠΑΡΑ, ΕΝΑ ΣΚΑΛΙ ΧΕΙΡΟΤΕΡΟΣ. Σε παράθυρο 200px
     ύψους ένα σταθερό μπάνερ ~205px αφήνει μηδέν pixel περιεχομένου. Γίνεται
     κανονικό στοιχείο στο τέλος της ροής: τα δύο κουμπιά ΔΕΝ χάνονται, απλώς
     παύουν να τρώνε ολόκληρη την οθόνη. Και τότε η JavaScript ΔΕΝ μεταφέρει
     την εστίαση εκεί — θα σήμαινε «πήγαινε στο τέλος» με τη φόρτωση. */
  .consent{position:static;box-shadow:none}
  html.has-consent body{padding-bottom:0}
  .consent-panel{max-height:100vh}
}

/* ── ΤΟ ΤΗΛΕΦΩΝΟ ΓΥΡΙΣΜΕΝΟ ──────────────────────────────────────
   Ίδια συσκευή, άλλη κατεύθυνση: 800×390. Το πλάτος ξεπερνά το 700 και
   έπεφταν ΟΛΟΙ οι κανόνες αφής — τα chip ξανάγιναν 38px και τα πεδία 42px,
   ακριβώς τα «δύο pixel κάτω από το όριο» που το σχόλιο από πάνω περιγράφει
   ως αστοχία. Εδώ το σωστό σήμα είναι το ΥΨΟΣ, όχι το πλάτος.
   Η μπάρα ενεργειών ΔΕΝ έρχεται μαζί: σε οθόνη 390px ύψους θα έτρωγε το 15%.
   Το (min-width:701px) κρατά τον κανόνα έξω από ό,τι πιάνει ήδη το από πάνω
   μπλοκ, ώστε να μη διπλασιάζεται η ίδια δήλωση στον ίδιο κόμβο.
   Και δεύτερη συνθήκη, (hover:none): tablet σε ΚΑΘΕΤΗ θέση είναι 768×1024 —
   πλάτος πάνω από 700, ύψος πάνω από 500, δηλαδή δεν το έπιανε κανένας από
   τους δύο κανόνες, και τα chip έμεναν 38px σε συσκευή αφής. */
@media(min-width:701px) and (max-height:500px),
       (min-width:701px) and (hover:none){
  .form input:not([type=checkbox]),.form select,.form textarea{min-height:46px}
  .pager .page-numbers{min-height:46px;min-width:46px;display:inline-flex;
    align-items:center;justify-content:center}
  .pager ul{gap:10px}
  .chip{padding:11px 16px;min-height:44px;display:inline-flex;align-items:center}
  /* ΨΙΧΟΥΛΑ ΣΕ ΜΙΑ ΓΡΑΜΜΗ ΠΟΥ ΚΥΛΑΕΙ. Οι σύνδεσμοι ήταν ενσωματωμένο κείμενο
     15px ύψος — το ένα τρίτο του δαπέδου αφής του ίδιου του θέματος — και
     είναι ο ΜΟΝΟΣ δρόμος πίσω στην κατηγορία πάνω από το τσάκισμα.
     Το προφανές (min-height όπως είναι) τα τυλίγει σε τρεις γραμμές: το
     ψίχουλο 67px→122px και ο τίτλος 55px πιο κάτω. Σε ΜΙΑ γραμμή που κυλάει
     οριζόντια, και οι τρεις ζώνες γίνονται 44px ΚΑΙ το ψίχουλο πέφτει
     67px→58px, δηλαδή ο τίτλος ΑΝΕΒΑΙΝΕΙ. Ό,τι βγαίνει εκτός είναι η
     τρέχουσα σελίδα, που την ξαναλέει το h1 από κάτω. */
  .crumb{padding-top:14px;display:flex;align-items:center;flex-wrap:nowrap;
    overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .crumb::-webkit-scrollbar{display:none}
  .crumb a,.crumb>span{display:inline-flex;align-items:center;min-height:44px;flex:none}
  .btn:active,.chip:active,.card:active{transform:scale(.985)}
}

/* ── ΣΤΟΧΟΙ ΑΦΗΣ ΥΠΟΣΕΛΙΔΟΥ — ΓΡΑΜΜΕΝΟΙ ΜΙΑ ΦΟΡΑ ────────────────
   Ίσχυαν σε ΔΥΟ media blocks με πανομοιότυπο κείμενο (κινητό σε ύψος, και
   τηλέφωνο σε πλάγια θέση / συσκευή χωρίς δείκτη). Η διπλοεγγραφή δεν ήταν
   θεωρητικό πρόβλημα: τη στιγμή που πρόσθεσα τον κανόνα για τα <p>, ο
   φύλακας των μεταλλάξεων σταμάτησε με «2 ταιριάσματα» — δηλαδή καμία
   μετάλλαξη δεν μπορούσε να στοχεύσει τον κανόνα χωρίς να αφήσει το δίδυμό
   του ζωντανό. Ένας κανόνας γραμμένος δύο φορές είναι ένας κανόνας που θα
   διορθωθεί μία.

   ⚠ ΤΟ ΤΗΛΕΦΩΝΟ ΚΑΙ ΤΟ EMAIL ΖΟΥΝ ΣΕ <p>, ΟΧΙ ΣΕ <li>. Η προηγούμενη εκδοχή
   έγραφε μόνο `.f-grid li a` ενώ το σχόλιό της έλεγε «το ΜΟΝΟ σημείο που δεν
   πήρε στόχο αφής». Μετρημένο στα 390: επτά σύνδεσμοι 44px, και «2421 102 217»
   83×16 με «info@gld-systems.gr» 136×16 — τα δύο πράγματα που ΟΝΤΩΣ πατάει
   κάποιος από τηλέφωνο ήταν τα δύο μοναδικά που έμειναν στα 16px. */
@media(max-width:700px),
       (min-width:701px) and (max-height:500px),
       (min-width:701px) and (hover:none){
  .f-grid li{margin-bottom:0}
  .f-grid li a,.f-grid p a{display:inline-flex;align-items:center;min-height:44px}
  .f-grid li a{margin-bottom:0}
  .f-grid p:has(a){margin-bottom:0}
}
@media(max-width:560px){
  /* ΔΥΟ ΣΤΗΛΕΣ ΣΕ ΤΗΛΕΦΩΝΟ ΔΕΝ ΕΙΝΑΙ ΔΙΑΤΑΞΗ. Στα 390px οι δύο στήλες βγαίνουν
     161px η καθεμία: 12,3 χαρακτήρες ανά γραμμή, και ο πίνακας συστατικών
     έχανε ΟΛΟΚΛΗΡΗ τη στήλη τιμών σε 66 από τις 146 σελίδες προϊόντος. */
  .grid.g-2{grid-template-columns:1fr}
  /* ⚠⚠ v0.8.2 — Η ΤΕΤΑΡΤΗ ΦΟΡΑ, ΟΠΩΣ ΤΗΝ ΠΡΟΕΒΛΕΨΕ ΤΟ ΣΧΟΛΙΟ ΠΙΟ ΚΑΤΩ.
     Ο κανόνας από πάνω γράφτηκε για ΠΙΝΑΚΑ (τα κελιά συστατικών/προδιαγραφών
     της σελίδας προϊόντος και μηχανήματος). Το .grid.g-2 όμως ζει σε ΤΡΙΑ
     πρότυπα, και στο τρίτο — την ΑΡΧΙΚΗ — δεν κρατά κελιά πίνακα αλλά τις
     κάρτες προϊόντων των δύο οίκων. Μετρημένο στα 390px:
       ΙΔΙΑ κάρτα προϊόντος:  169px στο /proionta/  ·  350px στην αρχική
       8 κάρτες οίκων:        3.904px σε σελίδα 14.757px (26%)
     Στα 560px το αποτέλεσμα αυτοαναιρείται: το ΜΠΟΥΚΑΛΑΚΙ βγαίνει 515px ενώ
     το ΜΗΧΑΝΗΜΑ δίπλα του 251px — στην ίδια σελίδα, στο ίδιο πλάτος, το μικρό
     αντικείμενο διπλάσιο από το μεγάλο. Και ένα pixel παραπάνω (561) ρίχνει
     την ενότητα από 2.613px σε 804px.
     Ο κανόνας 25 γραμμές πιο κάτω λέει ήδη ρητά ότι τα προϊόντα είναι
     «αναγνωρίσιμα στα 168px» και ότι «δύο στήλες το μισιάζουν χωρίς καμία
     απώλεια» — άρα η αρχική παραβίαζε μετρημένη απόφαση του ίδιου αρχείου.
     ΘΕΤΙΚΟΣ ΕΠΙΛΟΓΕΑΣ ΠΑΝΩ ΣΤΟ ΠΕΡΙΕΧΟΜΕΝΟ, ίδιο ιδίωμα με το
     «.grid.g-4:has(.card-prod)» της ζώνης 561-700: η κάρτα δηλώνει τι είναι,
     δεν το συμπεραίνουμε από το πρότυπο που την τύπωσε.
     Ο κανόνας ζει έξω από αυτό το @media — βλ. «.band-grid .grid.g-2». */
}
@media(max-width:460px){
  /* Τα ΜΗΧΑΝΗΜΑΤΑ (.g-3) πάνε ένα στη σειρά: είναι μεγάλες συσκευές και η
     πλακέτα θέλει πλάτος για να διαβαστεί το σχήμα τους.
     ΤΑ ΠΡΟΪΟΝΤΑ (.g-4) ΟΧΙ. Είναι μπουκάλια και σωληνάρια, αναγνωρίσιμα στα
     168px — και σε μία στήλη ο κατάλογος των 24 μετρήθηκε 12.395px πλέγμα
     πάνω σε 15.833px σελίδα. Δύο στήλες το μισιάζουν χωρίς καμία απώλεια. */
  .g-3{grid-template-columns:1fr}
  /* v0.8.2 — ΕΔΩ ΗΤΑΝ ΤΟ «.home .grid.g-4{grid-template-columns:1fr}».
     Το v0.7.7 το πρόσθεσε επειδή η αρχική ζωγράφιζε ΜΗΧΑΝΗΜΑΤΑ με .g-4 και ο
     κανόνας .g-3 δύο γραμμές πιο πάνω δεν την έπιανε ποτέ. Μπάλωνε το
     ΣΥΜΠΤΩΜΑ στα ≤460 και άφηνε το ίδιο λάθος ζωντανό σε ΚΑΘΕ άλλο πλάτος:
     η κάρτα έμενε 26-42% στενότερη απ' ό,τι στον κατάλογο ώς τα 2560.
     Η ΑΙΤΙΑ ήταν η κλάση, και διορθώθηκε στην πηγή της (front-page.php
     δηλώνει πλέον .g-3). Ο κανόνας από πάνω την πιάνει τώρα κανονικά, οπότε
     το μπάλωμα δεν έχει τι να μπαλώσει — και ένας κανόνας που δεν ταιριάζει
     πουθενά, με σχόλιο που περιγράφει κατάσταση που δεν υπάρχει πια, είναι
     ακριβώς ο τρόπος που γεννήθηκαν οι τρεις προηγούμενες αστοχίες. */
  /* ΙΔΙΟ ΛΑΘΟΣ, ΤΡΙΤΗ ΕΠΙΦΑΝΕΙΑ. Και η σελίδα μηχανήματος δείχνει ΜΗΧΑΝΗΜΑΤΑ
     με .g-4 («ΙΔΙΑ ΚΑΤΗΓΟΡΙΑ»), οπότε ο κανόνας .g-3 δεν την έπιανε ποτέ:
     161px η κάρτα στα 375px, ενώ η ΙΔΙΑ κάρτα στο /mixanimata/ είναι 335px.

     ⚠ v0.8.1 — ΤΟ ΠΑΛΙΟ ΣΧΟΛΙΟ ΕΔΩ ΕΛΕΓΕ «το .section-rel υπάρχει μόνο εδώ,
     άρα δεν κουνιέται τίποτε άλλο». ΔΕΝ ΙΣΧΥΕ. Το ίδιο section υπάρχει και
     στη ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΟΣ (145 σελίδες), όπου δεν δείχνει μηχανήματα αλλά
     μπουκάλια — που ο ΙΔΙΟΣ κανόνας δύο γραμμές πιο πάνω λέει ρητά ότι
     χωράνε δύο-δύο. Αποτέλεσμα: 4 κάρτες στοιβαγμένες, 2.300px στα 390,
     δηλαδή 43% ολόκληρης της σελίδας προϊόντος, και το κουμπί «Ζητήστε
     προσφορά» στο y=3.746. Ο επιλογέας δένεται πλέον σε κλάση που ΔΗΛΩΝΕΙ
     τον λόγο της (.section-rel-wide), όχι σε συμπέρασμα για το πού υπάρχει
     ένα όνομα. Τρίτη φορά που «στοχευμένος επιλογέας» αστοχεί σε αυτό το
     αρχείο — η τέταρτη θα είναι η ίδια. */
  .section-rel-wide .grid.g-4{grid-template-columns:1fr}
  /* v0.7.7 — ΤΕΣΣΕΡΙΣ ΓΡΑΜΜΕΣ ΤΙΤΛΟΥ, ΜΟΝΟ ΣΤΟ ΣΤΕΝΟ ΤΗΛΕΦΩΝΟ.
     Με 3 γραμμές, ΔΥΟ ΔΙΑΦΟΡΕΤΙΚΑ ΠΡΟΪΟΝΤΑ ζωγράφιζαν τον ΙΔΙΟ ορατό τίτλο.
     Το χειρότερο ζευγάρι είναι στα 320px: «BLEMISH CONTROLLER CREAM spf30»
     και «spf50» έδειχναν ίδιο τίτλο, ίδια ορατή περιγραφή («Λευκαντική κρέμα
     προσώπου») και ίδιο eyebrow («BECLARITY») — μόνο η φωτογραφία διέφερε,
     και το spf είναι ΑΚΡΙΒΩΣ η απόφαση αγοράς. Μετρημένο με Range rects:
       συγκρούσεις 390: 2→0 · 360: 2→0 · 320: 5→1
       κομμένοι τίτλοι 390: 20→5 · 360: 30→12 · 320: 52→25
       κοψίματα μέσα σε λέξη 390: 2→0 · 360: 7→3
     Κόστος 281px στις 7 σελίδες στα 390 (1,1% του πλέγματος).
     Η ΜΙΑ σύγκρουση που μένει στα 320 είναι ΔΕΔΟΜΕΝΟ, όχι CSS: δύο προϊόντα
     με πανομοιότυπο τίτλο (ID 477 και 481) — δεν αγγίζουμε ονόματα πελάτη.
     Πάνω από 460 δεν χρειάζεται: στα 412/430 μετρήθηκαν 0 συγκρούσεις. */
  .card h3{-webkit-line-clamp:4}
  .stats-in{grid-template-columns:1fr}
  .stats-in .stat{border-inline-start:0;border-top:1px solid var(--line);padding-inline:0}
  .stats-in .stat:first-child{border-top:0}
  .nav-cta{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   561-700px: ΤΑ ΠΡΟΪΟΝΤΑ ΞΑΝΑΒΡΙΣΚΟΥΝ ΤΗΝ ΤΡΙΤΗ ΣΤΗΛΗ ΤΟΥΣ (v0.7.7)

   Ο κανόνας των 700 (.g-2,.g-3,.g-4 -> 2 στήλες) σκέπαζε τον κανόνα των
   1080 (.g-4 -> 3 στήλες), οπότε από 561 ως 700 η κάρτα προϊόντος φούσκωνε
   σε 250-316px. ΑΠΟΤΕΛΕΣΜΑ: ένα tablet 10 ιντσών σε κατακόρυφη θέση έδειχνε
   ΛΙΓΟΤΕΡΑ προϊόντα ανά οθόνη από ένα τηλέφωνο 6 ιντσών.
     προϊόντα/οθόνη - iPhone 15 393x852: 4,3 · Galaxy Tab S9 640x1024: 4,1
                      iPad gen 11 656x944: 3,6 · 700x900: 3,3
   Με τρεις στήλες το 640 πάει σε 7,9/οθόνη (σελίδα 7.984->5.425px).
   Δεν είναι «η μία συσκευή»: η ζώνη είναι τα tablet κάτω των 700 ΚΑΙ κάθε
   τηλέφωνο γυρισμένο πλάγια (iPhone SE 667x375, Galaxy S9+ 658x320).

   ΘΕΤΙΚΟΣ ΕΠΙΛΟΓΕΑΣ, ΟΧΙ ΕΞΑΙΡΕΣΕΙΣ. Τα ΜΗΧΑΝΗΜΑΤΑ ζουν και αυτά σε .g-4
   σε τρεις επιφάνειες (αρχική, «ΙΔΙΑ ΚΑΤΗΓΟΡΙΑ»), και στα 206px θα ξαναγινόταν
   ακριβώς το λάθος που καταγράφεται πιο πάνω («κάρτα μηχανήματος 133px στην
   αρχική»). Το :has(.card-prod) πιάνει ΜΟΝΟ πλέγματα προϊόντων - 7 σελίδες
   /proionta/ και 23 από τα 28 αρχεία όρων - και αφήνει κάθε μηχάνημα ήσυχο.
   ⚠ ΜΑΖΙ ΜΕ ΑΥΤΟ ΑΛΛΑΖΕΙ ΤΟ sizes ΣΤΗ gld_plate(): 45vw -> 30vw στη ζώνη.
   ══════════════════════════════════════════════════════════════════ */
@media(min-width:561px) and (max-width:700px){
  .grid.g-4:has(.card-prod){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ══════════════════════════════════════════════════════════════════
   Η ΠΕΡΙΓΡΑΦΗ ΟΡΟΥ ΔΙΠΛΩΝΕΤΑΙ ΣΤΟ ΤΗΛΕΦΩΝΟ (v0.7.7)

   ΜΕΤΡΗΜΕΝΟ στα 390x844, χωρίς μεταβάσεις, σε 29 σελίδες καταλόγου:
   ΕΞΙ αρχεία όρων ανοίγουν χωρίς ΚΑΜΙΑ κάρτα στην οθόνη, και έντεκα δεν
   έχουν κάρτα μέσα στα ~730px που πραγματικά ζωγραφίζει το Safari κάτω από
   τη γραμμή διεύθυνσης. Το /seira/essential-care-concept/ αποσυντέθηκε:
     ψίχουλα 75-133 · eyebrow 191-209 · h1 211-284 · lead 301-801 (500px!)
     πλήθος 825-847 · λωρίδα σειρών 871-921 · ΠΡΩΤΗ ΚΑΡΤΑ 941
   ΕΞΙ όροι έχουν lead >=417px — και οι έξι είναι σειρές της Summe Cosmetics,
   δηλαδή ακριβώς οι σελίδες πίσω από τη λωρίδα του /oikos/summe-cosmetics/,
   που είναι η πόρτα για τα 131 από τα 145 προϊόντα.
   Επιπλέον: ο πάτος του lead (801) περνά ΚΑΤΩ από τη σταθερή .actionbar
   (787), οπότε η τελευταία γραμμή ΦΑΙΝΕΤΑΙ κομμένη ενώ δεν είναι.

   ΚΑΜΙΑ ΛΕΞΗ ΤΟΥ ΠΕΛΑΤΗ ΔΕΝ ΦΕΥΓΕΙ ΟΥΤΕ ΑΠΟ ΤΟ DOM ΟΥΤΕ ΑΠΟ ΤΗΝ ΟΘΟΝΗ:
   διπλώνει στις 5 γραμμές με κουμπί «Περισσότερα». Χωρίς JS μένει ολόκληρη,
   όπως σήμερα — το δίπλωμα το βάζει το theme.js, άρα δεν υπάρχει περίπτωση
   να κρυφτεί κείμενο που δεν ξεδιπλώνεται.
   ⚠ ΤΟ h1 ΔΕΝ ΦΤΑΙΕΙ: στα 390 το clamp(2.05rem,5.2vw,3.85rem) είναι ΗΔΗ στο
   πάτωμα (32,8px), και ο κανόνας συρρίκνωσης των 901 έχει ΤΟ ΙΔΙΟ πάτωμα —
   μετρήθηκε 146,875px -> 146,875px, πρώτη κάρτα 876 -> 876. Μηδέν κέρδος.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .lead-fold{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    overflow:hidden}
  /* Στόχος αφής 44px, όπως κάθε άλλο χειριστήριο του θέματος. */
  .lead-more{display:inline-flex;align-items:center;gap:.4em;min-height:44px;
    margin-top:2px;padding:0;background:none;border:0;cursor:pointer;
    font-family:var(--f-display);font-size:.8rem;font-weight:700;
    letter-spacing:.04em;color:var(--ink-2)}
  .lead-more:hover{color:var(--ink)}
  .lead-more::after{content:"";width:.5em;height:.5em;border-inline-end:2px solid currentColor;
    border-block-end:2px solid currentColor;transform:translateY(-.15em) rotate(45deg);
    transition:transform .2s}
  .lead-more[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
}
/* Η εκτύπωση δείχνει ΠΑΝΤΑ ολόκληρη την περιγραφή και ποτέ το κουμπί. */
@media print{
  .lead-fold{display:block;overflow:visible;-webkit-line-clamp:none}
  .lead-more{display:none}
}

/* ── ΚΙΝΗΣΗ ────────────────────────────────────────────────────
   Τρεις κανόνες, και οι τρεις εκτελέσιμοι παρακάτω:

   1. ΚΑΜΙΑ ΜΕΤΑΤΟΠΙΣΗ ΔΙΑΤΑΞΗΣ. Μόνο opacity και transform — δύο ιδιότητες
      που ο browser κινεί στη GPU χωρίς να ξαναϋπολογίσει τη σελίδα. Καμία
      κίνηση σε height, margin ή top: αυτές μετακινούν ό,τι είναι από κάτω
      και μετρώνται ως CLS.

   2. ΤΙΠΟΤΑ ΔΕΝ ΧΑΝΕΤΑΙ ΑΝ ΠΕΣΕΙ ΤΟ JS. Το αρχικό «κρυφό» ισχύει ΜΟΝΟ κάτω
      από .js, που τη βάζει ένα ενσωματωμένο script στην κεφαλίδα. Χωρίς JS
      — ή με σφάλμα πριν φορτώσει — η σελίδα είναι απλώς στατική και πλήρης.

   3. ΛΙΓΟΤΕΡΗ ΚΙΝΗΣΗ ΣΗΜΑΙΝΕΙ ΚΑΜΙΑ. Στο prefers-reduced-motion τα στοιχεία
      είναι ορατά ΑΜΕΣΩΣ, χωρίς μετάβαση — όχι «πιο αργά».
   ────────────────────────────────────────────────────────────── */

/* ΜΟΝΟ ΣΕ ΟΘΟΝΗ. Στο χαρτί δεν υπάρχει κύλιση, άρα δεν υπάρχει και
   IntersectionObserver να ανάψει το .in: το φύλλο προδιαγραφών τυπωνόταν
   ΚΕΝΟ αν ο χρήστης πατούσε εκτύπωση μέσα στα πρώτα δευτερόλεπτα — χανόταν
   το 66–73% του κειμένου. Ο περιορισμός στη ρίζα είναι καθαρότερος από ένα
   !important παρακάτω. */
@media screen{
  /* Η ΑΠΟΣΤΑΣΗ ΖΕΙ ΣΕ ΜΕΤΑΒΛΗΤΕΣ, ώστε κάθε οικογένεια να τη ρυθμίζει χωρίς
     να ξαναγράφει το transform — και να αλλάζει η ένταση από ΕΝΑ σημείο. */
  .js .reveal{opacity:0;transform:translate3d(var(--rv-x,0),var(--rv-y,22px),0)}
  /* Η ΕΠΙΚΕΦΑΛΙΔΑ ΕΙΝΑΙ Η ΣΤΙΓΜΗ ΠΟΥ «ΜΠΑΙΝΕΙ» Η ΕΝΟΤΗΤΑ. Ταξιδεύει λίγο
     περισσότερο από τις κάρτες της, ώστε να διαβάζεται ως αρχή και όχι ως
     άλλο ένα κουτί που εμφανίστηκε μαζί με τα υπόλοιπα. */
  .js .sec-head.reveal{--rv-y:32px}
}
/* ⚠ ΟΡΙΖΟΝΤΙΑ ΚΙΝΗΣΗ ΜΟΝΟ ΟΠΟΥ ΥΠΑΡΧΟΥΝ ΔΥΟ ΣΤΗΛΕΣ, ΚΑΙ ΤΟ ΟΡΙΟ ΕΙΝΑΙ
   ΜΕΤΡΗΜΕΝΟ. Μετατόπιση ΠΡΟΣ ΤΑ ΔΕΞΙΑ γεννά 8px οριζόντιας κύλισης στα
   360px· η αριστερή δεν γεννά τίποτα, γιατί το overflow-x:hidden του body
   κόβει μόνο τη μία πλευρά ενώ το scrollWidth της ρίζας μεγαλώνει. Στα
   768/1440/1920 και οι δύο κατευθύνσεις μετρήθηκαν στο 0.
   Κάτω από 901px οι ζώνες είναι ούτως ή άλλως μονόστηλες: εκεί η
   «κατεύθυνση» δεν σημαίνει τίποτα, γιατί δεν υπάρχει πλευρά να έρθει από
   αυτήν. Το κείμενο έρχεται από ΤΗ ΔΙΚΗ ΤΟΥ πλευρά — μετρημένο ότι στην
   κανονική ζώνη κάθεται αριστερά (x=0) και στη .flip δεξιά (x=634). */
@media screen and (min-width:901px){
  .js .band-grid > .band-txt{--rv-x:-26px;--rv-y:12px}
  .js .band-grid.flip > .band-txt{--rv-x:26px}
}
/* ΧΡΟΝΙΣΜΟΣ: 420ms μετάβαση + το πολύ 4×40ms κλιμάκωση = 580ms στη χειρότερη
   περίπτωση. Η πρώτη εκδοχή ήταν 550+5×55 = 825ms: μετρήθηκε κάρτα να είναι
   ακόμη στο opacity 0,5 σχεδόν ένα δευτερόλεπτο αφότου μπήκε στην οθόνη —
   δηλαδή ο χρήστης που κυλά γρήγορα έβλεπε άδεια κουτιά. */
.js .reveal.in{opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 40ms)}

/* ⚠⚠ Ο ΚΑΝΟΝΑΣ ΑΠΟ ΠΑΝΩ ΞΑΝΑΓΡΑΦΕΙ ΤΟ `transition` ΟΛΟΚΛΗΡΟ.
   Δεν φτάνει να δίνει άλλη ιδιότητα στο σήκωμα (βλ. `.card:hover{translate}`):
   το `transition` είναι ΜΙΑ ιδιότητα, οπότε η δήλωση της αποκάλυψης σβήνει και
   τη μετάβαση του translate — το σήκωμα γινόταν ΑΚΑΡΙΑΙΟ. Την ξαναδηλώνουμε
   ΜΟΝΟ για την κάρτα, μαζί με τη μετάβαση της εισόδου.
   ΜΕΤΡΗΜΕΝΟ πριν: κάρτα πάνω από το τσάκισμα 297ms, κάρτα που αποκαλύφθηκε
   453ms — αντί για τα 200ms που έχει γραμμένα η ίδια η κάρτα. Το σήκωμα
   έτρεχε με τον χρονισμό της ΕΙΣΟΔΟΥ, δηλαδή διπλάσιο.
   Η ΚΑΘΥΣΤΕΡΗΣΗ ΕΙΝΑΙ ΛΙΣΤΑ ΤΡΙΩΝ, ΟΧΙ ΜΙΑ ΤΙΜΗ: η κλιμάκωση --i×40ms πρέπει
   να ισχύει για την είσοδο (opacity, transform) και ΠΟΤΕ για το σήκωμα —
   αλλιώς η πέμπτη κάρτα θα περίμενε 160ms πριν αντιδράσει στο ποντίκι. */
.js .reveal.in.card{
  transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1),
             background .2s,border-color .2s,translate .2s;
  transition-delay:calc(var(--i,0) * 40ms),calc(var(--i,0) * 40ms),0s,0s,0s}

/* Η κεφαλίδα «κάθεται» μόλις αρχίσει η κύλιση: πιο πυκνό φόντο και μια
   λεπτή σκιά, ώστε το περιεχόμενο να μη φαίνεται να την ακουμπά. */
.nav{transition:background .25s,box-shadow .25s,border-color .25s}
.nav.is-stuck{background:rgba(17,18,20,.97);box-shadow:0 10px 30px rgba(0,0,0,.35);
  border-bottom-color:var(--line-2)}

/* Η φωτογραφία «ζωντανεύει» στο πέρασμα. Ο πολλαπλασιαστής υπάρχει επειδή
   κάποιες εικόνες έχουν ΗΔΗ transform (μεγέθυνση στο περιεχόμενο) — γράφοντας
   σκέτο scale() στο hover θα έσβηνε τη μετατόπισή τους και το προϊόν θα
   πεταγόταν εκτός πλακέτας. */
.plate img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.plate.is-trim img{
  transform:translate(var(--plate-dx,0),var(--plate-dy,0))
            scale(calc(var(--plate-k,1) * var(--plate-hover,1)))}
.card:hover .plate img{--plate-hover:1.045}
.card:not(.card-prod):hover .plate:not(.is-trim) img{transform:scale(1.045)}
.card-prod:hover .plate:not(.is-trim) img{transform:scale(1.035)}

/* Το βέλος «Τεχνικά χαρακτηριστικά →» ακολουθεί το πέρασμα. */
.card .more .arw{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.card:hover .more .arw{transform:translateX(4px)}

/* Το chip και το κουμπί σελίδας «βυθίζονται» ελάχιστα στο πάτημα — η μόνη
   ανάδραση που έχει ο χρήστης αφής ότι το άγγιγμα καταγράφηκε. */
.chip:active,.pager a.page-numbers:active,.btn:active{transform:translateY(1px)}

@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .reveal.in{transition:none}
  .plate img,.card:hover .plate img{transform:none!important;transition:none}
  .plate.is-trim img{transform:translate(var(--plate-dx,0),var(--plate-dy,0)) scale(var(--plate-k,1))!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── ΥΨΗΛΗ ΑΝΤΙΘΕΣΗ (Windows) ──────────────────────────────────
   Το σύστημα ξαναγράφει τα χρώματα: το φόντο γίνεται λευκό και το λευκό
   λογότυπο —που είναι ΚΑΙ ο σύνδεσμος «Αρχική»— πέφτει στο 1,45:1, δηλαδή
   εξαφανίζεται. Οι εικόνες δεν υφίστανται εξαναγκασμό χρώματος, οπότε δεν
   χρειάζεται forced-color-adjust: αρκεί να τους δώσουμε δικό τους σκούρο
   υπόβαθρο. Και το επιλεγμένο φίλτρο ξεχώριζε ΜΟΝΟ με χρώμα, που εκεί
   ισοπεδώνεται — του δίνουμε σχήμα. */
@media(forced-colors:active){
  .brand img,.footer img{background:#000;padding:6px;border-radius:6px}
  .chip.on{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .chip.on::before{content:"✓ "}
}

/* ── εκτύπωση ──────────────────────────────────────────────────
   Οι γιατροί ΟΝΤΩΣ τυπώνουν φύλλα προδιαγραφών για να συγκρίνουν
   προμηθευτές. Χωρίς αυτό το μπλοκ έβγαινε ανθρακί σελίδα με λευκά
   γράμματα — δηλαδή ένα μαύρο φύλλο.

   ΠΡΟΣΟΧΗ σε δύο παγίδες που ΔΕΝ φαίνονται σε έλεγχο DOM, μόνο στο PDF:
   1) Η πλακέτα δεν έχει δικό της ύψος — το παίρνει από την εικόνα. Χωρίς
      ρητό max-height η φωτογραφία του μηχανήματος έπιανε ΟΛΟΚΛΗΡΗ σελίδα A4.
   2) page-break-inside:avoid σε <section> ψηλότερο από μια σελίδα δεν
      «αποφεύγει» τίποτα: σπρώχνει την ενότητα στην επόμενη σελίδα και
      αφήνει την προηγούμενη ΚΕΝΗ. Μπαίνει μόνο σε μικρά κουτιά. */
@media print{
  :root{--ink:#000;--ink-2:#222;--ink-3:#444;--line:#BBB;--line-2:#999}
  *{background:transparent!important;box-shadow:none!important;
    text-shadow:none!important;filter:none!important}
  body{background:#fff!important;color:#000;font-size:10.5pt;line-height:1.42}
  /* Ό,τι δεν έχει νόημα σε χαρτί */
  /* Το .section-sm περιτυλίγει ΜΟΝΟ το .cta και στα τέσσερα πρότυπα. Αν
     κρύψεις το παιδί αλλά όχι τον γονέα, μένουν 110px σκέτο padding — αρκετά
     για να γεννήσουν μια ΚΕΝΗ τελευταία σελίδα στο PDF.
     Το .section-rel («ίδια σειρά» / «ίδια κατηγορία») φεύγει επίσης: σε φύλλο
     ενός προϊόντος είναι θόρυβος, και το Chromium έκοβε τις κάρτες του στη
     μέση λέξης όταν η γραμμή του πλέγματος έπεφτε πάνω σε αλλαγή σελίδας. */
  .nav,.footer,.burger,.filters,.cta,.section-sm,.section-rel,.form,.crumb,
  .hero-actions,.sec-head .btn,.skip,.card-award,
  .actionbar,.searchpanel,.nav-tools,.pager,.linegrid,.consent,
  .consent-panel,.consent-backdrop,.mapgate{display:none!important}
  .section{padding:0 0 10pt!important}
  .wrap{max-width:none;padding:0}
  h1{font-size:19pt;margin-bottom:3pt}
  h2{font-size:13pt;margin-top:11pt;margin-bottom:4pt}
  h3{font-size:11pt}
  .lead{font-size:11pt;color:#000;max-width:none;margin-bottom:.5em}
  .eyebrow{color:#000;font-size:8pt}
  /* Μία στήλη: δύο στήλες σε A4 αφήνουν μισή σελίδα κενή δίπλα σε ψηλή εικόνα */
  .hero-prod{grid-template-areas:none!important}
  .hero-grid,.band-grid,.grid.g-2{grid-template-columns:1fr!important;
    gap:8pt!important;align-items:start!important}
  .grid.g-3,.grid.g-4{grid-template-columns:repeat(3,1fr)!important;gap:8pt!important}
  /* Η ΠΛΑΚΕΤΑ: ρητό ύψος, αλλιώς η εικόνα γίνεται αφίσα */
  .plate{max-height:6.5cm!important;padding:0!important;border:1px solid #CCC;
    aspect-ratio:auto!important;page-break-inside:avoid}
  .plate::after{display:none!important}
  .plate img{max-height:6.5cm!important;width:auto!important;height:auto!important;
    max-width:100%;object-fit:contain!important;mix-blend-mode:normal!important;margin:0 auto}
  .card .plate{max-height:3cm!important}
  .card .plate img{max-height:3cm!important}
  /* Ο πίνακας προδιαγραφών ολόκληρος, με μαύρες γραμμές, χωρίς κύλιση */
  .tablewrap{overflow:visible!important}
  .specs{min-width:0;font-size:9.5pt}
  .specs tr{border-bottom:1px solid #999;page-break-inside:avoid}
  .specs th{color:#000;width:38%;min-width:0;padding:6pt 12pt 6pt 0}
  .specs td{color:#000;padding:6pt 0}
  .ticks li{color:#000;font-size:9.5pt}
  /* Οι περικοπές είναι για την οθόνη — στο χαρτί θέλουμε ΟΛΟ το κείμενο */
  .card h3,.card p{display:block;overflow:visible;-webkit-line-clamp:none}
  .card,.reason,.pill{page-break-inside:avoid}
  .card{border:1px solid #CCC}
  /* Ο αναγνώστης του χαρτιού δεν μπορεί να πατήσει σύνδεσμο */
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  /* Ταυτότητα προμηθευτή στην ΚΟΡΥΦΗ, σαν letterhead. ΟΧΙ position:fixed:
     το Chrome όντως το επαναλαμβάνει σε κάθε σελίδα, αλλά ΔΕΝ κρατά χώρο
     γι' αυτό — τυπωνόταν πάνω στο κείμενο της δεύτερης σελίδας. Και ΟΧΙ στο
     τέλος του εγγράφου: έπεφτε μόνο του σε δεύτερη σελίδα. */
  .print-id{display:block!important;margin:0 0 10pt;padding:0 0 5pt;
    border-bottom:1px solid #999;font-size:8pt;color:#333;line-height:1.45}
}

/* ═══════════════════════════════════════════════════════════════
   v0.7.3 — ΓΥΡΟΣ 3: κεφαλίδα σε υπολογιστή, μεγάλες οθόνες,
   φτωχές σελίδες. Ο ΚΑΝΟΝΑΣ ΤΗΣ ΣΕΙΡΑΣ: το μπλοκ μπαίνει στο ΤΕΛΟΣ
   του αρχείου, μετά από κάθε βασικό κανόνα που πειράζει — αλλιώς
   είναι νεκρό (το πάθαμε στον γύρο 2 με το .chip).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Η ΔΕΞΙΑ ΑΚΡΗ ΤΗΣ ΚΕΦΑΛΙΔΑΣ ────────────────────────────
   Το `margin-inline-start:auto` γράφτηκε στο <ul>. Όταν το μενού
   τυλίχτηκε σε <nav class="nav-menu"> (για να γίνει ορόσημο για τους
   αναγνώστες οθόνης), το auto περιθώριο έμεινε ΜΕΣΑ στο nav και έπαψε
   να στοιχίζει οτιδήποτε στο επίπεδο του .nav-in.
   Ο ελεύθερος χώρος μαζευόταν στο ΤΕΛΟΣ της σειράς: μετρήθηκε το
   «Ζητήστε επίδειξη» να σταματά 139px πριν τη δεξιά ακμή της στήλης
   περιεχομένου στα 1280, 105px στα 1440, 91px στα 1920 — ενώ το
   λογότυπο κούμπωνε σωστά αριστερά (απόκλιση 0). Κεφαλίδα με σωστή
   αριστερή και ραγισμένη δεξιά ακμή διαβάζεται ως λάθος, όχι ως ύφος.
   Τώρα το μενού παίρνει τον ελεύθερο χώρο και κεντράρεται: τα δύο
   κενά γίνονται συμμετρικά (84/84px στα 1440) και το κουμπί κουμπώνει
   στη δεξιά ακμή του περιεχομένου, όπως κάθε τίτλος από κάτω του. */
@media(min-width:1061px){
  .nav .nav-menu{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
  .nav .nav-links{margin-inline-start:0;flex-wrap:nowrap}
}

/* ── 2. ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ ────────────────────────────────────────
   Το δοχείο ήταν παγωμένο στα 1240px (1112px περιεχομένου) σε ΚΑΘΕ
   πλάτος. Στα 2560 το 56,6% της οθόνης ήταν κενό περιθώριο και ο
   κατάλογος κυλούσε 986px παραπάνω απ' όσο χρειαζόταν.
   Το μέτρο ανάγνωσης ΔΕΝ κινδυνεύει: .lead και .sec-head .txt έχουν
   64ch, το .prose 70ch — φραγμοί που κρατούν το κείμενο στενό ενώ οι
   κάρτες και οι εικόνες απλώνονται. */
@media(min-width:1500px){:root{--maxw:min(1560px,94vw)}}
@media(min-width:1900px){:root{--maxw:min(1760px,92vw)}}

/* Περισσότερες στήλες αντί για φαρδύτερες κάρτες. */
@media(min-width:1500px){.grid.g-4{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1900px){
  .grid.g-4{grid-template-columns:repeat(6,1fr)}
  .grid.g-3{grid-template-columns:repeat(4,1fr)}
}
/* Οι ΣΤΑΘΕΡΕΣ ΕΞΟΔΟΙ (.exits) εξαιρούνται — ο κανόνας ζει στο ΤΕΛΟΣ του
   αρχείου, γιατί εδώ θα έχανε. Βλ. «ΣΤΑΘΕΡΟ ΣΥΝΟΛΟ ΕΞΟΔΩΝ». */

/* ── 3. ΜΙΣΟΑΔΕΙΑ ΠΛΕΓΜΑΤΑ ────────────────────────────────────
   «Ίδια κατηγορία» με 1 ή 2 κάρτες σε πλέγμα 4 στηλών: μετρήθηκε 76,5%
   της σειράς κενό σε 2 σελίδες μηχανήματος και 51,0% σε άλλες 9.
   ΤΟ :has() ΕΙΝΑΙ ΚΛΕΙΔΩΜΕΝΟ ΣΕ ΥΠΟΛΟΓΙΣΤΗ ΕΠΙΤΗΔΕΣ: η ειδικότητά του
   (0,4,0) νικάει τα breakpoints του κινητού — δοκιμάστηκε ζωντανά και
   έβγαλε scrollWidth 553 σε οθόνη 390. Μέσα σε @media δεν φτάνει ποτέ
   εκεί. Το ταβάνι των 380px εμποδίζει το τέντωμα μιας κάρτας σε 1.124px
   πλάτος και 1.004px ύψος, που ήταν το αποτέλεσμα του auto-fit. */
@media(min-width:1081px){
  .grid.g-4:has(> :last-child:nth-child(-n+2)),
  .grid.g-3:has(> :last-child:nth-child(-n+2)){
    grid-template-columns:repeat(2,minmax(0,380px));justify-content:start}
  .grid.g-4:has(> :last-child:nth-child(3)){
    grid-template-columns:repeat(3,minmax(0,380px));justify-content:start}
}

/* ── 4. ΤΟ ΣΗΜΑΔΙ ΤΗΣ ΣΕΛΙΔΟΠΟΙΗΣΗΣ ──────────────────────────
   Η άγκυρα #katalogos έχει ύψος 0: ο δακτύλιος εστίασης ζωγράφιζε
   λευκή γραμμή 1129×4px που έκοβε τον κατάλογο σε κάθε κλικ «Επόμενη».
   Το tabindex είναι -1, άρα κανένας χρήστης πληκτρολογίου δεν χάνει
   δακτύλιο — μόνο η προγραμματιστική εστίαση τον ζωγράφιζε. */
#katalogos:focus{outline:none}
#katalogos{scroll-margin-top:92px}

/* Ο αριθμός μέσα στο ΕΝΕΡΓΟ chip μετρήθηκε 3,05:1 στα 8,64px —
   σβησμένος σε 25 από τις 27 σελίδες αρχείου. */
.chip.on .chip-n{color:#4E545E}

/* Στα ψίχουλα ο σύνδεσμος και η τρέχουσα σελίδα ήταν οπτικά ταυτόσημοι.
   Το --ink-2 μετρά 8,99:1 και ξεχωρίζει καθαρά από το --ink-3 του
   τρέχοντος, χωρίς υπογραμμίσεις κάτω από μακριά ονόματα σειρών. */
.crumb a{color:var(--ink-2)}

/* ── 5. Η ΛΑΜΨΗ ΤΟΥ ΗΡΩΑ ──────────────────────────────────────
   Το inset:-8% μετριέται πάνω στο ΠΛΗΡΕΣ πλάτος της οθόνης, όχι στο
   δοχείο: πάνω από ~1900px η λάμψη ξεκολλούσε από την εικόνα και
   επέπλεε μόνη της στο κενό περιθώριο. Δένεται στο κέντρο και
   μετατοπίζεται όσο το μισό δοχείο. */
@media(min-width:1500px){
  .hero::before{inset:-30% auto auto 50%;
    translate:calc(var(--maxw) / 2 - min(720px,84vw) + 96px) 0}
}

/* ── 6. ΟΙ ΜΕΤΡΗΤΕΣ ΤΗΣ ΑΡΧΙΚΗΣ ───────────────────────────────
   Η τέταρτη λεζάντα ξεκινούσε 33px χαμηλότερα από τις άλλες τρεις,
   επειδή το «ISO 9001 / ISO 14001» πιάνει δύο γραμμές. Με subgrid οι
   τέσσερις αριθμοί μοιράζονται γραμμή πλέγματος και οι τέσσερις
   λεζάντες ξεκινούν στο ίδιο ύψος. Μετρήθηκε: η ζώνη ΔΕΝ ψηλώνει. */
.stats-in{grid-template-rows:auto auto}
.stat{display:grid;grid-template-rows:subgrid;grid-row:span 2}
/* …ΑΛΛΑ ΤΟ subgrid ΕΦΕΡΕ ΔΕΥΤΕΡΟ ΚΟΣΤΟΣ ΠΟΥ ΔΕΝ ΕΙΧΕ ΜΕΤΡΗΘΕΙ. Η κοινή
   πρώτη σειρά είναι τόσο ψηλή όσο το ΨΗΛΟΤΕΡΟ περιεχόμενό της, δηλαδή το
   δίγραμμο «ISO 9001 / ISO 14001». Τα μονογραμμικά «17», «25 χρόνια» και
   «2 οίκοι» έπαιρναν κουτί 67px για κείμενο 33,6px και κάθονταν στην ΚΟΡΥΦΗ
   του — άρα 42px αέρας ανάμεσα στον αριθμό και στη λεζάντα ΤΟΥ, ενώ το ISO
   είχε 8px. Ο αριθμός και η λεζάντα του είναι ΕΝΑ ζεύγος· 42px τα χωρίζουν.
   Με align-self:end οι αριθμοί πέφτουν στο ΚΑΤΩ μέρος της κοινής σειράς:
   κενό 42→8 και στα τέσσερα, οι λεζάντες ΠΑΡΑΜΕΝΟΥΝ ευθυγραμμισμένες (γι'
   αυτό μπήκε το subgrid) και το ύψος της ζώνης δεν αλλάζει — 173px πριν,
   173px μετά. Ο αέρας πάει εκεί που δεν ενοχλεί: πάνω από τους αριθμούς. */
.stat b{align-self:end}

/* Η διαπίστευση πάνω από το τσάκισμα ήταν το μικρότερο κείμενο της
   οθόνης και έσπαγε σε τρεις γραμμές. */
.hero-cap .t{font-size:.78rem;max-width:78%}

/* Οι ζώνες των δύο οίκων άφηναν 556px και 516px κατακόρυφο κενό:
   το κείμενο κεντραριζόταν απέναντι σε τέσσερις κάρτες. */
@media(min-width:901px){
  .band-grid{align-items:start}
  .band-txt{padding-block-start:clamp(8px,1.2vw,20px)}
  /* Το .flip άλλαζε ΜΟΝΟ τη σειρά των παιδιών, όχι τις στήλες: οι
     κάρτες Dermaqual έβγαιναν 18% στενότερες από τις Summe στην ίδια
     σελίδα, με ίδιο πλέγμα και ίδιο πλήθος. */
  .band-grid.flip{grid-template-columns:1.08fr .92fr}
}

/* ── 7. ΡΕΥΜΑΤΑ ΦΟΝΤΟΥ ────────────────────────────────────────
   Δες το σχόλιο της gld_bgpaths() για το κόστος: η κίνηση είναι ΜΟΝΟ
   transform, ώστε να συντίθεται στην κάρτα γραφικών (0,1% ενός πυρήνα
   αντί για 6–12% που κοστίζει η κίνηση του stroke-dashoffset). */
.has-bgpaths{position:relative;isolation:isolate;overflow:clip}
.bgpaths{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--ink);
  -webkit-mask-image:radial-gradient(120% 100% at 100% 58%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 100% 58%,#000 20%,transparent 78%)}
.bgpaths svg{width:100%;height:100%;display:block}
.bgpaths path{fill:none;stroke-linecap:round}
.bgp-a,.bgp-b{will-change:transform;transform-box:fill-box;transform-origin:center}
.bgp-a{animation:gld-drift-a 64s ease-in-out infinite alternate}
.bgp-b{animation:gld-drift-b 88s ease-in-out infinite alternate}
@keyframes gld-drift-a{from{transform:translate3d(-26px,10px,0) rotate(-.6deg)}
                       to  {transform:translate3d(22px,-14px,0) rotate(.7deg)}}
@keyframes gld-drift-b{from{transform:translate3d(18px,-8px,0) rotate(.5deg)}
                       to  {transform:translate3d(-20px,12px,0) rotate(-.5deg)}}
/* Ο κανόνας του θέματος: κίνηση μόνο για όποιον τη ζητά. Οι γραμμές
   ΜΕΝΟΥΝ — γίνονται ακίνητο σχέδιο, δεν αδειάζει η ζώνη. */
@media(prefers-reduced-motion:reduce){.bgp-a,.bgp-b{animation:none;will-change:auto}}
@media print{.bgpaths{display:none}}

/* ── 8. ΟΙ ΔΟΜΙΚΕΣ ΣΕΛΙΔΕΣ ────────────────────────────────────
   Η πρώτη παράγραφος γίνεται εισαγωγή με CSS, ΟΧΙ με parsing του
   the_content(): μια regex πάνω σε <p> με ένθετο <strong> (υπάρχει στην
   Πολιτική Απορρήτου) κόβει λάθος. */
.pagehead .prose > p:first-child{font-size:clamp(1.02rem,1.5vw,1.19rem);line-height:1.62;
  color:var(--ink-2);max-width:37.85em}
.pagehead h1{margin-bottom:1.35rem}

/* Τα τρία δεδομένα επικοινωνίας ως στόχοι, όχι ως 13,76px κείμενο μέσα
   στο υποσέλιδο. Ίδιες ετικέτες με τη σελίδα επικοινωνίας. */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fact{background:var(--panel);padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;
  gap:.42rem;min-height:44px;transition:background .18s}
a.fact:hover{background:var(--panel-2)}
.fact-k{font-family:var(--f-display);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--ink-3)}
.fact-v{font-family:var(--f-display);font-size:.98rem;font-weight:700;color:var(--ink);
  line-height:1.35;overflow-wrap:anywhere}
.fact-cta .fact-v{color:var(--red-hi)}
@media(max-width:860px){.factbar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.factbar{grid-template-columns:1fr}}

/* Τα περιθώρια των διαδοχικών ενοτήτων ΣΤΟΙΒΑΖΟΝΤΑΝ: μετρήθηκαν 220px
   κενό ανάμεσα στο τέλος του κειμένου και τη λωρίδα κατηγοριών, και
   άλλα 170px πριν τα στοιχεία επικοινωνίας — σε σελίδα που το πρόβλημά
   της ήταν ακριβώς το κενό. */
.pagehead{padding-block-end:clamp(22px,2.6vw,34px)}
.pagehead + .section-sm,
.pagehead + .stats + .section-sm,
.section-sm + .section-sm{padding-block-start:clamp(24px,3vw,40px)}
.catstrip + *,.section-sm .eyebrow{margin-bottom:1rem}

/* Το όνομα του βραβείου, ορατό. Το --ink-2 μετρά 8,99:1 πάνω στο --panel. */
.card-award-txt{font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink-2);margin:0 0 .1rem;line-height:1.35;overflow-wrap:anywhere}

/* ── 9. Ο ΠΡΟΫΠΟΛΟΓΙΣΜΟΣ ΥΨΟΥΣ ΤΟΥ ΗΡΩΑ ──────────────────────
   ΜΕΤΡΗΜΕΝΟ: η ζώνη με τους τέσσερις αριθμούς έπεφτε κάτω από το
   τσάκισμα σε ΚΑΘΕ μέγεθος οθόνης — 199px στα 1366×768, 70px στα
   1440×900, 171px στα 1600×900, 106px στα 1920×1080. Δηλαδή κανένας
   επισκέπτης σε υπολογιστή δεν έβλεπε ούτε έναν αριθμό χωρίς κύλιση,
   και η μόνη απόδειξη εμπειρίας της εταιρείας ζούσε κάτω από το κενό.
   Ο μοχλός ΔΕΝ είναι ο τίτλος ούτε το padding: είναι το aspect-ratio
   4/4.4 της φωτογραφίας, που ψηλώνει όσο πλαταίνει η στήλη — γι' αυτό
   στα 1600 ο ήρωας ήταν 854px ενώ στα 1440 ήταν 753px.
   Το max-height δένει τη φωτογραφία στο ΥΨΟΣ της οθόνης· το
   object-fit:cover που έχει ήδη αναλαμβάνει την περικοπή. */
@media(min-width:1081px){
  .hero{padding-block:clamp(36px,4vw,60px) clamp(30px,3.2vw,48px)}
  .hero-fig{max-height:min(56vh,540px)}
}

/* Φορητοί 768px ύψους — ο πιο συνηθισμένος. Εκεί δεν έφτανε το ταβάνι της
   φωτογραφίας: χρειάζονταν άλλα 124px. Ο τίτλος πέφτει από 71px σε 49px
   και ξαναγίνεται τρίγραμμος αντί για τετράγραμμος. Ισχύει ΜΟΝΟ σε κοντές
   οθόνες — σε 1080p ο τίτλος μένει στο πλήρες μέγεθος. */
/* ΣΕ ΚΟΝΤΗ ΟΘΟΝΗ ΦΟΡΗΤΟΥ Ο ΚΑΤΑΛΟΓΟΣ ΑΝΟΙΓΕ ΧΩΡΙΣ ΚΑΝΕΝΑ ΠΡΟΪΟΝ.
   Ο τίτλος του /proionta/ πιάνει ΤΕΣΣΕΡΙΣ γραμμές × 61,6px = 276px· με την
   κεφαλίδα, τα ψίχουλα, την εισαγωγή και τη λωρίδα των 22 chip, η πρώτη κάρτα
   ξεκινά στο y=873 σε οθόνη 768px ύψος. Δηλαδή μηδέν προϊόντα στην πρώτη
   οθόνη σε 1024, 1280, 1366 και 1536.
   ΟΧΙ στα tax-gld_brand: τα δύο αρχεία οίκων έχουν ΜΟΝΟΓΡΑΜΜΟ τίτλο (69px)
   και ήδη δείχνουν 74px κάρτας — εκεί ο κανόνας δεν αγοράζει τίποτα.
   ΤΟ ΚΑΤΩ ΟΡΙΟ ΕΙΝΑΙ 901px ΚΑΙ ΟΧΙ 1081: στα 1024×768 — φορητό και tablet
   σε οριζόντια θέση — ο κανόνας ΔΕΝ έπιανε και η σελίδα εξακολουθούσε να
   ανοίγει με μηδέν προϊόντα (μετρημένο). Κάτω από 901 δεν χρειάζεται:
   εκεί το clamp είναι ήδη στο πάτωμα και ο κανόνας δεν αλλάζει τίποτα. */
@media(min-width:901px) and (max-height:950px){
  body.post-type-archive-gld_product .sec-head h1,
  body.post-type-archive-gld_machine .sec-head h1,
  body.tax-gld_machine_cat .sec-head h1,
  body.tax-gld_line .sec-head h1{font-size:clamp(2.05rem,3.2vw,2.6rem)}
}

@media(min-width:1081px) and (max-height:820px){
  .hero{padding-block:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,34px)}
  .hero-fig{max-height:min(44vh,410px)}
  .hero h1{font-size:clamp(2.05rem,3.5vw,2.85rem)}
  .hero-actions{margin-top:1.25rem}
}

/* Μονή στήλη για ζώνες που έχουν ένα μόνο γεμάτο κελί. */
.g-1{grid-template-columns:1fr}
.note-fine{color:var(--ink-3);font-size:.78rem;max-width:32.81em}

/* Τα αποτελέσματα αναζήτησης έμεναν 3 στήλες σε κάθε πλάτος: σε οθόνη 2560
   τέσσερα αποτελέσματα έσπαγαν σε δεύτερη σειρά που έπεφτε κάτω από το
   τσάκισμα. Και οι ΔΥΟ λίστες (μηχανήματα + προϊόντα) αλλάζουν μαζί —
   αλλιώς η ίδια σελίδα θα είχε δύο διαφορετικούς αριθμούς στηλών. */
/* ⚠⚠ v0.8.3 — «.results», ΟΧΙ «.search». ΠΕΜΠΤΗ ΦΟΡΑ ΤΟ ΙΔΙΟ.
   Οι τρεις κανόνες παρακάτω ήταν γραμμένοι ως «.search .grid.g-3», δηλαδή
   δεμένοι στη ΣΕΛΙΔΑ. Το 404 απέκτησε κι αυτό πλέγμα αποτελεσμάτων
   (προτάσεις από τη νεκρή διεύθυνση) και ΔΕΝ κληρονόμησε τίποτα: μετρήθηκε
   κάρτα προϊόντος 350px στα 390 — ακριβώς ο αριθμός που καταγράφει το
   σχόλιο από κάτω ως το ΛΑΘΟΣ που διόρθωσε το v0.7.8.
   Το πλέγμα αποτελεσμάτων δεν είναι ιδιότητα της σελίδας αναζήτησης· είναι
   είδος πλέγματος. Η κλάση το λέει, και όποια σελίδα το χρειαστεί το
   δηλώνει. */
@media(min-width:1500px){.grid.g-3.results{grid-template-columns:repeat(4,1fr)}}

/* ══════════════════════════════════════════════════════════════════
   ΤΑ ΑΠΟΤΕΛΕΣΜΑΤΑ ΔΙΑΒΑΖΟΝΤΑΙ ΟΠΩΣ Ο ΚΑΤΑΛΟΓΟΣ (v0.7.8)

   ΜΕΤΡΗΘΗΚΕ: το ΙΔΙΟ προϊόν έπιανε 350px στην αναζήτηση και 168,5px στο
   /proionta/ στα 390px — γιατί η αναζήτηση χρησιμοποιεί .g-3, που κάτω από
   460 πέφτει σε ΜΙΑ στήλη (είναι ο κανόνας των ΜΗΧΑΝΗΜΑΤΩΝ). Αποτέλεσμα στο
   «/?s=summe» (132 αποτελέσματα): σελίδα 12.311px αντί 5.822px, και 1,8
   ονόματα ανά οθόνη αντί 4,8.

   ΓΙΑΤΙ ΟΧΙ ΣΚΕΤΟ «δύο στήλες»: το πλέγμα της αναζήτησης είναι ΜΕΙΚΤΟ. Σε 27
   από 35 πραγματικά ερωτήματα υπάρχει τουλάχιστον μία κάρτα μηχανήματος, και
   ένα μηχάνημα στα 168px είναι ακριβώς το λάθος που καταγράφεται πιο πάνω.
   Οπότε: τα ΠΡΟΪΟΝΤΑ δύο-δύο, τα ΜΗΧΑΝΗΜΑΤΑ και οι ΣΕΛΙΔΕΣ σε όλο το πλάτος.
   Μετρημένο στα 390: «δέρμα» 12.203→5.775px, «κυτταρίτιδα» 10.002→7.195px με
   την πρώτη συσκευή να ανεβαίνει από το y=4.925 στο y=2.119.

   ΚΑΙ Η ΖΩΝΗ 561-700, για τον ίδιο λόγο που την απέκτησε ο κατάλογος: εκεί
   η αναζήτηση έμενε 2 στήλες ενώ ο κατάλογος πήγε 3, δηλαδή 989px παραπάνω
   σελίδα στα 700px για το ίδιο περιεχόμενο.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:460px){
  .grid.g-3.results{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.g-3.results > .card:not(.card-prod){grid-column:1/-1}
}
@media(min-width:561px) and (max-width:700px){
  .grid.g-3.results{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid.g-3.results > .card:not(.card-prod){grid-column:1/-1}
}

/* ΔΟΚΙΜΑΣΤΗΚΕ ΚΑΙ ΑΠΟΡΡΙΦΘΗΚΕ: διεύρυνση του .sec-head .txt σε μεγάλη οθόνη.
   Ο τίτλος ΔΕΝ κέρδιζε γραμμή (767px αντί 646px, και στις δύο περιπτώσεις
   τέσσερις γραμμές) επειδή το text-wrap:balance εξισορροπεί το κουτί
   ανεξάρτητα από το διαθέσιμο πλάτος — ενώ η εισαγωγή από κάτω πήγαινε από
   68 σε 86 χαρακτήρες ανά γραμμή. Καθαρά χειρότερο. */

/* ── 10. ΧΑΡΤΗΣ ────────────────────────────────────────────────
   ΑΠΟΦΑΣΗ ΠΕΛΑΤΗ: φορτώνει απευθείας. Το aspect-ratio κρατά το κουτί
   δεσμευμένο πριν έρθει το iframe, ώστε να μη μετακινηθεί τίποτα στη
   σελίδα όταν φορτώσει (CLS 0). Ο χάρτης έρχεται σε ανοιχτό θέμα και
   μένει έτσι: φίλτρο σκούρανσης αλλοιώνει τα χρώματα και κάνει τις
   ονομασίες δρόμων δυσανάγνωστες. */
.mapbox{margin-top:1.6rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;position:relative;aspect-ratio:16/10}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* ΤΟ ΥΠΟΚΑΤΑΣΤΑΤΟ ΚΑΘΕΤΑΙ ΣΤΟ ΙΔΙΟ ΑΚΡΙΒΩΣ ΚΟΥΤΙ ΜΕ ΤΟ IFRAME.
   Γι' αυτό είναι absolute inset:0 μέσα στο ίδιο .mapbox: η εναλλαγή
   υποκατάστατο → χάρτης δεν μετακινεί ούτε ένα pixel της σελίδας (CLS 0),
   και το aspect-ratio που ήδη υπάρχει κρατά το ύψος σε κάθε πλάτος. */
.mapgate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.55rem;text-align:center;padding:clamp(14px,3vw,26px);
  background:var(--panel);overflow:auto}
.mapgate-pin{color:var(--ink-3);flex:none}
.mapgate-h{font-family:var(--f-display);font-size:.98rem;margin:0;color:var(--ink)}
.mapgate-p{margin:0;font-size:.82rem;line-height:1.6;color:var(--ink-2);max-width:32.81em}
.mapgate-addr{margin:.15rem 0 0;font-size:.85rem;color:var(--ink);font-weight:600}
.mapgate-act{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center;
  margin-top:.3rem}
/* ΤΟ [hidden] ΘΕΛΕΙ ΡΗΤΟ ΚΑΝΟΝΑ ΕΔΩ. Το .btn ορίζει display:inline-flex και
   κερδίζει από το προεπιλεγμένο display:none του περιηγητή για το [hidden] —
   δηλαδή το κουμπί θα φαινόταν και χωρίς JavaScript, νεκρό. */
.mapgate .btn[hidden]{display:none}
.mapgate-out{display:inline-flex;align-items:center;gap:.35em;font-size:.82rem;
  color:var(--ink-2);border-bottom:1px solid var(--line-3);padding:6px 0}
.mapgate-out:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
.mapgate-more{margin:.2rem 0 0;font-size:.76rem;color:var(--ink-3)}
.mapgate-more a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.mapgate-note{margin:.75rem 0 0;font-size:.76rem;color:var(--ink-3);line-height:1.55}
/* Σε πολύ κοντό κουτί (4/3 σε τηλέφωνο 320px) η μακροσκελής πρόταση δεν
   χωρά. Φεύγει ΜΟΝΟ αυτή· η σύντομη από κάτω εξακολουθεί να λέει ότι η
   Google μαθαίνει τη διεύθυνση IP — η ουσία δεν κόβεται ποτέ. */
.mapgate-short{display:none}
@media(max-width:380px){
  .mapgate-long{display:none}
  .mapgate-short{display:block}
}
.btn-sm{padding:9px 17px;font-size:.82rem}
@media(max-width:560px){.mapbox{aspect-ratio:4/3}}

/* Στον πίνακα επικοινωνίας το τηλέφωνο και το email ΕΙΝΑΙ σύνδεσμοι, αλλά
   μετρήθηκαν ταυτόσημα με τη διεύθυνση και το ωράριο που δεν είναι: ίδιο
   χρώμα, ίδιο βάρος, μηδέν υπογράμμιση, μηδέν περίγραμμα — η μόνη διαφορά
   ήταν ο δείκτης του ποντικιού. Το σήμα δεν μπορεί να είναι μόνο χρώμα
   (WCAG 1.4.1), γι' αυτό μπαίνει κάτω περίγραμμα. */
.specs-contact td a{border-bottom:1px solid var(--line-3);
  transition:border-color .18s,color .18s}
.specs-contact td a:hover{border-bottom-color:var(--red)}

/* ── 11. ΚΡΙΤΙΚΕΣ GOOGLE ──────────────────────────────────────
   Η ΚΙΝΗΣΗ ΕΙΝΑΙ transform ΚΑΙ ΜΟΝΟ. Το ίδιο εφέ γραμμένο με animation σε
   `top` ή `margin-top` ζητά επανασχεδίαση σε κάθε καρέ — το μετρήσαμε σε
   άλλη ζώνη αυτού του θέματος και κόστιζε 6–12% ενός πυρήνα, μόνιμα. */
.reviews{background:var(--bg-2);border-block:1px solid var(--line)}
.rv-score{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-family:var(--f-display);color:var(--ink-2);flex:none}
.rv-score b{font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1}
.rv-score span{font-size:.8rem;color:var(--ink-3)}
.rv-score:hover{color:var(--ink)}
.stars{display:inline-flex;gap:2px;line-height:0}
.stars svg.on{fill:#F5B731}
.stars svg.off{fill:var(--line-2)}

.rv-cols{display:grid;gap:clamp(13px,1.6vw,22px);
  /* Το κάδρο κόβεται πάνω και κάτω με ξεθώριασμα, ώστε οι κάρτες να
     μπαινοβγαίνουν αντί να κόβονται απότομα στην ακμή. */
  max-height:min(78vh,680px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.rv-cols[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.rv-cols[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.rv-col{overflow:hidden}
.rv-track{display:flex;flex-direction:column;gap:clamp(13px,1.6vw,22px);
  will-change:transform;animation:gld-rv var(--rv-dur,30s) linear infinite}
.rv-dup{display:flex;flex-direction:column;gap:clamp(13px,1.6vw,22px)}
/* Το -50% δουλεύει ΜΟΝΟ επειδή το δεύτερο αντίγραφο είναι ακριβώς ίσο με το
   πρώτο ΚΑΙ το gap του .rv-track μετράει μία φορά ανάμεσά τους: γι' αυτό το
   αντίγραφο είναι flex column με το ΙΔΙΟ gap, όχι σκέτα αδέλφια. */
@keyframes gld-rv{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* Σταματά στο hover: αλλιώς δεν προλαβαίνεις να διαβάσεις ό,τι σε τράβηξε. */
.rv-cols:hover .rv-track,.rv-cols:focus-within .rv-track{animation-play-state:paused}

.rv-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:.85rem}
.rv-text{margin:0;color:var(--ink-2);line-height:1.66;font-size:.92rem;
  overflow-wrap:anywhere}
.rv-who{display:flex;align-items:center;gap:.65rem;margin-top:auto}
.rv-who img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--panel-2)}
/* ΜΕΤΑ το .rv-who img, ποτέ πριν: κανόνας τοποθετημένος πριν τη βάση του
   είναι νεκρός. Ίδια γεωμετρία 36px με τη φωτογραφία που αντικατέστησε,
   ώστε να μην αλλάξει κανένα ύψος κάρτας και να μην ξανανοίξει το κενό του
   βρόχου. Η απόχρωση έρχεται από το όνομα (crc32), η φωτεινότητα μένει
   σταθερή στο 30%: μετρήθηκε η ΧΕΙΡΟΤΕΡΗ απόχρωση και των 360, όχι μία. */
/* ⚠ «.rv-who .rv-ini», ΟΧΙ ΣΚΕΤΟ «.rv-ini». Ο δίσκος είναι <span> ΜΕΣΑ στο
   .rv-who, και δύο γραμμές πιο πάνω υπάρχει ήδη «.rv-who span{font-size:.74rem;
   color:var(--ink-3)}» — κλάση + τύπος, δηλαδή ΜΕΓΑΛΥΤΕΡΗ ειδικότητα από μία
   σκέτη κλάση. Το γράμμα έβγαινε γκρι 0,74rem αντί για λευκό 0,95rem και η
   αντίθεση μετρήθηκε 1,95:1 αντί για 5,95:1.
   ΤΟ ΜΑΤΙ ΔΕΝ ΤΟ ΕΠΙΑΝΕ: γκρι γράμμα σε χρωματιστό δίσκο φαίνεται μια χαρά
   μέχρι να το μετρήσεις. Το βρήκε η μέτρηση και των 360 αποχρώσεων. */
.rv-who .rv-ini{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  color:var(--ink);background:hsl(var(--rv-h,0) 24% 30%)}
.rv-who div{display:flex;flex-direction:column;min-width:0;flex:1}
.rv-who b{font-family:var(--f-display);font-size:.88rem;color:var(--ink);
  overflow-wrap:anywhere}
.rv-who span{font-size:.74rem;color:var(--ink-3)}
.rv-link{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  color:var(--ink-3);flex:none}
.rv-link:hover{color:var(--ink);background:var(--panel-2)}

@media(max-width:900px){.rv-cols[data-cols="3"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .rv-cols[data-cols="2"],.rv-cols[data-cols="3"]{grid-template-columns:1fr}
  .rv-cols{max-height:min(70vh,520px)}
}
/* ΧΩΡΙΣ ΚΙΝΗΣΗ: οι κάρτες ΜΕΝΟΥΝ και γίνονται λίστα με κύλιση από τον χρήστη.
   Αν απλώς σταματούσε η κίνηση, ο μισός κατάλογος θα ήταν αόρατος για πάντα. */
@media(prefers-reduced-motion:reduce){
  .rv-track{animation:none;will-change:auto}
  .rv-dup{display:none}
  .rv-cols{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
@media print{.reviews{display:none}}

/* ⚠ ΤΟ flex-direction ΠΡΕΠΕΙ ΝΑ ΔΗΛΩΘΕΙ ΡΗΤΑ. Το .rv-dup ορίζεται παραπάνω ως
   `display:flex;flex-direction:column` για τις ΚΑΘΕΤΕΣ στήλες. Μέσα στην
   οριζόντια λωρίδα κληρονομούσε τη στήλη, στοίβαζε τις πέντε κάρτες
   κατακόρυφα και έδινε ύψος σειράς 1.738px — δηλαδή ΚΑΘΕ κάρτα τεντωνόταν
   στα 1.738px από το align-items:stretch. Φάνηκε μόνο με μέτρηση ύψους.

   Οριζόντια λωρίδα — η διάταξη που δουλεύει με το ταβάνι των 5 κριτικών
   του Places API. Κάρτα σταθερού πλάτους: χωρίς αυτό, μία μακριά κριτική θα
   τέντωνε το κελί και ο υπολογισμός των επαναλήψεων θα έπεφτε έξω. */
.rv-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv-row{display:flex;align-items:stretch;gap:clamp(13px,1.6vw,22px);width:max-content;
  will-change:transform;animation:gld-rv-x var(--rv-dur,45s) linear infinite}
.rv-row > .rv-dup{display:flex;flex-direction:row;align-items:stretch;
  gap:clamp(13px,1.6vw,22px)}
.rv-row .rv-card{flex:0 0 clamp(258px,26vw,330px)}
@keyframes gld-rv-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rv-marquee:hover .rv-row,.rv-marquee:focus-within .rv-row{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  /* Η κίνηση φεύγει, οι κάρτες ΜΕΝΟΥΝ: γίνονται λωρίδα με κύλιση από τον
     χρήστη. Αν απλώς πάγωνε, οι μισές θα ήταν αόρατες για πάντα. */
  .rv-row{animation:none;will-change:auto}
  .rv-row > .rv-dup{display:none}
  .rv-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;
    scroll-snap-type:x proximity;padding-bottom:6px}
  .rv-row .rv-card{scroll-snap-align:start}
}

/* ══════════════════════════════════════════════════════════════════
   ΛΩΡΙΔΑ ΒΑΘΜΟΛΟΓΙΑΣ — όταν υπάρχουν αστέρια αλλά ΚΑΝΕΝΑ κείμενο.

   Μετρήθηκε στο προφίλ του GLD (11/09): 15 βαθμολογίες, μέσος όρος 5,0,
   και οι πέντε κριτικές που δίνει το API είναι ΟΛΕΣ χωρίς λέξη. Κάρτες με
   όνομα και αστέρια και κενό ανάμεσα διαβάζονται ως «κάτι δεν φόρτωσε».
   Μία λωρίδα λέει το ίδιο πράγμα χωρίς να υπόσχεται περιεχόμενο που
   δεν υπάρχει, και ο σύνδεσμος την κάνει επαληθεύσιμη σε ένα κλικ.

   ΧΩΡΙΣ auto margin: το δοχείο κάνει wrap, και το auto margin μέσα σε
   flex που τυλίγεται στέλνει το στοιχείο στην άκρη μόνο της πρώτης
   σειράς — στο κινητό θα κρεμόταν μόνο του δεξιά.
   ══════════════════════════════════════════════════════════════════ */
.reviews-score{padding-block:clamp(24px,3vw,40px)}
.rv-badge{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.2vw,28px);flex-wrap:wrap;
  max-width:740px;margin-inline:auto;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,30px);
  border:1px solid var(--line);border-radius:14px;background:var(--bg);
  color:var(--ink-2);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease}
.rv-badge:hover{border-color:var(--line-3);transform:translateY(-1px)}
.rv-badge:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Το G σε συμπαγές ανοιχτό χρώμα — η μόνη μονόχρωμη χρήση που επιτρέπει
   η Google σε σκούρο φόντο. */
.rv-g{color:var(--ink);flex:none}
.rv-num{display:flex;align-items:center;gap:.55rem}
.rv-num b{font-size:clamp(1.65rem,3vw,2.1rem);font-weight:800;color:var(--ink);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rv-badge .stars svg{width:16px;height:16px}
.rv-meta{display:flex;flex-direction:column;line-height:1.38}
.rv-meta b{color:var(--ink);font-size:.95rem;font-weight:700}
.rv-meta span{font-size:.8rem;color:var(--ink-3)}
.rv-go{display:inline-flex;align-items:center;gap:.42rem;
  font-size:.85rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line-3);padding-block-end:3px}
.rv-go svg{stroke:currentColor}
.rv-badge:hover .rv-go{border-bottom-color:var(--ink)}
@media (max-width:560px){
  .rv-badge{gap:12px 16px;padding:18px}
  .rv-meta{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .rv-badge{transition:border-color .18s ease}
  .rv-badge:hover{transform:none}
}

/* Κάρτα ΧΩΡΙΣ κείμενο: η κενή παράγραφος δεν τυπώνεται καθόλου, οπότε η κάρτα
   μαζεύεται μόνη της. Δίνουμε στενότερο πλάτος ώστε να μη μοιάζει με κουτί που
   περιμένει περιεχόμενο, και λίγο αέρα ανάμεσα σε αστέρια και όνομα. */
/* 320 και όχι 300: στα 300 το «Evaggelia Zampetoglou» έσπαγε σε δύο γραμμές,
   και επειδή η σειρά είναι align-items:stretch ΜΙΑ κάρτα ανέβαζε ΟΛΕΣ στα
   160px — δηλαδή κενό πάτο παντού εξαιτίας ενός ονόματος.
   Το .rv-who έχει ήδη margin-top:auto· δεύτερο περιθώριο ήταν περιττό. */
.rv-card-bare{min-width:248px;max-width:320px}

/* ══════════════════════════════════════════════════════════════════
   ΚΑΘΕΤΕΣ ΣΤΗΛΕΣ — ΔΙΟΡΘΩΣΕΙΣ ΠΛΑΤΟΥΣ ΚΑΙ ΚΙΝΗΤΟΥ (v0.7.4)

   1fr σε δοχείο 1240px έδινε στήλες 610px με κάρτες 320px μέσα: όλο το
   δεξί τρίτο έμενε κενό. Οι στήλες παίρνουν πλέον πλάτος κάρτας και
   κεντράρονται — μετρήθηκε στο στιγμιότυπο, δεν φαινόταν στους αριθμούς.
   ══════════════════════════════════════════════════════════════════ */
.rv-cols[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center}
.rv-cols[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,340px));justify-content:center}
@media(max-width:900px){
  .rv-cols[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,340px))}
}
/* Το max-width ίσχυε παντού και κρατούσε τις κάρτες στενές ΚΑΙ μέσα στη
   στήλη. Περιορίζεται στην οριζόντια λωρίδα, όπου όντως χρειάζεται. */
.rv-card-bare{min-width:0;max-width:none}
.rv-row .rv-card-bare{max-width:320px}

/* ΚΙΝΗΤΟ: ΟΧΙ ΚΥΛΙΣΗ, ΛΙΣΤΑ. Με μία στήλη σε κάδρο 520px, η δεύτερη στήλη
   κοβόταν ΟΛΟΚΛΗΡΗ — δύο κριτικές δεν τις έβλεπε ποτέ κανείς στο κινητό.
   Κάτω από 620px η ενότητα γίνεται απλή λίστα με τις διακριτές κριτικές:
   τα αντίγραφα του βρόχου δεν έχουν λόγο ύπαρξης χωρίς κίνηση. */
@media(max-width:620px){
  /* Στο κινητό μένει ΜΙΑ στήλη — και οι τρεις έχουν τον ίδιο κατάλογο,
     γυρισμένο. Η κίνηση ορίζεται στο μπλοκ παρακάτω. */
  .rv-cols > .rv-col:not(:first-child){display:none}
}

/* ⚠ ΑΥΤΟ ΤΟ ΜΠΛΟΚ ΠΡΕΠΕΙ ΝΑ ΜΕΝΕΙ ΤΕΛΕΥΤΑΙΟ. Οι κανόνες grid-template-columns
   παραπάνω έχουν ΙΔΙΑ ειδικότητα με το παλιό @media(max-width:620px), και
   επειδή γράφτηκαν αργότερα το νικούσαν ΜΕΣΑ στο κινητό: τρεις στήλες των
   ~110px σε οθόνη 390px, με τα ονόματα να σπάνε συλλαβή-συλλαβή. Φάνηκε μόνο
   στο στιγμιότυπο — οι αριθμοί έδειχναν «καμία υπερχείλιση». */
@media(max-width:900px){
  /* Με δύο τροχιές, η ΤΡΙΤΗ στήλη τυλίγεται σε νέα γραμμή και την κόβει το
     max-height: υπάρχει στο DOM, κινείται, και δεν τη βλέπει κανείς. */
  .rv-cols[data-cols="3"] > .rv-col:nth-child(3){display:none}
}
@media(max-width:620px){
  .rv-cols[data-cols="2"],.rv-cols[data-cols="3"]{grid-template-columns:1fr}
  /* ΚΙΝΕΙΤΑΙ ΚΑΙ ΣΤΟ ΚΙΝΗΤΟ. Πριν γινόταν στατική λίστα — αλλά μία στήλη με
     ΟΛΟΚΛΗΡΟ τον κατάλογο κυλά μια χαρά· απλώς θέλει κάδρο για να έχει πού. */
  .rv-cols{max-height:min(64vh,440px);overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
            mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
  .rv-col .rv-dup{display:flex}
  .rv-col .rv-card[aria-hidden="true"]{display:flex}
  /* ΡΗΤΑ, γιατί προηγούμενος κανόνας ίδιας ειδικότητας την είχε σβήσει. */
  .rv-track{animation:gld-rv var(--rv-dur,30s) linear infinite;will-change:transform}
}
/* Ο χρήστης που ζητά λιγότερη κίνηση παίρνει ΠΑΝΤΑ τη στατική λίστα — και σε
   κινητό. Αυτό το μπλοκ μένει ΜΕΤΑ το παραπάνω, αλλιώς το κινητό το νικά. */
@media(prefers-reduced-motion:reduce){
  .rv-cols{max-height:none;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .rv-track{animation:none;will-change:auto}
  .rv-col .rv-dup{display:none}
  .rv-col .rv-card[aria-hidden="true"]{display:none}
  /* Χωρίς τα αντίγραφα, οι στήλες 2 και 3 αδειάζουν τελείως (μετρήθηκαν σε
     -22px, δηλαδή μόνο το gap). Κρατάμε μία στήλη με τον πλήρη κατάλογο. */
  .rv-cols > .rv-col:not(:first-child){display:none}
}

/* ══════════════════════════════════════════════════════════════════
   ΚΕΦΑΛΙΔΑ ΕΝΟΤΗΤΑΣ + ΚΟΥΜΠΙ «ΓΡΑΨΤΕ ΚΡΙΤΙΚΗ» (v0.7.4)
   ══════════════════════════════════════════════════════════════════ */
.rv-head{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
@media(min-width:901px){.rv-head{align-items:flex-end}}
.rv-write{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.rv-write svg{fill:#F5B731;flex:none}

/* Πιάσιμο στην κάρτα: η κίνηση σταματά στο hover, οπότε η κάρτα κάτω από τον
   δείκτη πρέπει να δείχνει ότι ΑΥΤΗ είναι η επιλεγμένη. */
.rv-card{transition:border-color .18s ease,background-color .18s ease}
.rv-col .rv-card:hover{border-color:var(--line-3);background:var(--panel-2)}
.rv-card:focus-within{border-color:var(--line-3)}

/* Οι αριθμοί του σκορ σε tabular ώστε να μην «χοροπηδούν» αν αλλάξει η
   βαθμολογία, και λίγο μεγαλύτερο κενό από την επικεφαλίδα. */
.rv-score b{font-variant-numeric:tabular-nums}
.reviews .sec-head{align-items:start;gap:clamp(16px,2vw,28px)}

/* ══════════════════════════════════════════════════════════════════
   ΛΟΓΟΤΥΠΟ ΥΠΟΣΕΛΙΔΟΥ ΜΕ ΑΠΟΚΑΛΥΨΗ ΣΤΟΝ ΔΕΙΚΤΗ (v0.7.4)

   ΤΡΙΑ ΚΕΙΜΕΝΑ ΤΟ ΕΝΑ ΠΑΝΩ ΣΤΟ ΑΛΛΟ:
     .f-mark-base  σβηστό περίγραμμα, πάντα εκεί
     .f-mark-draw  το ίδιο περίγραμμα που «γράφεται» ΜΙΑ ΦΟΡΑ μόλις φανεί
     .f-mark-hot   χρωματιστό, ορατό ΜΟΝΟ μέσα από τη μάσκα του δείκτη

   ⚠ ΤΟ stroke-dashoffset ΓΡΑΦΕΤΑΙ ΜΙΑ ΦΟΡΑ, ΔΕΝ ΕΠΑΝΑΛΑΜΒΑΝΕΤΑΙ. Σε
   συνεχή βρόχο κοστίζει repaint σε κάθε καρέ (μετρημένο αλλού: 6–12%
   ενός πυρήνα ΣΥΝΕΧΕΙΑ). Εδώ τρέχει 1,6s και τελειώνει — `forwards`.

   ΧΡΩΜΑΤΑ ΤΟΥ GLD, ΟΧΙ ΟΥΡΑΝΙΟ ΤΟΞΟ: κόκκινο μάρκας → πορτοκαλί → το
   κεχριμπάρι των αστεριών. Πέντε άσχετα χρώματα θα χτυπούσαν με όλο το
   υπόλοιπο site.
   ══════════════════════════════════════════════════════════════════ */
.f-mark{display:none;margin:clamp(18px,2.5vw,34px) 0 -8px;line-height:0;
  pointer-events:none}
@media(min-width:1081px){.f-mark{display:block}}
.f-mark svg{width:100%;height:auto;overflow:visible}
.f-mark text{font-family:var(--f-display),system-ui,sans-serif;
  font-weight:800;font-size:104px;letter-spacing:.02em;fill:transparent}
.f-mark-base{stroke:var(--line-2);stroke-width:.9}
.f-mark-draw{stroke:var(--line-3);stroke-width:.9;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.f-mark.on .f-mark-draw{animation:gld-mark-draw 1.6s ease-in-out forwards}
@keyframes gld-mark-draw{to{stroke-dashoffset:0}}
.f-mark-hot{stroke:url(#gld-mark-g);stroke-width:1.3;opacity:0;
  transition:opacity .22s ease}
.f-mark.hot .f-mark-hot{opacity:1}

/* Το υποσέλιδο δέχεται τον δείκτη· το ίδιο το λογότυπο όχι (pointer-events
   none), ώστε να μη «σκεπάζει» τους συνδέσμους από πάνω του. */
.footer{position:relative}

@media(prefers-reduced-motion:reduce){
  .f-mark-draw{stroke-dashoffset:0;animation:none}
  .f-mark-hot{transition:none}
}
@media print{.f-mark{display:none}}

/* ══════════════════════════════════════════════════════════════════
   ΣΧΗΜΑΤΙΚΕΣ ΔΙΑΔΡΟΜΕΣ ΦΟΝΤΟΥ (v0.7.4)

   Το πρότυπο που ζητήθηκε είχε ΤΕΣΣΕΡΑ εφέ μαζί· εδώ μπαίνει ΜΟΝΟ αυτό.
   Το ουράνιο τόξο σε <h1>, οι διαγώνιες ρίγες που κυλούν και ο παλμός στο
   κουμπί μένουν έξω — τεκμηρίωση στο παραδοτέο.

   ⚠ ΤΟ ΓΡΑΨΙΜΟ ΤΕΛΕΙΩΝΕΙ. `forwards`, όχι `infinite`: το stroke-dashoffset
   ξαναζωγραφίζει τη διαδρομή σε κάθε καρέ.
   ══════════════════════════════════════════════════════════════════ */
.has-traces{position:relative;isolation:isolate}
.traces{position:absolute;inset:0;z-index:-1;overflow:hidden;
  pointer-events:none;
  /* ΚΑΜΙΑ ΜΑΣΚΑ ΠΛΑΤΟΥΣ. Οι διαδρομές είναι ήδη περιορισμένες σε δύο
     οριζόντιες λωρίδες όπου δεν υπάρχει περιεχόμενο σε κανένα πλάτος. Μια
     μάσκα με ποσοστά θα υπέθετε πλάτος στήλης που αλλάζει στα 1500 και 1900. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.traces svg{position:absolute;inset:0;width:100%;height:100%}
.tr-line{fill:none;stroke:var(--line-3);opacity:.5;stroke-width:1.2;
  stroke-dasharray:1600;stroke-dashoffset:1600}
.has-traces.on .tr-line{animation:gld-trace 1.8s ease-out var(--tr-delay,0ms) forwards}
@keyframes gld-trace{to{stroke-dashoffset:0}}
.tr-dot{fill:var(--red);opacity:0}
.has-traces.on .tr-dot{animation:gld-trace-dot .5s ease-out var(--tr-delay,0ms) forwards}
@keyframes gld-trace-dot{to{opacity:.85}}

/* Κάτω από 701px η ζώνη γίνεται στήλη και οι οριζόντιες διαδρομές δεν
   αντιστοιχούν πια σε τίποτα — φεύγουν. */
@media(max-width:700px){.traces{display:none}}
@media(prefers-reduced-motion:reduce){
  .tr-line{stroke-dashoffset:0;animation:none}
  .tr-dot{opacity:.85;animation:none}
}
@media print{.traces{display:none}}

/* ══════════════════════════════════════════════════════════════════
   ΣΕΛΙΔΑ ΕΠΙΚΟΙΝΩΝΙΑΣ — ΣΤΙΛΒΩΣΗ ΦΟΡΜΑΣ (v0.7.4)

   ΜΕΤΡΗΜΕΝΑ ΠΡΟΒΛΗΜΑΤΑ ΠΡΙΝ:
   · αριστερή στήλη 1018px, δεξιά 598px → τρύπα 420px κάτω από τη φόρμα
   · textarea 60px στο κινητό (ο κανόνας στόχου αφής 46px ΑΝΤΙΚΑΘΙΣΤΑ το
     min-height:120px — φτιάχτηκε χωριστά, βλ. παρακάτω)
   · input 43px vs select 44px δίπλα-δίπλα
   · checkbox συγκατάθεσης 13×13 — κάτω από κάθε όριο στόχου
   ══════════════════════════════════════════════════════════════════ */

/* ── Επικεφαλίδα στήλης φόρμας ───────────────────────────────── */
.formhead{margin-block-end:1.4rem}
.formhead h2{font-size:clamp(1.15rem,1.7vw,1.4rem);margin:0 0 .4rem}
.formhead .small{color:var(--ink-3);margin:0}

/* ── Πεδία: ΙΔΙΟ ύψος, ίδια συμπεριφορά ──────────────────────── */
/* ⚠ ΦΡΑΓΜΕΝΟ ΣΕ ΠΟΝΤΙΚΙ. Γραμμένο ασυνθήκευτα, αυτό το 44px ΝΙΚΟΥΣΕ (ίδια
   ειδικότητα, πιο κάτω στο αρχείο) το δάπεδο αφής των 46px: στο κινητό το
   select έπεφτε στα 44 ενώ τα input έμεναν 46 — δηλαδή η «διόρθωση
   παριτέτας» γεννούσε ΚΑΙ ανισότητα ΚΑΙ μικρότερο στόχο. Στις συσκευές αφής
   ισχύει το 46 και για τα δύο, άρα η παριτέτα κρατά έτσι κι αλλιώς. */
@media(min-width:701px) and (hover:hover){
  .field input,.field select{min-height:44px}
}
/* Το `transition:all` άλλαζε και ό,τι δεν θέλαμε (π.χ. ύψος σε resize).
   Ονομάζουμε τις ιδιότητες. */
.field input,.field select,.field textarea{
  transition:border-color .16s ease,background-color .16s ease}
.field:focus-within label{color:var(--ink-2)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}

/* Το select είχε το ΦΥΣΙΚΟ βελάκι του λειτουργικού: άλλο σχήμα, άλλο χρώμα,
   άλλο πλάτος ανά πλατφόρμα, δίπλα σε πεδία με δικό μας στυλ. */
.field select{
  appearance:none;-webkit-appearance:none;
  padding-inline-end:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23AFB4BC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px}
/* Όσο δεν έχει επιλεγεί τίποτα, η τιμή διαβάζεται ως οδηγία, όχι ως απάντηση. */
.field select:has(option[value=""]:checked){color:var(--ink-3)}

/* ── ΣΦΑΛΜΑ ΜΟΝΟ ΜΕΤΑ ΑΠΟ ΑΛΛΗΛΕΠΙΔΡΑΣΗ ─────────────────────────
   Το :invalid βάφει κόκκινα ΟΛΑ τα υποχρεωτικά πεδία με το που φορτώσει η
   σελίδα — ο επισκέπτης βλέπει έξι σφάλματα πριν γράψει λέξη. Το
   :user-invalid ενεργοποιείται μόνο αφού ασχοληθεί με το πεδίο. */
/* ΠΕΡΙΟΡΙΣΜΕΝΟ ΣΤΗ ΦΟΡΜΑ ΕΠΙΚΟΙΝΩΝΙΑΣ. Ασυνθήκευτο, θα έβαφε κόκκινο και το
   πεδίο αναζήτησης της κεφαλίδας — που είναι κι αυτό `required` και ζει σε
   `.field` σε ΚΑΘΕ σελίδα: κλικ, μετά κλικ αλλού, και η αναζήτηση «σφάλμα». */
.formcol .field input:user-invalid,
.formcol .field select:user-invalid,
.formcol .field textarea:user-invalid{
  border-color:var(--red-hi);background:rgba(237,28,36,.06)}
.formcol .field input:user-valid,
.formcol .field textarea:user-valid{border-color:rgba(120,200,140,.5)}

/* ── Συγκατάθεση φόρμας: πραγματικός στόχος, όχι 13 pixel ─────
   ⚠ ΟΧΙ «.consent»: ΥΠΑΡΧΕΙ ΗΔΗ στο θέμα και είναι το ΜΠΑΝΕΡ COOKIES
   (`position:fixed; inset:auto 0 0 0; z-index:90`, inc/consent.php). Η
   ετικέτα της φόρμας κληρονόμησε το fixed και βγήκε λωρίδα σε ΟΛΟ το πλάτος
   πάνω από τον χάρτη. Φάνηκε μόνο στο στιγμιότυπο — καμία μέτρηση δεν
   χτύπησε. Πάντα grep το όνομα κλάσης ΠΡΙΝ το γράψεις. */
.form-consent{display:flex;gap:.75rem;align-items:flex-start;
  margin:.5rem 0 .2rem;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  transition:border-color .16s ease}
.form-consent:hover{border-color:var(--line-2)}
.form-consent:focus-within{border-color:var(--line-3)}
.form-consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:none;margin:1px 0 0;
  border:1.5px solid var(--line-3);border-radius:6px;background:var(--bg);
  cursor:pointer;transition:border-color .14s ease,background-color .14s ease}
.form-consent input[type=checkbox]:checked{background:var(--red-btn);border-color:var(--red-btn)}
.form-consent input[type=checkbox]:checked::after{
  content:"";display:block;width:5px;height:10px;margin:2px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.form-consent input[type=checkbox]:user-invalid{border-color:var(--red-hi)}
.form-consent span{color:var(--ink-2)}

/* ── Χάρτης σε πλήρες πλάτος ─────────────────────────────────── */
.mapfull{margin-top:clamp(28px,4vw,52px)}
.mapfull .mapbox{margin-top:0;aspect-ratio:21/7}
@media(max-width:900px){.mapfull .mapbox{aspect-ratio:16/10}}

/* ── ΔΙΟΡΘΩΣΗ ΣΤΟΧΟΥ ΑΦΗΣ: το textarea ΔΕΝ είναι πεδίο μιας γραμμής ──
   Οι δύο κανόνες «min-height:46px» (700px και συσκευές αφής) έγραφαν ΞΑΝΑ
   το min-height του textarea, οπότε το μήνυμα — το πιο σημαντικό πεδίο της
   φόρμας — έπεφτε από 120px σε 60px και έμοιαζε με πεδίο μιας γραμμής.
   Το 46px ήταν ΔΑΠΕΔΟ για στόχους αφής, όχι ταβάνι. */
@media(max-width:700px),(hover:none){
  .form textarea{min-height:132px}
}

/* ── ΚΟΥΜΠΙ ΣΕ ΑΠΟΣΤΟΛΗ ──────────────────────────────────────────
   Το JS έβαζε ήδη data-busy και άλλαζε το κείμενο σε «Αποστολή…», αλλά
   τίποτα δεν ΚΙΝΟΥΝΤΑΝ: σε αργή σύνδεση το κουμπί έμοιαζε παγωμένο και ο
   επισκέπτης ξαναπατούσε. Το ::after επιβιώνει της αλλαγής textContent —
   είναι ψευδοστοιχείο, όχι παιδί. */
.btn[data-busy]{pointer-events:none}
.btn[data-busy]::after{content:"";width:14px;height:14px;flex:none;
  margin-inline-start:.5rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.32);border-top-color:#fff;
  animation:gld-spin .7s linear infinite}
@keyframes gld-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  /* Δεν σβήνει — είναι η ΜΟΝΗ ένδειξη ότι κάτι τρέχει· απλώς αργεί. */
  .btn[data-busy]::after{animation-duration:2.2s}
}

/* ══════════════════════════════════════════════════════════════════
   ΤΕΧΝΙΚΗ ΥΠΟΣΤΗΡΙΞΗ — ΔΙΑΤΑΞΗ (v0.7.4)

   ΜΕΤΡΗΘΗΚΕ ΠΡΙΝ: σελίδα 1.933px με 138 λέξεις. Το κείμενο έπιανε μία
   στήλη 706px και δεξιά έμεναν ~640px κενά σε ΟΛΟ το ύψος. Οι πέντε
   υπηρεσίες — το βασικό επιχείρημα της εταιρείας — ήταν απλές κουκκίδες.

   ΚΑΜΙΑ ΝΕΑ ΛΕΞΗ: το ίδιο `post_content`, άλλη διάταξη.
   ══════════════════════════════════════════════════════════════════ */
/* ΕΝΑ ΜΠΛΟΚ ΓΙΑ ΤΗΝ ΚΑΡΤΑ, ΕΝΑ ΓΙΑ ΤΙΣ ΣΤΗΛΕΣ. Πρώτη εκδοχή είχε το στυλ
   της κάρτας ΜΟΝΟ στο ≥901 και ξεχωριστό, μισό αντίγραφο στο 701–900: στα
   tablet οι κάρτες έβγαιναν ΧΩΡΙΣ αρίθμηση. Το είδε ο έλεγχος στα 800px. */
@media(min-width:701px){
  /* Το .prose είναι 70ch για ΑΝΑΓΝΩΣΙΜΟΤΗΤΑ — αυτό ισχύει για παραγράφους,
     όχι για πλέγμα καρτών. Λύνουμε το δοχείο και ξαναδένουμε τα κείμενα. */
  .pagehead-support .prose{max-width:none}
  .pagehead-support .prose > p,
  .pagehead-support .prose > h2,
  .pagehead-support .prose > h3{max-width:42.70em}

  .pagehead-support .prose ul{
    display:grid;gap:clamp(12px,1.4vw,18px);
    list-style:none;padding:0;margin:1.1rem 0 0;
    counter-reset:gld-cov}
  .pagehead-support .prose li{
    counter-increment:gld-cov;
    margin:0;padding:clamp(16px,1.7vw,22px);
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    color:var(--ink-2);line-height:1.55;font-size:.94rem;
    transition:border-color .18s ease,background-color .18s ease}
  .pagehead-support .prose li:hover{border-color:var(--line-2);background:var(--panel-2)}
  .pagehead-support .prose li::before{
    content:counter(gld-cov,decimal-leading-zero);
    display:block;margin-bottom:.6rem;
    font-family:var(--f-display);font-size:.72rem;font-weight:700;
    letter-spacing:.12em;color:var(--red-hi)}
}
/* ── Η ΤΕΛΕΥΤΑΙΑ ΣΕΙΡΑ ΓΕΜΙΖΕΙ, ΟΠΟΙΟ ΚΙ ΑΝ ΕΙΝΑΙ ΤΟ ΠΛΗΘΟΣ ──────
   Με 5 υπηρεσίες σε 3 στήλες έμενε ΤΡΥΠΑ κάτω δεξιά· σε 2 στήλες, τρύπα στο
   τέλος. ⚠ ΚΑΙ ΤΟ ΠΛΗΘΟΣ ΕΙΝΑΙ ΤΟΥ ΠΕΛΑΤΗ: οι κάρτες είναι απλό <ul> μέσα
   στο post_content, που ο Κώστας επεξεργάζεται από το WordPress. Μια διόρθωση
   φτιαγμένη «για πέντε» θα έσπαγε την ημέρα που θα γίνουν έξι.

   Το πλέγμα γίνεται ΕΞΙ λεπτές στήλες και κάθε κάρτα πιάνει δύο (= 3 ανά
   σειρά). Όταν η τελευταία σειρά έχει δύο, πιάνουν τρεις η καθεμία· όταν έχει
   μία, πιάνει και τις έξι. Οι επιλογείς μετρούν ΑΠΟ ΤΟ ΤΕΛΟΣ, οπότε ισχύουν
   για κάθε πλήθος — μετρημένο n=1…9 και στις δύο ζώνες, μηδέν τρύπες.

   ⚠ ΟΙ ΚΑΝΟΝΕΣ ΜΕΝΟΥΝ ΜΕΣΑ ΣΤΟ ΔΙΚΟ ΤΟΥΣ media query. Πρώτη εκδοχή τους είχε
   έξω: το `span 3` διέρρεε στη ζώνη των ΔΥΟ στηλών, όπου δεν υπάρχει τρίτη —
   μετρήθηκαν σειρές «137+139+401». Ό,τι μιλά για τρεις στήλες ζει εκεί που
   υπάρχουν τρεις στήλες.

   ⛔ ΔΟΚΙΜΑΣΤΗΚΕ ΚΑΙ ΑΠΟΡΡΙΦΘΗΚΕ το κεντράρισμα της τελευταίας σειράς (flex +
   justify-content:center): γεμίζει το κενό συμμετρικά, αλλά οι κάρτες 04 και
   05 ΧΑΝΟΥΝ τη στοίχιση με τη στήλη από πάνω τους — και όλη η σελίδα είναι
   αριστερά στοιχισμένη. */
@media(min-width:701px) and (max-width:900px){
  .pagehead-support .prose ul{grid-template-columns:repeat(2,1fr)}
  .pagehead-support .prose li:last-child:nth-child(2n+1){grid-column:1/-1}
}
@media(min-width:901px){
  .pagehead-support .prose ul{grid-template-columns:repeat(6,1fr)}
  .pagehead-support .prose li{grid-column:span 2}
  .pagehead-support .prose li:nth-last-child(2):nth-child(3n+1),
  .pagehead-support .prose li:nth-last-child(2):nth-child(3n+1)~li{grid-column:span 3}
  .pagehead-support .prose li:last-child:nth-child(3n+1){grid-column:span 6}
}

/* Ενέργειες αμέσως μετά το κείμενο της υποστήριξης — όχι 400px χαμηλότερα. */
.headact{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6rem}
.headact .btn .arw{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.headact .btn:hover .arw{transform:translateX(4px)}
/* Η λωρίδα κατηγοριών ακολουθούσε με 106px κενό και μετά άλλα 140px ως τη
   λωρίδα στοιχείων: τρία τμήματα που δεν έδειχναν να ανήκουν μαζί. */
.pagehead-support + .section-sm{padding-block-start:clamp(18px,2.4vw,34px)}
.pagehead-support ~ .section-sm + .section-sm{padding-block-start:clamp(10px,1.4vw,20px)}

/* ⚠ ΚΑΤΩ ΑΠΟ 701px Η ΣΤΑΘΕΡΗ ΜΠΑΡΑ ΔΕΙΧΝΕΙ ΗΔΗ ΤΑ ΙΔΙΑ ΔΥΟ ΚΟΥΜΠΙΑ.
   Το ίδιο τηλέφωνο και το ίδιο «Ζητήστε επίδειξη», ~100px πιο πάνω μέσα στη
   σελίδα: ο επισκέπτης βλέπει το ίδιο ζευγάρι δύο φορές. Η μπάρα υπάρχει
   ακριβώς για να μη χρειάζεται η σελίδα να το επαναλαμβάνει. */
@media(max-width:700px){.headact{display:none}}

/* Η λωρίδα κατηγοριών κυλά οριζόντια στο κινητό (1.421px σε παράθυρο 390px)
   αλλά κοβόταν με καθαρή ακμή — τίποτα δεν έλεγε ότι συνεχίζει. */
/* v0.7.7 — ΤΟ ΣΒΗΣΙΜΟ ΗΤΑΝ ΣΤΑΘΕΡΟ, ΑΡΑ ΨΕΥΔΟΤΑΝ. Στο τέλος της κύλισης το
   τελευταίο chip εξακολουθούσε να ζωγραφίζεται στο 42-45% και η λωρίδα
   έδειχνε ότι συνεχίζει — ενώ δεν συνέχιζε. Στο /seira/mesolab/, όπου όλη η
   διαδρομή είναι 47px, το ψέμα ίσχυε από το ΠΡΩΤΟ καρέ. Και στο κινητό η
   επικαλυπτόμενη μπάρα κύλισης εξαφανίζεται μετά το σύρσιμο, οπότε το
   σβήσιμο είναι το ΜΟΝΟ μόνιμο σημάδι. Το theme.js γράφει data-sx. */
@media(max-width:700px){
  .catstrip,.filters[data-filters]{
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
            mask-image:linear-gradient(to right,#000 88%,transparent)}
  .catstrip[data-sx="mid"],.filters[data-filters][data-sx="mid"]{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
            mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
  .catstrip[data-sx="end"],.filters[data-filters][data-sx="end"]{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%);
            mask-image:linear-gradient(to right,transparent,#000 12%)}
  .catstrip[data-sx="none"],.filters[data-filters][data-sx="none"]{
    -webkit-mask-image:none;mask-image:none}
}

/* ══════════════════════════════════════════════════════════════════
   Η ΕΤΑΙΡΕΙΑ — ΤΡΕΙΣ ΠΥΛΩΝΕΣ (v0.7.4)

   ΜΕΤΡΗΘΗΚΕ ΠΡΙΝ: κείμενο 707px σε στήλη 1.240px — 533px κενά δεξιά σε
   ΟΛΟ το ύψος του κεφαλιού (1.101px). Τρεις ενότητες η μία κάτω από την
   άλλη, 4 σύνδεσμοι σε όλο το main.

   ΚΑΜΙΑ ΝΕΑ ΛΕΞΗ: το ίδιο περιεχόμενο, χωρισμένο στα <h2> του.
   ══════════════════════════════════════════════════════════════════ */
.pagehead-about .prose > p:first-child{
  font-size:clamp(1.01rem,1.45vw,1.18rem);line-height:1.72;max-width:40.38em}
.pillars{margin-top:clamp(26px,3.4vw,46px)}
.pillar > h2:first-child{margin-top:0}

@media(min-width:701px){
  .pagehead-about .prose{max-width:none}
  .pillars{display:grid;gap:clamp(16px,2vw,26px);
    grid-template-columns:repeat(2,1fr)}
  .pillar{padding:clamp(18px,2vw,26px);
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    transition:border-color .18s ease,background-color .18s ease}
  .pillar:hover{border-color:var(--line-2);background:var(--panel-2)}
  /* Η επικεφαλίδα σε στήλη 380px δεν μπορεί να έχει το μέγεθος που είχε σε
     στήλη 707px: μετρήθηκαν πέντε σειρές για το «Πίσω από κάθε πώληση…». */
  .pillar h2{font-size:clamp(1.02rem,1.35vw,1.24rem);line-height:1.3;
    margin:0 0 .7rem;text-wrap:balance}
  .pillar p{font-size:.93rem;line-height:1.62;margin:0}
  .pillar p + p{margin-top:.7rem}
}
@media(min-width:1081px){.pillars{grid-template-columns:repeat(3,1fr)}}

/* Ο οίκος μέσα στο κείμενο διαβάζεται ως σύνδεσμος χωρίς να ουρλιάζει. */
.brandref{color:var(--ink);border-bottom:1px solid var(--line-3);
  transition:border-color .16s ease}
.brandref:hover{border-bottom-color:var(--red)}

/* Κάτω από 701px οι πυλώνες δεν είναι κάρτες — αλλά ούτε συνεχές κείμενο:
   τρεις ενότητες χωρίς όριο διαβάζονται ως μία μακριά παράγραφος. */
@media(max-width:700px){
  .pillar + .pillar{margin-top:1.7rem;padding-top:1.7rem;border-top:1px solid var(--line)}
  .pillar h2{font-size:clamp(1.08rem,4.6vw,1.3rem);line-height:1.28;margin:0 0 .6rem}
  .pillar p{margin:0}
}

/* ══════════════════════════════════════════════════════════════════
   ΣΤΑΘΕΡΟ ΣΥΝΟΛΟ ΕΞΟΔΩΝ — ΔΕΝ ΕΙΝΑΙ ΚΑΤΑΛΟΓΟΣ (v0.8.3)

   Τα «μισοάδεια πλέγματα» του αρχείου υποθέτουν κατάλογο: όσο μεγαλώνει
   η οθόνη, περισσότερες στήλες. Σωστό για 24 προϊόντα, λάθος για τρεις ή
   τέσσερις εξόδους που δεν γίνονται ποτέ πέντε. Μετρημένο και στις δύο
   επιφάνειες που έχουν τέτοιο μπλοκ:
     404 (4 έξοδοι):        1500 → 4/5 · 1920 → 4/6 · 2560 → 4/6
     αναζήτηση (3 έξοδοι):  1500 → 3/4 · 1920 → 3/4 · 2560 → 3/4
   δηλαδή μισοάδεια σειρά σε κάθε φαρδιά οθόνη, σε αμφότερες.

   Η κλάση δηλώνει τον ΛΟΓΟ («σταθερό πλήθος»), όχι τη σελίδα. Το πλήθος
   το ξέρει ήδη το g-3/g-4· εδώ απλώς σταματά η ανάπτυξη.

   ⚠⚠ ΓΙΑΤΙ ΕΙΝΑΙ ΣΤΟ ΤΕΛΟΣ ΚΑΙ ΟΧΙ ΔΙΠΛΑ ΣΤΟΥΣ ΚΑΝΟΝΕΣ ΠΟΥ ΑΚΥΡΩΝΕΙ.
   Γράφτηκε πρώτα εκεί (γραμμή ~1350) και ΔΕΝ δούλεψε στη σελίδα
   αναζήτησης: το «@media(min-width:1500px){.search .grid.g-3{repeat(4,1fr)}}»
   έχει ΙΔΙΑ ειδικότητα (0,3,0) και ζει ~180 γραμμές παρακάτω — σε ισοπαλία
   κερδίζει ο τελευταίος. Το 404 διορθώθηκε, η αναζήτηση όχι, και η μέτρηση
   το έδειξε. Η εναλλακτική ήταν να ανέβει η ειδικότητα με επιλογέα
   σελίδας, που θα ξανάφερνε ακριβώς το λάθος που κυνηγά όλο αυτό το
   αρχείο. ΑΝ ΠΡΟΣΤΕΘΕΙ ΝΕΟΣ ΚΑΝΟΝΑΣ ΣΤΗΛΩΝ, ΜΠΑΙΝΕΙ ΠΑΝΩ ΑΠΟ ΕΔΩ.
   ══════════════════════════════════════════════════════════════════ */
@media(min-width:1500px){
  .grid.exits.g-3{grid-template-columns:repeat(3,1fr)}
  .grid.exits.g-4{grid-template-columns:repeat(4,1fr)}
}
/* ΜΙΑ ΕΞΟΔΟΣ ΑΝΑ ΣΕΙΡΑ ΣΤΟ ΤΗΛΕΦΩΝΟ. Οι κάρτες εξόδου είναι ΚΕΙΜΕΝΟ χωρίς
   εικόνα (τίτλος + μία πρόταση): στα 390 δύο στήλες τις αφήνουν 169px, όπου
   το «Summe Cosmetics» σπάει σε δύο γραμμές και η περιγραφή σε τέσσερις.
   Ώς τώρα τη συμπεριφορά αυτή την έδινε ο κανόνας «.search .grid.g-3 >
   .card:not(.card-prod){grid-column:1/-1}» — δηλαδή ένας κανόνας για
   ΜΕΙΚΤΑ ΑΠΟΤΕΛΕΣΜΑΤΑ που τύχαινε να πιάνει και τις εξόδους. Με τη
   μετονομασία σε .results έπαψε, οπότε οι έξοδοι το δηλώνουν ρητά.
   ΜΕΤΡΗΜΕΝΟ ΠΡΙΝ: αναζήτηση 390-700 → 3/3 κάρτες σε όλο το πλάτος. */
@media(max-width:700px){
  .grid.exits{grid-template-columns:1fr}
  /* ΜΙΑ ΜΟΝΗ ΠΡΟΤΑΣΗ ΠΙΑΝΕΙ ΟΛΟ ΤΟ ΠΛΑΤΟΣ. Στο 404 η καλύτερη δυνατή
     έκβαση είναι ΑΚΡΙΒΩΣ ΜΙΑ κάρτα — το πράγμα που ζητούσε ο επισκέπτης.
     Στο πλέγμα δύο στηλών έβγαινε 169px στα 390 με κενό δίπλα της: το
     σωστό αποτέλεσμα ζωγραφισμένο σαν υποσημείωση.
     ⚠⚠ ΤΟ :has() ΕΙΝΑΙ ΜΕΣΑ ΣΕ @media ΕΠΙΤΗΔΕΣ. Το αρχείο προειδοποιεί ήδη
     («ΤΟ :has() ΕΙΝΑΙ ΚΛΕΙΔΩΜΕΝΟ ΣΕ ΥΠΟΛΟΓΙΣΤΗ ΕΠΙΤΗΔΕΣ») ότι η ειδικότητά
     του 0,4,0 νικά τα breakpoints του κινητού και είχε βγάλει scrollWidth
     553 σε οθόνη 390. Εδώ δεν μπορεί να διαρρεύσει πουθενά αλλού, και η
     υπερχείλιση μετριέται σε 14 πλάτη από την v-batch16. */
  /* ⚠ ΜΕ ΤΑΒΑΝΙ. Σκέτο 1fr έδινε 515px στα 560 και **644px στα 700** —
     ένα μπουκαλάκι σε μισή οθόνη tablet, ακριβώς το λάθος που διορθώθηκε
     στη ζώνη οίκου της αρχικής δύο εκδόσεις πριν. Το 390 δεν είναι
     αυθαίρετο: είναι η ΜΕΓΑΛΥΤΕΡΗ κάρτα προϊόντος που δείχνει ο κατάλογος
     οπουδήποτε (392px στα 1920). Κάτω από 390 διαθέσιμα δεν δένει, οπότε
     το τηλέφωνο παίρνει ολόκληρο το πλάτος όπως πρέπει. */
  .grid.results:has(> :last-child:nth-child(1)){grid-template-columns:minmax(0,390px)}
}
/* Η ΖΩΝΗ 701-1080: ΤΕΣΣΕΡΙΣ ΕΞΟΔΟΙ ΣΕ ΤΡΕΙΣ ΣΤΗΛΕΣ ΕΙΝΑΙ 3+1.
   Εκεί ο γενικός κανόνας «@media(max-width:1080px){.g-4{repeat(3,1fr)}}»
   είναι σωστός για κατάλογο και λάθος για σταθερό σύνολο τεσσάρων:
   μετρήθηκε τελευταία σειρά 1/3 στα 768 και στα 900. Δύο στήλες δίνουν
   2+2 και κάρτα ~354px στα 768 — άνετη για κάρτα ΚΕΙΜΕΝΟΥ.
   Το .exits.g-3 (τρεις έξοδοι, σελίδα αναζήτησης) δεν χρειάζεται τίποτα:
   τρεις κάρτες σε τρεις στήλες είναι ήδη γεμάτη σειρά. */
@media(min-width:701px) and (max-width:1080px){
  .grid.exits.g-4{grid-template-columns:repeat(2,1fr)}
}