/* Gastrogonia storefront — design system ported verbatim from 'claude design/index.html' (olive/terracotta/gold). Do not hand-edit the ported block; add overrides at the end. */
/* ============================================================
   ΓΑΣΤΡΟΓΩΝΙΑ — design system
   Warm artisanal: parchment / olive / terracotta / muted gold
   ============================================================ */
:root{
  --paper:#FBF7ED;
  --cream:#F5EEDE;
  --cream2:#EDE2CB;
  --sand:#E2D3B3;
  --ink:#282419;
  --ink2:#6B6350;
  --ink3:#948A72;
  --line:rgba(40,36,25,.16);
  --line2:rgba(40,36,25,.08);
  --olive:#4A5532;
  --olive-d:#39411F;
  --olive-l:#77814F;
  --olive-pale:#E7E6D2;
  --terra:#B65A34;
  --terra-d:#94431F;
  --terra-pale:#F2DECF;
  --gold:#A8842E;
  --gold-l:#D5B878;
  --gold-pale:#F0E4C4;
  --sea:#4F7B80;
  --sea-pale:#DEE7E0;
  --wine:#7C3B41;
  --ok:#4E7A3A;
  --err:#A63B26;
  --serif:"Noto Serif","Literata","Georgia",serif;
  /* One face for the whole shop — Stefanos, 2026-09-04: «θέλω να μπαίνω στο
     site και να βλέπω μόνο το noto serif». The two tokens are kept rather
     than merged: they still mark WHERE a second face would go, so bringing
     one back is this one line, not a hunt through 60 rules. Commissioner
     stays in fonts.css unreferenced and therefore never downloaded —
     @font-face is lazy — so that reverting costs nothing. */
  --sans:"Noto Serif","Literata","Georgia",serif;
  --sh-1:0 10px 30px -12px rgba(40,36,25,.22);
  --sh-2:0 30px 60px -24px rgba(40,36,25,.35);
  --sh-3:0 2px 10px -2px rgba(40,36,25,.14);
  --r:14px;
  --r-lg:22px;
  --hdr-h:130px;
  --meander:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 9.5 H4.5 V3.5 H13 V9.5 H24 M8.8 9.5 V7 H17.4 V3.5 H24' fill='none' stroke='%23A8842E' stroke-width='1.3' opacity='.55'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  /* ─────────────────────────────────────────────────────────────────
     ΚΑΝΑΛΙΑ, ΓΙΑ rgba(). Ένα `rgba(40,36,25,.16)` είναι το --ink
     ξαναγραμμένο με διαφάνεια — 94 τέτοια ήταν σκορπισμένα στο αρχείο και
     έμεναν ΚΑΡΦΩΤΑ όταν άλλαζε η παλέτα, δηλαδή η κεφαλίδα έμενε κρεμ και το
     υποσέλιδο λαδί ενώ όλα τα υπόλοιπα άλλαζαν. Τα κανάλια γράφονται με
     κόμματα και μπαίνουν ως `rgba(var(--ink-rgb), .16)`: το `var()`
     αντικαθίσταται ως ακολουθία tokens, οπότε η σύνταξη με κόμμα δουλεύει
     παντού — σε αντίθεση με τη νεότερη `rgb(… / α)`.
     ⚠️ ΚΑΘΕ ΠΑΛΕΤΑ ΠΟΥ ΑΛΛΑΖΕΙ ΕΝΑ ΧΡΩΜΑ ΠΡΕΠΕΙ ΝΑ ΑΛΛΑΞΕΙ ΚΑΙ ΤΟ ΚΑΝΑΛΙ
     ΤΟΥ. Το `storefront/test_palettes.py` το επιβάλλει — αλλιώς το μισό site
     παίρνει το νέο χρώμα και το άλλο μισό το παλιό, σιωπηλά.
     ───────────────────────────────────────────────────────────────── */
  --paper-rgb:251,247,237;
  --ink-rgb:40,36,25;
  --olive-rgb:74,85,50;
  --terra-rgb:182,90,52;
  --ok-rgb:78,122,58;
  --err-rgb:166,59,38;

  /* Σημασιολογικά — εκεί όπου μια παλέτα πρέπει να διαφέρει δομικά. */
  --on-accent:#fff;            /* κείμενο/εικονίδιο ΠΑΝΩ σε λαδί/κεραμιδί/χρυσό */
  --surface-hi:#fff;           /* καθαρό λευκό, για μικρά στρογγυλά πάνω σε έγχρωμο */
  --scrim:rgba(30,26,16,.45);  /* το σκοτείνιασμα πίσω από παράθυρα/συρτάρια */
  --hdr-bg:rgba(var(--paper-rgb),.92);
  /* Το ΜΠΡΟΣΤΙΝΟ της κεφαλίδας, χωριστά από το --ink του σώματος. Μια παλέτα
     με σκούρα κεφαλίδα (το «Βραδινό») χρειάζεται ανοιχτούς συνδέσμους εκεί και
     σκούρους παντού αλλού· χωρίς δικό του token, οι σύνδεσμοι θα έμεναν
     ανθρακί πάνω σε ανθρακί — δηλαδή αόρατοι. */
  --hdr-fg:var(--ink);
  --hdr-hover:var(--cream2);
  --hdr-bg-2:rgba(var(--paper-rgb),.96);
  --ftr-bg:var(--olive-d);
  --ftr-fg-rgb:245,238,222;    /* το κείμενο του υποσέλιδου, σε κανάλια */
  --gold-deep:#6B5518;         /* σκούρο κείμενο πάνω σε --gold-pale */
  --gold-mid:#7A611E;
  --gold-soft:#CBA268;         /* το σήμα «χειροποίητο» */
  --ok-l:#9FBF7E;              /* ανοιχτό πράσινο, για το σκούρο toast */
  --err-l:#E58A6B;

  /* Αποχρώσεις καρτών κατηγορίας. ⚠️ ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΕΣ: το
     `.pcard.is-oos` ρίχνει τη φωτογραφία στο 42 % και το 58 % αυτού που βλέπει
     ο πελάτης είναι ΑΥΤΟ το χρώμα — γι' αυτό «κοκκινίζει» το εξαντλημένο στα
     αλλαντικά. Μια παλέτα που τις αλλάζει, αλλάζει και εκείνο. */
  --tint-a:#E9E7D3; --tint-b:#F1DFC6; --tint-c:#EFE5C8; --tint-d:#EFD9C8;
  --tint-e:#F2E8CF; --tint-f:#DFE7E0; --tint-g:#F0E3BE; --tint-h:#E8E0D0;
  /* Ο δίσκος και το δαχτυλίδι πίσω από τα σκίτσα του hero (art.js). */
  --hero-disc-1:#EDE2C8; --hero-disc-2:#F1DFC6; --hero-disc-3:#DEE7E0;
  --hero-ring-1:#D9C9A4; --hero-ring-2:#E0C9A2; --hero-ring-3:#BFD2CC;
  /* Επιφάνειες που δεν είναι «επιλογή» (εξαντλημένα, κάρτες χωρίς εικόνα…)
     και ο χάρτης της Επικοινωνίας (art.js). Δες storefront/palettes.py. */
  --wash:var(--olive-pale);
  --map-ground:#EFE7D4; --map-road:#E2D5B6; --map-avenue:#DCCBA6; --map-block:#E6DABE;
  --map-label:#FBF7ED; --map-edge:#D9C9A4;

  /* ⚠️ ΟΙ ΚΑΤΑΣΤΑΣΕΙΣ ΠΑΡΑΓΓΕΛΙΑΣ ΔΕΝ ΑΚΟΛΟΥΘΟΥΝ ΤΗΝ ΠΑΛΕΤΑ, ΕΠΙΤΗΔΕΣ.
     «Απέτυχε» πρέπει να είναι κοκκινωπό και «Απεστάλη» γαλαζωπό σε κάθε
     παλέτα — είναι σήματα, όχι χρώματα μάρκας. Γίνονται tokens μόνο για να
     μην υπάρχει ωμό hex στο αρχείο· καμία παλέτα δεν τα ξαναγράφει, και ένα
     test το φυλάει. */
  --st-pending-bg:#fdf1dd; --st-pending-fg:#8a5a12;
  --st-hold-bg:#e7edf3;    --st-hold-fg:#385a78;
  --st-proc-bg:#f8ecd8;    --st-proc-fg:#7b5312;
  --st-packed-bg:#e5ecd6;  --st-packed-fg:#4d5b26;
  --st-ship-bg:#e0eef2;    --st-ship-fg:#2b6b7c;
  --st-refund-bg:#efeaf5;  --st-refund-fg:#5c4780;
  --st-fail-bg:#f7ddd6;    --st-fail-fg:#9c3218;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--sans);
  font-size:16px;line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  min-height:100vh;
  overflow-x:clip;
  max-width:100vw;
}
body::before{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.05;mix-blend-mode:multiply;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.005em}
::selection{background:var(--gold-pale);color:var(--ink)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;top:-60px;left:16px;z-index:4000;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:8px;transition:top .2s}
.skip-link:focus{top:12px}
.wrap{width:min(1250px,calc(100% - 48px));margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--s{width:17px;height:17px}
.ic--xs{width:14px;height:14px}
.ic--fill{fill:currentColor;stroke:none}
.hide{display:none!important}

/* ---------- typography helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--terra);
}
/* Κενό eyebrow = καθόλου eyebrow. Χωρίς αυτό, ένα page block που ο ιδιοκτήτης
   άδειασε αφήνει στη σελίδα τις δύο διακοσμητικές παύλες του ::before/::after
   και τίποτα ανάμεσά τους. Δες το σχόλιο στο home.html. */
.eyebrow:empty{display:none}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--terra);opacity:.6}
.eyebrow--center::after{content:"";width:26px;height:1px;background:var(--terra);opacity:.6}
.h-display{font-size:clamp(2.35rem,5.2vw,4.1rem);font-weight:500}
.h-1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:500}
.h-2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500}
.h-3{font-size:1.28rem;font-weight:600}
.lead{font-size:1.09rem;color:var(--ink2);line-height:1.75}
/* Rich-text content from the WYSIWYG editor (category/tag description in .lead,
   product description in .acc-body .inner). The global `ul,ol{list-style:none}`
   reset is re-enabled here so manager-entered lists render with markers. */
.lead ul,.acc-body .inner ul{list-style:disc;padding-left:1.4em;margin:0 0 12px}
.lead ol,.acc-body .inner ol{list-style:decimal;padding-left:1.5em;margin:0 0 12px}
.lead li,.acc-body .inner li{margin:4px 0}

/* ── Νομικές σελίδες (/terms/, /privacy/, /returns/) ──────────────────────
   Πυκνό κείμενο που το διαβάζει κανείς μόνο όταν ψάχνει κάτι συγκεκριμένο:
   στενή στήλη για να μη χάνεται το μάτι, καθαρή ιεραρχία επικεφαλίδων, και
   ΡΗΤΗ επαναφορά των markers των λιστών — ο καθολικός `ul,ol{list-style:none}`
   της γραμμής 68 θα έσβηνε την αρίθμηση μιας νομικής παραγράφου, που είναι
   ακριβώς το είδος σιωπηλής απώλειας που δεν φαίνεται μέχρι να τη ζητήσει
   δικηγόρος. */
/* 🔴 ΧΩΡΙΣ ΟΜΑΛΗ ΚΥΛΙΣΗ ΣΕ ΑΥΤΗ ΤΗ ΣΕΛΙΔΑ, ΚΑΙ ΜΟΝΟ ΣΕ ΑΥΤΗ. Το `html` έχει
   `scroll-behavior:smooth` καθολικά (γραμμή 108), που είναι σωστό για ένα
   «πάνω-πάνω». Εδώ όμως η σελίδα είναι **18.500px στο κινητό**: πατώντας
   «Πολιτική παράδοσης» στα περιεχόμενα — ή φτάνοντας από την ανακατεύθυνση
   του /delivery/ — ο πελάτης βλέπει ολόκληρη την πολιτική απορρήτου να
   περνάει μπροστά του για δευτερόλεπτα. Μετρήθηκε: 700ms μετά το άλμα ο
   στόχος ήταν ακόμη 900–3.400px μακριά.
   Το `:has()` το υποστηρίζουν όλοι οι τρέχοντες browsers· όπου δεν
   υποστηρίζεται, μένει η σημερινή συμπεριφορά. */
html:has(.legal-wrap){scroll-behavior:auto}
.legal-wrap{padding:clamp(26px,4vw,48px) 0 80px}
.legal-body{max-width:74ch;margin-inline:auto;color:var(--ink2);line-height:1.85}
.legal-body h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;
  line-height:1.3;color:var(--ink);margin:30px 0 10px}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin:0 0 12px}
.legal-body ul{list-style:disc;padding-left:1.4em;margin:0 0 12px}
.legal-body ol{list-style:decimal;padding-left:1.5em;margin:0 0 12px}
.legal-body li{margin:4px 0}
.legal-body a{color:var(--terra);text-decoration:underline}
.legal-body strong,.legal-body b{color:var(--ink)}
/* Τα περιεχόμενα και οι πέντε ενότητες των «Όρων χρήσης» (2026-09-20).
   Η σελίδα ενοποίησε πέντε κείμενα που ήταν πέντε σύνδεσμοι στο υποσέλιδο,
   οπότε είναι μακριά: χωρίς ευρετήριο ο πελάτης που ψάχνει τις επιστροφές
   κάνει scroll μέσα από όλους τους όρους. */
.legal-toc{max-width:74ch;margin:0 auto clamp(24px,3.2vw,38px);
  padding:18px 22px;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r)}
/* ⚠️ ΟΛΑ ΤΑ ΧΡΩΜΑΤΑ ΕΔΩ ΜΕΤΡΗΘΗΚΑΝ ΚΑΙ ΣΤΙΣ ΤΕΣΣΕΡΙΣ ΠΑΛΕΤΕΣ. Η πρώτη γραφή
   είχε τον τίτλο σε `--ink3` (2,81–2,96 πάνω στο `--cream` — κάτω ακόμη και
   από το κατώφλι 3,0 που βάζει το ίδιο το repo γι' αυτό το token) και τους
   πέντε συνδέσμους σε `--terra` (3,25–4,04). Είναι η καταγεγραμμένη παγίδα
   «ένα token διαλεγμένο για τρίχες γραμμής είναι αόρατο ως κείμενο», μία
   σειρά πιο κάτω — και το τεστ αντίθεσης δεν την έβλεπε, γιατί το
   `PAIRS` του `test_palettes` δεν έχει ζεύγος για το `--cream`. */
.legal-toc h2{font-family:var(--serif);font-weight:600;font-size:1.02rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:0 0 10px}
.legal-toc ol{list-style:decimal;padding-left:1.4em;margin:0;color:var(--ink2)}
.legal-toc li{margin:5px 0}
.legal-toc a{color:var(--terra-d);text-decoration:underline}
/* ⚠️ Η κεφαλίδα είναι sticky — χωρίς αυτό το άγκιστρο προσγειώνει τον τίτλο
   της ενότητας ΑΠΟ ΚΑΤΩ της και ο πελάτης βλέπει τη μέση του κειμένου. */
/* ⚠️ ΤΟ `padding-top` ΕΙΝΑΙ ΣΕ ΟΛΕΣ, ΟΧΙ ΜΟΝΟ ΣΤΙΣ ΤΕΣΣΕΡΙΣ ΤΕΛΕΥΤΑΙΕΣ.
   Το `scroll-margin-top` στοιχίζει το ΚΟΥΤΙ της ενότητας· ό,τι υπάρχει μέσα
   του πριν τον τίτλο προστίθεται. Όσο το padding ζούσε μόνο στο
   `.legal-sec + .legal-sec`, η ΠΡΩΤΗ ενότητα προσγειωνόταν 34px ψηλότερα από
   τις άλλες — και στο κινητό ο τίτλος της κατέληγε **πίσω από την κολλημένη
   κεφαλίδα** (μετρήθηκε: τίτλος στα 55px, κεφαλίδα μέχρι τα 67px), επειδή η
   κεφαλίδα ΜΙΚΡΑΙΝΕΙ μετά το άλμα. Ένα άγκιστρο που δουλεύει για τη μία
   ενότητα και κόβει την άλλη είναι χειρότερο από κανένα. */
.legal-sec{scroll-margin-top:calc(var(--hdr-h) + 24px);padding-top:34px}
.legal-sec + .legal-sec{margin-top:46px;border-top:1px solid var(--line)}
.legal-sec-h{font-family:var(--serif);font-weight:600;font-size:1.9rem;
  line-height:1.15;color:var(--ink);margin:0 0 20px}
/* Το `.legal-body h3:first-child{margin-top:0}` δεν πιάνει πια: πρώτο παιδί
   της ενότητας είναι ο τίτλος της, όχι το πρώτο `h3` του κειμένου. */
.legal-sec-h + h3{margin-top:0}
.lead h2,.acc-body .inner h2{font-family:var(--serif);font-weight:600;font-size:1.32rem;line-height:1.25;margin:16px 0 8px}
.lead h3,.acc-body .inner h3{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.3;margin:14px 0 6px}
.lead a,.acc-body .inner a{color:var(--terra);text-decoration:underline}
.small{font-size:13.5px;color:var(--ink2)}
em.fancy{font-style:italic;color:var(--terra)}
.ornament{display:flex;align-items:center;gap:14px;justify-content:center;margin:10px 0}
.ornament::before,.ornament::after{content:"";height:1px;width:54px;background:var(--line)}
.ornament span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);opacity:.7}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 30px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  background:var(--olive);color:var(--paper);
  border:1px solid var(--olive);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s, color .25s;
  white-space:nowrap;
}
.btn:hover{background:var(--olive-d);border-color:var(--olive-d);transform:translateY(-2px);box-shadow:var(--sh-1)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(var(--ink-rgb),.35)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--cream{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--cream:hover{background:var(--cream2);border-color:var(--cream2)}
.btn--terra{background:var(--terra);border-color:var(--terra)}
.btn--terra:hover{background:var(--terra-d);border-color:var(--terra-d)}
.btn--sm{min-height:42px;padding:9px 22px;font-size:11.5px}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-line{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--gold);
  transition:color .2s,gap .25s;
}
.btn-line:hover{color:var(--terra);gap:14px}
.iconbtn{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);position:relative;transition:background .2s,color .2s,transform .2s;
}
.iconbtn:hover{background:var(--cream2);transform:translateY(-1px)}
.iconbtn .bub{
  position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;
  background:var(--terra);color:var(--on-accent);border-radius:999px;
  font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.iconbtn .bub.pop{animation:bubPop .5s cubic-bezier(.2,2,.4,1)}
@keyframes bubPop{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- header ---------- */
/* transform: promote to own GPU layer so scrolling under the blurred header
   does not repaint the whole page (fixes topbar-collapse flicker).
   contain: layout style — NOT `paint`, because paint clips absolute-positioned
   descendants (mega menu) to the header's box and hides them. */
.hdr{
  position:sticky;top:0;z-index:900;
  background:var(--hdr-bg);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border-bottom:1px solid var(--line2);
  transition:box-shadow .3s;
  transform:translateZ(0);
  will-change:transform;
  contain:layout style;
}
.hdr.scrolled{box-shadow:var(--sh-3)}
/* Μέσα στην κεφαλίδα και μόνο — το .iconbtn ζει και σε συρτάρια και
   παράθυρα, που έχουν πάντα ανοιχτό φόντο σε κάθε παλέτα. */
.hdr .iconbtn{color:var(--hdr-fg)}
.hdr .iconbtn:hover{background:var(--hdr-hover)}
/* 🔴 ΕΞΑΙΡΕΣΗ, ΚΑΙ ΔΕΝ ΕΙΝΑΙ ΘΕΩΡΗΤΙΚΗ. Το πάνελ αναζήτησης ΕΙΝΑΙ
   παιδί της κεφαλίδας (`position:absolute; top:100%`) αλλά έχει δικό του
   ΑΝΟΙΧΤΟ φόντο (`--paper`). Χωρίς αυτή τη γραμμή, το κουμπί κλεισίματος
   έπαιρνε το `--hdr-fg` της σκούρας κεφαλίδας: στο «Βραδινό» σχεδόν λευκό
   πάνω σε σχεδόν λευκό, **αντίθεση 1,09** — ο πελάτης ανοίγει την
   αναζήτηση και δεν βλέπει πώς να την κλείσει. Και το hover δεν το σώζει:
   το `--hdr-hover` είναι κι αυτό φτιαγμένο για σκούρο φόντο. */
.hdr .search-panel .iconbtn{color:var(--ink)}
.hdr .search-panel .iconbtn:hover{background:var(--cream2)}
/* Use height (not max-height) so the transition is a single well-defined
   animation. GPU-accelerated opacity fade covers the tail so the shrink
   is not visually harsh. */
.topbar{
  background:var(--olive-d);color:rgba(var(--ftr-fg-rgb),.92);
  overflow:hidden;
  height:32px;opacity:1;
  transition:height .3s ease, opacity .2s ease;
  will-change:height;
}
.hdr.scrolled .topbar{height:0;opacity:0}
/* Promo messages stay dead-centre; the phone is pinned to the right (absolute,
   out of flow) so it never nudges the centred group. */
.topbar-in{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;height:32px;font-size:11.5px;letter-spacing:.05em}
.topbar-in .sep{opacity:.4}
.topbar-in a{display:inline-flex;gap:6px;align-items:center;opacity:.85}
.topbar-in a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.topbar-phone{position:absolute;right:0;top:0;height:100%;display:inline-flex;align-items:center;gap:6px}
.hdr-main{padding:18px 0;transition:padding .3s ease}
.hdr.scrolled .hdr-main{padding:10px 0}
.hdr-grid{display:flex;align-items:center;gap:14px}
/* logo + actions are equal flex spacers so the nav sits perfectly centred */
/* ⚠️ ΤΟ `flex-shrink` ΣΤΟ ΜΗΔΕΝ. Η πλοήγηση πήγε από 3 σε 5 συνδέσμους
   (2026-09-18) και έπιασε 723px· με `flex:1 1 0` το λογότυπο συρρικνωνόταν,
   και επειδή το καθολικό `img{max-width:100%}` νικάει την αναλογία ενώ το
   `height:60px` μένει, η εικόνα ΠΑΡΑΜΟΡΦΩΝΟΤΑΝ — μετρημένο 43,8×60 αντί για
   108,6×60 στα 1025px, δηλαδή σε κάθε μισο-κολλημένο παράθυρο. */
.logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo img{height:60px;width:auto;max-width:none;display:block;transition:transform .3s}
.hdr.scrolled .logo img{transform:scale(.92)}
.nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;margin:0}
.nav-link{
  position:relative;padding:12px 15px;font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--hdr-fg);
  display:inline-flex;align-items:center;gap:7px;border-radius:8px;
}
.nav-link::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1.5px;background:var(--terra);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-link:hover::after,.nav-link.active::after,.nav-link[aria-expanded="true"]::after{transform:scaleX(1)}
.nav-link .ic{width:13px;height:13px;transition:transform .25s}
.nav-link[aria-expanded="true"] .ic{transform:rotate(180deg)}
.hdr-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex:1 1 0}
.burger{display:none}

/* mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-top:1px solid var(--line2);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  max-height:calc(100vh - 140px);overflow:auto;
}
.mega.open{opacity:1;visibility:visible;transform:translateY(0)}
/* ⚠️ ΔΥΟ στήλες, όχι τρεις. Ήταν `1fr 1.4fr 1.15fr` όταν το πάνελ είχε
   κατηγορίες + υποκατηγορίες + προβολή· από τις 2026-09-18 οι υποκατηγορίες
   φωλιάζουν μέσα στην πρώτη στήλη, οπότε τα παιδιά είναι δύο και η τρίτη
   λωρίδα έμενε ΑΔΕΙΑ — 515px κενού στο δεξί τρίτο, ορατό μόνο σε screenshot. */
