/* 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;

  /* ⚠️ ΟΙ ΚΑΤΑΣΤΑΣΕΙΣ ΠΑΡΑΓΓΕΛΙΑΣ ΔΕΝ ΑΚΟΛΟΥΘΟΥΝ ΤΗΝ ΠΑΛΕΤΑ, ΕΠΙΤΗΔΕΣ.
     «Απέτυχε» πρέπει να είναι κοκκινωπό και «Απεστάλη» γαλαζωπό σε κάθε
     παλέτα — είναι σήματα, όχι χρώματα μάρκας. Γίνονται 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;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}
.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)}
/* «Το είδες από τα reels μας» — feature card in the mobile drawer, so the reels
   promo (the desktop mega feature tile) also shows on phones/tablets. */
.mnav-feat{margin-top:20px;background:var(--cream);border:1px solid var(--line2);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mnav-feat img{display:block;width:100%;height:150px;object-fit:cover;border-radius:12px}
.mnav-feat strong{font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.25}

/* ---------- 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}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;min-height:52px;color:var(--ink3);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}
.pcard{position:relative;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}
.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)}
.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;
}
.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}
.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)}
.pdp-short{color:var(--ink2);font-size:15.5px;line-height:1.7;margin:14px 0 22px;padding-bottom:22px;border-bottom:1px dashed var(--line)}
.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(--olive-pale);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:12px 0 18px;padding-bottom: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-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:1.5fr 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}
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:12px 0 16px;padding-bottom:16px}
.qv-full{display:inline-block;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(--olive-pale);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);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}
  .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}
  .topbar-in>span:not(:first-child),.topbar-in .sep{display:none}
  .topbar-in>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .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(--olive-pale)}
/* 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; }
  .pcard-fav       { width: 40px; height: 40px; }
  .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)}
.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:0 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. Outline (paper/cream on
   olive border) reads as "done, no action needed" against the filled circle both
   the bag and the actionable envelope use. */
.addbtn.notify-btn.is-waiting{background:var(--paper);color:var(--olive);border:1px solid var(--olive)}
.addbtn.notify-btn.is-waiting:hover{background:var(--cream);color:var(--olive-d);border-color:var(--olive-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(--olive-pale); }

/* «Στη γρήγορη ματιά, όταν πάει ο κέρσορας πάνω στο "προσθήκη" να αλλάζει
   χρώμα». Υπήρχε 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(--olive-pale)}
.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(--olive-pale)}
.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` το πιάνει αμέσως.

   ⚠️ display:flex και ΟΧΙ block: η ετικέτα έχει δύο κομμάτια (κείμενο +
   ποσό) που πρέπει να μένουν στην ίδια γραμμή με το κουτάκι, αλλιώς το
   ποσό πέφτει από κάτω και διαβάζεται σαν ξεχωριστή δήλωση. */
.vacopt{display:flex;align-items:center;gap:10px;cursor:pointer;
  margin:14px 0 0;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--olive-pale);
  font-size:15px;color:var(--ink)}
.vacopt input{width:17px;height:17px;flex-shrink:0;accent-color:var(--olive);
  cursor:pointer;margin:0}
.vacopt span{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vacopt-fee{color:var(--terra-d);font-weight:700;white-space:nowrap}
/* Το hint είναι ΑΔΕΛΦΟΣ του label, όχι παιδί του — μέσα του θα
   κληρονομούσε το cursor:pointer και θα φαινόταν κλικαριστό. */
.vacopt-hint{margin:6px 0 0;font-size:13px;color:var(--ink3);line-height:1.5}
/* Στη γραμμή του καλαθιού: μικρότερο, χωρίς πλαίσιο, κάτω από τον τίτλο. */
.cline-vac{display:flex;align-items:center;gap:7px;cursor:pointer;
  margin-top:7px;font-size:13px;color:var(--ink2)}
.cline-vac input{width:15px;height:15px;flex-shrink:0;
  accent-color:var(--olive);cursor:pointer;margin: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 το έδειξε και πέρασε για «αλλαγή γραμμής». */
.cline-vac b{display:inline;font-family:inherit;font-size:inherit;
  line-height:inherit;color:var(--terra-d);font-weight:700}