.mega-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:34px 0 40px}
.mega h4{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.mega-col li{margin-bottom:2px}
.mega-col a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;font-size:14.5px;color:var(--ink2);transition:background .18s,color .18s,padding-left .2s}
.mega-col a:hover{background:var(--cream);color:var(--ink);padding-left:12px}
.mega-col a .ic{width:17px;height:17px;color:var(--olive-l)}
/* top-category links (col 1) stand out — bigger + ink black */
.mega-col a b{font-size:15.5px;color:var(--ink)}
.mega-feat{background:var(--cream);border:1px solid var(--line2);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mega-feat .art{width:100%;max-width:190px;margin-inline:auto}
.mega-feat strong{font-family:var(--serif);font-size:1.15rem;font-weight:600;line-height:1.25}
.mega-feat .small{margin-top:-4px}
/* Το όριο της σύντομης περιγραφής ανέβηκε 280 → 600 (2026-09-18). Τρεις
   επιφάνειες τη ζωγραφίζουν σε μικρό κουτί και θα έσπαγαν τη διάταξή τους με
   μακρύ κείμενο: το πλακίδιο του mega-menu, η κάρτα προϊόντος σε προβολή
   λίστας και η γρήγορη ματιά. Κόβονται με «…». Η σελίδα του προϊόντος ΔΕΝ
   κόβεται — εκεί ο πελάτης θέλει να διαβάσει. */
.mega-feat .small,.qv-info .pdp-short{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.mega-feat .small{-webkit-line-clamp:2}
.qv-info .pdp-short{-webkit-line-clamp:4}

/* search panel */
.search-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.search-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.search-in{padding:26px 0}
.search-box{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.search-box .ic{width:24px;height:24px;color:var(--ink3)}
.search-box input{flex:1;min-width:0;border:0;background:none;font-family:var(--serif);font-size:clamp(1.25rem,3vw,1.7rem);color:var(--ink)}
.search-box input::placeholder{color:var(--ink3)}
.sugg{padding:18px 0 6px}
/* .sugg-cats/.sugg-cat αφαιρέθηκαν 2026-09-18: ο τελευταίος καταναλωτής τους
   ήταν τα chips κατηγοριών της αναζήτησης, που έφυγαν με εντολή του ιδιοκτήτη
   («να ψάχνει ΜΟΝΟ λέξεις»). Το test_search_feedback φυλάει ότι δεν γυρνάνε. */
.sugg-item{display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:12px;transition:background .18s}
.sugg-item:hover{background:var(--cream)}
.sugg-item .thumb{width:52px;height:52px;border-radius:12px;background:var(--cream2);padding:5px;flex:none}
.sugg-item b{font-family:var(--serif);font-weight:600;font-size:1.02rem;display:block;line-height:1.2}
.sugg-item .small{display:block}
.sugg-item .pr{margin-left:auto;font-family:var(--serif);font-weight:600}
.sugg-more{display:block;text-align:center;padding:13px;margin-top:8px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--terra)}
.sugg-more:hover{background:var(--cream)}

/* ---------- scrim / drawers / modal ---------- */
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;bottom:0;right:0;width:min(440px,100%);z-index:1010;
  background:var(--paper);box-shadow:var(--sh-2);
  transform:translateX(105%);transition:transform .38s cubic-bezier(.3,1,.35,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer--left{right:auto;left:0;transform:translateX(-105%);width:min(400px,100%)}
.drawer--left.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line2);flex:none}
.drawer-head h3{font-size:1.3rem;font-weight:600;display:flex;align-items:center;gap:10px}
.drawer-head .count{font-family:var(--sans);font-size:12px;font-weight:700;background:var(--cream2);border-radius:999px;padding:3px 10px;color:var(--ink2)}
.drawer-body{flex:1;overflow-y:auto;padding:14px 22px;overscroll-behavior:contain}
.drawer-foot{flex:none;border-top:1px solid var(--line2);padding:16px 22px 20px;background:var(--cream);box-shadow:0 -8px 24px -18px rgba(var(--ink-rgb),.3)}

/* cart lines */
.cline{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.cline:last-child{border-bottom:0}
.cline .thumb{width:74px;height:74px;flex:none;border-radius:14px;padding:7px;display:flex;align-items:center;justify-content:center}
.cline-main{flex:1;min-width:0}
.cline-main b{font-family:var(--serif);font-weight:600;font-size:1.03rem;line-height:1.25;display:block}
.cline-main b a:hover{color:var(--terra)}
.cline-meta{font-size:12.5px;color:var(--ink2);margin-top:1px}
.cline-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
.cline .pr{font-family:var(--serif);font-weight:600;font-size:1.05rem;white-space:nowrap}
.cline .rm{color:var(--ink3);width:34px;height:34px}
.cline .rm:hover{color:var(--err);background:var(--terra-pale)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.qty button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink2);border-radius:50%}
.qty button:hover{color:var(--terra)}
.qty span{min-width:26px;text-align:center;font-weight:600;font-size:14px}
.qty--lg button{width:46px;height:46px}
.qty--lg span{min-width:34px;font-size:16px}

/* free shipping progress */
.shipbar{margin-bottom:14px}
.shipbar p{font-size:12.8px;color:var(--ink2);margin-bottom:7px}
.shipbar p b{color:var(--olive-d)}
.shipbar .track{height:7px;background:var(--cream2);border-radius:999px;overflow:hidden;position:relative}
.shipbar .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-l),var(--olive-l));transition:width .6s cubic-bezier(.3,1,.4,1)}
.shipbar.done .fill{background:linear-gradient(90deg,var(--olive-l),var(--olive))}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:14.5px;color:var(--ink2)}
.sum-row b{color:var(--ink)}
.sum-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:15px}
.sum-row.total b{font-family:var(--serif);font-size:1.5rem;font-weight:600}
.sum-row .free{color:var(--ok);font-weight:600}
.sum-row .disc{color:var(--terra);font-weight:600}
/* «Υπολογίζονται στο ταμείο» — ΟΧΙ πράσινο σαν το «Δωρεάν» και όχι μαύρο σαν
   ένα ποσό: είναι η απουσία ποσού. Μικρότερο και σβηστό, ώστε να μη διαβαστεί
   ως υπόσχεση. Το `.sum-row b` το κάνει `--ink` (σκούρο), οπότε χρειάζεται
   ρητή ανατροπή — η κλάση μπαίνει στο ίδιο <b>. */
.sum-row .ship-tbd{color:var(--ink3);font-weight:500;font-size:13px;text-align:right}
/* Η υπόθεση κάτω από το ποσό των μεταφορικών. Δεν είναι προειδοποίηση (δεν
   πήγε κάτι στραβά) — είναι η παραδοχή του νούμερου από πάνω, οπότε σβηστή
   και μικρή. ΕΞΩ από το .sum-row: μέσα του θα γινόταν flex στοιχείο και θα
   καθόταν δίπλα στο ποσό αντί από κάτω. */
.ship-assumes{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink3)}

/* ---------- mobile nav drawer ---------- */
.mnav-search{display:flex;gap:10px;align-items:center;background:var(--cream);border:1px solid var(--line2);border-radius:999px;padding:11px 18px;margin-bottom:18px}
.mnav-search input{flex:1;border:0;background:none;font-size:15px}
.macc>li{border-bottom:1px solid var(--line2)}
.macc-top{display:flex;align-items:center;gap:12px;width:100%;padding:15px 4px;font-size:15.5px;font-weight:600;text-align:left}
.macc-top .ic:first-child{color:var(--olive-l)}
.macc-top .chev{margin-left:auto;transition:transform .25s;color:var(--ink3)}
.macc>li.open .chev{transform:rotate(180deg)}
.macc-sub{max-height:0;overflow:hidden;transition:max-height .35s ease}
.macc>li.open .macc-sub{max-height:640px}
.macc-sub a{display:block;padding:10px 14px 10px 44px;font-size:14.5px;color:var(--ink2);border-radius:9px}
.macc-sub a:hover{color:var(--terra)}
.mnav-links{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.mnav-links a{padding:11px 4px;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:12px;align-items:center;color:var(--ink2)}
.mnav-links a .ic{width:18px;height:18px}
.mnav-contact{margin-top:22px;padding-top:18px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink2);line-height:2}
.mnav-social{display:flex;gap:10px;margin-top:14px}
.mnav-social a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.mnav-social a:hover{background:var(--olive);color:var(--on-accent);border-color:var(--olive)}
/* Το `.mnav-feat` («Το είδες από τα reels μας» μέσα στο συρτάρι) αφαιρέθηκε
   2026-09-24 μαζί με το markup του — ιδιοκτήτης: «φεύγει η φωτό». */

/* ---------- bottom tab bar (mobile) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:950;display:none;
  /* 🔴 ΟΧΙ `--hdr-bg-2`. Αυτή είναι η ΚΑΤΩ μπάρα του κινητού, όχι η
     κεφαλίδα — ζει έξω από το `<header>`. Με το token της κεφαλίδας, μια
     παλέτα με σκούρα κεφαλίδα («Βραδινό») έκανε ανθρακί και την κάτω
     μπάρα ενώ η σελίδα από πάνω της έμενε κρεμ — και η ΕΝΕΡΓΗ καρτέλα,
     που γράφει `color:var(--olive-d)`, γινόταν ακριβώς το ίδιο ανθρακί:
     **αντίθεση 1,00**, δηλαδή εξαφανιζόταν η καρτέλα στην οποία βρίσκεται
     ο πελάτης. Ζητήθηκε σκούρα ΚΕΦΑΛΙΔΑ· ένα `hdr-*` token σε στοιχείο
     που δεν είναι κεφαλίδα είναι ο τρόπος να ταξιδέψει η απόφαση κάπου
     που κανείς δεν κοίταξε. */
  background:rgba(var(--paper-rgb),.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar-in{display:flex}
/* Γράμματα ΚΑΙ εικονίδια πράσινα (ιδιοκτήτης, 2026-09-24: «τα γράμματα της
   μπάρας όλα πράσινο. Και τα εικονίδια») — ήταν `--ink3`, ένα αχνό γκριζομπέζ.
   Το `--olive` πάνω στο `--paper` περνάει το 4,5 σε κάθε παλέτα (ζεύγος
   «olive/paper» του `test_palettes`). Το εικονίδιο παίρνει το ίδιο χρώμα μέσω
   `stroke:currentColor` του `.ic`. */
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;min-height:52px;color:var(--olive);font-size:10px;font-weight:600;letter-spacing:.06em;position:relative;border-radius:12px}
.tab .ic{width:21px;height:21px}
.tab.active{color:var(--olive-d)}
.tab.active::before{content:"";position:absolute;top:-7px;width:26px;height:3px;border-radius:999px;background:var(--terra)}
.tab .bub{position:absolute;top:2px;right:calc(50% - 22px);min-width:17px;height:17px;padding:0 4px;background:var(--terra);color:var(--on-accent);border-radius:999px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--cream);overflow:hidden;border-bottom:1px solid var(--line2)}
.hero-track{display:flex;transition:transform .7s cubic-bezier(.55,.06,.25,1)}
.hero-slide{flex:0 0 100%;min-width:100%}
.hero-in{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;
  min-height:min(74vh,680px);padding:46px 0 74px;
}
.hero-copy{max-width:560px}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy h2{margin-bottom:22px}
.hero-copy .lead{margin-bottom:34px;max-width:470px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art svg{width:min(100%,560px);height:auto;filter:drop-shadow(0 30px 34px rgba(var(--ink-rgb),.16))}
.hero-nav{position:absolute;bottom:26px;left:0;right:0;pointer-events:none}
.hero-nav .wrap{display:flex;align-items:center;gap:18px}
.hero-dots{display:flex;gap:9px;pointer-events:auto}
.hero-dots button{width:30px;height:26px;position:relative}
.hero-dots button::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--line);transition:background .25s}
.hero-dots button.on::before{background:var(--terra)}
.hero-arrows{margin-left:auto;display:flex;gap:8px;pointer-events:auto}
.hero-arrows button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);transition:all .2s}
.hero-arrows button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero-count{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink3)}

/* ---------- sections ---------- */
.sect{padding:clamp(58px,8.5vw,104px) 0}
.sect--tight{padding:clamp(40px,6vw,70px) 0}
.sect--cream{background:var(--cream)}
.sect--olive{background:var(--olive-d);color:var(--cream)}
.sect-head{max-width:660px;margin-bottom:clamp(30px,5vw,52px)}
.sect-head .eyebrow{margin-bottom:16px}
.sect-head p{margin-top:14px}
.sect-head--center{margin-inline:auto;text-align:center}
.sect-head--center .eyebrow{justify-content:center}
.sect-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.sect-head--row>div{max-width:620px}
.meander{height:12px;background-image:var(--meander);background-repeat:repeat-x;background-position:center;opacity:.8;margin:0 auto}

/* USP strip */
.usp{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--paper)}
.usp-in{display:grid;grid-template-columns:repeat(4,1fr)}
.usp-item{display:flex;gap:15px;align-items:center;padding:26px 26px;border-left:1px solid var(--line2)}
.usp-item:first-child{border-left:0}
.usp-item .ic{width:34px;height:34px;stroke-width:1.25;color:var(--terra);flex:none}
.usp-item b{display:block;font-size:14px;font-weight:600;letter-spacing:.02em}
.usp-item span{font-size:12.5px;color:var(--ink2)}

/* category tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tile{
  position:relative;background:var(--paper);border:1.5px solid var(--olive);border-radius:150px 150px var(--r) var(--r);
  padding:30px 18px 24px;text-align:center;overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .3s;
}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh-1);border-color:var(--olive-d)}
.tile .art{width:64%;max-width:150px;margin:0 auto 6px;transition:transform .45s ease}
.tile:hover .art{transform:scale(1.07) rotate(-2deg)}
.tile b{display:block;font-family:var(--serif);font-size:1.16rem;font-weight:600;line-height:1.25}
.tile span{font-size:12px;color:var(--ink3);letter-spacing:.09em;text-transform:uppercase}
.tile--all{background:var(--olive);border-color:var(--olive);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.tile--all b{color:var(--paper);font-size:1.3rem}
.tile--all .ic{width:30px;height:30px}
.tile--all:hover{background:var(--olive-d)}

/* ---------- product card ---------- */
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
/* Πράσινο περίγραμμα σε ΟΛΗ την κάρτα (ιδιοκτήτης, 2026-09-24: «το περίγραμμα και
   της φωτογραφίας αλλά και του προϊόντος ολόκληρου να γίνει πράσινο»)· το της
   φωτογραφίας είναι το box-shadow του .pcard-media στο μπλοκ «2026-09-24 CATALOG». */
.pcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--olive);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-1)}
.pcard-media{position:relative;display:block;padding:26px 26px 14px;border-radius:var(--r-lg) var(--r-lg) 60% 60%/var(--r-lg) var(--r-lg) 18% 18%}
.pcard-media .art{width:76%;margin:0 auto;transition:transform .5s ease}
.pcard:hover .pcard-media .art{transform:scale(1.07) rotate(-1.5deg)}
.tint-a{background:var(--tint-a)}.tint-b{background:var(--tint-b)}.tint-c{background:var(--tint-c)}
.tint-d{background:var(--tint-d)}.tint-e{background:var(--tint-e)}.tint-f{background:var(--tint-f)}
.tint-g{background:var(--tint-g)}.tint-h{background:var(--tint-h)}
.pbadges{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:3}
.badge{font-size:9.8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--paper)}
.badge--pop{background:var(--gold);color:var(--on-accent)}
.badge--bio{background:transparent;border:1px solid var(--olive);color:var(--olive-d)}
.badge--new{background:var(--terra);color:var(--on-accent)}
.badge--award{background:var(--ink);color:var(--gold-l)}
/* ⚠️ ΣΚΟΥΡΟ ΚΕΙΜΕΝΟ, ΟΧΙ ΛΕΥΚΟ. Λευκό πάνω στο ανοιχτό χρυσό του σήματος
   δίνει αντίθεση **2,36** — κάτω ακόμη και από το όριο μεγάλου κειμένου
   (3,0). Ήταν έτσι από την αρχή· το βρήκε το τεστ αντίθεσης των παλετών,
   που τρέχει πάνω σε κάθε ζεύγος προσκηνίου/φόντου. Με --ink γίνεται 6,57. */
.badge--hand{background:var(--gold-soft);color:var(--ink)}
.badge--gf{background:var(--sea);color:var(--on-accent)}
.pcard-fav{position:absolute;top:10px;right:10px;z-index:3;width:40px;height:40px;border-radius:50%;background:rgba(var(--paper-rgb),.85);display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all .2s;box-shadow:var(--sh-3)}
@media (hover:hover){.pcard-fav:hover{color:var(--olive);transform:scale(1.08)}}
.pcard-fav.on{color:var(--olive)}
.pcard-fav.on .ic{fill:var(--olive)}
.pcard-quick{
  position:absolute;left:50%;bottom:12px;transform:translate(-50%,10px);z-index:3;
  padding:9px 18px;border-radius:999px;background:var(--paper);box-shadow:var(--sh-1);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  opacity:0;transition:opacity .25s,transform .25s;display:inline-flex;gap:7px;align-items:center;
}
.pcard:hover .pcard-quick,.pcard-quick:focus-visible{opacity:1;transform:translate(-50%,0)}
.pcard-quick:hover{background:var(--ink);color:var(--paper)}
.pcard-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-cat{font-size:10.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.pcard-name{font-size:1.18rem;font-weight:600;line-height:1.28}
.pcard-name a:hover{color:var(--terra)}
.pcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
.price{font-family:var(--serif);font-weight:600;font-size:1.3rem;display:flex;align-items:baseline;gap:9px}
.price .was{font-size:.95rem;color:var(--ink3);text-decoration:line-through;font-weight:400}
.price .unit{font-family:var(--sans);font-size:11px;color:var(--ink3);font-weight:400}
.addbtn{
  width:46px;height:46px;border-radius:50%;background:var(--olive);color:var(--paper);
  display:flex;align-items:center;justify-content:center;transition:all .25s;flex:none;
}
/* ΜΟΝΟ σε συσκευή με ποντίκι. Στην οθόνη αφής το :hover «κολλάει» μετά το
   πάτημα, και το καλάθι/φάκελος έμενε τερακότα σαν να άλλαξε κατάσταση
   (εικόνα 18 του ιδιοκτήτη, 2026-09-24). */
@media (hover:hover){.addbtn:hover{background:var(--terra);transform:translateY(-2px) scale(1.05);box-shadow:var(--sh-1)}}
.addbtn[disabled]{background:var(--cream2);color:var(--ink3);pointer-events:none}
.oos-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
/* Renamed from the ported `.oos`: that bare class also matched the `.vbtn.oos`
   size-button modifier, so a sold-out weight inherited this pill's dark fill,
   uppercase and rotate(-6deg) — the «πλάγιο» the client reported. */
.oos-pill{background:rgba(var(--ink-rgb),.82);color:var(--paper);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:8px 18px;border-radius:999px;transform:rotate(-6deg)}
.pcard.is-oos .art{opacity:.45;filter:saturate(.55)}
.stock-dot{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600}
.stock-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(var(--ok-rgb),.18)}
.stock-dot.low{color:var(--terra-d)}.stock-dot.low::before{background:var(--terra);box-shadow:0 0 0 3px rgba(var(--terra-rgb),.18)}
.stock-dot.out{color:var(--ink3)}.stock-dot.out::before{background:var(--ink3);box-shadow:none}

/* list view */
.grid-p.as-list{grid-template-columns:1fr}
.grid-p.as-list .pcard{flex-direction:row;align-items:stretch}
.grid-p.as-list .pcard-media{width:230px;flex:none;border-radius:var(--r-lg) 0 0 var(--r-lg);display:flex;align-items:center;padding:20px}
.grid-p.as-list .pcard-media .art{width:82%}
.grid-p.as-list .pcard-body{padding:22px 26px}
.grid-p.as-list .pcard-desc{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.pcard-desc{display:none;font-size:14px;color:var(--ink2);line-height:1.6;margin:4px 0 6px;-webkit-line-clamp:2}
/* ---------- horizontal carousels ---------- */
.carousel{position:relative}
.car-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 26px;margin:-6px -4px 0}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{flex:0 0 268px;scroll-snap-align:start}
.car-btn{position:absolute;top:38%;z-index:5;width:50px;height:50px;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;transition:all .2s}
.car-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.car-btn--prev{left:-14px}.car-btn--next{right:-14px}
.car-btn[disabled]{opacity:0;pointer-events:none}

/* ---------- story / brand ---------- */
/* align-items:start + sticky: το κείμενο της ιστορίας είναι επτά παράγραφοι,
   δηλαδή στήλη τριπλάσια από το σκίτσο. Με «center» το σκίτσο κρεμόταν στη
   μέση του τίποτα· έτσι συνοδεύει την ανάγνωση. */
.story-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,6vw,84px);align-items:start}
.story-art{position:sticky;top:96px}
.story-art svg{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(var(--ink-rgb),.14))}
.story-stamp{position:absolute;right:-8px;top:-22px;width:110px;height:110px;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.story-copy .eyebrow{margin-bottom:18px}
.story-copy h2{margin-bottom:20px}
.story-copy p{color:var(--ink2);margin-bottom:16px}
/* Το «.signature» έφυγε μαζί με την υπογραφή «— Μαμά & Κόρη» (2026-09-17):
   καμία χρήση δεν έμεινε σε template ή JS. */
.story-facts{display:flex;gap:34px;margin:26px 0 8px;flex-wrap:wrap}
.story-facts b{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--olive-d);line-height:1.1}
.story-facts span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

/* regions strip */
.regions{overflow:hidden;padding:20px 0;border-block:1px solid var(--line2);background:var(--paper)}
.regions-track{display:flex;gap:14px;width:max-content;animation:marq 36s linear infinite}
.regions:hover .regions-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.region-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border:1px solid var(--line);border-radius:999px;font-family:var(--serif);font-size:1.05rem;color:var(--ink2);background:var(--cream);white-space:nowrap}
.region-pill .ic{width:15px;height:15px;color:var(--terra)}
.region-pill:hover{border-color:var(--gold);color:var(--ink)}

/* google reviews — manager-typed summary, links out to the real profile */
.gscore{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-lg);padding:38px clamp(18px,5vw,30px);max-width:560px;margin-inline:auto}
.gscore-rating{display:flex;align-items:baseline;gap:9px;font-family:var(--serif);color:var(--olive-d)}
.gscore-rating b{font-size:3.2rem;line-height:1;font-weight:600}
.gscore-rating span{font-size:1.05rem;color:var(--ink3)}
.gscore-count{font-family:var(--serif);font-size:1.16rem;color:var(--ink2)}
.gscore-link{margin-top:4px;flex-wrap:wrap;justify-content:center}

/* ---------- footer ---------- */
.ftr{background:var(--ftr-bg);color:rgba(var(--ftr-fg-rgb),.82);margin-top:0}
.ftr-brand img{height:46px;width:auto;display:block;margin-bottom:6px}
/* Τα κενά μίκρυναν 2026-09-20 (ιδιοκτήτρια: «να μικρύνει κατά πολύ το
   footer»): gap 38→30, padding clamp(34,4vw,54)/32 → clamp(22,2.4vw,32)/20.
   ⚠️ ΕΠΙΤΟΠΟΥ ΚΑΙ ΟΧΙ ΝΕΟΣ ΚΑΝΟΝΑΣ ΣΤΟ ΤΕΛΟΣ: ένας δεύτερος `.ftr-main`
   παρακάτω θα είχε ίδια ειδικότητα και θα νικούσε ΚΑΙ μέσα στο media query
   των 1024px, σβήνοντας σιωπηλά το `gap:34px` των δύο στηλών. */
.ftr-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;padding:clamp(22px,2.4vw,32px) 0 20px}
.ftr h4{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-l);font-weight:700;margin-bottom:11px}
.ftr-brand svg{margin-bottom:16px}
.ftr-brand p{font-size:14px;line-height:1.65;color:rgba(var(--ftr-fg-rgb),.66);max-width:300px}
.ftr-social{display:flex;gap:9px;margin-top:14px}
.ftr-social a{width:38px;height:38px;border:1px solid rgba(var(--ftr-fg-rgb),.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(var(--ftr-fg-rgb),.85);transition:all .2s;line-height:1;padding:0}
.ftr-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--olive-d);transform:translateY(-2px)}
/* Social glyphs render as filled shapes, not stroked outlines (the .ic
   default), and use official brand paths that are centered in 24×24. */
.ftr-social .ic,.mnav-social .ic{fill:currentColor;stroke:none;stroke-width:0;display:block;width:22px;height:22px;margin:auto}
.ftr li{margin-bottom:4px}
.ftr-main a{font-size:14px;color:rgba(var(--ftr-fg-rgb),.72);transition:color .2s,padding-left .2s}
.ftr-main a:hover{color:var(--paper);padding-left:5px}
.ftr-contact li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.6;margin-bottom:8px}
.ftr-contact .ic{width:17px;height:17px;margin-top:3px;color:var(--gold-l)}
.ftr-hours{margin-top:16px;padding:14px 18px;background:rgba(var(--paper-rgb),.06);border:1px solid rgba(var(--ftr-fg-rgb),.14);border-radius:14px;font-size:13px}
.ftr-hours div{display:flex;justify-content:space-between;gap:14px;padding:2px 0}
.ftr-hours b{color:var(--paper);font-weight:600}
.ftr-bottom{border-top:1px solid rgba(var(--ftr-fg-rgb),.14);padding:11px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:rgba(var(--ftr-fg-rgb),.5)}
.ftr-pay{display:flex;gap:7px;flex-wrap:wrap}
.paychip{font-size:10px;font-weight:700;letter-spacing:.08em;padding:5px 10px;border:1px solid rgba(var(--ftr-fg-rgb),.25);border-radius:6px;color:rgba(var(--ftr-fg-rgb),.75)}
/* opening-hours list (plain, un-boxed) — replaces the old boxed .ftr-hours */
.ftr-schedule li{display:flex;justify-content:space-between;gap:16px;margin-bottom:1px;font-size:13.5px}
.ftr-schedule b{color:var(--paper);font-weight:600}

/* ---------- shop / PLP ---------- */
.page-head{background:var(--cream);border-bottom:1px solid var(--line2);padding:clamp(30px,4.5vw,54px) 0}
.crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.5px;color:var(--ink3);margin-bottom:12px}
.crumbs a:hover{color:var(--terra);text-decoration:underline;text-underline-offset:3px}
.crumbs .ic{width:11px;height:11px}
.page-head h1{margin-bottom:6px}
.page-head .lead{max-width:640px}
.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:clamp(26px,3.5vw,52px);padding:clamp(30px,4vw,50px) 0 70px}
.filters h3{font-size:1.35rem;margin-bottom:4px}
.fgroup{border-bottom:1px solid var(--line2);padding:16px 0}
.fgroup-top{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:4px 0}
.fgroup-top .ic{width:14px;height:14px;color:var(--ink3);transition:transform .25s}
.fgroup.open .fgroup-top .ic{transform:rotate(180deg)}
.fgroup-body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding-left:2px}
.fgroup.open .fgroup-body{max-height:1500px;overflow:visible}
.fgroup-body .inner{padding:12px 0 6px;display:flex;flex-direction:column;gap:3px}
.fcat{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;font-size:14px;color:var(--ink2);width:100%;text-align:left;transition:background .15s,color .15s}
/* hover:hover — στο φύλλο φίλτρων του κινητού μια τιμή που μόλις ξε-επιλέχθηκε
   κρατούσε το «κολλημένο» :hover και έμοιαζε μισο-επιλεγμένη. */
@media (hover:hover){.fcat:hover{background:var(--cream);color:var(--ink)}}
.fcat.on{background:var(--olive-pale);color:var(--olive-d);font-weight:600}
.fcat .n{margin-left:auto;font-size:11.5px;color:var(--ink3);background:var(--cream2);border-radius:999px;padding:1px 8px}
.fcat--sub{padding-left:26px;font-size:13.5px}
/* Third level. The catalogue is two deep today; this exists so a manager who
   adds a sub-subcategory gets an indent instead of a row that looks top-level. */
.fcat--sub2{padding-left:42px}
.fcheck{display:flex;align-items:center;gap:11px;padding:7px 6px;font-size:14px;color:var(--ink2);cursor:pointer;border-radius:8px}
.fcheck:hover{background:var(--cream)}
.fcheck input{appearance:none;width:19px;height:19px;border:1.5px solid var(--ink3);border-radius:5px;position:relative;cursor:pointer;flex:none;transition:all .15s;background:var(--paper)}
.fcheck input:checked{background:var(--olive);border-color:var(--olive)}
.fcheck input:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(42deg)}
.fcheck .n{margin-left:auto;font-size:11.5px;color:var(--ink3)}
.fmore{font-size:12.5px;font-weight:700;color:var(--terra);padding:7px 6px;text-align:left;letter-spacing:.06em}
/* dual range */
.range{padding:16px 4px 4px}
.range-track{position:relative;height:4px;background:var(--cream2);border-radius:999px;margin:10px 8px 20px}
.range-fill{position:absolute;top:0;bottom:0;background:var(--olive);border-radius:999px}
.range input[type=range]{position:absolute;left:-8px;right:-8px;width:calc(100% + 16px);top:-7px;appearance:none;-webkit-appearance:none;background:none;pointer-events:none;height:18px;margin:0}
.range input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;border-radius:50%;background:var(--paper);border:2.5px solid var(--olive);cursor:pointer;pointer-events:auto;box-shadow:var(--sh-3)}
.range input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--paper);border:2.5px solid var(--olive);cursor:pointer;pointer-events:auto;box-shadow:var(--sh-3)}
.range-vals{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2)}
.range-vals b{font-family:var(--serif);font-size:15px}
.filters-clear{width:100%;margin-top:16px}
/* toolbar */
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.toolbar .count{font-size:14px;color:var(--ink2)}
.toolbar .count b{font-family:var(--serif);font-size:1.1rem}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.select{position:relative;display:inline-flex;align-items:center}
.select select{appearance:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:10px 40px 10px 20px;font-size:13.5px;font-weight:500;cursor:pointer;min-height:44px}
.select .ic{position:absolute;right:15px;width:13px;height:13px;pointer-events:none;color:var(--ink3)}
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.viewtog button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.viewtog button.on{background:var(--ink);color:var(--paper)}
.fbtn-m{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:7px 8px 7px 14px;background:var(--olive-pale);color:var(--olive-d);border-radius:999px}
.chip button{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--ink-rgb),.1)}
.chip button:hover{background:var(--terra);color:var(--on-accent)}
.chip--clear{background:none;border:1px dashed var(--line);color:var(--ink2);padding:7px 14px;cursor:pointer}
.chip--clear:hover{border-color:var(--terra);color:var(--terra)}
/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:44px;flex-wrap:wrap}
.pagination a,.pagination button{min-width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink2);transition:all .2s;padding:0 8px;text-decoration:none;background:transparent}
.pagination a:hover,.pagination button:hover{border-color:var(--ink);color:var(--ink)}
.pagination a.on,.pagination button.on{background:var(--olive);border-color:var(--olive);color:var(--on-accent)}
.pagination button[disabled]{opacity:.35;pointer-events:none}
.pagination .pag-gap{min-width:24px;text-align:center;color:var(--ink3);font-weight:600;user-select:none;letter-spacing:1px}
.empty{text-align:center;padding:60px 20px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--paper)}
.empty .art{width:150px;margin:0 auto 18px;opacity:.9}
.empty h3{margin-bottom:8px}
.empty p{color:var(--ink2);margin-bottom:22px}

/* ---------- PDP ---------- */
.pdp{padding:clamp(26px,4vw,54px) 0 60px}
.pdp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,70px);align-items:start}
/* let both columns shrink to their track — without this the long add-to-cart
   button (nowrap) forces the info column wider than a phone screen and its text
   gets clipped by the body's overflow guard. */
.pdp-grid>*{min-width:0}
.gallery-main{border-radius:var(--r-lg);padding:clamp(24px,4vw,54px);position:relative;overflow:hidden}
.gallery-main .art{width:min(78%,430px);margin:0 auto;transition:transform .45s ease}
.gallery-main:hover .art{transform:scale(1.04)}
.gallery-main .pbadges{top:18px;left:18px}
.thumbs{display:flex;gap:12px;margin-top:14px}
.thumbs button{width:82px;height:82px;border-radius:16px;border:1.5px solid var(--line2);padding:10px;background:var(--cream);transition:all .2s}
.thumbs button:hover{border-color:var(--gold)}
.thumbs button.on{border-color:var(--olive);box-shadow:0 0 0 3px var(--olive-pale)}
/* «δες το προϊόν σε βίντεο» — a play tile alongside the photos. The poster fills
   the tile edge to edge (no 10px inset like a photo thumb) so the triangle reads. */
.thumb-video{position:relative;padding:0!important;overflow:hidden}
.thumb-video img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-play{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-accent);
  background:rgba(var(--ink-rgb),.42);transition:background .2s}
.thumb-video:hover .thumb-play{background:rgba(var(--ink-rgb),.24)}
/* While a video plays the stage drops its padding and goes dark, so a 9:16 clip
   is framed rather than floating on cream. `aspect-ratio:auto` undoes the square
   stage further down — without it a 16:9 player leaves a dead black band under
   itself, because the box keeps the 1/1 ratio the photo needs. */
.gallery-main.playing{padding:0;background:var(--ink);aspect-ratio:auto;
  display:grid;place-items:center}
.gallery-main.playing iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.gallery-main.playing--tall iframe{aspect-ratio:9/16;width:auto;height:min(72vh,620px)}
.pdp-info .crumbs{margin-bottom:16px}
.pdp-cat{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);font-weight:700;margin-bottom:10px;display:block}
.pdp-info h1{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:500;margin-bottom:10px}
.pdp-sub{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pdp-sub .prod-link{font-size:13.5px;color:var(--ink2)}
.pdp-sub .prod-link a{color:var(--olive-d);font-weight:600;border-bottom:1px solid var(--gold-l)}
.pdp-sub .prod-link a:hover{color:var(--terra)}
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ptag{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:6px 14px;background:var(--olive-pale);color:var(--olive-d);border-radius:999px;transition:background .15s,color .15s}
.ptag:hover{background:var(--terra);color:var(--on-accent)}
.pdp-price{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.pdp-price .now{font-family:var(--serif);font-size:2.2rem;font-weight:600}
.pdp-price .was{font-family:var(--serif);font-size:1.3rem;color:var(--ink3);text-decoration:line-through}
.pdp-price .save{font-size:11.5px;font-weight:700;letter-spacing:.1em;background:var(--terra-pale);color:var(--terra-d);padding:5px 12px;border-radius:999px}
/* Τρεις μικρές γραμμές κάτω από τα διατροφικά: τα νούμερα του τυριού, τα
   αλλεργιογόνα και η προέλευση όταν δεν υπάρχει παραγωγός. Ίδιο βάρος με το
   «.pdp-short» ώστε να διαβάζονται ως υποσημειώσεις, όχι ως τίτλοι. */
.pdp-cheese,.pdp-allergens,.pdp-region{display:flex;gap:7px;align-items:center;color:var(--ink2);margin:0 0 10px}
.pdp-allergens b,.pdp-cheese b,.pdp-region b{color:var(--ink)}
/* Κάτω από τον τίτλο από 2026-09-24 (ιδιοκτήτης: «Τίτλος → Σύντομη περιγραφή →
   Badges»). Η διακεκομμένη γραμμή από κάτω ήταν διαχωριστικό ΜΕΤΑ το κουμπί
   αγοράς· ανάμεσα σε τίτλο και χαρακτηριστικά θα έκοβε την ενότητα στα δύο. */
.pdp-short{color:var(--ink2);font-size:15.5px;line-height:1.7;margin:0 0 18px}
.opt-label{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline}
.opt-label span{color:var(--ink3);font-weight:500;letter-spacing:.02em;text-transform:none;font-size:12.5px}
.variants{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.vbtn{border:1.5px solid var(--line);border-radius:14px;padding:10px 16px;text-align:left;transition:all .2s;min-height:48px}
.vbtn b{display:block;font-size:14px;font-weight:600}
.vbtn span{font-size:12.5px;color:var(--ink2);font-family:var(--serif)}
/* ⚠️ ΟΧΙ ΣΤΑ ΕΞΑΝΤΛΗΜΕΝΑ (αίτημα ιδιοκτήτριας, 2026-09-20: «αν πάει ο
   κέρσορας σε ένα εξαντλημένο βάρος να μην μπαίνει περίγραμμα»).
   Ο κανόνας ήταν σκέτο `.vbtn:hover` και έπιανε και τα `.oos`: ένα
   κουμπί που ΔΕΝ πατιέται (είναι `disabled`) φωτιζόταν σαν να πατιέται.
   Τα disabled κουμπιά παίρνουν κανονικά `:hover` στους browsers — το
   `disabled` σταματάει το κλικ, όχι το στυλ. */
/* ⚠️ ΚΑΙ `:not(.on)`. Το `:not(.oos)` ανέβασε την ειδικότητα σε (0,3,0) —
   η κλάση μέσα στο `:not()` ΜΕΤΡΑΕΙ — οπότε ο κανόνας άρχισε να νικάει τα
   `.vbtn.on` (0,2,0) των γραμμών 734 και 1595. Αποτέλεσμα: περνώντας ο
   κέρσορας πάνω από το μέγεθος που ΕΙΧΕ ΗΔΗ διαλέξει ο πελάτης, το λαδί
   περίγραμμα γινόταν μαύρο ενώ το δαχτυλίδι και το φόντο έμεναν λαδί. */
.vbtn:not(.oos):not(.on):hover{border-color:var(--ink)}
.vbtn.oos{cursor:not-allowed}
.vbtn.on{border-color:var(--olive);background:var(--olive-pale);box-shadow:0 0 0 3px rgba(var(--olive-rgb),.12)}
.vbtn.oos{opacity:.5;text-decoration:line-through}
.buyrow{display:flex;gap:12px;align-items:stretch;margin-bottom:14px}
.buyrow .btn{flex:1;min-width:0}
.favbig{width:52px;height:52px;border:1.5px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all .2s;flex:none;align-self:center}
.favbig:hover{border-color:var(--terra);color:var(--terra);transform:scale(1.06)}
.favbig.on{background:var(--terra-pale);border-color:var(--terra);color:var(--terra)}
.favbig.on .ic{fill:var(--terra)}
.pdp-notes{display:flex;flex-direction:column;gap:9px;background:var(--cream);border:1px solid var(--line2);border-radius:16px;padding:16px 20px;margin:20px 0;font-size:13.5px;color:var(--ink2)}
.pdp-notes div{display:flex;gap:11px;align-items:center}
.pdp-notes .ic{width:17px;height:17px;color:var(--olive);flex:none}
/* accordions */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-top{display:flex;align-items:center;justify-content:space-between;width:100%;padding:19px 4px;font-family:var(--serif);font-size:1.16rem;font-weight:600;text-align:left;gap:12px}
.acc-top:hover{color:var(--terra)}
.acc-top .ic{width:16px;height:16px;color:var(--ink3);transition:transform .3s;flex:none}
.acc-item.open .acc-top .ic{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s ease}
.acc-item.open .acc-body{max-height:1400px}
.acc-body .inner{padding:2px 4px 24px;color:var(--ink2);font-size:14.8px;line-height:1.75}
.acc-body .inner p{margin-bottom:12px}
.ntable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.ntable td{padding:9px 6px;border-bottom:1px dashed var(--line)}
.ntable td:last-child{text-align:right;font-weight:600;color:var(--ink)}
/* producer card on pdp */
.producer-box{display:flex;gap:18px;align-items:center;background:var(--wash);border-radius:var(--r-lg);padding:22px 24px;margin-top:26px}
.producer-box .art{width:74px;flex:none}
.producer-box b{font-family:var(--serif);font-size:1.15rem;font-weight:600;display:block}
.producer-box .small{margin-top:2px}
/* sticky mobile buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:940;background:var(--paper);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;gap:12px;box-shadow:0 -10px 30px -12px rgba(var(--ink-rgb),.25);transform:translateY(110%);transition:transform .3s}
.buybar.show{transform:translateY(0)}
.buybar .pr{font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.1}
.buybar .nm{font-size:11.5px;color:var(--ink2);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buybar .btn{flex:1;min-height:46px}

/* ── PDP mobile polish (≤600px) ── */
@media (max-width:600px){
  .pdp-info h1{font-size:clamp(1.55rem,7vw,2rem)}
  .pdp-price .now{font-size:1.85rem}
  .pdp-short{font-size:14.8px;margin:0 0 18px}
  /* even two-up variant grid instead of ragged flex-wrap */
  .variants{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  /* the right-hand "current variant" label duplicates the highlighted button */
  .opt-label span{display:none}
  /* qty + heart on one row, full-width add button below — no clipped label */
  .buyrow{flex-wrap:wrap}
  .buyrow .qty--lg{order:1}
  .buyrow .favbig{order:2;margin-left:auto}
  .buyrow .btn{order:3;flex:1 0 100%}
  .pdp-notes{font-size:13px;padding:14px 16px}
  .producer-box{gap:14px;padding:18px 20px}
}

/* ---------- cart page ---------- */
.cart-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(26px,4vw,54px);align-items:start;padding:clamp(28px,4vw,50px) 0 70px}
.cart-table .cline{padding:20px 0}
.cart-table .cline .thumb{width:96px;height:96px}
.cart-aside{position:sticky;top:calc(var(--hdr-h) + 20px)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.panel h3{font-size:1.3rem;margin-bottom:16px}
.coupon{display:flex;gap:9px;margin:14px 0}
.coupon input{flex:1;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:999px;padding:10px 20px;background:var(--cream);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.coupon input:focus{border-color:var(--olive)}
.coupon .btn{min-height:48px;padding-inline:22px}
.coupon-ok{font-size:13px;color:var(--ok);font-weight:600;display:flex;gap:7px;align-items:center;margin-bottom:8px}
.coupon-err{font-size:13px;color:var(--err);font-weight:600;margin-bottom:8px;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.giftnote textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--cream);padding:14px 16px;font-size:14px;min-height:84px;resize:vertical}
.minorder{display:flex;gap:10px;align-items:flex-start;background:var(--gold-pale);border:1px solid var(--gold-l);color:var(--gold-deep);border-radius:14px;padding:13px 16px;font-size:13.5px;margin:14px 0}
.minorder .ic{width:17px;height:17px;flex:none;margin-top:2px}
/* Η αποδοχή όρων του καλαθιού (2026-09-20). Δικό της όνομα και όχι `.optrow`:
   εκείνη ζει στο ταμείο με 20px κουτί και 13px padding — ένα «απλώς το
   ξαναχρησιμοποιώ» εδώ θα άλλαζε και τις τρεις σειρές επιλογών του ταμείου
   την επόμενη φορά που κάποιος πειράξει αυτό το μέγεθος.
   ⚠️ Το κουτί ΔΕΝ γίνεται ποτέ `display:none`: φέρει `required`, και το
   μήνυμα του browser δεν μπορεί να δείξει σε κρυφό στοιχείο — η φόρμα θα
   αρνιόταν να υποβληθεί χωρίς να εξηγήσει γιατί. */
/* ⚠️ ΧΩΡΙΣ `user-select:none` — αντιγράφηκε από το `.optrow` και είναι
   λάθος εδώ: ο πελάτης δεν μπορούσε να επιλέξει ή να αντιγράψει το
   κείμενο που του ζητάμε να αποδεχτεί. Ίδια διόρθωση στο
   `.optrow--terms` του ταμείου, που φέρει την ίδια πρόταση. */
.cart-terms{display:flex;align-items:flex-start;gap:10px;margin-top:18px;
  font-size:13.5px;line-height:1.55;color:var(--ink2);cursor:pointer}
.cart-terms input{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;flex:none;margin-top:0;
  border:1.5px solid var(--ink3);border-radius:6px;background:var(--paper);
  position:relative;cursor:pointer;transition:background .15s,border-color .15s}
.cart-terms input:checked{background:var(--olive);border-color:var(--olive)}
.cart-terms input:checked::after{content:"";position:absolute;left:5.5px;top:2px;
  width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.cart-terms input:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
/* `--terra` σε `--paper` είναι 3,54–4,36: κάτω από το 4,5 για 13,5px
   κείμενο, και είναι ο ΜΟΝΟΣ δρόμος από το κουτάκι προς το κείμενο που
   ζητάμε να αποδεχτεί ο πελάτης. Το `--terra-d` είναι 5,53–6,85. */
.cart-terms a{color:var(--terra-d);text-decoration:underline}
.cart-terms-form{margin:0}
/* Η άρνηση, ΔΙΠΛΑ στο κουτί. Το «cart_error» πιο πάνω είναι πέρα από τα
   σύνολα και τη δωροκάρτα — χωρίς JavaScript ο πελάτης υποβάλλει, η
   σελίδα φορτώνει ξανά, και ο λόγος είναι εκτός οθόνης.
   ⚠️ ΧΩΡΙΣ ΔΙΚΟ ΤΟΥ ΦΟΝΤΟ. Το `--err-l` είναι ανοιχτό ΚΟΚΚΙΝΟ, όχι χλωμό
   φόντο: `--err` πάνω του μετράει **2,50** σε κάθε παλέτα — ακριβώς το
   λάθος που μόλις έπιασε το τεστ αντίθεσης στο σήμα «Χειροποίητο».
   Πάνω στο `--paper` του `.panel` το ίδιο κείμενο είναι 5,99–6,09. */
.cart-terms-err{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;
  font-size:13px;line-height:1.5;font-weight:600;color:var(--err)}
.cart-terms-err .ic{flex:none;margin-top:2px}
.xsell h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin:26px 0 12px;color:var(--ink2)}
.xsell-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line2);border-radius:16px;margin-bottom:9px;background:var(--paper)}
.xsell-item .thumb{width:54px;height:54px;border-radius:12px;padding:6px;flex:none}
.xsell-item b{font-family:var(--serif);font-size:.98rem;font-weight:600;display:block;line-height:1.2}
.xsell-item span{font-size:12.5px;color:var(--ink2)}
.xsell-item .addbtn{width:38px;height:38px;margin-left:auto}

/* ---------- checkout ---------- */
.co-wrap{padding:clamp(28px,4vw,50px) 0 80px}
.steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:clamp(30px,5vw,50px)}
.step{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600;color:var(--ink3)}
.step .dot{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:15px;transition:all .3s;background:var(--paper)}
.step.on{color:var(--ink)}
.step.on .dot{border-color:var(--olive);background:var(--olive);color:var(--on-accent)}
.step.done .dot{border-color:var(--olive);color:var(--olive)}
.step-line{width:clamp(24px,6vw,70px);height:1px;background:var(--line);margin:0 12px}
.co-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(26px,4vw,54px);align-items:start}
.co-aside{position:sticky;top:calc(var(--hdr-h) + 20px)}
.co-items{max-height:280px;overflow:auto;margin-bottom:10px}
.co-item{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line2);font-size:13.5px}
.co-item .thumb{width:46px;height:46px;border-radius:10px;padding:5px;flex:none;position:relative}
.co-item .q{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--on-accent);font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.co-item b{font-weight:600;display:block;line-height:1.25}
.co-item .pr{margin-left:auto;font-family:var(--serif);font-weight:600;font-size:14.5px;white-space:nowrap;flex:none}
fieldset{border:0;margin-bottom:26px}
legend{font-family:var(--serif);font-size:1.35rem;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px}
legend .ic{color:var(--olive)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow--1{grid-template-columns:1fr}
.frow--31{grid-template-columns:2fr 1fr}
.field{margin-bottom:14px;position:relative}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;min-height:50px;border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:12px 16px;font-size:15px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--olive);box-shadow:0 0 0 3px rgba(var(--olive-rgb),.12)}
.field.err input,.field.err select{border-color:var(--err);box-shadow:0 0 0 3px rgba(var(--err-rgb),.1)}
.field .msg{display:none;font-size:12px;color:var(--err);margin-top:5px;font-weight:600}
.field.err .msg{display:block}
.optrow{display:flex;align-items:center;gap:11px;padding:13px 2px;font-size:14.5px;cursor:pointer;user-select:none}
.optrow input{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:1.5px solid var(--ink3);border-radius:6px;position:relative;cursor:pointer;flex:none;background:var(--paper);transition:all .15s}
.optrow input:checked{background:var(--olive);border-color:var(--olive)}
.optrow input:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(42deg)}
.radio-card{display:flex;align-items:flex-start;gap:14px;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:11px;cursor:pointer;transition:all .2s;background:var(--paper)}
.radio-card:hover{border-color:var(--ink3)}
.radio-card.on{border-color:var(--olive);background:var(--olive-pale);box-shadow:0 0 0 3px rgba(var(--olive-rgb),.1)}
.radio-card.disabled{opacity:.45;pointer-events:none}
.radio-card input{appearance:none;width:20px;height:20px;border:1.5px solid var(--ink3);border-radius:50%;position:relative;flex:none;margin-top:2px;cursor:pointer;background:var(--paper)}
.radio-card input:checked{border-color:var(--olive);border-width:6px}
.radio-card .rc-main{flex:1}
.radio-card .rc-main b{font-size:14.5px;display:flex;align-items:center;gap:9px}
.radio-card .rc-main span{font-size:13px;color:var(--ink2);display:block;margin-top:2px}
.radio-card .rc-price{font-family:var(--serif);font-weight:600;font-size:1.05rem;white-space:nowrap}
.radio-card .rc-price.free{color:var(--ok)}
.cardform{background:var(--cream);border:1px solid var(--line2);border-radius:16px;padding:18px;margin:4px 0 10px}
.cardform .cardvis{background:linear-gradient(120deg,var(--olive-d),var(--olive));border-radius:14px;color:var(--cream);padding:18px 20px;margin-bottom:16px;font-family:var(--serif);letter-spacing:.12em;box-shadow:var(--sh-1)}
.cardform .cardvis .no{font-size:1.25rem;margin:16px 0 10px;min-height:1.4em}
.cardform .cardvis .row{display:flex;justify-content:space-between;font-size:12px;font-family:var(--sans);letter-spacing:.08em;color:rgba(var(--ftr-fg-rgb),.8)}
.bankbox{background:var(--cream);border:1px dashed var(--line);border-radius:14px;padding:16px 18px;font-size:13.5px;color:var(--ink2);margin-top:8px}
.bankbox b{color:var(--ink)}
.co-nav{display:flex;gap:12px;justify-content:space-between;margin-top:26px;flex-wrap:wrap}
.backlink{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink2);min-height:48px}
.backlink:hover{color:var(--terra)}

/* confirmation */
.confirm{max-width:820px;margin-inline:auto;text-align:center;padding:clamp(40px,6vw,80px) 0}
.confirm .bigcheck{width:92px;height:92px;border-radius:50%;background:var(--olive-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--olive);animation:popIn .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes popIn{from{transform:scale(.3);opacity:0}}
.confirm .bigcheck .ic{width:44px;height:44px;stroke-width:2}
.confirm .ordno{display:inline-block;font-family:var(--serif);font-size:1.25rem;background:var(--cream);border:1px dashed var(--gold);padding:9px 26px;border-radius:999px;margin:16px 0 8px}
.timeline{display:flex;justify-content:space-between;margin:44px 0;position:relative;text-align:center}
.timeline::before{content:"";position:absolute;top:17px;left:12%;right:12%;height:2px;background:var(--cream2)}
.tl-step{position:relative;z-index:1;flex:1}
.tl-step .dot{width:36px;height:36px;border-radius:50%;background:var(--paper);border:2px solid var(--cream2);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.tl-step.done .dot{background:var(--olive);border-color:var(--olive);color:var(--on-accent)}
.tl-step.current .dot{box-shadow:0 0 0 4px var(--olive-pale)}
.tl-step.current b{color:var(--olive)}
.tl-step b{font-size:12.5px;display:block}
.tl-step span{font-size:11.5px;color:var(--ink3)}
.confirm .bigcheck--terminal{background:var(--cream2);color:var(--terra)}
.confirm-sum{text-align:left;margin-top:30px}

/* ---------- account / auth ---------- */
.acct-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(26px,4vw,54px);padding:clamp(28px,4vw,50px) 0 80px;align-items:start}
.acct-nav{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:calc(var(--hdr-h) + 20px)}
.acct-nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:15px 20px;font-size:14px;font-weight:600;color:var(--ink2);border-bottom:1px solid var(--line2);transition:all .15s;min-height:50px}
.acct-nav button:last-child{border-bottom:0}
.acct-nav button:hover{background:var(--cream)}
.acct-nav button.on{background:var(--olive-pale);color:var(--olive-d);box-shadow:inset 3px 0 0 var(--olive)}
.acct-nav .ic{width:18px;height:18px}
.acct-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.acct-head .avat{width:58px;height:58px;border-radius:50%;background:var(--olive);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.stat{background:var(--cream);border:1px solid var(--line2);border-radius:16px;padding:20px;text-align:center}
.stat b{font-family:var(--serif);font-size:1.9rem;font-weight:600;display:block;color:var(--olive-d)}
.stat span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.orow{border:1px solid var(--line2);border-radius:16px;margin-bottom:12px;overflow:hidden;background:var(--paper)}
.orow-top{display:flex;align-items:center;gap:14px;padding:16px 20px;width:100%;text-align:left;flex-wrap:wrap}
.orow-top:hover{background:var(--cream)}
.orow-top b{font-family:var(--serif);font-size:1.05rem}
.orow-top .small{margin-right:auto}
.ostatus{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 13px;border-radius:999px}
.ostatus--d{background:var(--olive-pale);color:var(--olive-d)}
.ostatus--s{background:var(--gold-pale);color:var(--gold-mid)}
.ostatus--p{background:var(--sea-pale);color:var(--sea)}
.orow-body{max-height:0;overflow:hidden;transition:max-height .35s ease;background:var(--cream)}
.orow.open .orow-body{max-height:640px}
.orow-body .inner{padding:16px 20px;border-top:1px solid var(--line2);font-size:14px}
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.addr{border:1px solid var(--line2);border-radius:16px;padding:22px;background:var(--paper);position:relative}
.addr .tagl{position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--cream2);padding:4px 10px;border-radius:999px;color:var(--ink2)}
.addr b{font-family:var(--serif);font-size:1.1rem;display:block;margin-bottom:6px}
.addr p{font-size:14px;color:var(--ink2);line-height:1.7}
.authbox{max-width:940px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);box-shadow:var(--sh-1)}
.authbox-art{background:var(--olive-d);color:var(--cream);padding:40px;display:flex;flex-direction:column;justify-content:center;gap:14px;position:relative;overflow:hidden}
.authbox-art h2{color:var(--paper)}
.authbox-art p{color:rgba(var(--ftr-fg-rgb),.72);font-size:14.5px}
.authbox-art .art{width:180px;margin-top:10px;opacity:.9}
.authbox-form{padding:clamp(26px,4vw,46px)}
.authtabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px}
.authtabs button{flex:1;padding:13px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);border-bottom:2px solid transparent;margin-bottom:-1px}
.authtabs button.on{color:var(--ink);border-bottom-color:var(--terra)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,64px);padding:clamp(30px,4vw,54px) 0 76px;align-items:start}
.cinfo li{display:flex;gap:15px;margin-bottom:20px;align-items:flex-start}
.cinfo .ic{width:21px;height:21px;color:var(--terra);margin-top:3px;flex:none}
.cinfo b{display:block;font-size:14.5px;margin-bottom:2px}
.cinfo p,.cinfo a{font-size:14.5px;color:var(--ink2)}
.cinfo a:hover{color:var(--terra);text-decoration:underline}
.map-box{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);margin-top:24px}
.map-box svg{width:100%;height:auto}
.hours-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.hours-table td{padding:10px 4px;border-bottom:1px dashed var(--line)}
.hours-table td:last-child{text-align:right;font-weight:600}
.hours-table .closed{color:var(--terra)}

/* ---------- modal / quickview ---------- */
.modal{position:fixed;inset:0;z-index:1020;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.open{opacity:1;visibility:visible}
.modal-card{background:var(--paper);border-radius:var(--r-lg);max-width:880px;width:100%;max-height:min(88vh,700px);overflow:auto;box-shadow:var(--sh-2);transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.2,1,.3,1);position:relative}
.modal.open .modal-card{transform:translateY(0) scale(1)}
.modal-x{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-3);display:flex;align-items:center;justify-content:center}
.modal-x:hover{background:var(--ink);color:var(--paper)}
.qv{display:grid;grid-template-columns:1fr 1.1fr}
.qv-media{padding:40px;display:flex;align-items:center;justify-content:center}
.qv-media .art{width:82%}
.qv-info{padding:36px 36px 30px}
.qv-info h2{font-size:1.7rem;font-weight:500;margin:6px 0 8px}
.qv-info .pdp-short{margin:2px 0 14px}
/* ⚠️ ΧΩΡΙΣ `display:inline-block`. Νικούσε το `inline-flex` του `.btn-line`, και
   με το καθολικό `svg{display:block}` το βέλος έπεφτε σε ΔΙΚΗ ΤΟΥ γραμμή κάτω
   από το «ΠΛΗΡΗΣ ΠΕΡΙΓΡΑΦΗ ΠΡΟΪΟΝΤΟΣ» (screenshot ιδιοκτήτη, 2026-09-24). */
.qv-full{margin-top:14px}

/* ---------- toasts ---------- */
.toasts{position:fixed;top:calc(var(--hdr-h) - 30px);right:20px;z-index:1600;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border-radius:14px;padding:14px 20px;font-size:14px;box-shadow:var(--sh-2);pointer-events:auto;animation:toastIn .45s cubic-bezier(.2,1.2,.3,1);max-width:340px}
.toast.out{animation:toastOut .3s forwards}
.toast .ic{width:19px;height:19px;color:var(--gold-l);flex:none}
.toast.ok .ic{color:var(--ok-l)}
.toast.err .ic{color:var(--err-l)}
.toast a{color:var(--gold-l);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@keyframes toastIn{from{transform:translateX(60px);opacity:0}}
@keyframes toastOut{to{transform:translateX(60px);opacity:0}}

/* cookie bar */
.cookiebar{position:fixed;left:20px;bottom:20px;z-index:1500;max-width:390px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-2);transform:translateY(30px);opacity:0;visibility:hidden;transition:all .45s cubic-bezier(.2,1,.3,1)}
.cookiebar.show{transform:translateY(0);opacity:1;visibility:visible}
.cookiebar h4{font-family:var(--serif);font-size:1.15rem;margin-bottom:8px;display:flex;gap:9px;align-items:center}
.cookiebar p{font-size:13px;color:var(--ink2);margin-bottom:16px}
.cookiebar .row{display:flex;gap:9px;flex-wrap:wrap}

/* back to top */
.backtop{position:fixed;right:20px;bottom:20px;z-index:930;width:50px;height:50px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);opacity:0;visibility:hidden;transform:translateY(14px);transition:all .3s}
.backtop.show{opacity:1;visibility:visible;transform:translateY(0)}
.backtop:hover{background:var(--terra)}

/* skeleton */
.sk{position:relative;overflow:hidden;background:var(--cream2);border-radius:12px}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(var(--paper-rgb),.7),transparent);animation:shim 1.2s infinite}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.sk-card{border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden}
.sk-card .m{height:230px;border-radius:0}
.sk-card .b{padding:18px;display:flex;flex-direction:column;gap:10px}
.sk-line{height:13px}
/* route progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:3000;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--terra));transition:width .25s ease,opacity .4s}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.revealed{opacity:1;transform:none}

/* 404 */
.nf{max-width:620px;margin-inline:auto;text-align:center;padding:clamp(50px,8vw,100px) 0}
.nf .art{width:230px;margin:0 auto 26px}
.nf h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:12px}
.nf p{color:var(--ink2);margin-bottom:28px}

/* about page extras */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value-card{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-lg);padding:30px;text-align:center}
.value-card .ic{width:34px;height:34px;stroke-width:1.2;color:var(--terra);margin:0 auto 14px}
.value-card h3{margin-bottom:8px;font-size:1.2rem}
.value-card p{font-size:14px;color:var(--ink2)}
.tline{max-width:700px;margin-inline:auto;position:relative;padding-left:34px}
.tline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1.5px;background:var(--gold-l)}
.tline-item{position:relative;padding-bottom:30px}
.tline-item::before{content:"";position:absolute;left:-32px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2.5px solid var(--gold)}
.tline-item b{font-family:var(--serif);font-size:1.25rem;display:block;color:var(--olive-d)}
.tline-item span{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--terra);text-transform:uppercase}
.tline-item p{font-size:14.5px;color:var(--ink2);margin-top:5px}

/* shipping page tables */
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:start}
.stable{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.stable th{background:var(--wash);color:var(--olive-d);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;padding:13px 16px;text-align:left}
.stable td{padding:13px 16px;border-top:1px solid var(--line2);color:var(--ink2)}
.stable td b{color:var(--ink)}
.stable tr td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.stable-amt{white-space:nowrap}

/* wishlist */
.wl-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px}

/* bottom sheet (mobile filters) */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1010;background:var(--paper);border-radius:26px 26px 0 0;max-height:84vh;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .4s cubic-bezier(.3,1,.35,1);box-shadow:var(--sh-2)}
.sheet.open{transform:translateY(0)}
.sheet::before{content:"";width:44px;height:5px;border-radius:999px;background:var(--cream2);margin:10px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid var(--line2)}
.sheet-body{overflow:auto;padding:6px 22px 20px}
.sheet-foot{padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line2);display:flex;gap:10px}
.sheet-foot .btn{flex:1}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  /* keep the «Το είδες από τα reels μας» feature tile visible on tablet too
     (three tight columns instead of dropping the tile). */
  .mega-in{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:1024px){
  :root{--hdr-h:74px}
  .nav{display:none}
  .burger{display:inline-flex}
  /* phone in normal flow at <=1024 so it can't overlap the centred messages */
  .topbar-phone{position:static;margin-left:auto}
  .usp-in{grid-template-columns:repeat(2,1fr)}
  .usp-item{border-left:0;border-top:1px solid var(--line2);padding:18px 14px}
  .usp-item:nth-child(-n+2){border-top:0}
  .tiles{grid-template-columns:repeat(3,1fr);gap:14px}
  .hero-in{grid-template-columns:1fr;min-height:0;padding:38px 0 88px;gap:16px}
  .hero-copy{order:2;max-width:none}
  .hero-art{order:1}
  .hero-art svg{width:min(84%,420px)}
  .producers-grid{grid-template-columns:1fr 1fr}
  .story-grid{grid-template-columns:1fr;gap:34px}
  /* Σε μία στήλη το σκίτσο ΔΕΝ κολλάει (ιδιοκτήτης, 2026-09-24: «όσο κάνω
     scroll κατεβαίνει μαζί με όλα τα άλλα»). Το sticky του desktop το κρατούσε
     96px από την κορυφή και, επειδή είναι positioned, ζωγραφιζόταν ΠΑΝΩ από το
     κείμενο της ιστορίας μέχρι το τέλος του πλέγματος. `relative` και όχι
     `static`, ώστε ό,τι απόλυτο ζει μέσα στο σκίτσο να κρατά το κουτί του·
     το `top:auto` γιατί αλλιώς το `top:96px` του sticky θα το κατέβαζε. */
  .story-art{position:relative;top:auto}
  .news-in{grid-template-columns:1fr}
  .ftr-main{grid-template-columns:1fr 1fr;gap:34px}
  .shop-layout{grid-template-columns:1fr}
  .filters--side{display:none}
  .fbtn-m{display:inline-flex}
  .pdp-grid{grid-template-columns:1fr}
  .cart-grid,.co-grid{grid-template-columns:1fr}
  .cart-aside,.co-aside{position:static}
  .acct-grid{grid-template-columns:1fr}
  .acct-nav{position:static;display:flex;overflow-x:auto}
  .acct-nav button{border-bottom:0;border-right:1px solid var(--line2);white-space:nowrap;width:auto}
  .acct-nav button.on{box-shadow:inset 0 -3px 0 var(--olive)}
  .authbox{grid-template-columns:1fr}
  .authbox-art{display:none}
  .contact-grid,.info-cols{grid-template-columns:1fr}
  .qv{grid-template-columns:1fr}
  .qv-media{padding:34px 34px 6px}
  .toasts{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:14px;left:14px;align-items:center}
}
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wrap{width:calc(100% - 32px)}
  .tabbar{display:block}
  .topbar-in{font-size:10.5px;gap:10px}
  /* keep the phone visible + tappable on mobile (pushed right, in-flow) */
  .topbar-phone{position:static;margin-left:auto}
  /* Εδώ ζούσε το «κράτα ΜΟΝΟ το πρώτο μήνυμα, κομμένο με …». Από 2026-09-24
     η λωρίδα κυλάει και δείχνει όλα τα μηνύματα — δες το μπλοκ HOME/NAV στο
     τέλος του αρχείου (`.topbar-msgs`). */
  .hdr-main{padding:12px 0}
  .logo img{height:46px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .grid-p{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard-media{padding:18px 16px 10px}
  .pcard-body{padding:12px 14px 16px;gap:4px}
  .pcard-name{font-size:1rem}
  .price{font-size:1.12rem}
  .addbtn{width:42px;height:42px}
  .pcard-quick{display:none}
  .car-track>*{flex:0 0 218px}
  .car-btn{display:none}
  .producers-grid{grid-template-columns:1fr}
  .statgrid,.addr-grid,.values-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .frow--31{grid-template-columns:1fr 1fr}
  .grid-p.as-list .pcard{flex-direction:column}
  .grid-p.as-list .pcard-media{width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .thumbs button{width:64px;height:64px}
  /* seat the sticky add-to-cart bar ABOVE the bottom tab-bar (both are
     fixed bottom:0; the tab-bar reserves 64px, so lift the buy-bar clear
     of it instead of hiding behind it). */
  .buybar{display:flex;bottom:calc(64px + env(safe-area-inset-bottom));padding-bottom:12px}
  .backtop{bottom:calc(84px + env(safe-area-inset-bottom))}
  .cookiebar{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:none}
  .timeline{flex-wrap:wrap;gap:18px}
  .tl-step{flex:1 1 40%}
  .timeline::before{display:none}
  .steps{gap:0}
  .step span.lbl{display:none}
  .step.on span.lbl{display:inline}
  .hero-copy h2{font-size:clamp(2rem,8.4vw,2.6rem)}
  .story-facts{gap:22px}
  .news-in{padding:34px 24px}
  .sect-head--row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   DJANGO PORT OVERRIDES — real product photos replace the SVG
   art inside the same media slots. Ported block above is verbatim;
   keep all hand edits below this line.
   ============================================================ */
.pcard-media{overflow:hidden}
.pcard-media img,.pcard-media .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:transparent}

/* ── Home Pass-1 redesign (2026-08) ─────────────────────────────────────── */
/* «bestsellers» two-tone wordmark + optional section subtitle */
.bestsellers-title{text-transform:none;letter-spacing:-.01em}
.bestsellers-title .best{color:var(--olive)}
.bestsellers-title .sellers{color:var(--terra)}
.sect-sub{margin-top:6px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.pcard-media .ph{position:absolute;inset:0;display:grid;place-items:center}
.pcard-media .ph .ic{width:44%;height:44%;color:var(--ink3);opacity:.45}
.cline .thumb,.xsell-item .thumb,.sugg-item .thumb{overflow:hidden;position:relative}
.cline .thumb img,.xsell-item .thumb img,.sugg-item .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Η στήλη είναι πια η μισή κεφαλίδα· χωρίς φράγμα η φωτογραφία γίνεται
   λωρίδα 4:1. Κεντράρεται όπως ήδη κάνει το `.mega-feat .art`. */
.mega-feat .feat-img{display:block;width:100%;max-width:340px;height:154px;object-fit:cover;border-radius:12px;margin:6px auto 4px}
.mega-feat .feat-ph{display:grid;place-items:center;width:100%;max-width:340px;height:154px;border-radius:12px;margin:6px auto 4px;background:var(--wash)}
/* image-less product fallback keeps the tint background + a soft glyph */
.pcard.no-img .pcard-media,.cline .thumb.no-img,.sugg-item .thumb.no-img{background-image:none}

/* ── Phase 2: PDP gallery + thumbnails with real photos ── */
.gallery-main{position:relative;overflow:hidden}
.gallery-main img{display:block;width:100%;height:auto;max-height:540px;object-fit:cover;border-radius:inherit}
.gallery-main .ph{display:grid;place-items:center;min-height:320px}
.gallery-main .ph .ic{width:38%;height:38%;color:var(--ink3);opacity:.45}
.thumbs button{overflow:hidden;position:relative}
.thumbs button img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.filters-form{display:block}

/* ── Phase 3: order summary item thumbs with real photos ── */
.co-item .thumb{overflow:hidden;position:relative}
.co-item .thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
[data-ship-card].hide,.ship-eu-note.hide{display:none}

/* ── Phase 4: quickview media with real photo ── */
.qv-media{position:relative;overflow:hidden}
.qv-media img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:inherit}
.qv-media .ph{display:grid;place-items:center;min-height:260px}
.qv-media .ph .ic{width:40%;height:40%;color:var(--ink3);opacity:.45}

/* ── FIX: product-card photo height. The ported SVG art gave .pcard-media its
   height in-flow; our real <img> is absolute (no height) so the media box
   collapsed to padding height. Give it a square ratio so the photo fills it. */
.pcard-media{aspect-ratio:1/1;padding:0}
.pcard-media .pbadges{top:12px;left:12px}
.pcard-media .oos-wrap{inset:0}
.gallery-main{aspect-ratio:1/1}
.gallery-main img{position:absolute;inset:0;width:100%;height:100%;max-height:none}

/* ── variants: "από X€" prefix on cards ── */
.price .fromlbl{font-size:.72em;color:var(--ink3);font-weight:500;margin-right:1px}

/* ═══════════════════════════════════════════════════════════
   ACCOUNT SECTION — Phase 7 customer accounts
   ═══════════════════════════════════════════════════════════ */

/* narrow-page wrapper for login / register / password-reset */
.acc-narrow{max-width:520px;margin-inline:auto}
.acc-page-head{text-align:center;margin-bottom:24px}
.acc-page-head .eyebrow{justify-content:center;margin-bottom:12px}
.acc-page-head .h-1{margin-bottom:10px}
.acc-page-head .lead{max-width:440px;margin-inline:auto}

/* panel used for single-column forms */
.acc-panel{max-width:480px;margin:0 auto;padding:32px}
.acc-panel .field:last-of-type{margin-bottom:22px}
.acc-panel .btn--block{margin-top:6px}

/* form helpers reused across all account templates */
.acc-form .hint{display:block;font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.55}
.acc-form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:10px}
.acc-row{display:flex;justify-content:flex-end;margin:-4px 0 16px}
.acc-alt{margin-top:22px;text-align:center;color:var(--ink2);font-size:14.5px}
.acc-guest{margin-top:22px;text-align:center;color:var(--ink3);display:flex;align-items:center;justify-content:center;gap:6px}
.acc-guest .ic{color:var(--terra)}
.acc-link{color:var(--terra);text-decoration:none;font-weight:500}
.acc-link:hover{text-decoration:underline}
.acc-link--strong{font-weight:600}

/* terms checkbox row */
.acc-check{display:flex;gap:11px;align-items:flex-start;margin:6px 0 18px;font-size:14px;color:var(--ink2);line-height:1.55}
.acc-check input[type="checkbox"]{flex:none;margin-top:3px;width:18px;height:18px;accent-color:var(--olive)}
.acc-check.err span{color:var(--err)}

/* messages inline (fallback when JS toast is unavailable) */
.acc-alerts{margin-bottom:18px;display:flex;flex-direction:column;gap:10px}
.acc-alert{padding:12px 16px;border-radius:12px;border:1px solid;font-size:14.5px;line-height:1.55}
.acc-alert p{margin:0}
.acc-alert--ok{background:var(--olive-pale);border-color:rgba(var(--olive-rgb),.35);color:var(--olive-d)}
.acc-alert--err{background:var(--terra-pale);border-color:rgba(var(--terra-rgb),.4);color:var(--terra-d)}

/* ── 2-column shell (sidebar + main) ── */
.acc-shell{display:grid;grid-template-columns:260px 1fr;gap:34px;padding:8px 0 60px;align-items:start}
@media (max-width:920px){.acc-shell{grid-template-columns:1fr;gap:22px}}

.acc-side{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;position:sticky;top:96px}
@media (max-width:920px){.acc-side{position:static}}
.acc-side-user{display:flex;gap:12px;align-items:center;padding-bottom:18px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.acc-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--olive),var(--olive-d));color:var(--cream);display:grid;place-items:center;font-family:var(--serif);font-size:1.15rem;font-weight:600;flex:none;letter-spacing:.02em}
.acc-hello{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.15}
.acc-email{font-size:12.5px;color:var(--ink3);word-break:break-all;margin-top:2px}

.acc-nav{display:flex;flex-direction:column;gap:2px}
.acc-nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:500;background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s,color .15s}
.acc-nav-item .ic{color:var(--ink3);transition:color .15s}
.acc-nav-item:hover{background:var(--cream);color:var(--ink)}
.acc-nav-item:hover .ic{color:var(--terra)}
.acc-nav-item.on{background:var(--olive-pale);color:var(--olive-d);font-weight:600}
.acc-nav-item.on .ic{color:var(--olive-d)}
.acc-nav-logout{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.acc-nav-logout button{width:100%}
.acc-nav-item--danger{color:var(--terra)}
.acc-nav-item--danger:hover{background:var(--terra-pale);color:var(--terra-d)}

.acc-main{min-width:0;display:flex;flex-direction:column;gap:22px}
.acc-block{padding:26px}
.acc-block-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.acc-block-head .h-2{margin:0}

/* stat cards (hub top row) */
.acc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:640px){.acc-stats{grid-template-columns:1fr}}
.acc-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.acc-stat-val{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--olive-d);line-height:1}
.acc-stat-lbl{display:block;margin-top:6px;color:var(--ink2);font-size:13.5px;letter-spacing:.02em}

/* order list rows */
.acc-orders{display:flex;flex-direction:column;gap:10px}
.acc-order-row{display:grid;grid-template-columns:1fr auto auto 22px;align-items:center;gap:16px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s,transform .15s}
.acc-order-row:hover{border-color:var(--terra);background:var(--cream)}
.acc-order-row:hover .acc-order-arrow{transform:translateX(2px);color:var(--terra)}
.acc-order-num{font-family:var(--serif);font-size:1.05rem;font-weight:600}
.acc-order-meta{margin-top:3px}
.acc-order-status{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px;white-space:nowrap}
.acc-status--pending{background:var(--st-pending-bg);color:var(--st-pending-fg)}
.acc-status--on_hold{background:var(--st-hold-bg);color:var(--st-hold-fg)}
.acc-status--processing{background:var(--st-proc-bg);color:var(--st-proc-fg)}
.acc-status--packed{background:var(--st-packed-bg);color:var(--st-packed-fg)}
.acc-status--shipped{background:var(--st-ship-bg);color:var(--st-ship-fg)}
.acc-status--delivered{background:var(--olive-pale);color:var(--olive-d)}
.acc-status--cancelled{background:var(--terra-pale);color:var(--terra-d)}
.acc-status--refunded{background:var(--st-refund-bg);color:var(--st-refund-fg)}
.acc-status--failed{background:var(--st-fail-bg);color:var(--st-fail-fg)}
.acc-order-total{font-family:var(--serif);font-size:1.15rem;color:var(--olive-d);white-space:nowrap}
.acc-order-arrow{color:var(--ink3);transition:transform .15s,color .15s}
@media (max-width:640px){
  .acc-order-row{grid-template-columns:1fr auto;grid-template-areas:"info total" "status arrow"}
  .acc-order-row>div:first-child{grid-area:info}
  .acc-order-status{grid-area:status;justify-self:start}
  .acc-order-total{grid-area:total;text-align:right}
  .acc-order-arrow{grid-area:arrow;justify-self:end}
}
/* each list row + its reorder action grouped into one card */
.acc-order-card{display:flex;flex-direction:column;gap:6px}
.acc-order-reorder{display:flex;justify-content:flex-end;margin:0}

/* order detail — terminal state (cancelled/refunded/failed) instead of steps */
.acc-terminal{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:var(--cream);border:1px solid var(--line)}
.acc-terminal-ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--paper);color:var(--ink2)}
.acc-terminal strong{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.acc-terminal .small{color:var(--ink2);margin-top:2px}
.acc-terminal--cancelled{background:var(--terra-pale);border-color:transparent}
.acc-terminal--cancelled .acc-terminal-ic{background:var(--surface-hi);color:var(--terra-d)}
.acc-terminal--failed{background:var(--st-fail-bg);border-color:transparent}
.acc-terminal--failed .acc-terminal-ic{background:var(--surface-hi);color:var(--st-fail-fg)}
.acc-terminal--refunded{background:var(--st-refund-bg);border-color:transparent}
.acc-terminal--refunded .acc-terminal-ic{background:var(--surface-hi);color:var(--st-refund-fg)}

/* order detail — bank-transfer instructions (on_hold + bank) */
.acc-bank-dl{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media (max-width:560px){.acc-bank-dl{grid-template-columns:1fr}}
.acc-bank-dl>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.acc-bank-dl dt{color:var(--ink2);font-size:13.5px}
.acc-bank-dl dd{font-weight:600;color:var(--ink);text-align:right}
.acc-bank-iban{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}

/* order detail — action bar (back / reorder / cancel) */
.acc-detail-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:14px}
.acc-detail-actions form{margin:0}
.acc-btn-danger{color:var(--terra);border-color:var(--terra)}
.acc-btn-danger:hover{background:var(--terra-pale);color:var(--terra-d)}

/* empty state (no orders yet) */
.acc-empty{text-align:center;padding:40px 20px}
.acc-empty-art{width:150px;margin:0 auto 14px}
.acc-empty h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin-bottom:8px}
.acc-empty .lead{max-width:420px;margin:0 auto 20px}

/* hub shortcut cards */
.acc-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.acc-shortcut{display:flex;align-items:center;gap:14px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.acc-shortcut:hover{border-color:var(--terra);transform:translateY(-2px)}
.acc-shortcut>div{flex:1;min-width:0}
.acc-shortcut strong{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:600;margin-bottom:2px}
.acc-shortcut .small{color:var(--ink2)}
.acc-shortcut-ic{width:44px;height:44px;border-radius:12px;background:var(--olive-pale);color:var(--olive-d);display:grid;place-items:center;flex:none}
.acc-shortcut-ic .ic{width:22px;height:22px}
.acc-shortcut .ic:last-child{color:var(--ink3);flex:none}

/* order detail — timeline */
.acc-timeline{display:flex;justify-content:space-between;list-style:none;padding:8px 0;gap:6px;position:relative}
.acc-timeline::before{content:"";position:absolute;top:29px;left:26px;right:26px;height:2px;background:var(--line);z-index:0}
.acc-tl-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;text-align:center}
.acc-tl-dot{width:42px;height:42px;border-radius:50%;background:var(--paper);border:2px solid var(--line);color:var(--ink3);display:grid;place-items:center;transition:all .2s}
.acc-tl-step.done .acc-tl-dot{background:var(--olive);border-color:var(--olive);color:var(--cream)}
.acc-tl-step.current .acc-tl-dot{box-shadow:0 0 0 6px rgba(var(--olive-rgb),.15)}
.acc-tl-lbl{font-size:12.5px;color:var(--ink2);font-weight:500}
.acc-tl-step.done .acc-tl-lbl{color:var(--ink)}
@media (max-width:640px){
  .acc-timeline{flex-direction:column;gap:14px}
  .acc-timeline::before{display:none}
  .acc-tl-step{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px}
}

/* order detail — items list */
.acc-items{display:flex;flex-direction:column;gap:12px}
.acc-item-row{display:grid;grid-template-columns:64px 1fr auto auto;align-items:center;gap:14px;padding:12px;background:var(--cream);border-radius:12px}
.acc-item-thumb{width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--paper);display:grid;place-items:center;flex:none}
.acc-item-thumb img{width:100%;height:100%;object-fit:cover}
.acc-item-thumb--ph .ic{width:32px;height:32px;color:var(--ink3)}
.acc-item-info{min-width:0}
.acc-item-title{display:block;font-weight:500;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-item-title:hover{color:var(--terra)}
.acc-item-qty{color:var(--ink3);font-weight:500;white-space:nowrap}
.acc-item-total{font-family:var(--serif);font-size:1.05rem;color:var(--olive-d);white-space:nowrap}

/* 2-col grid (shipping + totals) */
.acc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.acc-grid-2{grid-template-columns:1fr}}
.acc-grid-2 .acc-block p{margin-bottom:8px;line-height:1.6}
.acc-note{background:var(--cream);padding:8px 12px;border-radius:8px;margin-top:8px !important}
.acc-gift{margin-top:14px;padding:14px;background:var(--terra-pale);border-radius:12px}
.acc-gift .eyebrow{margin-bottom:6px}

/* totals table */
.acc-totals{width:100%;border-collapse:collapse;margin-top:8px}
.acc-totals td{padding:8px 0;color:var(--ink2);font-size:14.5px;border-bottom:1px dashed var(--line)}
.acc-totals td:last-child{text-align:right;color:var(--ink);font-weight:500}
.acc-totals .acc-tot td{font-family:var(--serif);font-size:1.2rem;color:var(--olive-d);font-weight:600;border-bottom:0;padding-top:12px}

/* details page — info panel */
.acc-danger{background:var(--cream);border-color:var(--line2)}
.acc-danger h3{font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:8px;color:var(--ink)}

/* pagination */
.pag{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.pag-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:500;background:var(--paper);transition:border-color .15s,color .15s}
.pag-btn:hover{border-color:var(--terra);color:var(--terra)}
.pag-info{color:var(--ink3);font-size:13.5px}

/* logged-in indicator on header user icon */
.iconbtn--user{position:relative}
/* ⚠️ `--ok` ΚΑΙ ΟΧΙ `--olive`. Στο «Βραδινό» το κύριο χρώμα είναι
   ανθρακί — δηλαδή σχεδόν το φόντο της κεφαλίδας — και η τελίτσα
   εξαφανιζόταν, αφήνοντας μόνο τον λευκό της δακτύλιο. Το `--ok` λέει
   ούτως ή άλλως το σωστό πράγμα («ενεργός») και είναι πράσινο σε κάθε
   παλέτα· στην τωρινή είναι οπτικά ταυτόσημο με το παλιό λαδί. */
.iconbtn--user .dot--on{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--ok);border:2px solid var(--paper);pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   MOBILE POLISH (2026-07-24)
   Fixes discovered via 390px audit:
   - heading overflow ("Μικροί πα…", "Γίνετε μέλος της Γαστρογον…")
   - cramped product cards (2-col at 390px = unreadable ~170px cards)
   - category tiles too tight
   - cookie bar under tabbar
   - form fields staying side-by-side
   - touch targets under 44×44
   ═══════════════════════════════════════════════════════════ */

/* 1. Never let a heading blow past its container. Greek hyphenation
      dictionaries are weak → use overflow-wrap, not hyphens:auto. */
h1, h2, h3, .h-1, .h-2, .hero-copy h2, .acc-page-head .h-1 {
  overflow-wrap: break-word;
  word-break: normal;
}

/* 2. Small phones (<420px): extra tuning ON TOP of the 760px block */
@media (max-width: 420px) {
  /* Shrink display sizes so long Greek words fit */
  .h-1                    { font-size: clamp(1.55rem, 6.6vw, 2rem); line-height: 1.15; }
  .h-2                    { font-size: clamp(1.25rem, 5.4vw, 1.65rem); line-height: 1.2; }
  .hero-copy h2           { font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.15; }
  .acc-page-head .h-1     { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.2; }

  /* Product grid: single column at this width. Cards squeezed to ~170px
     become unreadable (title truncates, price collides with add-btn). */
  .grid-p { grid-template-columns: 1fr; gap: 14px; }
  /* But keep shop 2-col — catalog scanability matters more than card size */
  .shop-layout .grid-p { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Related products carousel on PDP: single column also feels more premium */
  .pdp-related .grid-p { grid-template-columns: 1fr; }

  /* Category tiles: 2 across (were 3 in the 1024 block) */
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* USP: tighter padding + smaller text so labels don't clip */
  .usp-item     { padding: 14px 12px; gap: 10px; }
  .usp-item b   { font-size: 13px; }
  .usp-item span{ font-size: 11.5px; line-height: 1.35; }
  .usp-item .ic { width: 28px; height: 28px; }

  /* Wrap gutter: 16 → 12px per side to reclaim content width */
  .wrap { width: calc(100% - 24px); }

  /* Force 1-col for ALL form rows at this width (belt+braces vs 760 rule) */
  .frow, .frow--31 { grid-template-columns: 1fr !important; gap: 4px !important; }

  /* Account section: reduce padding, cards were too airy for the viewport */
  .acc-panel      { padding: 22px 20px; }
  .acc-block      { padding: 20px 18px; }
  .acc-shell      { padding: 4px 0 40px; gap: 16px; }
  .acc-side       { padding: 16px; }
  .acc-side-user  { padding-bottom: 12px; margin-bottom: 10px; }
  .acc-stats      { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .acc-stat       { padding: 14px 12px; }
  .acc-stat-val   { font-size: 1.5rem; }
  .acc-stat-lbl   { font-size: 11.5px; }
  .acc-shortcut   { padding: 14px 16px; gap: 12px; }
  .acc-shortcut-ic{ width: 38px; height: 38px; }

  /* Order status pill in acc-order-row: shrink on tight screens */
  .acc-order-status { font-size: 10.5px; padding: 5px 9px; }
  .acc-order-total  { font-size: 1.02rem; }
}

/* 3. Cookie bar must not sit under the tabbar. Tabbar rendered height is
      ~76px + safe-area-inset. Add 12px extra headroom (was 76 → 88). */
@media (max-width: 760px) {
  .cookiebar { bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* 4. Touch targets ≥44×44 per Apple/Google HIG. */
@media (max-width: 760px) {
  .iconbtn         { min-width: 44px; min-height: 44px; }
  .qty > button    { min-width: 44px; min-height: 44px; }
  /* 2026-09-24 «ο κύκλος που περιέχει την καρδούλα να μικρύνει»: 32px ορατός
     κύκλος — τα 44px του στόχου αφής τα δίνει το αόρατο ::before στο μπλοκ
     «2026-09-24 CATALOG». */
  .pcard-fav       { width: 32px; height: 32px; }
  .addbtn          { min-width: 44px; min-height: 44px; }
  .macc-top        { min-height: 52px; }
  /* Chevrons/action buttons inside acc-order-row */
  .acc-order-row   { min-height: 68px; }
  /* Cart/checkout stepper controls */
  .qtybtn, .cline-x{ min-width: 40px; min-height: 40px; }
}

/* 5. Bottom tabbar: the 5 labels (Αρχική / Shop / Εύρεση / Αγαπημένα /
      Καλάθι) were pushing the last tab off-screen. "Αγαπημένα" is 9 chars
      and at 10px + .06em letter-spacing it exceeds the 78px cell. Shrink
      font + let cells flex-shrink to 0. */
@media (max-width: 760px) {
  .tabbar          { padding-left: 0; padding-right: 0; }
  .tabbar-in       { max-width: 100vw; }
  .tab             { min-width: 0; padding: 7px 1px; font-size: 9.5px; letter-spacing: .02em; }
}
@media (max-width: 400px) {
  .tab             { font-size: 9px; letter-spacing: 0; padding: 7px 0; }
  .tab .ic         { width: 20px; height: 20px; }
}

/* 6. Long section-head-row action links ("Όλα τα προϊόντα →") were
      breaking layout in mobile. In the 760 media block the head already
      switches to column; we just need to keep the action from being cut
      off and give it a bit of breathing room. */
@media (max-width: 760px) {
  .sect-head--row       { align-items: stretch !important; }
  .sect-head--row > div { max-width: 100%; }
  .sect-head--row .btn-line { align-self: flex-start; }
}

/* 7. Carousel bleeds: cards were touching the viewport edge and looked
      cropped. Add inline padding so the first/last card sit off the edge,
      and give the last card a scroll-snap right anchor. */
@media (max-width: 760px) {
  .carousel .car-track {
    padding-inline: 16px;
    margin-inline: -16px;
    scroll-padding-inline: 16px;
  }
  .car-track > *:last-child { scroll-snap-align: end; }
  /* Region-pills marquee already has overflow:hidden on parent, but ensure
     it doesn't leak beyond the viewport by clamping. */
  .regions { max-width: 100vw; }
}

/* 8. Extra overflow safety on all direct children of wrap — any single
      wide element (long producer name, wide image) will not push the whole
      section past the viewport. */
@media (max-width: 760px) {
  .wrap > * { min-width: 0; max-width: 100%; }
  /* Product card names sometimes stretch layout with long titles */
  .pcard-name { overflow-wrap: break-word; word-break: normal; }
  /* Order rows / rows in Account section */
  .acc-order-num, .acc-order-meta { overflow-wrap: anywhere; }
}

/* ============================================================
   FEEDBACK PASS — «ΣΕΛΙΔΑ ΚΑΤΗΓΟΡΙΑΣ ΤΥΡΟΚΟΜΙΚΩΝ.docx» (2026-08-06)
   Client review of the category page, the product card and pagination.
   ============================================================ */

/* «Μικραίνει κατά πολύ το header σε ύψος» — scoped to a modifier so the 11
   other pages that share .page-head keep their original proportions. */
.page-head--tight{padding:clamp(14px,1.8vw,22px) 0}
.page-head--tight .crumbs{margin-bottom:5px}
.page-head--tight h1{margin-bottom:2px;font-size:clamp(1.5rem,2.5vw,2rem)}
.page-head--tight .lead{font-size:.98rem;line-height:1.55}
.page-head--tight .lead p{margin:0}

/* «Το "ΝΕΟ" … κάντε το πιο διακριτικό. Όπως είναι η καρδούλα» — outline badge
   instead of a solid terracotta block. */
.badge--new{background:transparent;border:1px solid var(--terra);color:var(--terra-d)}

/* «Η καρδούλα το κεραμιδί χρώμα. Ίσως και το περίγραμμα του κύκλου.»
   Client decision 2026-08-06: terracotta wins over the homepage doc's green. */
.pcard-fav{border:1px solid var(--terra);color:var(--terra)}
@media (hover:hover){.pcard-fav:hover{color:var(--terra-d);border-color:var(--terra-d)}}
.pcard-fav.on{color:var(--terra)}
.pcard-fav.on .ic{fill:var(--terra)}

/* «ίσως να μεγαλώσει λίγο η τσάντα γιατί σε σχέση με τον κύκλο είναι μικρή» */
.addbtn .ic{width:21px;height:21px}

/* «Το εξαντλημένο να μπει ίσιο και σκούρο πράσινο. Ίσως … και πιο αχνή η φώτο» */
.oos-pill{background:var(--olive-d);transform:none;letter-spacing:.12em}
.pcard.is-oos .pcard-media img{opacity:.42;filter:saturate(.55)}

/* «Η γρήγορη ματιά θεωρώ λάθος το σημείο κάτω. Μπερδεύει πολύ με την τιμή …
   ή το γρήγορη ματιά λίγο πιο κάτω απ τη φώτο και πιο αχνό πλαίσιο σαν
   ημιδιαφανή λωρίδα;» — client picked the strip. It slides up from the bottom
   edge of the photo on hover; .pcard-top is its positioning context. */
.pcard-top{position:relative}
.grid-p.as-list .pcard-top{width:230px;flex:none}
.grid-p.as-list .pcard-media{width:100%}
.pcard-quick--strip{
  left:0;right:0;bottom:0;width:100%;transform:translateY(100%);
  padding:9px 0;border-radius:0;background:rgba(var(--paper-rgb),.84);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:none;border-top:1px solid var(--line2);justify-content:center;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink2);
}
.pcard:hover .pcard-quick--strip,.pcard-quick--strip:focus-visible{transform:translateY(0)}
.pcard-quick--strip:hover{background:var(--olive);color:var(--paper)}

/* «μικρότεροι οι αριθμοί και ο κύκλος και να φαίνονται λίγο περισσότερες
   σελίδες» — the wider window itself lives in views.PAGE_WINDOW. */
.pagination{gap:5px;margin-top:36px}
.pagination a,.pagination button{min-width:34px;height:34px;font-size:12.5px;padding:0 6px}
.pagination .pag-gap{min-width:16px}

@media (max-width:760px){
  .grid-p.as-list .pcard-top{width:100%}
  .pagination a,.pagination button{min-width:31px;height:31px;font-size:12px;padding:0 4px}
  /* Two-column mobile grid is too narrow for «13,50 €  / 600γρ» on one line —
     the euro sign was wrapping away from its amount. Drop the unit to its own
     line instead of breaking the price itself. */
  .pcard-foot .price{flex-wrap:wrap;row-gap:0;column-gap:6px;font-size:1.08rem}
  .pcard-foot .price>span:not(.unit):not(.was):not(.fromlbl){white-space:nowrap}
  .pcard-foot .price .unit{flex-basis:100%;margin-top:-2px}
}

/* Quickview / PDP size buttons — Word §«Pop up προϊόντος».
   «οι τιμές είναι πολύ αχνές. Το γκρι δεν φαίνεται καλά … Ας γίνει πράσινο»  */
.vbtn span{color:var(--olive-d);font-weight:600;font-size:13.5px}
/* «όταν είναι εξαντλημένο ένα βάρος να μη μπαίνει πλάγιο και αντί για διαγραφή
   ας μπαίνει εξαντλημένο διακριτικά» */
.vbtn.oos{opacity:.62;text-decoration:none;font-style:normal}
.vbtn .vbtn-flag{color:var(--ink3);font-weight:500;font-size:11px;letter-spacing:.04em;font-family:var(--sans)}
/* «ίσως η επιλεγμένη παραλλαγή να είναι λίγο πιο έντονη;» */
.vbtn.on{border-color:var(--olive-d);background:var(--olive-pale);box-shadow:0 0 0 3px rgba(var(--olive-rgb),.22)}
.vbtn.on b{color:var(--olive-d)}

/* Cart — Word §«Πάμε στο καλάθι». «Το υποσύνολο λίγο μεγαλύτερο.» */
.sum-row.sub{font-size:15.5px}
.sum-row.sub b{font-family:var(--serif);font-size:1.22rem;font-weight:600}
/* The bar counts towards the 50€ minimum before it mentions free shipping. */
.shipbar--min p b{color:var(--terra-d)}
.shipbar--min .fill{background:linear-gradient(90deg,var(--terra-pale),var(--terra))}
/* «Αν δεν έχει συμπληρώσει τα 50ε να μη τον αφήνει να πάει στο ταμείο» —
   rendered as an inert <span>, so it needs the disabled look explicitly. */
.btn.is-disabled{background:var(--cream2);color:var(--ink3);cursor:not-allowed;pointer-events:none;box-shadow:none}

/* Search bar — Word §«ΜΠΑΡΑ ΑΝΑΖΗΤΗΣΗΣ».
   «Μικρότερα τα αχνά γράμματα» — the faint placeholder only; what the customer
   types keeps the big serif size. */
.search-box input::placeholder{font-size:.58em;font-family:var(--sans);color:var(--ink3);opacity:1;letter-spacing:.01em}
/* «Bold τα γράμματα που είναι ίδια με την αναζήτηση».
   The ported `.sugg-item b` is display:block (it used to be the whole product
   name). The highlighter now emits <b> around a FRAGMENT of that name, so it
   must go back to inline or every match starts its own line. */
.sugg-item .nm{font-family:var(--serif);font-weight:500;font-size:1.02rem;display:block;line-height:1.2;color:var(--ink)}
.sugg-item .nm b{display:inline;font-family:inherit;font-size:inherit;font-weight:700;color:var(--olive-d)}
/* The suggestion box starts empty; without this it still reserves 24px of
   padding under the input the moment the search panel opens. */
.sugg{padding:0}
.sugg:not(:empty){padding:18px 0 6px}

/* Checkout — Word §CHECKOUT. «Τεράστιο banner "ΤΑΜΕΙΟ". Να φύγει γενικά.
   Κατευθείαν το progress bar…» + «Το progress bar λίγο πιο πάνω». */
.co-wrap{padding:clamp(14px,1.8vw,24px) 0 80px}
.co-crumbs{margin-bottom:14px}
.steps{margin-bottom:clamp(22px,3vw,34px)}
/* «Στην περίληψη της παραγγελίας να φαίνονται τεμάχια. Πχ 3 προϊόντα» */
.co-count{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-left:8px;white-space:nowrap}
/* «Στην σύνοψη … Δεν φαίνεται ολόκληρο» — the quantity badge sits at top:-6px
   and the thumb's overflow:hidden was slicing it off. The <img> keeps its own
   border-radius, so clipping the parent was never needed. */
.co-item .thumb{overflow:visible}
/* «Το σηματάκι με την ασφαλή ολοκλήρωση να πάει στην ίδια σειρά.» */
.co-secure,.co-dispatch{display:flex;align-items:flex-start;gap:7px;margin-top:10px;line-height:1.45}
.co-secure .ic,.co-dispatch .ic{flex:none;margin-top:2px}
.co-dispatch{color:var(--ink2);border-top:1px dashed var(--line2);padding-top:10px}
/* «Το κουτάκι αποδέχομαι τους όρους είναι τεράστιο.»
   Root cause: an .optrow inside a .field inherits the TEXT-INPUT rules —
   `.field input{min-height:50px;padding:12px 16px}` blew the checkbox up to a
   50px block, and `.field label{text-transform:uppercase;font-size:12px}`
   shouted the sentence next to it. Reset both for any optrow in a field. */
.field > .optrow{display:flex;margin-bottom:0;font-size:13.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.field .optrow input{min-height:0;padding:0;border-radius:5px}
.optrow--terms{padding:6px 2px;align-items:flex-start;user-select:text}
.optrow--terms input{width:17px;height:17px;margin-top:2px}
.optrow--terms input:checked::after{left:4.5px;top:1.5px;width:4px;height:8px}

/* `hidden` must actually hide. Several author rules set display (.sum-row is
   display:flex) and author styles beat the UA's [hidden]{display:none}, so a
   hidden row stayed visible — that is how a «0,00 €» COD line survived. */
[hidden]{display:none !important}
/* «μόνο το οδηγίες τραπ.καταθ στο ίδιο ύψος με το εικονίδιο» */
.bankbox h3{display:flex;align-items:center;gap:9px}

/* Confirmation meta lines: `img,svg{display:block}` (line 58) pushes each icon
   onto its own line, so the address and payment rows read as four lines rather
   than two. Same one-line treatment the client asked for on the bank heading. */
.confirm-sum p.small{display:grid;grid-template-columns:auto 1fr;gap:5px 8px;align-items:center;text-align:left}
.confirm-sum p.small br{display:none}

/* Specialised cheese / charcuterie facets — Word §«ΦΙΛΤΡΑ ΑΡΙΣΤΕΡΑ».
   Reuses .fcat's row layout; .fattr adds the selected state and the tick. */
.fattr{gap:7px}
.fattr.on{background:var(--olive-pale);color:var(--olive-d);font-weight:600}
.fattr.on .ic{color:var(--olive-d)}
.fattr .n{margin-left:auto;font-size:11.5px;color:var(--ink3);background:var(--cream);border-radius:999px;padding:1px 8px;font-weight:600}
.fattr.on .n{background:var(--paper);color:var(--olive-d)}

/* ── PDP feedback round — Word §«ΠΑΜΕ ΣΤΗΝ ΣΕΛΙΔΑ ΕΝΟΣ ΠΡΟΪΟΝΤΟΣ» ──────────
   «Η φωτογραφία να μικρύνει λίγο και να μεγαλώσει η δεξιά στήλη.» The base
   rule is 1.02fr .98fr; flipping the ratio is what moves the eye off the
   photo. The mobile media query further down still collapses both to 1fr. */
.pdp-grid{grid-template-columns:.88fr 1.12fr}

/* The characteristics row. `<i>` holds the group name (Γάλα, Υφή…) as a
   caption above the value, so the row reads without needing the icon to be
   self-explanatory — «Σκληρό» alone would be ambiguous. */
.pdp-attrs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.pdp-attrs li{display:flex;align-items:center;gap:8px;background:var(--cream);border:1px solid var(--line2);border-radius:12px;padding:7px 12px}
.pdp-attrs .ic{color:var(--olive);flex:none}
.pdp-attrs span{display:flex;flex-direction:column;line-height:1.25;font-size:13.5px;font-weight:600;color:var(--ink)}
.pdp-attrs i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink3)}

/* «μία κάθετος δίπλα στην τιμή της τελικής επιλογής» — a border, not a «|»
   glyph, so it scales with the price and never wraps onto its own line. */
.pdp-price .vsep{border-left:1px solid var(--line);padding-left:12px;margin-left:2px;font-size:14.5px;font-weight:600;color:var(--ink2);align-self:center}

/* «Από κάτω η διαθεσιμότητα με λίγο κενό γιατί τώρα είναι πολύ μπουκωμένο» */
#pdpStock{margin:18px 0 20px}

/* «Ένας μικρός πίνακας διατροφικός» — deliberately tighter than .ntable, which
   is the full table this one summarises. */
.pdp-nutri{width:100%;border-collapse:collapse;font-size:12.8px;margin:18px 0 20px;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.pdp-nutri caption{caption-side:top;text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink3);padding:0 0 7px}
.pdp-nutri td{padding:6px 12px;border-bottom:1px dashed var(--line2);color:var(--ink2)}
.pdp-nutri tr:last-child td{border-bottom:0}
.pdp-nutri td:last-child{text-align:right;font-weight:600;color:var(--ink)}

/* «Να προστεθεί κοινοποίηση του προϊόντος.» */
.pdp-share{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 22px}
.pdp-share .share-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink3);margin-right:2px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink2);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.share-btn:hover{color:var(--terra);border-color:var(--terra);background:var(--cream)}
.share-btn.copied{color:var(--ok);border-color:var(--ok)}

/* Re-assert the stacked layout. A media query carries no extra specificity, so
   the `.pdp-grid` ratio above — written later in the file than the original
   `max-width:1024px` block — would otherwise win on phones and leave the page
   two-column at 380px wide. Guarded by
   test_the_new_ratio_does_not_leak_into_the_stacked_layout. */
@media (max-width:1024px){
  .pdp-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .pdp-attrs{gap:6px}
  .pdp-attrs li{padding:6px 10px}
  .pdp-attrs span{font-size:12.8px}
  #pdpStock{margin:14px 0 16px}
}

/* Back-in-stock envelope — card, PDP and quickview all reuse .addbtn/.btn,
   so the envelope inherits their sizing for free; only the confirm modal is new.
   .modal-card itself carries no padding (#qvModal gets its own from .qv-info),
   so a plain text modal needs to supply it, plus room for the absolute .modal-x. */
.notify-btn.is-waiting{background:var(--olive);color:var(--paper)}
/* Fix round 1 / S2: on the PDP and quickview the waiting state is carried by the
   .notify-label text swap (product.notify.waiting), so the rule above is enough
   there. The card is icon-only, so it needs its OWN signal — .addbtn is a higher
   specificity match and wins over the generic rule above.
   2026-09-24: ο φάκελος που ΠΑΤΙΕΤΑΙ είναι πλέον ο ίδιος περίγραμμα (λαδί, χωρίς
   γέμισμα — «να διαφοροποιείται ότι είναι φάκελος από το καλάθι»), άρα το
   «ήδη δηλωμένο» χρειάζεται ΑΛΛΟ σήμα: τερακότα περίγραμμα και εικονίδιο, όπως η
   καρδούλα δίπλα του. Ο φάκελος-προς-πάτημα είναι στο μπλοκ «2026-09-24 CATALOG». */
.addbtn.notify-btn.is-waiting{background:transparent;color:var(--terra);border:1px solid var(--terra)}
@media (hover:hover){.addbtn.notify-btn.is-waiting:hover{background:transparent;color:var(--terra-d);border-color:var(--terra-d)}}
.notify-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.modal-card--sm{max-width:420px;padding:36px 32px 30px}
.modal-card--sm h3{display:flex;align-items:center;gap:10px;font-size:1.3rem;padding-right:30px}
.modal-card--sm p{margin-top:10px;color:var(--ink2);font-size:14px;line-height:1.55}

/* ─── «Ελάτε να τα πούμε από κοντά» — στοιχεία καταστήματος («Ποιοι είμαστε»)
   Τέσσερις κάρτες: διεύθυνση, ωράριο, τηλέφωνο, e-mail. Οι τιμές διαβάζονται
   από τις Ρυθμίσεις και τον πίνακα ωραρίου — καμία δεν είναι γραμμένη εδώ.
   Δικές τους κλάσεις και όχι το `.cinfo` της επικοινωνίας: το `.cinfo` είναι
   αριστερά-στοιχισμένη λίστα μιας στήλης, ενώ αυτό είναι κεντραρισμένο
   πλέγμα — και μια κοινή κλάση θα σήμαινε ότι κάθε μελλοντική αλλαγή στην
   επικοινωνία ξαναβάφει σιωπηλά και αυτή τη σελίδα. */
.visit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;max-width:940px;margin:0 auto}
.visit-card{background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-lg);padding:20px 18px}
.visit-card .ic{width:22px;height:22px;color:var(--terra);margin-bottom:10px}
.visit-card b{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.visit-card p,.visit-card a{font-size:14.5px;color:var(--ink2);line-height:1.6}
.visit-card a:hover{color:var(--terra);text-decoration:underline}
.visit-hours{font-size:13px;color:var(--ink2)}
.visit-hours li{display:flex;justify-content:space-between;gap:10px;margin-bottom:2px}
.visit-hours b{display:inline;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
@media(max-width:900px){.visit-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.visit-grid{grid-template-columns:1fr}}

/* ─── Σελίδα επικοινωνίας — η φόρμα πρώτη, και τα τρία που τη συνοδεύουν ───
   Ο πελάτης ζήτησε «Φόρμα επικοινωνίας (και από κάτω καμία πρόταση,
   κατευθείαν τα στοιχεία)»: η φόρμα ήταν δεξιά και τα στοιχεία αριστερά,
   δηλαδή στο κινητό διάβαζε πρώτα τη διεύθυνση. */
.contact-grid--form-first{grid-template-columns:1.1fr 1fr}

/* Το δόλωμα: εκτός οθόνης, ΟΧΙ display:none. Ένα πεδίο που δεν υπάρχει στο
   layout το προσπερνούν και τα bots· ένα πεδίο που απλώς δεν φαίνεται, όχι. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Το βελάκι του «Θέμα». Ήταν το NATIVE βελάκι του λειτουργικού, που καμία
   γραμμή CSS δεν μπορεί να μετακινήσει — γι' αυτό «λίγο πιο αριστερά» ήταν
   αδύνατο μέχρι τώρα. Με appearance:none γίνεται δικό μας. */
.select-wrap{position:relative;display:block}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
.select-wrap .ic{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink3);pointer-events:none}

/* Η επιβεβαίωση αποστολής. Το `.bigcheck` έχει κανόνα ΜΟΝΟ κάτω από
   `.confirm` (storefront.css:828) — σκέτο του, μένει άστυλο. */
.contact-done{text-align:center;padding:22px 6px 10px}
.contact-done .bigcheck{width:70px;height:70px;border-radius:50%;background:var(--olive-pale);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--olive)}
.contact-done .bigcheck .ic{width:34px;height:34px;stroke-width:2}
.contact-done h3{margin-bottom:8px;font-size:1.35rem}
.contact-done p{color:var(--ink2)}
/* 1024px και όχι 860: η ίδια η .contact-grid καταρρέει σε μία στήλη στα
   1024. Ο τροποποιητής έρχεται αργότερα στο αρχείο με ίδια ειδικότητα, οπότε
   κέρδιζε μέσα σε εκείνο το media query και η σελίδα έμενε δίστηλη από 861 ως
   1024, με δύο στριμωγμένες στήλες. */
@media(max-width:1024px){.contact-grid--form-first{grid-template-columns:1fr}}

/* ─── Αναζήτηση αποστολής (/track/) ────────────────────────
   Η φόρμα αριστερά, το αποτέλεσμα δεξιά — και σε μία στήλη στο κινητό, ώστε
   το αποτέλεσμα να έρχεται ΑΜΕΣΩΣ μετά την υποβολή και όχι κάτω από το κενό.
   Το χρονοδιάγραμμα και το σήμα κατάστασης δανείζονται τις κλάσεις του
   λογαριασμού (.acc-timeline / .acc-order-status), που είναι ήδη στιλιζαρισμένες
   και δείχνουν ακριβώς το ίδιο πράγμα. */
.track-shell{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(18px,3vw,32px);align-items:start}
.track-result__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.track-result__head .eyebrow{margin-bottom:6px}
.track-result__head .h-2{margin-bottom:2px}
.track-code{margin-top:20px;padding:16px 18px;background:var(--cream);border:1px solid var(--line2);border-radius:var(--r-lg)}
.track-code .eyebrow{margin-bottom:6px}
/* display:block γιατί το .eyebrow είναι inline-flex και ο αριθμός
   κολλούσε στο πλάι της ετικέτας αντί να μπει από κάτω. */
.track-code b{display:block;font-size:1.25rem;letter-spacing:.02em;color:var(--ink)}
.track-terminal{margin:6px 0 0;font-size:1.05rem;color:var(--terra)}
@media(max-width:860px){.track-shell{grid-template-columns:1fr}}

/* Η φόρμα στο υποσέλιδο. Δική της γραμμή ΚΑΤΩ από το πλέγμα και όχι πέμπτη
   στήλη: το .ftr-main έχει τέσσερα ρητά κλάσματα (1.5fr 1fr 1fr 1.2fr) και ένα
   πέμπτο παιδί θα κληρονομούσε το 1.5fr και θα τύλιγε ολόκληρο το υποσέλιδο. */
.ftr-track{border-top:1px solid rgba(var(--ftr-fg-rgb),.14);margin-top:clamp(16px,2.2vw,24px);padding-top:clamp(13px,1.8vw,18px)}
.ftr-track h4{margin-bottom:6px}
.ftr-track p{font-size:13px;color:rgba(var(--ftr-fg-rgb),.62);margin-bottom:8px;max-width:52ch}
.ftr-track form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ftr-track input{flex:1 1 200px;min-width:0;padding:9px 13px;border-radius:999px;border:1px solid rgba(var(--ftr-fg-rgb),.22);background:rgba(var(--ftr-fg-rgb),.06);color:var(--paper);font-size:13.5px}
.ftr-track input::placeholder{color:rgba(var(--ftr-fg-rgb),.48)}
.ftr-track input:focus{outline:none;border-color:var(--gold)}
.ftr-track button{flex:0 0 auto}

/* «Αφαίρεση» δίπλα στο ενεργό κουπόνι. Χωρίς αυτό το κουμπί, ένα κουπόνι
   μπαίνει και δεν βγαίνει ποτέ παρά μόνο με υποβολή κενού κωδικού — που
   ζωγράφιζε κόκκινο σφάλμα με animation shake. */
.coupon-drop{background:none;border:none;padding:0;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink3);text-decoration:underline;cursor:pointer}
.coupon-drop:hover{color:var(--terra)}
.coupon-ok{flex-wrap:wrap}
.coupon-ok form{margin-left:auto}
/* Ο κωδικός που έπαψε να ισχύει: ίδια γραμμή με το «Αφαίρεση», ώστε ο πελάτης
   να μπορεί να τον βγάλει από εκεί που διαβάζει γιατί δεν δουλεύει. Ξεχωριστή
   κλάση και όχι κανόνας στο `.coupon-err`, που είναι <p> σε τρία άλλα σημεία. */
.coupon-stale{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.coupon-stale form{margin-left:auto}

/* ═══ Αιτήματα ιδιοκτήτη «ΝΕΕΣ ΣΕ ΑΥΤΑ ΠΟΥ ΚΑΝΑΤΕ.docx» (2026-09-18) ═══ */

/* «Στο footer με το ωράριο να μικρύνει η απόσταση. Δλδ το ωράριο να τελειώνει
   εκεί που τελειώνει και η λέξη "λειτουργίας"». Το <ul> ήταν block και γέμιζε
   όλη τη στήλη των 242px, οπότε το space-between του <li> έσπρωχνε την ώρα στο
   δεξί άκρο ΤΗΣ ΣΤΗΛΗΣ — 68px πιο δεξιά από την επικεφαλίδα. Με max-content
   πιάνει 171px και τελειώνει 3px πριν το «λειτουργίας», σε 1440/900/390.
   ⚠️ ΟΧΙ max-width σε px: το 174 είναι η επικεφαλίδα ΣΕ ΑΥΤΗ τη γραμματοσειρά. */
.ftr-schedule { width: max-content; max-width: 100%; }

/* «Το "εξαντλημένο" στα αλλαντικά γιατί κοκκινίζει η αχνή εικόνα; στα
   τυροκομικά δεν συμβαίνει». Γιατί η φωτογραφία πέφτει στο 42% διαφάνεια, άρα
   το 58% αυτού που βλέπει ο πελάτης είναι το tint της κατηγορίας — και το
   tint-d των Αλλαντικών (#EFD9C8) είναι ροδακινί. Το saturate() του κανόνα από
   κάτω πιάνει ΜΟΝΟ το <img>, όχι το φόντο. 36 από τα 295 εξαντλημένα το είχαν.
   ⚠️ ΜΗΝ πειράξεις το .tint-d: βάφει και τις 72 κάρτες Αλλαντικών. */
.pcard.is-oos .pcard-media { background: var(--wash); }

/* «Στη γρήγορη ματιά, όταν πάει ο κέρσορας πάνω στο "προσθήκη" να αλλάζει
   χρώμα». Υπήρχε hover, αλλά μόνο σκούρυνση olive→olive-d (8 μονάδες
   φωτεινότητας) — σχεδόν αόρατη. Το λεξιλόγιο του site για «προσθήκη στο
   καλάθι» είναι ΗΔΗ olive→τερακότα (.addbtn:hover στην κάρτα), οπότε αυτό.
   Μπαίνει και στο κουμπί της σελίδας προϊόντος: ίδιο κουμπί, ίδια πράξη —
   αλλιώς οι δύο οθόνες θα διαφωνούσαν.
   ⚠️ ΟΧΙ στο .btn:hover: 62 χρήσεις σε 32 templates.
   ⚠️ ΚΑΙ ΤΟ #buybarAdd: είναι το ΤΡΙΤΟ «προσθήκη στο καλάθι» της ΙΔΙΑΣ
   σελίδας προϊόντος (η κολλητή μπάρα). Χωρίς αυτό, κατεβαίνεις λίγο και η
   ίδια πράξη αλλάζει χρώμα σε άλλο. */
#qvAdd:hover,
#buybarAdd:hover,
#pdpAdd:hover { background: var(--terra); border-color: var(--terra); }

/* «Στο Google reviews αστεράκια Google από κάτω». Η βαθμολογία και το πλήθος
   υπήρχαν ως νούμερα και τα γράφει ο ιδιοκτήτης στις Ρυθμίσεις· έλειπαν τα
   αστέρια. Χρώμα --gold της κλειδωμένης παλέτας, ΟΧΙ το amber της Google.
   Το μισό αστέρι είναι δύο στοιβαγμένα με clip στο μπροστινό. */
.gscore-stars { display: inline-flex; gap: 3px; margin: 2px 0 0; line-height: 1; }
/* ⚠️ ΟΧΙ `--line2` (8% μελάνι): στο πραγματικό μέγεθος των 17px το άδειο
   αστέρι ήταν αόρατο πάνω στο --paper, οπότε ένα 4,2 θα διαβαζόταν ως
   τέσσερα αστέρια στα τέσσερα. Δεν φαινόταν μόνο επειδή η τρέχουσα
   βαθμολογία (4,9) γεμίζει και τα πέντε. */
.gscore-stars .ic { width: 17px; height: 17px; color: var(--ink3); opacity: .45; }
.gscore-stars .on .ic { color: var(--gold); opacity: 1; }
.gscore-stars .half { position: relative; display: inline-flex; }
.gscore-stars .half .ic { color: var(--ink3); opacity: .45; }
.gscore-stars .half i { position: absolute; inset: 0; overflow: hidden; display: block; }
.gscore-stars .half i .ic { color: var(--gold); opacity: 1; }

/* «Η γραμμή που "τρέχουν" οι περιοχές … να γράψουμε πολύ διακριτικά από πάνω
   "Στέλνουμε σε κάθε γωνιά της Ελλάδας" και μία μικρή πινέζα δίπλα».
   ΜΕΣΑ στο .regions και έξω από το .regions-track: το track είναι που κινείται,
   και με prefers-reduced-motion μένει παγωμένο στο -50%. */
.regions-cap {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 10px;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink3);
}
.regions-cap .ic { width: 13px; height: 13px; color: var(--terra); }

/* «Στο κατάστημα λέω να μην είναι ανοιχτές οι υποκατηγορίες του παντοπωλείου
   γιατί χάνονται οι αρχικές κατηγορίες». Κλειστές, ανοίγουν στο hover ΚΑΙ στο
   focus-within ώστε να μη μένει έξω το πληκτρολόγιο. Ίδιο idiom με το mobile
   drawer (.macc-sub), που είναι ήδη click-accordion. */
/* ⚠️ ΑΝΟΙΓΟΥΝ ΜΕ ΚΛΙΚ ΣΤΟ ΒΕΛΑΚΙ, ΟΧΙ ΜΕ HOVER (αίτημα ιδιοκτήτριας,
   2026-09-20). Το hover τις άνοιγε τυχαία, απλώς περνώντας ο κέρσορας προς
   την επόμενη κατηγορία.

   ⚠️ ΚΑΙ `visibility`, ΟΧΙ ΜΟΝΟ `max-height`. Το `max-height:0;overflow:hidden`
   κρύβει από το μάτι αλλά **ΟΧΙ ΑΠΟ ΤΟ TAB** — το CLAUDE.md το ονομάζει ρητά.
   Με hover δεν φαινόταν (ο χρήστης πληκτρολογίου άνοιγε με focus-within)· με
   κλικ, οι 12 κρυφοί σύνδεσμοι θα έμεναν για πάντα στη σειρά του Tab. Η
   `visibility` τους βγάζει, και καθυστερεί κατά τη διάρκεια της κίνησης ώστε
   να μη χαθεί το κλείσιμο. */
.mega-sub { max-height: 0; overflow: hidden; visibility: hidden;
            transition: max-height .3s ease, visibility 0s .3s; }
/* 🔴 Η `visibility` ΚΛΗΡΟΝΟΜΕΙΤΑΙ, και ένας απόγονος με `visible` ΑΚΥΡΩΝΕΙ
   τον κρυμμένο πρόγονο. Το `.mega` κλείνει με `opacity:0; visibility:hidden`
   — αλλά ένα `li` που έμεινε `.open` κρατούσε τους 12 συνδέσμους του
   `visibility: visible`, δηλαδή **εστιάσιμους με Tab και hit-testable**: ένα
   αόρατο κουτί πλήρους πλάτους πάνω από κάθε σελίδα, που τρώει κλικ. Ίδια
   οικογένεια με το ξεθωριασμένο toast που έτρωγε το «Αποθήκευση».
   Ο κανόνας από κάτω το ξανακλείνει· η `megaClose()` καθαρίζει και το `.open`
   από τα `li`, ώστε να μη μένει ανοιχτό για το επόμενο άνοιγμα. */
.mega:not(.open) .mega-sub { visibility: hidden; }
.mega-col li.open > .mega-sub { max-height: 640px; visibility: visible;
                                transition: max-height .3s ease, visibility 0s; }
.mega-row { display: flex; align-items: center; gap: 4px; }
.mega-row > a { flex: 1 1 auto; min-width: 0; }
.mega-toggle { flex: none; padding: 6px; border-radius: 8px; color: var(--ink3);
               line-height: 0; transition: background .18s, color .18s; }
.mega-toggle:hover { background: var(--cream); color: var(--ink); }
.mega-toggle .chev { transition: transform .25s; }
.mega-col li.open > .mega-row .chev { transform: rotate(180deg); }
.mega-sub a { font-size: 13px; color: var(--ink3); padding-left: 12px; }
.mega-sub a:hover { color: var(--terra); }
/* Το «Όλο το κατάστημα» μένει ορατό όσο η στήλη ξεχειλίζει. Με ανοιχτές τις
   12 υποκατηγορίες η στήλη ξεπερνάει το `max-height:calc(100vh - 140px)` του
   `.mega` σε οθόνη 768 ύψους, οπότε το κουμπί έβγαινε εκτός κάδρου και
   χρειαζόταν κύλιση — που συχνά διαλύει το ίδιο το hover. */
.mega-col .btn-line { position: sticky; bottom: 0; background: var(--paper);
  padding-block: 8px; }

/* ── Άρθρα (/articles/ και /articles/<slug>/) ───────────────────────────────
   Δύο οθόνες, κανένα νέο χρώμα και καμία νέα γραμματοσειρά: η κάρτα είναι η
   ίδια φόρμα με την κάρτα προϊόντος (χαρτί, λεπτό περίγραμμα, ανασήκωμα στο
   hover) και η σελιδοποίηση είναι ΤΟ ΙΔΙΟ `.pagination` με το κατάστημα.
   Το σώμα του άρθρου δανείζεται τη ΔΙΚΗ του τυπογραφία από την `.lead`
   (επικεφαλίδες, λίστες, σύνδεσμοι — ήδη ορισμένα εκεί) και προσθέτει μόνο
   το πλάτος ανάγνωσης: 74ch, το ίδιο μέτρο με τις νομικές σελίδες. */
.articles-wrap{padding:34px 0 80px}
/* `min(290px,100%)`: με σκέτο `minmax(290px,1fr)` μια οθόνη 320px θα έφτιαχνε
   στήλη 290px μέσα σε περιοχή 272px — δηλαδή οριζόντια μπάρα κύλισης σε όλο
   το κινητό. */
.grid-art{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:26px}
.acard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease}
.acard:hover{transform:translateY(-5px);box-shadow:var(--sh-1)}
/* `min-height:0` ΚΑΙ `flex:none`: η κάρτα είναι `display:flex` σε στήλη, άρα
   το εξώφυλλο είναι flex item — και ένα flex item έχει `min-height:auto`,
   δηλαδή δεν επιτρέπεται να γίνει πιο κοντό από το περιεχόμενό του. Το
   `aspect-ratio` έχανε τη μάχη από το φυσικό ύψος της φωτογραφίας, οπότε κάθε
   κάρτα έπαιρνε το ύψος της δικής της εικόνας και οι τίτλοι της σειράς
   ξεκινούσαν σε τέσσερα διαφορετικά ύψη. Το βρήκε screenshot, όχι test. */
.acard-media{display:block;flex:none;min-height:0;aspect-ratio:16/10;background:var(--cream);overflow:hidden}
.acard-media picture{display:block;width:100%;height:100%}
.acard-media img{width:100%;height:100%;object-fit:cover}
/* Άρθρο χωρίς εξώφυλλο: ΤΟ ΚΟΥΤΙ ΜΕΝΕΙ. Αν φύγει, ο τίτλος της κάρτας
   ξεκινάει 182px πιο ψηλά από των διπλανών της και η σειρά διαβάζεται σαν
   χαλασμένη. Ίδια λύση με την κάρτα προϊόντος (`.pcard.no-img` + `.ph`):
   απαλό φόντο και ένα ξεθωριασμένο σύμβολο, ώστε το κενό να μοιάζει με
   απόφαση και όχι με φωτογραφία που δεν φόρτωσε. */
.acard-media.no-img{background:var(--wash)}
.acard-media .ph{display:grid;place-items:center;width:100%;height:100%}
.acard-media .ph .ic{width:22%;height:22%;color:var(--ink3);opacity:.4}
.acard-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard-date{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.acard-title{font-size:1.24rem;font-weight:600;line-height:1.28}
.acard-title a:hover{color:var(--terra)}
.acard-ex{font-size:14.5px;line-height:1.7;color:var(--ink2)}
/* `margin-top:auto` — ο σύνδεσμος κάθεται στον πάτο της κάρτας, ώστε οι
   κάρτες μιας σειράς να έχουν τα «Διαβάστε το» στην ίδια γραμμή όσο άνισες
   κι αν είναι οι περιλήψεις. */
.acard-more{margin-top:auto;padding-top:8px}

.article-meta{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.article-page{padding:clamp(26px,4vw,48px) 0 80px}
/* ΕΝΑ ΜΕΤΡΟ ΑΝΑΓΝΩΣΗΣ ΓΙΑ ΤΑ ΤΡΙΑ ΚΟΥΤΙΑ, ΚΑΙ ΜΙΑ ΒΑΣΗ ΓΙΑ ΝΑ ΛΥΘΕΙ.
   Το `ch` λύνεται πάνω στο font-size του ΙΔΙΟΥ στοιχείου. Το σώμα φοράει
   `.lead` (1.09rem) ενώ το εξώφυλλο και το «Πίσω στα άρθρα» ήταν στο
   κανονικό μέγεθος — οπότε το ίδιο γραμμένο «74ch» έβγαζε δύο διαφορετικά
   πλάτη και τα δύο κουτιά κάθονταν ~59px πιο στενά από το κείμενο που
   στοιχίζονται να πλαισιώσουν.
   Το `font-size` εδώ ΔΕΝ φαίνεται πουθενά: το εξώφυλλο έχει μόνο εικόνα και
   το «Πίσω στα άρθρα» είναι `.btn-line`, που ορίζει δικό του μέγεθος. Μπαίνει
   ΜΟΝΟ για να λύνεται το `ch` στην ίδια βάση — και μπαίνει και στο ίδιο το
   σώμα (ίδια τιμή με την `.lead`, που είναι πιο πάνω στο αρχείο) ώστε το
   μέτρο να μην κρέμεται σιωπηλά από μια κλάση που μοιράζονται άλλες δέκα
   σελίδες. */
.article-cover,.article-body,.article-back{max-width:74ch;margin-inline:auto;font-size:1.09rem}
.article-cover{margin-bottom:clamp(20px,3vw,32px);border-radius:var(--r-lg);overflow:hidden;background:var(--cream)}
/* Καπάκι ύψους: ένα κατακόρυφο εξώφυλλο έπιανε 620 πίξελ πριν αρχίσει το
   κείμενο, δηλαδή ο αναγνώστης έφτανε στην πρώτη πρόταση μόνο με κύλιση. Το
   `object-fit:cover` κόβει συμμετρικά αντί να παραμορφώσει. */
.article-cover img{width:100%;height:auto;max-height:440px;object-fit:cover}
/* Ο καθολικός `*{margin:0}` της γραμμής 48 σβήνει τα κενά των παραγράφων, και
   το `render_richtext` παράγει ακριβώς `<p>` — χωρίς αυτό το άρθρο βγαίνει
   ένα συμπαγές τούβλο κειμένου. Ίδιος λόγος με το `.legal-body p`. */
.article-body p{margin:0 0 14px}
.article-body strong,.article-body b{color:var(--ink)}
.article-back{margin-top:28px;padding-top:18px;border-top:1px solid var(--line2)}

/* ── Η στήλη «περισσότερα άρθρα» (αίτημα ιδιοκτήτη, 2026-09-20) ──────────
   Η `--side` μπαίνει ΜΟΝΟ όταν υπάρχουν άρθρα να δείξει, οπότε το μονόστηλο
   άρθρο μένει ακριβώς όπως ήταν — το `max-width:74ch;margin-inline:auto` των
   τριών κουτιών κεντράρει τότε μέσα σε ολόκληρο το `.wrap`, όπως πριν.
   Με τη στήλη, κεντράρει μέσα στην ΠΡΩΤΗ κολόνα· το `minmax(0,1fr)` είναι
   απαραίτητο, γιατί το `1fr` σκέτο έχει `min-width:auto` και μια μεγάλη
   εικόνα ή μια μακριά λέξη φουσκώνει τη στήλη αντί να συρρικνωθεί. */
.article-page--side{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(26px,4vw,56px);align-items:start}
/* Κολλάει όσο διαβάζεται το κείμενο. Ίδιο offset με το `.cart-aside`.
   ⚠️ ΜΕ ΚΑΠΑΚΙ ΥΨΟΥΣ, ΓΙΑΤΙ ΤΟ ΠΛΗΘΟΣ ΕΙΝΑΙ ΡΥΘΜΙΣΗ. Στο `.cart-aside` το
   περιεχόμενο είναι δεδομένο· εδώ ο ιδιοκτήτης μπορεί να γράψει 20 στο
   Ρυθμίσεις → Κατάστημα. Μετρήθηκε: με 20 γραμμές η στήλη βγαίνει 1.879px σε
   οθόνη 900px, οπότε **δεν κολλάει ποτέ** (ένα sticky ψηλότερο από το
   viewport δεν έχει πού να πιαστεί) και τραβάει το ύψος του πλέγματος. */
.article-side{position:sticky;top:calc(var(--hdr-h) + 20px);
  max-height:calc(100vh - var(--hdr-h) - 40px);overflow:auto;
  overscroll-behavior:contain}
.article-side-h{font-family:var(--serif);font-weight:600;font-size:1.02rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.side-arts{list-style:none;display:flex;flex-direction:column;gap:14px}
/* Το πλέγμα ζει στον ΣΥΝΔΕΣΜΟ, όχι στο <li>: ένας σύνδεσμος ανά γραμμή
   τυλίγει εικόνα και τίτλο μαζί — δες το σχόλιο στο `article.html`. */
.side-art-link{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;
  align-items:start}
.side-art-media{display:block;width:76px;aspect-ratio:1;border-radius:10px;
  overflow:hidden;background:var(--cream)}
.side-art-media picture{display:block;width:100%;height:100%}
.side-art-media img{width:100%;height:100%;object-fit:cover}
.side-art-media.no-img{background:var(--wash)}
.side-art-media .ph{display:grid;place-items:center;width:100%;height:100%}
.side-art-media .ph .ic{width:34%;height:34%;color:var(--ink3);opacity:.4}
.side-art-title{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.side-art-link:hover .side-art-title{color:var(--terra-d)}
/* ⚠️ `--ink3` ΕΙΝΑΙ 3,07–3,23 ΠΑΝΩ ΣΤΟ `--paper`, ΚΑΙ ΕΙΝΑΙ ΣΚΟΠΙΜΟ.
   Είναι η ίδια τιμή με τη `.acard-date` της λίστας και τη `.article-meta` της
   κεφαλίδας — το repo έχει δεχτεί κατώφλι **3,0** γι' αυτόν ακριβώς τον ρόλο
   («μικρή λεζάντα» στο `test_palettes.PAIRS`). Αλλάζοντάς το εδώ μόνο, η
   ημερομηνία της στήλης θα διέφερε από την ημερομηνία της κάρτας δίπλα της.
   Το `TheSidebarCSSKeepsItsCONTRASTTests` το ελέγχει με το κατώφλι 3,0 και
   λέει γιατί· αν κάποτε αλλάξει, αλλάζουν και οι τρεις μαζί. */
.side-art-date{display:block;margin-top:5px;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.side-arts-all{margin-top:18px}
/* Κάτω από τα 1024 η στήλη πέφτει ΜΕΤΑ το κείμενο και παύει να κολλάει —
   ένα sticky στοιχείο σε μονόστηλη διάταξη κολλάει στο τέλος της σελίδας και
   σκεπάζει το υποσέλιδο. */
@media (max-width:1024px){
  .article-page--side{grid-template-columns:minmax(0,1fr)}
  .article-side{position:static;max-width:74ch;margin-inline:auto;
    padding-top:26px;border-top:1px solid var(--line2);
    /* Χωρίς καπάκι όταν δεν κολλάει: αλλιώς η στήλη αποκτά δικό της scrollbar
       μέσα στη σελίδα, που είναι η χειρότερη εκδοχή σε κινητό. */
    max-height:none;overflow:visible}
}

/* ============================================================
   FEEDBACK PASS — ιδιοκτήτρια, 2026-09-20
   «Να μικρύνει κατά πολύ το footer και το header των κατηγοριών»
   ============================================================ */

/* ΓΙΑΤΙ ΞΕΧΩΡΙΣΤΟΣ ΤΡΟΠΟΠΟΙΗΤΗΣ ΚΑΙ ΟΧΙ ΑΛΛΑΓΗ ΤΟΥ `--tight`:
   το `.page-head--tight` γεννήθηκε από το ΙΔΙΟ αίτημα της ίδιας ανθρώπου
   («μικραίνει κατά πολύ το header σε ύψος», 2026-08-06) αλλά το φοράνε
   έντεκα σελίδες — «Η ιστορία μας», τα άρθρα, η επικοινωνία, όλος ο
   λογαριασμός. Εκεί ο τίτλος ΕΙΝΑΙ το περιεχόμενο της σελίδας· στη σελίδα
   κατηγορίας είναι μια ταμπέλα πάνω από 102 προϊόντα. Σφίγγοντας το
   `--tight` θα μίκραινα δέκα σελίδες που κανείς δεν ζήτησε. */
.page-head--plp{padding:clamp(9px,1.1vw,13px) 0}
.page-head--plp .crumbs{margin-bottom:3px}
.page-head--plp h1{margin-bottom:0;font-size:clamp(1.3rem,2vw,1.6rem)}
.page-head--plp .lead{font-size:.9rem;line-height:1.45;color:var(--ink2)}

/* Το υποσέλιδο μίκρυνε 2026-09-20 (ιδιοκτήτρια: «να μικρύνει κατά πολύ»).
   ⚠️ ΟΙ ΑΛΛΑΓΕΣ ΕΓΙΝΑΝ ΕΠΙΤΟΠΟΥ, ΣΤΟΥΣ ΑΡΧΙΚΟΥΣ ΚΑΝΟΝΕΣ (γραμμές 572-597),
   ΚΑΙ ΟΧΙ ΕΔΩ. Ένας δεύτερος `.ftr-main` στο τέλος του αρχείου έχει ΙΔΙΑ
   ειδικότητα και έρχεται ΑΡΓΟΤΕΡΑ, άρα νικάει και ΜΕΣΑ στο media query των
   1024px — σκότωνε σιωπηλά το `gap:34px` των δύο στηλών (γραμμή 1059).
   Εδώ μένουν μόνο όσα ΔΕΝ είχαν προϋπάρχοντα κανόνα. */
/* ⚠️ ΜΟΝΟ ΤΟ ΥΠΟΣΕΛΙΔΟ. Η αρχική γραφή αντέγραψε ολόκληρη τη λίστα
   επιλογέων της γραμμής 583, που πιάνει και το `.mnav-social` — το συρτάρι
   πλοήγησης του ΚΙΝΗΤΟΥ. Εκεί ο κύκλος μένει 42px, οπότε το μόνο που πετύχαινε
   ήταν μικρότερο σύμβολο μέσα σε αμετάβλητο κουμπί. Το αίτημα ήταν το
   υποσέλιδο. */
.ftr-social .ic{width:19px;height:19px}
/* Οι εννέα σύνδεσμοι της «ΠΛΗΡΟΦΟΡΙΕΣ» είναι η ψηλότερη στήλη, άρα ορίζουν
   μόνοι τους το ύψος όλου του πλέγματος. Κληρονομούσαν το καθολικό
   line-height του σώματος (1.8) — 25 πίξελ ύψος για μια λέξη. */
.ftr-links li{line-height:1.5}

/* Η λωρίδα e-mail του «ειδοποιήστε με», για επισκέπτη χωρίς λογαριασμό
   (ιδιοκτήτρια, 2026-09-20). Ανοίγει μέσα στο ίδιο παράθυρο, δεν είναι
   δεύτερο overlay: το `[hidden]` το κρύβει μέχρι να το ζητήσει ο server. */
.notify-mail{margin-top:16px}
.notify-mail .field{margin-bottom:6px}
.notify-mail .small{margin:0}

/* ── Αεροστεγής συσκευασία (2026-09-20) ───────────────────────────────
   Κουτάκι στη σελίδα προϊόντος, στο γρήγορο παράθυρο και σε κάθε γραμμή
   του καλαθιού. ΜΟΝΟ tokens — μια ωμή τιμή εδώ θα ξεμείνει olive όταν ο
   ιδιοκτήτης αλλάξει παλέτα, και το
   `test_the_only_raw_colours_are_in_the_token_block` το πιάνει αμέσως.

   ⚠️ ΔΙΑΚΡΙΤΙΚΟ (ιδιοκτήτης, 2026-09-24): «να μην κάνει τόσο μπαμ. Ούτε
   άλλο χρώμα το κόστος. Είναι σαν 2ο προϊόν. Άστο να περάσει απαρατήρητο».
   Ήταν κουτί με λαδί φόντο, 15px, και το ποσό κεραμιδί bold — δηλαδή το πιο
   φωτεινό στοιχείο ανάμεσα στα γραμμάρια και το «Προσθήκη». Τώρα: χωρίς
   κουτί, μικρό, και το ποσό ΙΔΙΟ με την ετικέτα, σε όλες τις οθόνες
   (σελίδα, γρήγορη ματιά, γραμμή καλαθιού). Το κουτάκι μένει προεπιλεγμένο
   και αλλάζει (κλειδωμένη απόφαση #4).

   ⚠️ display:flex και ΟΧΙ block: η ετικέτα έχει δύο κομμάτια (κείμενο +
   ποσό) που πρέπει να μένουν στην ίδια γραμμή με το κουτάκι, αλλιώς το
   ποσό πέφτει από κάτω και διαβάζεται σαν ξεχωριστή δήλωση. Και
   `width:fit-content`: μια ετικέτα όσο όλη η στήλη θα τσέκαρε/ξετσέκαρε το
   κουτάκι με πάτημα στο κενό δεξιά της.
   ⚠️ margin-bottom: «Η ποσότητα… να έχει κενό με το αεροστεγής συσκευασία.
   Τώρα είναι κολλητά» — ο επιλογέας ποσότητας είναι αμέσως από κάτω.
   ⚠️ flex-start + margin-top στο κουτάκι: στη γρήγορη ματιά του κινητού
   (~255px) το ποσό αναδιπλώνεται, και ένα κεντραρισμένο κουτάκι έπεφτε
   ΑΝΑΜΕΣΑ στις δύο γραμμές. Τα 2px κεντράρουν τα 15px στην πρώτη γραμμή
   (13,5 × 1,45 ≈ 19,6px), άρα η μονόγραμμη περίπτωση δεν αλλάζει. */
.vacopt{display:flex;align-items:flex-start;gap:8px;cursor:pointer;
  width:fit-content;max-width:100%;
  margin:10px 0 18px;padding:0;
  font-size:13.5px;line-height:1.45;color:var(--ink2)}
.vacopt input{width:15px;height:15px;flex-shrink:0;accent-color:var(--olive);
  cursor:pointer;margin:2px 0 0}
.vacopt span{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.vacopt-fee{color:inherit;font-weight:inherit;white-space:nowrap}
/* Στη γραμμή του καλαθιού: μικρότερο, χωρίς πλαίσιο, κάτω από τον τίτλο.
   Ίδια στοίχιση με το `.vacopt` (2026-09-24): στη στενή γραμμή το ποσό
   αναδιπλώνεται, και το κουτάκι μένει στην πρώτη γραμμή, όχι ανάμεσα. */
.cline-vac{display:flex;align-items:flex-start;gap:7px;cursor:pointer;
  margin-top:7px;font-size:13px;line-height:1.45;color:var(--ink2)}
.cline-vac input{width:15px;height:15px;flex-shrink:0;
  accent-color:var(--olive);cursor:pointer;margin:2px 0 0}
/* 🔴 ΚΑΙ ΤΑ ΤΕΣΣΕΡΑ ΤΑ ΥΠΟΛΟΙΠΑ, ΟΧΙ ΜΟΝΟ ΤΟ ΧΡΩΜΑ. Το `.cline-main b` (γρ. 438)
   είναι ο τίτλος του προϊόντος: `display:block`, serif, 1.03rem. Έχει ΙΔΙΑ
   specificity (0,1,1) με αυτόν — και το `<b>` της γραμμής είναι ΜΕΣΑ στο
   `.cline-main`. Δηλαδή παίρναμε το χρώμα και το βάρος, και κρατούσαμε το
   `display:block` και τα 16,48px.
   ΜΕΤΡΗΜΕΝΟ σε Chromium (1280 και 390px): το ποσό έπεφτε σε ΔΙΚΗ ΤΟΥ
   γραμμή, σε serif κεραμιδί μεγαλύτερο από την ίδια την τιμή του τυριού —
   δύο κεραμιδί ποσά στην ίδια γραμμή καλαθιού. Είναι ΑΚΡΙΒΩΣ η αποτυχία
   που το σχόλιο του `.vacopt` παραπάνω λέει ότι απέφυγε στο PDP.
   Το screenshot το έδειξε και πέρασε για «αλλαγή γραμμής».
   2026-09-24: χρώμα και βάρος `inherit` — το ποσό είναι ίδιο με την ετικέτα,
   όπως στο `.vacopt-fee` (ιδιοκτήτης: «ούτε άλλο χρώμα το κόστος»). Το
   `inherit` ΠΡΕΠΕΙ να γράφεται ρητά: χωρίς αυτό νικάει το 600 του
   `.cline-main b`, όχι η ετικέτα. Και `nowrap`: το «+0,35 € / τεμάχιο»
   έσπαγε ΜΕΤΑ το «/» και το «τεμάχιο» έμενε μόνο του στη δεύτερη γραμμή. */
.cline-vac b{display:inline;font-family:inherit;font-size:inherit;
  line-height:inherit;color:inherit;font-weight:inherit;white-space:nowrap}

/* ===== 2026-09-24 PDP ===== */
/* Οι δύο ομάδες πτυσσόμενων της σελίδας προϊόντος («Περιγραφή» και
   «Αποστολές, Πληρωμές & Επιστροφές» + «Συστατικά»). Ήταν μία ομάδα κάτω από
   την κοινοποίηση· η νέα σειρά του ιδιοκτήτη τις χωρίζει με τον πίνακα
   διατροφής και το κουτί των μεταφορικών ανάμεσα, οπότε χρειάζονται δικό
   τους αέρα πάνω και κάτω. Δική τους κλάση και ΟΧΙ `.acc`, που τη
   χρησιμοποιεί και το /shipping/. */
.pdp-acc{margin:18px 0 22px}
/* Το βέλος του «Πλήρης περιγραφή προϊόντος» δεν συρρικνώνεται όταν το
   κείμενο αναδιπλώνεται σε στενή οθόνη — μένει δίπλα στο κείμενο. */
.qv-full .ic{flex:none}

/* «Όλα αυτά να αναπνέουν. Μην είναι κολλημένα το ένα κάτω απ το άλλο»
   (ιδιοκτήτης, 2026-09-24) — ΜΟΝΟ στο κινητό, όπου τα στοιχεία στοιβάζονται:
   τίτλος → σύντομη περιγραφή → χαρακτηριστικά → παραγωγός → τιμή → γραμμάρια
   → διαθεσιμότητα → αεροστεγής → ποσότητα/προσθήκη. Το desktop μένει ως
   είχε. Ειδικότητα .pdp-info + κλάση, ώστε να νικάει και τα μπλοκ ≤600/≤640
   πιο πάνω ανεξάρτητα από τη σειρά. */
@media (max-width:760px){
  .pdp-info h1{margin-bottom:14px}
  .pdp-info .pdp-short{margin-bottom:22px}
  .pdp-info .pdp-attrs{margin-bottom:22px}
  .pdp-info .pdp-sub{margin-bottom:22px}
  .pdp-info .pdp-price{margin-bottom:16px}
  .pdp-info .variants{margin-bottom:26px}
  .pdp-info #pdpStock{margin:4px 0 22px}
  .pdp-info .vacopt{margin:0 0 22px}
}

/* ===== 2026-09-24 CATALOG ===== */
/* Κατηγορία, κάρτα προϊόντος, φίλτρα, φάκελος, παράθυρο ειδοποίησης
   («Αλλαγές για mobile και desktop», ιδιοκτήτης 2026-09-24). */

/* Το περίγραμμα της ΦΩΤΟΓΡΑΦΙΑΣ. Box-shadow με spread και όχι border: ακολουθεί
   το καμπυλωτό κάτω μέρος σε σταθερό πάχος (ένα border-bottom θα λέπταινε ως το
   μηδέν πάνω στην καμπύλη), και πάνω/αριστερά/δεξιά το κόβει το overflow:hidden
   της κάρτας — εκεί το περίγραμμα είναι ήδη της ίδιας της κάρτας, οπότε δεν
   βγαίνει διπλή γραμμή. */
.pcard-media{box-shadow:0 0 0 1px var(--olive)}

/* Ο φάκελος «ειδοποιήστε με» στην κάρτα: διάφανος με λαδί περίγραμμα, για να μη
   διαβάζεται σαν το γεμάτο καλάθι δίπλα του. Το «ήδη δηλωμένο» (τερακότα) είναι
   στον αρχικό κανόνα .addbtn.notify-btn.is-waiting, πιο πάνω — νικάει λόγω
   ειδικότητας (0,3,0 έναντι 0,2,0). */
.addbtn.notify-btn{background:transparent;color:var(--olive);border:1px solid var(--olive)}
@media (hover:hover){
  .addbtn.notify-btn:hover{background:var(--olive-pale);color:var(--olive-d);border-color:var(--olive-d)}
}

/* Στο φύλλο φίλτρων το «Καθαρισμός» του κάτω μέρους κάνει ήδη αυτή τη δουλειά
   (σημειώνει, δεν πλοηγεί)· ο σύνδεσμος της φόρμας θα ήταν δεύτερο κουμπί με
   διαφορετική συμπεριφορά. Στο πλαϊνό της επιφάνειας εργασίας μένει. */
#fsheet .filters-clear{display:none}

/* Ο συνδεδεμένος βλέπει πού θα πάει η ειδοποίηση. Μια μεγάλη διεύθυνση
   σπάει μέσα στο παράθυρο αντί να το ξεχειλώνει. */
.notify-to b{color:var(--ink);overflow-wrap:anywhere}

@media (max-width:760px){
  /* «Φίλτρα» + ταξινόμηση + πλέγμα/λίστα σε ΜΙΑ σειρά. Χρειάζονταν ~414px σε
     στήλη ~358px, οπότε έσπαγαν σε δύο. Η ταξινόμηση παίρνει ό,τι περισσεύει. */
  .toolbar{flex-wrap:nowrap;gap:8px}
  .toolbar .fbtn-m{flex:none;padding:9px 14px;gap:6px;letter-spacing:.08em}
  .toolbar-right{flex:1 1 auto;min-width:0;gap:6px;justify-content:flex-end}
  .toolbar-right .select{flex:1 1 auto;min-width:0}
  .toolbar-right .select select{width:100%;min-width:0;min-height:42px;padding:10px 28px 10px 12px;font-size:13px}
  .toolbar-right .select .ic{right:10px}
  .toolbar-right .viewtog{flex:none}
  .toolbar-right .viewtog button{width:38px;height:42px}

  /* Η καρδούλα: μικρότερος κύκλος (32px, κανόνας «4. Touch targets») και
     εικονίδιο, αλλά το ίδιο εύκολο πάτημα — το ::before απλώνει την περιοχή
     αφής στα 44×44 χωρίς να φαίνεται. */
  .pcard-fav{top:8px;right:8px}
  .pcard-fav .ic{width:15px;height:15px}
  .pcard-fav::before{content:"";position:absolute;inset:-6px;border-radius:50%}
}

/* ===== 2026-09-24 HOME/NAV ===== */
/* «Αλλαγές για mobile και desktop» του ιδιοκτήτη: κεφαλίδα, κάτω μπάρα,
   αρχική, υποσέλιδο, «Η ιστορία μας». ⚠️ ΟΤΙ ΕΙΝΑΙ ΓΙΑ ΤΟ ΚΙΝΗΤΟ ΖΕΙ ΜΕΣΑ ΣΕ
   `@media (max-width:760px)` — το πλάτος όπου εμφανίζεται η κάτω μπάρα. Ένας
   ΒΑΣΙΚΟΣ κανόνας εδώ, στο τέλος του αρχείου, θα νικούσε και τα media queries
   που γράφτηκαν πιο πάνω, δηλαδή θα άλλαζε σιωπηλά το desktop. */

/* 1. Η πράσινη λωρίδα κυλάει στο κινητό. Σε κάθε άλλο πλάτος τα περιτυλίγματα
   «εξαφανίζονται» (`display:contents`): τα <span> ξαναγίνονται παιδιά του
   flex της `.topbar-in`, η λωρίδα μένει κεντραρισμένη όπως ήταν, και το
   αντίγραφο της κύλισης δεν υπάρχει καν στη σελίδα. */
.topbar-msgs,.topbar-track,.topbar-set{display:contents}
.topbar-set--dup{display:none}
@media (max-width:760px){
  /* `flex:1 1 0` και ΟΧΙ `auto`: με βάση το πλάτος του περιεχομένου (δύο
     αντίγραφα, ~1.200px) η λωρίδα ζητούσε όλη τη γραμμή, το τηλέφωνο
     συρρικνωνόταν αναλογικά και έφευγε από την οθόνη — μετρημένο σε 390px. */
  .topbar-msgs{display:block;flex:1 1 0;min-width:0;overflow:hidden}
  .topbar-in .topbar-phone{flex:none;white-space:nowrap}
  /* Δύο ίδια αντίγραφα και `translateX(-50%)` (το υπάρχον `marq` της λωρίδας
     περιοχών): όταν τελειώνει το πρώτο, το δεύτερο είναι ακριβώς στη θέση του,
     οπότε η κύλιση δεν «πηδάει» και δεν μένει ποτέ κενή λωρίδα. */
  .topbar-track{display:flex;width:max-content;animation:marq 20s linear infinite}
  .topbar-set,.topbar-set--dup{display:flex;align-items:center;gap:10px;padding-right:10px;white-space:nowrap}
  /* η τελεία ανάμεσα στο τέλος ενός κύκλου και την αρχή του επόμενου */
  .topbar-set::after{content:"·";opacity:.4}
  /* Σταματάει όσο είναι μαζεμένη (scroll), ώστε να μη δουλεύει μια κίνηση
     που δεν φαίνεται. */
  .hdr.scrolled .topbar-track{animation-play-state:paused}
}
/* …και όσο ο δείκτης του ποντικιού είναι πάνω της — ΜΟΝΟ όπου υπάρχει
   δείκτης (FIX-POLISH 2026-09-24). Στην οθόνη αφής το :hover «κολλάει» μετά
   το πάτημα, οπότε η λωρίδα έμενε σταματημένη μέχρι το επόμενο άγγιγμα
   αλλού. */
@media (max-width:760px) and (hover:hover){
  .topbar-msgs:hover .topbar-track{animation-play-state:paused}
}
/* Χωρίς κίνηση, ΧΩΡΙΣ απώλεια: ο γενικός κανόνας του reduced-motion κόβει τα
   animations στα .01ms, που εδώ θα άφηνε το πρώτο μήνυμα κομμένο δεξιά και τα
   υπόλοιπα κρυμμένα — ακριβώς το πρόβλημα που λύνουμε. Τα μηνύματα
   αναδιπλώνονται σε όσες γραμμές χρειαστούν. (Το `.hdr.scrolled .topbar`
   έχει μεγαλύτερη ειδικότητα, οπότε η λωρίδα μαζεύεται και πάλι στο scroll.) */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .topbar,.topbar-in{height:auto}
  .topbar-in{min-height:32px;padding:5px 0}
  .topbar-track{animation:none;width:auto}
  .topbar-set{flex-wrap:wrap;white-space:normal;row-gap:0;padding-right:0}
  .topbar-set--dup{display:none}
  .topbar-set::after{content:none}
}

/* 2. Κεφαλίδα κινητού: hamburger αριστερά · λογότυπο στο ΚΕΝΤΡΟ · λογαριασμός
   δεξιά. Η αναζήτηση, τα αγαπημένα και το καλάθι υπάρχουν στην κάτω μπάρα και
   εδώ κρύβονται (`hdr-dup`). Τρεις στήλες `1fr auto 1fr`: οι δύο άκρες είναι
   ίσες, άρα το λογότυπο κάθεται ακριβώς στη μέση όποιο κι αν είναι το πλάτος.
   Στο desktop το λογότυπο μένει αριστερά (ΑΛΛΑΓΕΣ ΣΕ PC, P11). */
@media (max-width:760px){
  .hdr .hdr-dup{display:none}
  .hdr-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
  .hdr-grid>.burger{justify-self:start}
  .hdr-grid>.logo{justify-self:center}
  .hdr-grid>.hdr-actions{justify-self:end}
}

/* 3. Το «Κατηγορίες» της κάτω μπάρας ανοίγει αυτό το sheet. Κρυφό (visibility)
   όσο είναι κλειστό, ώστε οι σύνδεσμοί του να μην πιάνονται από το Tab ενώ
   κάθονται εκτός οθόνης· το `visibility` αλλάζει ΑΦΟΥ τελειώσει η κίνηση
   κλεισίματος, και αμέσως στο άνοιγμα (αλλιώς το «×» δεν παίρνει εστίαση). */
.cat-sheet{visibility:hidden;transition:transform .4s cubic-bezier(.3,1,.35,1),visibility 0s linear .4s}
.cat-sheet.open{visibility:visible;transition:transform .4s cubic-bezier(.3,1,.35,1),visibility 0s}
.cat-sheet .sheet-head h3{font-size:1.3rem}
.cat-sheet .sheet-body{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.catsheet-list>li{border-bottom:1px solid var(--line2)}
.catsheet-list>li:last-child{border-bottom:0}
.catsheet-top{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 4px;font-size:16px;font-weight:600;color:var(--ink)}
.catsheet-top .ic:first-child{color:var(--olive-l)}
.catsheet-top .ic:last-child{margin-left:auto;color:var(--ink3)}
.catsheet-sub{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px}
.catsheet-sub a{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--cream);font-size:14px;color:var(--ink2)}
@media (hover:hover){.catsheet-top:hover span,.catsheet-sub a:hover{color:var(--terra-d)}}

/* 4. Η λωρίδα με τα τέσσερα πλεονεκτήματα: λιγότερο κενό πάνω-κάτω στο κινητό
   («να μικρύνει λίγο το κενό πάνω κάτω»). Νικάει και το 14px του ≤420, γιατί
   έρχεται μετά. */
@media (max-width:760px){
  .usp-item{padding:9px 10px;gap:10px}
  .usp-item b{line-height:1.3}
  /* `block`: ένα inline <span> δεν μπορεί να κατεβάσει το ύψος της γραμμής κάτω
     από το «στήριγμα» του γονέα (16px × 1.62) — μετρημένο, οι δύο γραμμές του
     «Για αγορές άνω των 69€» απείχαν ~26px όσο κι αν μίκραινε το line-height. */
  .usp-item span{display:block;line-height:1.35}
}

/* 5. Breadcrumbs: ΚΑΝΕΝΑ στο κινητό, σε καμία σελίδα («Σε όλες τις ενότητες…
   πιάνει χώρο χωρίς λόγο»). Ένας κανόνας για όλα — δεν υπάρχει κοινό partial,
   κάθε σελίδα γράφει το δικό της `<nav class="crumbs">` (και το ταμείο
   `crumbs co-crumbs`). Το BreadcrumbList του JSON-LD δεν αγγίζεται: το
   διαβάζει η Google, όχι ο πελάτης. */
@media (max-width:760px){
  .crumbs{display:none}
}

/* 6. Το υποσέλιδο ολόκληρο στη σελίδα προϊόντος. Η κολλητή μπάρα αγοράς
   (`.buybar`, ~70px) κάθεται ΠΑΝΩ από την κάτω μπάρα και μένει ορατή μέχρι το
   τέλος της σελίδας, ενώ το σώμα κρατούσε χώρο μόνο για την κάτω μπάρα — η
   τελευταία γραμμή του υποσέλιδου (© και τρόποι πληρωμής) έμενε από κάτω της.
   Μόνο όπου ΥΠΑΡΧΕΙ `.buybar`· οι άλλες σελίδες δεν παίρνουν κενό. Το κουμπί
   «πάνω» ανεβαίνει κι αυτό, αλλιώς κρυβόταν πίσω από τη μπάρα αγοράς. */
@media (max-width:760px){
  body:has(.buybar){padding-bottom:calc(64px + 70px + env(safe-area-inset-bottom))}
  body:has(.buybar) .backtop{bottom:calc(84px + 70px + env(safe-area-inset-bottom))}
}

/* 7. Το ♡ μέσα στην πρόταση της άδειας λίστας («Πατήστε το ♡ σε όποιο
   προϊόν…») έπεφτε σε ΔΙΚΗ ΤΟΥ γραμμή, σε κάθε πλάτος: το καθολικό
   `img,svg{display:block}` κάνει κάθε εικονίδιο μπλοκ. */
.empty p .ic{display:inline-block;vertical-align:-2px}

/* 8. «Τελευταία άρθρα» στην αρχική: η κάρτα είναι η `.acard` της λίστας
   άρθρων· εδώ ορίζεται μόνο το πλέγμα. Τρεις στήλες στο desktop· στο κινητό
   οριζόντια κύλιση με «κούμπωμα», ώστε τρεις κάρτες με εξώφυλλο να μη γίνουν
   τρεις οθόνες ύψος — και να φαίνεται η άκρη της επόμενης. */
.home-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
@media (max-width:760px){
  .home-arts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;
    gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-bottom:6px}
  .home-arts::-webkit-scrollbar{display:none}
  .home-arts>.acard{scroll-snap-align:start}
}

/* ===== 2026-09-24 CHECKOUT-UI ===== */
/* Ιδιοκτήτης, «Αλλαγές για mobile και desktop» (2026-09-24). ΜΟΝΟ tokens —
   το `test_the_only_raw_colours_are_in_the_token_block` πιάνει ωμό χρώμα.
   ⚠️ Ό,τι είναι «μόνο κινητό» ζει ΜΕΣΑ σε @media: ένας βασικός κανόνας εδώ
   κάτω θα νικούσε σιωπηλά κάθε media query του αρχείου πιο πάνω. */

/* ── Συρτάρι: «Μπορεί να σας αρέσει» κάτω από τις γραμμές (μόνο όσο το
   καλάθι είναι κάτω από το ελάχιστο). Φοράει το `.xsell`/`.xsell-item` του
   «Μήπως ξεχάσατε…» της σελίδας καλαθιού — ίδια λίστα, λίγο πιο σφιχτή. */
.drawer-sugg h4{margin:18px 0 10px}
.drawer-sugg .xsell-item{padding:8px 10px;margin-bottom:8px}
/* Προϊόν χωρίς φωτογραφία: το βαζάκι στο κέντρο, όπως στη γραμμή καλαθιού. */
.drawer-sugg .xsell-item .thumb{display:flex;align-items:center;justify-content:center}
.drawer-sugg-txt{min-width:0}
@media (hover:hover){.drawer-sugg-txt a:hover b{color:var(--terra-d)}}
.drawer-sugg-more{margin-top:8px}

/* ── Ταμείο: «Μπορεί να σας αρέσει επίσης…» — ΔΙΑΚΡΙΤΙΚΟ μίνι καρουζέλ
   κάτω από τη σύνοψη («Διακριτικά!!! Ένα μίνι καρουζέλ;»). Τρεις μικρές
   κάρτες χωράνε στη δεξιά στήλη του desktop· σε στενή οθόνη ο ίδιος
   διάδρομος κυλάει οριζόντια με scroll-snap. */
.co-sugg{margin-top:16px}
.co-sugg h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--ink2);margin:0 0 10px}
.co-sugg-track{display:grid;grid-auto-flow:column;
  grid-auto-columns:136px;gap:10px;overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:thin}
.co-sugg-item{scroll-snap-align:start;display:flex;flex-direction:column;
  gap:6px;min-width:0;padding:8px;border:1px solid var(--line2);
  border-radius:14px;background:var(--paper)}
.co-sugg-media{position:relative;display:block;aspect-ratio:4/3;
  border-radius:10px;overflow:hidden}
.co-sugg-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.co-sugg-media .ph{position:absolute;inset:0;display:grid;place-items:center}
.co-sugg-media .ph .ic{width:40%;height:40%;color:var(--ink3);opacity:.45}
.co-sugg-name{font-family:var(--serif);font-size:13px;font-weight:600;
  line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.co-sugg-name:hover{color:var(--terra-d)}}
.co-sugg-foot{display:flex;align-items:center;justify-content:space-between;
  gap:6px;margin-top:auto}
.co-sugg-price{font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap}
/* 34px στο desktop· στο κινητό ισχύει το ελάχιστο 44×44 των touch targets
   (κανόνας «4. Touch targets» πιο πάνω) — επίτηδες δεν το πολεμάμε. */
.co-sugg .addbtn{width:34px;height:34px;flex:none}
.co-sugg .addbtn .ic{width:16px;height:16px}

/* ── Ταμείο: τα κουμπιά των βημάτων ζουν πλέον στο `.co-navs`, ΕΞΩ από τα
   <section data-step> (δες το σχόλιο στο checkout.html), και οι προτάσεις
   («Μπορεί να σας αρέσει επίσης…») στο `.co-sugg`, ΕΞΩ από το <aside>.
   DESKTOP — ΙΔΙΑ ΕΙΚΟΝΑ ΜΕ ΠΡΙΝ: αριστερή στήλη, αμέσως κάτω από το βήμα.
   Η σύνοψη πιάνει τις δύο πρώτες σειρές (φόρμα + κουμπιά) και μένει sticky
   σε όλο το ύψος τους, όπως πριν υπάρξουν οι προτάσεις. Οι προτάσεις έχουν
   ΔΙΚΟ ΤΟΥΣ κελί, 3η σειρά της δεξιάς στήλης: μέσα στο sticky <aside> την
   έκαναν 220px ψηλότερη και η σύνοψη έφευγε από την οθόνη μετά από ~50px
   scroll αντί για ~270px (έλεγχος desktop, 2026-09-24).
   ⚠️ STICKY ΕΙΝΑΙ ΤΟ `.panel`, ΟΧΙ ΤΟ <aside>. Ένα sticky στοιχείο του
   πλέγματος κινείται μέσα σε ΟΛΟ το πλέγμα (μετρημένο στο Chromium), άρα το
   sticky <aside> κατέβαινε και στην 3η σειρά και σκέπαζε τις προτάσεις. Το
   <aside> τεντώνεται (`stretch`) στο ύψος των δύο πρώτων σειρών και είναι το
   όριο μέσα στο οποίο κινείται η σύνοψη — ούτε λιγότερο (όπως πριν) ούτε
   πάνω από τις προτάσεις.
   Η δεύτερη σειρά είναι `1fr` ώστε όποιο ύψος περισσεύει από μια ψηλή
   σύνοψη να πάει ΕΚΕΙ — με `auto auto` το πλέγμα θα το μοίραζε και στην
   πρώτη σειρά και τα κουμπιά θα απομακρύνονταν από τη φόρμα. `row-gap:0` +
   `margin-top:0`: τα 26px που χώριζαν το τελευταίο fieldset από τα κουμπιά
   τα δίνει πλέον το ίδιο το `margin-bottom` του fieldset.
   `min-width:0` στις προτάσεις (και `minmax(0,…)` στις στήλες, πιο πάνω):
   ο διάδρομος των τριών καρτών έχει min-content 428px και φάρδαινε τη δεξιά
   στήλη ως τα ~1170px — τώρα κυλάει μέσα της.
   `1024.02px` και όχι `1025px`: σε κλασματικό πλάτος (ζουμ του browser) δεν
   ίσχυε ΚΑΝΕΝΑ από τα δύο μπλοκ, και τα κουμπιά έπεφταν στη δεξιά στήλη. */
@media (min-width:1024.02px){
  .co-grid{grid-template-rows:auto 1fr auto;row-gap:0}
  .co-main{grid-column:1;grid-row:1}
  .co-navs{grid-column:1;grid-row:2;align-self:start}
  .co-aside{grid-column:2;grid-row:1 / span 2;align-self:stretch;position:static}
  .co-aside > .panel{position:sticky;top:calc(var(--hdr-h) + 20px)}
  .co-sugg{grid-column:2;grid-row:3;min-width:0}
  .co-navs .co-nav{margin-top:0}
}
/* ≤1024 (εκεί που το ταμείο γίνεται μία στήλη): βήμα → ΣΥΝΟΨΗ → κουμπιά →
   προτάσεις (ιδιοκτήτης: «Το συνέχεια στην αποστολή να πάει κάτω απ την
   προεπισκόπηση της παραγγελίας»). Όλα είναι παιδιά του πλέγματος, οπότε το
   `order` βάζει τα κουμπιά ΑΝΑΜΕΣΑ στη σύνοψη και τις προτάσεις.
   `minmax(0,1fr)` και όχι σκέτο `1fr`: το `1fr` είναι `minmax(auto,1fr)`,
   και ένα nowrap κουμπί φάρδαινε ΟΛΗ τη στήλη πέρα από την οθόνη — γι' αυτό
   στο βήμα 3 της image23 έβγαινε δεξιά και το κουτί πληρωμής. */
@media (max-width:1024px){
  .co-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .co-aside{order:1}
  .co-navs{order:2;margin-top:18px}
  .co-sugg{order:3;margin-top:26px;min-width:0}
  .co-nav{flex-wrap:nowrap;align-items:center;margin-top:0}
}
/* ≤760, βήματα 1-2: «Πίσω» ΔΙΑΚΡΙΤΙΚΑ αριστερά, το κύριο κουμπί στον
   υπόλοιπο χώρο (P127). Το κουμπί ΑΝΑΔΙΠΛΩΝΕΤΑΙ αντί να ξεχειλίζει και το
   κείμενό του κεντράρεται. Το ποσό δεν σπάει ποτέ από το «€» του.
   ≤760, βήμα 3: «Ολοκλήρωση παραγγελίας» ΣΕ ΟΛΟ ΤΟ ΠΛΑΤΟΣ, ΚΕΝΤΡΑΡΙΣΜΕΝΟ
   (ιδιοκτήτης #43: «πιο κεντραρισμένο. Τώρα πάει δεξιά») — δίπλα στο «Πίσω»
   έπιανε το δεξί ~55% της σειράς σε τρεις γραμμές. Το «Πίσω στην αποστολή»
   γίνεται μικρός κεντραρισμένος σύνδεσμος ΚΑΤΩ από το κουμπί, σε δική του
   γραμμή. Λιγότερο letter-spacing ώστε το κείμενο να χωράει σε ≤2 γραμμές. */
@media (max-width:760px){
  .co-nav{gap:10px}
  .co-nav .backlink{flex:0 1 auto;max-width:38%;font-size:12.5px;
    line-height:1.3;text-align:left}
  .co-nav .btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;
    line-height:1.35;padding:12px 16px;letter-spacing:.08em;font-size:12px}
  .co-nav [data-total-btn]{white-space:nowrap}
  .co-nav[data-step-nav="3"]{flex-direction:column;align-items:center;gap:2px}
  .co-nav[data-step-nav="3"] .btn{order:1;flex:none;align-self:stretch;
    padding:12px 14px;letter-spacing:.04em}
  .co-nav[data-step-nav="3"] .backlink{order:2;flex:none;max-width:none;
    min-height:44px;text-align:center;font-size:12px}
  .bankbox{overflow-wrap:anywhere}
}

/* ── «Αποδέχομαι τους όρους…» σε ΜΙΑ πρόταση: το κείμενο είναι πλέον ένα
   <span>, δηλαδή ΕΝΑ flex item δίπλα στο κουτάκι (πριν, κάθε κομμάτι και
   κάθε σύνδεσμος ήταν δική του στήλη). */
.optrow--terms > span{flex:1 1 auto;min-width:0}

/* ── Επιβεβαίωση: οι δύο γραμμές του ιδιοκτήτη ΣΕ ΔΥΟ ΓΡΑΜΜΕΣ. Στα 560px
   (το παλιό inline πλάτος) ένα συνηθισμένο e-mail έπεφτε μόνο του σε τρίτη
   γραμμή — «Σας στείλαμε την επιβεβαίωση της παραγγελίας στο» / «eleni@…».
   760px από 761px και πάνω (ήταν 680px, που χωρούσε e-mail ως ~25
   χαρακτήρες· το συνηθισμένο «όνομα.επώνυμο@gmail.com» είναι 26–30 και
   έπεφτε πάλι μόνο του σε 3η — γύρος διορθώσεων 2, 2026-09-24). Ένα πολύ
   μακρύ e-mail ΣΠΑΕΙ αντί να ξεχειλίσει (στο κινητό το `overflow-x:clip` του
   body θα το έκοβε χωρίς ίχνος). Το κινητό δεν αλλάζει. */
.confirm-lead{max-width:560px;margin:14px auto 0}
.confirm-lead b{overflow-wrap:anywhere}
@media (min-width:761px){
  .confirm-lead{max-width:760px}
}

/* ── /shipping/: οι πίνακες ΧΩΡΑΝΕ στο κινητό (ιδιοκτήτης: «κόβονται τα
   γράμματα δεξιά»). Το html/body έχουν `overflow-x:clip`, οπότε ό,τι
   ξεχείλιζε απλώς ΕΞΑΦΑΝΙΖΟΤΑΝ — η στήλη «Κόστος» ήταν nowrap. ≤760 κάθε
   γραμμή γίνεται μικρή κάρτα: όνομα, περιγραφή, κόστος, το ένα κάτω από το
   άλλο· η γραμμή-κεφαλίδα κρύβεται. Desktop αμετάβλητο. */
@media (max-width:760px){
  .stable,.stable tbody,.stable tr,.stable td{display:block;width:100%}
  .stable .stable-head{display:none}
  .stable tr{padding:12px 16px;border-top:1px solid var(--line2)}
  .stable tr:nth-child(2){border-top:0}
  .stable td{padding:0;border-top:0}
  .stable td:empty{display:none}
  .stable tr td:first-child{font-size:15px}
  .stable tr td:last-child{text-align:left;white-space:normal;margin-top:4px}
}
/* Ο σύνδεσμος προς την πλήρη πολιτική μέσα στο «Επιστροφές & ακυρώσεις».
   Από CSS και όχι με style="": ο sanitizer κόβει το `style` από ό,τι
   αποθηκεύει ο ιδιοκτήτης, και το υπογράμμισμα θα χανόταν στην πρώτη του
   «Αποθήκευση». */
.ship-returns a{text-decoration:underline}

/* ===== 2026-09-24 FIX-POLISH ===== */
/* Γύρος διορθώσεων μετά τον ανεξάρτητο έλεγχο. ⚠️ Όπως και στα άλλα μπλοκ:
   ό,τι είναι «μόνο στενή οθόνη» ζει ΜΕΣΑ σε @media — ένας βασικός κανόνας
   εδώ κάτω θα νικούσε σιωπηλά κάθε media query του αρχείου πιο πάνω. */

/* 1. Γραμμή καλαθιού σε πολύ στενό κινητό (320–360). Από τότε που το ποσό
   της γραμμής δεν σπάει ποτέ (nowrap, για να μη μείνει το «€» μόνο του), το
   χάπι της ποσότητας (116px) + ποσό + κάδος (44px) ξεπερνούσαν τη στήλη, και
   ο κάδος έβγαινε μισός έξω από την οθόνη (μετρημένο: 294→338 σε 320). Εδώ:
   μικρότερη μικρογραφία, κουμπιά ποσότητας στα 40px του κανόνα «Cart/checkout
   stepper controls», και — για ό,τι ΑΚΟΜΗ δεν χωράει (τριψήφιο ποσό σε 320)
   — η σειρά ΑΝΑΔΙΠΛΩΝΕΤΑΙ: ο κάδος κατεβαίνει δεξιά, ποτέ έξω. Τα δύο
   `margin-left:auto` μοιράζουν το κενό όπως το `space-between` όσο όλα
   χωράνε σε μία σειρά. Ίδιο και στο συρτάρι. */
@media (max-width:360px){
  .cline{gap:10px}
  .cline .thumb{width:60px;height:60px}
  .cart-table .cline .thumb{width:64px;height:64px}
  .drawer-body{padding-left:16px;padding-right:16px}
  .cline .qty > button{min-width:40px;width:40px}
  .cline-row{flex-wrap:wrap;column-gap:4px;row-gap:4px}
  .cline .pr,.cline .rm{margin-left:auto}
}

/* 2. /search/ και καλάθι («Εφαρμογή» κουπονιού/δωροκάρτας): το πεδίο είχε
   `flex:1` χωρίς `min-width:0`, δηλαδή δεν στένευε κάτω από το εγγενές του
   πλάτος (~20 χαρακτήρες) και έσπρωχνε το κουμπί έξω από την οθόνη. Η
   διόρθωση είναι ΕΠΙΤΟΠΟΥ, στους κανόνες `.search-box input` και
   `.coupon input` πιο πάνω — ένα δεύτερο `min-width` εδώ θα ήταν δεύτερη
   πηγή για το ίδιο πράγμα. */

/* 3. Υποσέλιδο σε στενό κινητό. Οι δύο στήλες έχουν ελάχιστα πλάτη που δεν
   αλλάζουν: αριστερά τα τρία εικονίδια social (132px), δεξιά η γραμμή του
   e-mail (188px). Σε 360 δεν χωρούσαν μαζί με το κενό των 34px και η δεξιά
   στήλη έβγαινε έξω από την οθόνη (μετρημένο: 178→366). ≤420 λιγότερο κενό
   και τα στοιχεία επικοινωνίας στα 13px· ≤359 (320–340, όπου δεν χωράνε
   ούτε έτσι) μία στήλη. `column-gap` και όχι `gap`, ώστε να μείνει το κενό
   ανάμεσα στις σειρές του κανόνα των 1024px. */
@media (max-width:420px){
  .ftr-main{column-gap:20px}
  .ftr-contact li{gap:8px;font-size:13px}
  .ftr-contact a{font-size:13px}
}
@media (max-width:359.98px){
  .ftr-main{grid-template-columns:minmax(0,1fr);row-gap:22px}
}

/* ===== 2026-09-24 FIX-ROUND-2 ===== */
/* Κουπόνι / δωροκάρτα στο κινητό. Μετά τη διόρθωση του «ΕΦΑΡΜΟΓΗ» (που
   ήταν αυτό που κοβόταν), κοβόταν το PLACEHOLDER στη μέση της λέξης σε κάθε
   πλάτος 320–414 — «ΚΩΔΙΚΟΣ ΚΟΥΠΟΝ» στα 390, «ΚΩΔΙΚΟΣ ΔΩΡ» στα 360: ο
   χώρος του κειμένου ήταν 64–158px για 167–176px. ≤420 λιγότερο εσωτερικό
   κενό και αραίωμα γραμμάτων στο πεδίο και στο κουμπί, και το placeholder
   έγινε «Κουπόνι» / «Δωροκάρτα» (`_cart_summary.html`, με την πλήρη
   διατύπωση στο aria-label). Μετρημένο με Playwright σε 320/360/390/414. */
@media (max-width:420px){
  .coupon input{padding-inline:14px;letter-spacing:.02em}
  .coupon .btn{padding-inline:14px}
}

/* ===== 2026-09-25 FIX-ROUND-3 ===== */
/* «Χαμένη χώρα»: το μήνυμα κάτω από τη χώρα (checkout.html) κλείνει με
   σύνδεσμο προς το καλάθι. Χωρίς υπογράμμιση διαβαζόταν ως συνέχεια της
   πρότασης — ίδιο χρώμα και βάρος με το κόκκινο μήνυμα (`a{color:inherit;
   text-decoration:none}`), μετρημένο σε στιγμιότυπο. Όλα τα `.msg` ήταν ως
   τώρα σκέτο κείμενο, οπότε ο κανόνας δεν αγγίζει τίποτε άλλο. ΟΧΙ `nowrap`:
   το κείμενο του συνδέσμου το γράφει ο ιδιοκτήτης, και ένας μακρύς σύνδεσμος
   έσπρωχνε τη χώρα έξω από την οθόνη στα 360px (έλεγχος 4). */
.field .msg a{text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}