/* ============================================================
   PRESTO — Φύλλο στυλ εφαρμογής
   Mobile-first: η βάση είναι το κινητό (390px).
   Οι media queries ΜΟΝΟ min-width, ποτέ max-width για layout.
   ============================================================ */

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/*  Η ΣΕΛΙΔΑ ΔΕΝ ΜΕΤΑΚΙΝΕΙΤΑΙ ΟΤΑΝ ΑΛΛΑΖΕΙ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ.
 *
 *  Το περιεχόμενο είναι κεντραρισμένο σε σταθερό πλάτος. Όταν
 *  όμως τα αποτελέσματα είναι λίγα, η σελίδα σταματά να κυλάει,
 *  η κάθετη μπάρα εξαφανίζεται, και το κέντρο του παραθύρου
 *  μετατοπίζεται. Αποτέλεσμα: πατάς ένα φίλτρο και ΟΛΑ κουνιούνται
 *  δεξιά-αριστερά, σαν να αλλάζει μέγεθος η σελίδα.
 *
 *  Το scrollbar-gutter κρατά τη θέση της μπάρας ΠΑΝΤΑ δεσμευμένη —
 *  με ή χωρίς κύλιση, το κέντρο μένει το ίδιο. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/*  ΜΟΝΟ ΣΕ ΟΘΟΝΗ ΜΕ ΠΡΑΓΜΑΤΙΚΗ ΜΠΑΡΑ. Στο κινητό η μπάρα είναι
 *  επικάλυψη — δεν κλέβει πλάτος, οπότε το gutter θα έτρωγε άδικα
 *  15 πολύτιμα εικονοστοιχεία από ένα πεδίο 390 πλάτους. */
@media (min-width:900px){ html{scrollbar-gutter:stable} }
body{
  font-family:var(--f);
  font-size:var(--fs-15);
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

/* Focus ring — απαίτηση προσβασιμότητας, όχι διακόσμηση */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-4)}
:focus:not(:focus-visible){outline:none}

/* ════════════════════════════════════════════════════════════
   ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ — ΚΑΝΟΝΕΣ ΠΟΥ ΙΣΧΥΟΥΝ ΠΑΝΤΟΥ

   Το προϊόν λέει ρητά ότι πρέπει να το χρησιμοποιεί και ένας
   εβδομηντάχρονος. Αυτά τα τρία δεν είναι λεπτομέρειες:
   ════════════════════════════════════════════════════════════ */

/* 1. ΚΑΝΕΝΑ ΠΕΔΙΟ ΚΑΤΩ ΑΠΟ 16px ΣΕ ΚΙΝΗΤΟ.
      Το Safari σε iPhone κάνει ΖΟΥΜ αυτόματα μόλις εστιάσεις σε
      πεδίο με γράμματα κάτω από 16px — και δεν ξαναβγαίνει μόνο του.
      Η σελίδα μένει μεγεθυσμένη, το κουμπί υποβολής φεύγει εκτός
      οθόνης, και ο χρήστης νομίζει ότι κάτι χάλασε. Είχαμε 94 πεδία
      στα 14 και 15 pixel. */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]),
  select, textarea{ font-size:16px }
}

/* 2. ΣΥΝΔΕΣΜΟΣ ΠΑΡΑΛΕΙΨΗΣ.
      Όποιος πλοηγείται με πληκτρολόγιο ή με αναγνώστη οθόνης
      περνούσε ΚΑΘΕ φορά από λογότυπο, τοποθεσία, αναζήτηση και
      μενού πριν φτάσει στο περιεχόμενο — σε κάθε σελίδα. */
.skip{
  position:absolute;left:var(--s-3);top:-100px;z-index:200;
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding-inline:var(--s-4);border-radius:var(--r-3);
  background:var(--brand);color:#fff;text-decoration:none;
  font:800 var(--fs-14)/1 var(--font);
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:var(--s-3)}

/* 3. ΟΡΑΤΗ ΕΣΤΙΑΣΗ ΠΑΝΤΟΥ.
      Όπου κρύβεται το περίγραμμα του browser, ΠΡΕΠΕΙ να μπαίνει
      δικό μας σημάδι στον γονιό. Στην αναζήτηση πελατών του panel
      το outline αφαιρέθηκε χωρίς αντικατάσταση: με πληκτρολόγιο δεν
      φαινόταν πουθενά ότι το πεδίο ήταν επιλεγμένο. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;
   stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Διάταξη ───────────────────────────────────────────────── */
/* Το ΕΝΑ container της σελίδας. Το βάζει το layout, μία φορά.
   Το .container μένει ως ψευδώνυμο για ό,τι είναι έξω από το <main>
   (υποσέλιδο) και για παλιά markup — με ΤΟ ΙΔΙΟ περιθώριο, ώστε
   κεφαλίδα, περιεχόμενο και υποσέλιδο να πέφτουν στην ίδια ακμή. */
.wrap,.container{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
}

/* Μέσα στο .wrap, οποιοδήποτε παλιό container γίνεται απλό μπλοκ:
   δύο εμφωλευμένα containers σημαίνουν διπλό περιθώριο και μια
   στήλη που δεν ευθυγραμμίζεται με τίποτα γύρω της.

   ΤΟ margin-inline ΜΕΝΕΙ auto ΚΑΙ ΔΕΝ ΜΗΔΕΝΙΖΕΤΑΙ.

   Ήταν 0, και εκεί κρυβόταν το «πάλι δεν είναι στο κέντρο». Σελίδες
   σαν το «Πώς κλείνεις ραντεβού» ή τους «Όρους» στενεύουν τη στήλη
   τους σε 720px με inline max-width. Το inline νικά το max-width:none
   αυτού του κανόνα — αλλά το margin-inline:0 ΕΠΙΒΙΩΝΕ. Αποτέλεσμα:
   κουτί 720px κολλημένο στην αριστερή ακμή ενός πλαισίου 908px,
   δηλαδή 70px εκτός κέντρου, ενώ το υποσέλιδο από κάτω ήταν σωστά
   στη μέση — και φαινόταν ακριβώς όσο στραβό ήταν.

   Με auto: όποιο container γεμίζει το πλάτος δεν αλλάζει τίποτα (τα
   auto γίνονται 0), και όποιο στενεύει κεντράρεται μόνο του. */
.wrap .container,.wrap .home,.wrap .wrap{
  max-width:none;margin-inline:auto;padding-inline:0;width:100%;
}

.stack > * + *{margin-top:var(--s-4)}
.row{display:flex;align-items:center;gap:var(--s-3)}
.spread{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}

/* ── Κουμπιά ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap-cta);padding-inline:var(--s-6);
  border-radius:var(--r-f);
  font-weight:800;font-size:var(--fs-15);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--sh-2)}
.btn--primary:hover{background:var(--brand-d)}
.btn--primary:disabled{background:var(--line);color:var(--ink-4);box-shadow:none;cursor:not-allowed;transform:none}
.btn--outline{background:var(--surf);color:var(--ink);border:1.5px solid var(--line)}
.btn--outline:hover{border-color:var(--ink-4)}
.btn--ghost{background:var(--soft);color:var(--ink)}
/* Καταστροφική ενέργεια. Ήταν γραμμένη με style="color:var(--err)"
   πάνω στο κουμπί — ίδιο νόημα, γραμμένο σε λάθος μέρος, και
   αόρατο σε όποιον διαβάζει το CSS ψάχνοντας τις παραλλαγές. */
.btn--danger{color:var(--err);border:1.5px solid var(--err-b);background:var(--surf)}
.btn--danger:hover{background:var(--err-l);border-color:var(--err)}
.btn--block{width:100%}
.btn--sm{min-height:var(--tap);padding-inline:var(--s-4);font-size:var(--fs-13)}
.btn--lg{min-height:var(--tap-lg);font-size:var(--fs-17)}
.btn--icon{width:var(--tap);padding:0}

.avatar{width:44px;height:44px;border-radius:var(--r-f);background:var(--soft);
  border:1.5px solid var(--line);display:grid;place-items:center;color:var(--ink-2);flex:none}
.avatar .i{width:20px;height:20px}

/* Χρώμα ανά κατηγορία — παράγεται από τα tokens */
/* Πλακίδιο εικονιδίου κατηγορίας σε λίστες επιλογών. Ο κανόνας
   .cat__ic είχε φύγει ως νεκρός, αλλά η σελίδα περιοχής τον
   χρησιμοποιούσε ακόμη και το εικονίδιο έμενε ακεντράριστο. */
.cat__ic{display:grid;place-items:center;flex:none}
.cat__ic .i{width:22px;height:22px;stroke-width:1.7}

.pastel-wash{background:linear-gradient(150deg,var(--p-wash-1),var(--p-wash-2));color:var(--p-wash-ink)}
.pastel-hair{background:linear-gradient(150deg,var(--p-hair-1),var(--p-hair-2));color:var(--p-hair-ink)}
.pastel-nail{background:linear-gradient(150deg,var(--p-nail-1),var(--p-nail-2));color:var(--p-nail-ink)}
.pastel-food{background:linear-gradient(150deg,var(--p-food-1),var(--p-food-2));color:var(--p-food-ink)}
.pastel-spa {background:linear-gradient(150deg,var(--p-spa-1), var(--p-spa-2)); color:var(--p-spa-ink)}
.pastel-gym {background:linear-gradient(150deg,var(--p-gym-1), var(--p-gym-2)); color:var(--p-gym-ink)}
.pastel-pet {background:linear-gradient(150deg,var(--p-pet-1), var(--p-pet-2)); color:var(--p-pet-ink)}

/* ── Φίλτρα ────────────────────────────────────────────────── */
.chips{display:flex;gap:var(--s-2);overflow-x:auto;padding:var(--s-4) 0 var(--s-1);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* Τα τσιπάκια είναι πλέον <a>, όχι <button>: χρειάζονται ρητά
   text-decoration και color, που τα <button> κληρονομούσαν αλλιώς. */
.chip{flex:none;display:flex;align-items:center;gap:var(--s-2);
  text-decoration:none;
  min-height:44px;padding-inline:var(--s-4);border-radius:var(--r-f);
  background:var(--surf);border:1.5px solid var(--line);
  font-size:var(--fs-13);font-weight:700;color:var(--ink-2);white-space:nowrap}
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
/* Το αστεράκι του «4.5+» ήταν γκρι σαν το υπόλοιπο εικονίδιο, οπότε
   δεν διαβαζόταν ως βαθμολογία. Χρυσό, όπως παντού αλλού στο site. */
.chip__star{fill:var(--star);stroke:none}
.chip.is-on .chip__star{fill:#fff}

/* Βαθμολογία κριτικής — υπήρχε στο σήμα της σελίδας καταστήματος
   αλλά δεν είχε ποτέ ορισμό: έβγαινε σκέτο εικονίδιο κολλημένο σε
   έναν αριθμό, χωρίς χρώμα και χωρίς κενό. */
.rate{display:inline-flex;align-items:center;gap:4px;flex:none;
  font:800 var(--fs-13)/1 var(--font);color:var(--ink)}
.rate .i{width:14px;height:14px;fill:var(--star);stroke:none}
.chip--live{border-color:var(--ok-b);color:var(--ok);background:var(--ok-l)}
.chip--live i,.chip__dot{width:6px;height:6px;border-radius:var(--r-f);background:var(--ok);
  display:block;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Τίτλος ενότητας ───────────────────────────────────────── */
/*  Ο ΚΥΡΙΟΣ ορισμός βρίσκεται παρακάτω, μαζί με τη ράγα («.rail__head,
    .sec-head»), ώστε οι δύο κεφαλίδες να έχουν αποδεδειγμένα το ίδιο
    ύψος. Εδώ μένουν ΜΟΝΟ όσα δεν ξαναγράφονται εκεί — τα υπόλοιπα ήταν
    νεκρές γραμμές που έδειχναν άλλα νούμερα από αυτά που ίσχυαν, και
    διαβάζοντας το αρχείο έβγαζες λάθος συμπέρασμα. */
.sec-head h2 small{display:block;font-size:var(--fs-12);font-weight:600;color:var(--ink-3);
  letter-spacing:0;margin-top:2px}
.sec-head a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-13);font-weight:800;color:var(--brand);white-space:nowrap}

/* ── Πλοήγηση κάτω (κινητό) ────────────────────────────────── */
.bottomnav{
  position:sticky;bottom:0;z-index:50;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-top:1.5px solid var(--line);
  display:flex;padding:var(--s-2) var(--s-2);
  padding-bottom:calc(var(--s-5) + env(safe-area-inset-bottom));
}
@media (min-width:900px){ .bottomnav{display:none} }
.bnav{flex:1;min-height:var(--tap-cta);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-1);
  color:var(--ink-3);border-radius:var(--r-3);position:relative}
.bnav .i{width:23px;height:23px}
.bnav span{font-size:var(--fs-11);font-weight:700}   /* ήταν 10.5px — μισό pixel, εκτός κλίμακας */
.bnav.is-on{color:var(--brand)}
.bnav.is-on::before{content:"";position:absolute;top:0;width:22px;height:3px;
  border-radius:0 0 3px 3px;background:var(--brand)}
/* ── Ροή κράτησης ──────────────────────────────────────────── */
.stepbar{background:var(--surf);border-bottom:1.5px solid var(--line);
  padding:var(--s-3) var(--s-5) var(--s-4)}
.stepbar__top{display:flex;align-items:center;gap:var(--s-3);margin-bottom:10px}
.stepbar__back{width:40px;height:40px;border-radius:var(--r-f);background:var(--soft);
  display:grid;place-items:center;flex:none}
.stepbar__back .i{width:20px;height:20px;stroke-width:2.2}
.stepbar__title{font-size:var(--fs-17);font-weight:900;letter-spacing:-.03em;line-height:1.2;display:block}
.stepbar__sub{font-size:var(--fs-12);font-weight:600;color:var(--ink-3);display:block}
.track{display:flex;gap:var(--s-2)}
.track i{flex:1;height:5px;border-radius:var(--r-f);background:var(--line);
  display:block;transition:background .3s var(--ease)}
.track i.is-on{background:var(--brand)}
.track i.is-done{background:var(--ok)}

.step{padding:var(--s-5)}
.step__q{font-size:var(--fs-21);font-weight:900;letter-spacing:-.035em;line-height:1.25;margin-bottom:var(--s-2)}
.step__hint{font-size:var(--fs-13);font-weight:500;color:var(--ink-2);line-height:1.55;margin-bottom:var(--s-5)}

/* Επιλογή υπηρεσίας */
.opt{display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;
  min-height:76px;padding:var(--s-4);margin-bottom:var(--s-3);
  background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r-1);
  transition:var(--dur) var(--ease)}
.opt:hover{border-color:var(--brand);background:var(--brand-xl)}
.opt.is-on{border-color:var(--brand);border-width:2px;background:var(--brand-xl);padding:15.5px}
.opt__rd{width:26px;height:26px;border-radius:var(--r-f);border:2px solid var(--line);
  flex:none;display:grid;place-items:center;background:var(--surf);transition:var(--dur)}
.opt.is-on .opt__rd{border-color:var(--brand);background:var(--brand)}
.opt__rd .i{width:14px;height:14px;color:#fff;stroke-width:3.4;opacity:0}
.opt.is-on .opt__rd .i{opacity:1}
.opt__tx{flex:1;min-width:0}
.opt__nm{display:block;font-size:var(--fs-15);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.opt__ds{display:block;font-size:var(--fs-12);font-weight:500;color:var(--ink-2);margin-top:3px;line-height:1.4}
.opt__pr{text-align:right;flex:none}
.opt__amt{display:block;font-size:var(--fs-19);font-weight:900;letter-spacing:-.035em}
.opt__dur{display:inline-block;margin-top:var(--s-1);padding:3px var(--s-2);
  border-radius:var(--r-f);background:var(--soft);font-size:var(--fs-11);font-weight:700;color:var(--ink-2)}
.opt.is-on .opt__dur{background:#fff}

/* Ημέρες — η μπάρα κύλισης είναι κρυμμένη, άρα στο desktop το
   ποντίκι δεν είχε ΚΑΝΕΝΑΝ τρόπο να δει τις υπόλοιπες ημέρες.
   Τα ίδια βελάκια με τις ράγες της αρχικής, πάνω στις άκρες της
   λωρίδας· στο κινητό δεν εμφανίζονται (σαρώνεις με το δάχτυλο)
   και κρύβονται μόνα τους όταν όλες οι ημέρες χωράνε. */
.days-wrap{position:relative;margin-bottom:var(--s-6)}
.days-wrap .days{margin-bottom:0}
.days__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:1;
  background:var(--surf);border:1.5px solid var(--line);box-shadow:var(--sh-2);
}
.days__arrow[data-scroll="prev"]{left:-10px}
.days__arrow[data-scroll="next"]{right:-10px}
.days{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-1);
  margin-bottom:var(--s-6);scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:64px;min-height:80px;padding:10px 4px;text-align:center;
  background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r-2);
  transition:var(--dur) var(--ease)}
.day:hover{border-color:var(--brand);transform:translateY(-2px)}
.day.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.day.is-off{opacity:.4;background:var(--soft);cursor:not-allowed}
.day__lbl{display:block;font-size:var(--fs-11);font-weight:700;color:var(--ink-3)}
.day.is-on .day__lbl{color:rgba(255,255,255,.75)}
.day__num{display:block;font-size:var(--fs-19);font-weight:900;letter-spacing:-.04em;margin:2px 0 3px}
.day__free{display:block;font-size:var(--fs-10);font-weight:800;color:var(--ok)}
.day.is-on .day__free{color:#fff}
.day.is-off .day__free{color:var(--ink-4)}

/* Ώρες σε ομάδες — «Πρωί / Μεσημέρι / Απόγευμα» αντί για 24 κουτάκια */
.zone{margin-bottom:var(--s-5)}
.zone__head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:10px}
.zone__ic{width:34px;height:34px;border-radius:var(--r-3);display:grid;place-items:center;flex:none}
.zone__ic .i{width:18px;height:18px}
.zone__nm{font-size:var(--fs-15);font-weight:800}
.zone__count{margin-left:auto;font-size:var(--fs-12);font-weight:600;color:var(--ink-3)}
.times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
@media (min-width:520px){ .times{grid-template-columns:repeat(4,minmax(0,1fr))} }
.time{min-height:var(--tap-lg);border-radius:var(--r-2);border:1.5px solid var(--line);
  background:var(--surf);display:grid;place-items:center;
  font-size:var(--fs-15);font-weight:800;transition:var(--dur) var(--ease)}
.time:hover{border-color:var(--brand);background:var(--brand-xl);color:var(--brand)}
.time.is-on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-2)}
.time.is-taken{background:var(--soft);color:var(--ink-4);cursor:not-allowed;
  text-decoration:line-through;text-decoration-thickness:1.5px}
.time.is-taken:hover{border-color:var(--line);background:var(--soft);color:var(--ink-4)}

/* ── Πεδία φόρμας ──────────────────────────────────────────── */
.field{margin-bottom:var(--s-5)}
.field label{display:block;font-size:var(--fs-15);font-weight:800;margin-bottom:var(--s-2)}
.field label em{display:block;font-style:normal;font-size:var(--fs-12);
  font-weight:500;color:var(--ink-3);margin-top:2px}
.input{width:100%;min-height:var(--tap-lg);
  border:1.5px solid var(--line);border-radius:var(--r-2);background:var(--surf);
  padding-inline:var(--s-4);
  font-size:16px;   /* ΠΟΤΕ κάτω από 16 — αλλιώς το iOS Safari κάνει zoom */
  font-weight:600;color:var(--ink);transition:var(--dur)}
/* Το placeholder είναι ΚΕΙΜΕΝΟ: συχνά είναι η μόνη οδηγία για το τι
   περιμένει το πεδίο. Με --ink-4 (3:1) δεν διαβαζόταν σε φωτεινό
   περιβάλλον· --ink-3 περνά τα 4.5:1 και ξεχωρίζει ακόμα καθαρά από
   ό,τι έχει πληκτρολογήσει ο χρήστης. */
.input::placeholder{color:var(--ink-3);font-weight:500}
.input:focus{outline:0;border-color:var(--brand);border-width:2px;
  padding-inline:15.5px;box-shadow:0 0 0 4px var(--brand-l)}
.input--area{min-height:88px;padding:var(--s-3) var(--s-4);line-height:1.5;resize:vertical}
/* Το πεδίο που έχει λάθος — μπαίνει από τον οδηγό εγγραφής */
.input--err,.f__i.input--err{border-color:var(--err);border-width:2px}
.field__err{display:block;margin-top:var(--s-2);font-size:var(--fs-13);font-weight:700;color:var(--err)}
.phone-row{display:flex;gap:var(--s-2)}
.phone-row__cc{width:92px;flex:none;display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  border:1.5px solid var(--line);border-radius:var(--r-2);background:var(--soft);
  font-size:var(--fs-15);font-weight:800}

/* ── Πληροφοριακό πλαίσιο ──────────────────────────────────── */
.info{display:flex;gap:var(--s-3);padding:var(--s-4);margin-bottom:var(--s-5);
  background:var(--brand-xl);border:1.5px solid var(--brand-l);border-radius:var(--r-2)}
.info .i{width:20px;height:20px;color:var(--brand);flex:none}
.info__t{display:block;font-size:var(--fs-13);font-weight:800;margin-bottom:3px}
.info__s{display:block;font-size:var(--fs-12);font-weight:500;color:var(--ink-2);line-height:1.5}
/* Λίστα λαθών: όταν λείπουν πολλά πεδία μαζί, μπαίνουν σε κουκκίδες
   κάτω από τον τίτλο — όχι σε μία αράδα με κόμματα, που διαβάζεται
   δύσκολα και δεν δείχνει πόσα είναι. */
.info__list{margin:var(--s-2) 0 0;padding-left:var(--s-5);
  font-size:var(--fs-12);font-weight:600;color:var(--ink-2);line-height:1.7}
.info__list li{list-style:disc}
.info--ok{background:var(--ok-l);border-color:var(--ok-b)}
.info--ok .i{color:var(--ok)}
.info--warn{background:var(--warn-l);border-color:var(--warn-b)}
.info--warn .i{color:var(--warn)}
.info--err{background:var(--err-l);border-color:var(--err-b)}
.info--err .i{color:var(--err)}

/* ── Κολλημένο CTA ─────────────────────────────────────────── */
.cta-bar{position:sticky;bottom:0;z-index:40;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border-top:1.5px solid var(--line);
  padding:var(--s-3) var(--s-5);
  padding-bottom:calc(var(--s-5) + env(safe-area-inset-bottom))}
.cta-bar__sum{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-bottom:10px}
.cta-bar__lbl{display:block;font-size:var(--fs-11);font-weight:600;color:var(--ink-3)}
.cta-bar__val{display:block;font-size:var(--fs-15);font-weight:800;letter-spacing:-.02em}
.cta-bar__amt{display:block;font-size:var(--fs-21);font-weight:900;letter-spacing:-.04em}

/* ── OTP ───────────────────────────────────────────────────── */
.otp{padding:var(--s-8) var(--s-5) var(--s-5);text-align:center}
.otp__ic{width:72px;height:72px;border-radius:var(--r);background:var(--brand-l);color:var(--brand);
  display:grid;place-items:center;margin:0 auto var(--s-5)}
.otp__ic .i{width:34px;height:34px;stroke-width:1.7}
.otp__h{font-size:var(--fs-24);font-weight:900;letter-spacing:-.04em;line-height:1.25}
.otp__s{font-size:var(--fs-15);font-weight:500;color:var(--ink-2);margin-top:10px;line-height:1.55}
.otp__s b{color:var(--ink);font-weight:800}
.otp__box{display:flex;gap:10px;justify-content:center;margin:var(--s-8) 0 var(--s-5)}
.otp__dg{width:48px;height:60px;border:1.5px solid var(--line);border-radius:var(--r-2);
  background:var(--surf);text-align:center;
  font-size:var(--fs-24);font-weight:900;color:var(--ink);
  -moz-appearance:textfield}
.otp__dg::-webkit-outer-spin-button,.otp__dg::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp__dg:focus{outline:0;border-color:var(--brand);border-width:2px;background:var(--brand-xl)}
.otp__dg.is-filled{border-color:var(--brand);background:var(--brand-xl);color:var(--brand)}
.otp__timer{font-size:var(--fs-13);font-weight:700;color:var(--ink-3)}
.otp__timer b{color:var(--brand)}
.otp__trust{display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  margin-top:var(--s-4);font-size:var(--fs-12);font-weight:600;color:var(--ink-3)}
.otp__trust .i{width:15px;height:15px;color:var(--ok)}

/* ── Επιτυχία ──────────────────────────────────────────────── */
.done{padding:var(--s-10) var(--s-5) var(--s-5);text-align:center}
.done__tick{width:88px;height:88px;border-radius:var(--r-f);background:var(--ok-l);color:var(--ok);
  display:grid;place-items:center;margin:0 auto var(--s-6);position:relative}
.done__tick::after{content:"";position:absolute;inset:-8px;border-radius:var(--r-f);
  border:2.5px solid var(--ok);opacity:.2;animation:ripple 2.2s ease-out infinite}
@keyframes ripple{0%{transform:scale(.92);opacity:.3}100%{transform:scale(1.18);opacity:0}}
.done__tick .i{width:44px;height:44px;stroke-width:2.8}
.done__h{font-size:var(--fs-26);font-weight:900;letter-spacing:-.04em;line-height:1.2}
.done__p{font-size:var(--fs-15);font-weight:500;color:var(--ink-2);margin-top:10px;line-height:1.6}
.done__p b{color:var(--ink);font-weight:800}

.ticket{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r);
  margin-top:var(--s-6);text-align:left;overflow:hidden;box-shadow:var(--sh-2)}
.ticket__head{padding:var(--s-4);display:flex;gap:var(--s-3);align-items:center;
  border-bottom:2px dashed var(--line)}
.ticket__logo{width:48px;height:48px;border-radius:var(--r-2);display:grid;place-items:center;flex:none}
.ticket__logo .i{width:24px;height:24px;stroke-width:1.7}
.ticket__nm{display:block;font-size:var(--fs-17);font-weight:900;letter-spacing:-.03em}
.ticket__addr{display:block;font-size:var(--fs-12);font-weight:500;color:var(--ink-2);margin-top:2px}
.ticket__rows{padding:var(--s-2) var(--s-4) var(--s-3)}
.trow{display:flex;justify-content:space-between;gap:var(--s-4);align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.trow:last-child{border-bottom:0}
.trow__k{font-size:var(--fs-13);font-weight:600;color:var(--ink-2);flex:none}
.trow__v{font-size:var(--fs-15);font-weight:800;text-align:right}
.trow__v--big{font-size:var(--fs-19);font-weight:900;letter-spacing:-.035em;color:var(--brand)}
.ticket__code{background:var(--brand-xl);padding:var(--s-4);text-align:center}
.ticket__code small{display:block;font-size:var(--fs-11);font-weight:700;
  letter-spacing:.02em;color:var(--ink-3);margin-bottom:6px}
.ticket__code b{font-size:var(--fs-26);font-weight:900;letter-spacing:.02em;color:var(--brand)}

/* ── Σελίδα καταστήματος ───────────────────────────────────── */
.hero{height:200px;position:relative;display:grid;place-items:center}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__glyph{width:88px;height:88px;border-radius:var(--r);background:rgba(255,255,255,.75);
  display:grid;place-items:center;z-index:2;backdrop-filter:blur(8px)}
.hero__glyph .i{width:44px;height:44px;stroke-width:1.4}
.hero__back{position:absolute;top:var(--s-3);left:var(--s-4);z-index:5;
  width:var(--tap);height:var(--tap);border-radius:var(--r-f);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  display:grid;place-items:center}
.hero__back .i{width:22px;height:22px;stroke-width:2.2}
.hero__acts{position:absolute;top:var(--s-3);right:var(--s-4);z-index:5;display:flex;gap:var(--s-2)}
.hero__acts button{width:var(--tap);height:var(--tap);border-radius:var(--r-f);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);display:grid;place-items:center}

.sheet{background:var(--surf);border-radius:var(--r-x) var(--r-x) 0 0;
  margin-top:-28px;position:relative;z-index:4;padding:var(--s-6) var(--s-5) 0}
.sheet h1{font-size:var(--fs-24);font-weight:900;letter-spacing:-.04em;line-height:1.15}
.pills{display:flex;gap:var(--s-2);margin-top:var(--s-3);flex-wrap:wrap}
.pill{min-height:32px;padding-inline:var(--s-3);border-radius:var(--r-f);background:var(--soft);
  display:flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-12);font-weight:700;color:var(--ink-2)}
/* Το .pill χρησιμοποιείται και ως σήμα (δεν πατιέται) και ως
   σύνδεσμος. Μόνο η δεύτερη περίπτωση είναι στόχος αφής. */
a.pill,button.pill{min-height:44px}
.pill .i{width:14px;height:14px}
.pill--open{background:var(--ok-l);color:var(--ok)}
/* Κλειστά τώρα — ουδέτερο, όχι κόκκινο: το κατάστημα δεν έχει κάνει
   κάτι λάθος επειδή είναι νύχτα. Κόκκινο εδώ διαβαζόταν ως σφάλμα. */
.pill--shut{background:var(--soft);color:var(--ink-2)}
.pill--shut .i{width:13px;height:13px}
.pill--open i{width:6px;height:6px;border-radius:var(--r-f);background:var(--ok);display:block}
/* Καταστάσεις κράτησης στο «Οι κρατήσεις μου»: πράσινο ΜΟΝΟ ό,τι
   ισχύει. Αναμονή κίτρινη, ακυρωμένη κόκκινη, ολοκληρωμένη μένει
   στο ουδέτερο .pill — το παρελθόν δεν χρειάζεται χρώμα. */
.pill--wait{background:var(--warn-l);color:var(--warn)}
.pill--off{background:var(--err-l);color:var(--err)}

.stats{display:flex;margin-top:var(--s-5);
  border:1.5px solid var(--line);border-radius:var(--r-1);overflow:hidden}
.stat{flex:1;padding:var(--s-4) var(--s-2);text-align:center;border-right:1.5px solid var(--line)}
.stat:last-child{border-right:0}
.stat__v{display:flex;align-items:center;justify-content:center;gap:var(--s-1);
  font-size:var(--fs-19);font-weight:900;letter-spacing:-.03em}
.stat__v .i{width:15px;height:15px;fill:var(--star);stroke:none}
.stat__k{display:block;font-size:var(--fs-11);font-weight:600;color:var(--ink-3);margin-top:2px}

/* ── Ψίχουλα ───────────────────────────────────────────────── */
.crumbs{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
  padding:var(--s-3) var(--s-5);font-size:var(--fs-12);color:var(--ink-3);font-weight:600}
/* Ψίχουλα: μικροί σύνδεσμοι με λίγα γράμματα, αλλά είναι ο κύριος
   τρόπος να ανέβεις επίπεδο. 19 pixel ύψος σημαίνει αστοχία. */
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.crumbs a:hover{color:var(--brand)}
.crumbs .i{width:12px;height:12px}

/* ── Υποσέλιδο ─────────────────────────────────────────────── */
/* Χωρίς οριζόντιο padding: το .container μέσα του δίνει ήδη το
   περιθώριο. Τα 20px που υπήρχαν εδώ προστίθεντο από πάνω και
   έσπρωχναν το υποσέλιδο 20px δεξιότερα από την κεφαλίδα σε κάθε
   πλάτος κάτω από 1440 — ακριβώς όπου κοιτάζει κανείς. */
.footer{border-top:1.5px solid var(--line);background:var(--surf);
  padding-block:var(--s-8) var(--s-10);margin-top:var(--s-8)}
.footer__grid{display:grid;gap:var(--s-6)}
@media (min-width:768px){ .footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.footer h3{font-size:var(--fs-13);font-weight:800;margin-bottom:var(--s-3)}
.footer li{margin-bottom:var(--s-2)}
.footer a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-13);color:var(--ink-2);font-weight:500}
.footer a:hover{color:var(--brand)}
.footer__bottom{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  font-size:var(--fs-12);color:var(--ink-3)}

/* ── Κενή κατάσταση ────────────────────────────────────────── */
.empty{text-align:center;padding:var(--s-16) 0}
.empty__ic{width:72px;height:72px;border-radius:var(--r);background:var(--soft);color:var(--ink-3);
  display:grid;place-items:center;margin:0 auto var(--s-5)}
.empty__ic .i{width:34px;height:34px}
.empty h2{font-size:var(--fs-19);font-weight:900;letter-spacing:-.03em}
.empty p{font-size:var(--fs-15);color:var(--ink-2);margin-top:var(--s-2);
  max-width:38ch;margin-inline:auto;line-height:1.6}

/* ── Βοηθητικά ─────────────────────────────────────────────── */
.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}
.mb-0{margin-bottom:0}
.text-c{text-align:center}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-13)}
@media (min-width:900px){ .mobile-only{display:none} }
@media (max-width:899px){ .desktop-only{display:none} }

/* ════════════════════════════════════════════════════════════
   ΓΕΩΜΕΤΡΙΑ

   Ένα πλέγμα για όλη τη σελίδα, με ΑΚΡΙΒΕΙΣ αριθμούς:

     πλάτος περιεχομένου = --maxw − 2 × --gut
     πλάτος κάρτας       = (περιεχόμενο − (ν−1) × --gap) / ν

   Στο desktop:  1184 − 48 = 1136 · (1136 − 3×16) / 4 = 272.000
   και 272 × 9/16 = 153.000 — η εικόνα δεν πέφτει σε μισό pixel.

   Οι κάρτες της οριζόντιας ράγας και του πλέγματος μοιράζονται
   τον ΙΔΙΟ υπολογισμό, άρα ευθυγραμμίζονται κάθετα σε όλη τη
   σελίδα. Ό,τι αλλάξει, αλλάζει σε ένα σημείο.

   Τα ύψη κειμένου είναι κλειδωμένα (height, όχι min-height):
   κάθε κάρτα βγαίνει ακριβώς ίδια, ανεξάρτητα από το μήκος του
   ονόματος. Χωρίς αυτό, μια σειρά καρτών «σκαλώνει».
   ════════════════════════════════════════════════════════════ */

[hidden]{display:none !important}

.home{ padding-bottom:var(--s-16) }

/* Ό,τι κυλάει οριζόντια φτάνει ως την άκρη της οθόνης, αλλά το
   πρώτο του στοιχείο κάθεται ακριβώς πάνω στο περιθώριο. */
.bleed{
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding-left:var(--gut);
}
.bleed::-webkit-scrollbar{display:none}

/* ════════════════════════════════════════════════════════════
   ΚΕΦΑΛΙΔΑ
   λογότυπο · αρχική · τοποθεσία · αναζήτηση · μενού · λογαριασμός
   ════════════════════════════════════════════════════════════ */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--surf);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.hdr__in{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut);   /* ίδιο με το .wrap — μία ακμή για όλα */
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-3);
  min-height:var(--header-h);
}

/* ── ΣΤΟΧΟΙ ΑΦΗΣ ──────────────────────────────────────────
   Ό,τι πατιέται είναι τουλάχιστον 44 pixel ψηλό. Δεν είναι
   αυθαίρετο νούμερο: είναι το πλάτος ενός δαχτύλου. Είχαμε
   στόχους στα 28, 32, 36 και 40 — αστοχία σε κάθε πάτημα, και
   το προϊόν λέει ρητά ότι πρέπει να το χρησιμοποιεί άνετα και
   ένας εβδομηντάχρονος.

   Το ΟΡΑΤΟ σχήμα δεν μεγαλώνει: μεγαλώνει η περιοχή που δέχεται
   το πάτημα. Ένα σήμα 32px μέσα σε κουμπί 44px φαίνεται ίδιο και
   πιάνεται πολύ πιο εύκολα.                                     */
.logo{display:flex;align-items:center;gap:var(--s-2);flex:none;text-decoration:none;
  color:var(--ink);min-height:44px}
.logo__mk{
  width:32px;height:32px;border-radius:var(--r-4);flex:none;
  display:grid;place-items:center;background:var(--brand);color:#fff;
}
.logo__mk .i{width:18px;height:18px;stroke-width:2.2}
/*  Όταν το σήμα είναι ΕΙΚΟΝΑ, το πλαίσιο δεν βάφεται: το πλακίδιο
    έχει δικές του στρογγυλεμένες γωνίες με διαφάνεια γύρω, οπότε
    ένα background θα ξεπρόβαλλε σαν τέσσερα χρωματιστά τριγωνάκια. */
img.logo__mk{background:none;object-fit:contain}
.logo__wm{font:800 var(--fs-20)/32px var(--font);letter-spacing:-.045em}

.hdr__home{
  display:none;width:44px;height:44px;border-radius:var(--r-f);flex:none;
  background:var(--soft);color:var(--ink-2);place-items:center;
}
.hdr__home:hover{background:var(--brand-xl);color:var(--brand)}
.hdr__home svg{width:18px;height:18px}

.hdr__loc{
  display:flex;align-items:center;gap:var(--s-2);flex:none;
  min-height:44px;padding-inline:var(--s-3);border:0;border-radius:var(--r-f);
  background:none;cursor:pointer;color:var(--ink);
  font:700 var(--fs-14)/36px var(--font);max-width:230px;
}
.hdr__loc:hover{background:var(--soft)}
.hdr__loc-pin{width:16px;height:16px;color:var(--brand);flex:none}
.hdr__loc-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr__loc-chev{width:13px;height:13px;color:var(--ink-3);flex:none}

.hdr__search{
  order:10;flex:1 0 100%;min-width:0;max-width:none;
  margin:0 0 var(--s-3);
  display:flex;align-items:center;gap:var(--s-2);
  height:36px;padding-inline:var(--s-3);
  background:var(--soft);border:1px solid transparent;border-radius:var(--r-f);
  transition:border-color .16s,background .16s;
}
.hdr__search:focus-within{background:var(--surf);border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-xl)}
.hdr__search svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.hdr__search input{
  flex:1;min-width:0;height:34px;border:0;background:none;outline:0;
  font:500 var(--fs-14)/34px var(--font);color:var(--ink);
}
.hdr__search input::placeholder{color:var(--ink-3)}
.hdr__search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Μικρόφωνο στην αναζήτηση της κεφαλίδας — η φωνή δεν είναι μόνο
   για την αρχική. Στόχος αφής 44×44 μέσα σε μπάρα 36: τα αρνητικά
   κάθετα περιθώρια αφήνουν την μπάρα στο ύψος της, το αόρατο
   επιπλέον ύψος του κουμπιού απλώς δέχεται τα πατήματα. */
.hdr__mic{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;margin-block:-4px;
  margin-right:calc(2px - var(--s-3));
  border:0;border-radius:var(--r-f);background:none;color:var(--ink-3);
  cursor:pointer;transition:color .16s;
}
.hdr__mic:hover{color:var(--brand)}
.hdr__mic svg{width:16px;height:16px}
.hdr__mic.is-listening{color:var(--err);animation:pulse 1.2s infinite}

.hdr__nav{display:none;gap:var(--s-1);flex:none}
.hdr__nav a{
  display:flex;align-items:center;min-height:44px;padding-inline:var(--s-3);
  border-radius:var(--r-f);text-decoration:none;white-space:nowrap;
  font:600 var(--fs-14) var(--font);color:var(--ink-2);
}
.hdr__nav a:hover{background:var(--soft);color:var(--ink)}
.hdr__acts{display:flex;align-items:center;gap:var(--s-2);flex:none;margin-left:auto}
/* Το «min-height:0» ΑΚΥΡΩΝΕ το ελάχιστο ύψος αφής και κλείδωνε το
   κουμπί «Σύνδεση» στα 36 pixel. Μένει 44, όπως κάθε άλλο. */
.hdr__acts .btn--sm{min-height:44px}

/* ════════════════════════════════════════════════════════════
   ΡΑΓΑ ΚΑΤΗΓΟΡΙΩΝ — το πρώτο φίλτρο, πάνω από όλα τα άλλα
   πλακίδιο 104×64, ετικέτα ΑΠΟ ΚΑΤΩ σε δύο γραμμές το πολύ
   ύψος στοιχείου: 64 + 8 + 28 = 100

   ΓΙΑΤΙ 108 ΚΑΙ ΟΧΙ 88: στα 88 η «Φυσικοθεραπεία» (101px σε μία
   γραμμή) έσπαγε ΜΕΣΑ στη λέξη και διαβαζόταν «Φυσικοθερα|πεία» —
   και μετά το δεύτερο κόψιμο των δύο γραμμών έτρωγε το υπόλοιπο.
   Στα 108 χωρά ολόκληρη, και τα «Πλυντήρια αυτοκινήτων» σπάνε εκεί
   που τα σπάει και ένας άνθρωπος: στο κενό.
   ════════════════════════════════════════════════════════════ */
.cats2{margin-top:var(--s-5)}
/* Τα βελάκια πάνω δεξιά. Στο κινητό δεν υπάρχουν — εκεί σέρνεις τη
   ράγα με το δάχτυλο — οπότε ούτε η γραμμή τους, αλλιώς θα έμενε
   ένα κενό 44px από το πουθενά. */
.cats2__head{display:none;align-items:center;justify-content:flex-end;gap:var(--s-2);
  height:44px;margin-bottom:var(--s-1)}
.cats2__rail{display:flex;gap:var(--gap);padding-block:2px}
/* Το ίδιο min-width:auto που φούσκωνε τα κελιά της ράγας: το
   «Φυσικοθεραπεία» είναι μία λέξη και τράβαγε το πλακίδιο πάνω από
   το πλάτος του. Τα 88px χωρούν τα συνηθισμένα ονόματα κατηγοριών
   («Γυμναστήριο», «Εστιατόριο») σε μία γραμμή. */
/*  ΧΑΠΙΑ ΣΕ ΜΙΑ ΓΡΑΜΜΗ, όχι πλακίδια σε δύο «ορόφους»:
    χρωματιστός κύκλος + όνομα δίπλα — ίδια πληροφορία στο ένα
    τρίτο του ύψους, ευθυγραμμισμένα με τα φίλτρα από κάτω. */
.cats2__item{
  flex:0 0 auto;min-width:0;display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:5px 16px 5px 7px;border:1.5px solid var(--line);
  border-radius:999px;background:var(--surf);
  scroll-snap-align:start;text-decoration:none;text-align:left;
  transition:border-color .16s var(--ease);
}
.cats2__item:hover{border-color:var(--ink-4)}
.cats2__item.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cats2__tile{
  display:grid;place-items:center;height:30px;width:30px;border-radius:50%;flex:none;
}
.cats2__tile svg{width:16px;height:16px;stroke-width:1.8}
/*  ΤΙΠΟΤΑ ΔΕΝ ΚΟΒΕΤΑΙ.
 *
 *  Εδώ υπήρχε «κόψιμο στις δύο γραμμές» με σταθερό ύψος 28px. Η
 *  «Φυσικοθεραπεία» έβγαινε «Φυσικοθερα…» — μισή λέξη, που δεν
 *  διαβάζεται και δεν λέει τι είναι η κατηγορία. Η ετικέτα τώρα
 *  παίρνει όσες γραμμές χρειάζεται· το ελάχιστο ύψος κρατά τα
 *  πλακίδια ευθυγραμμισμένα όταν οι περισσότερες είναι μονόλεκτες. */
.cats2__lb{
  white-space:nowrap;
  font:700 var(--fs-13)/1.2 var(--font);color:var(--ink-2);
}

/*  ΩΣ ΦΙΛΤΡΟ: ποια κατηγορία βλέπεις τώρα — ΧΩΡΙΣ ΠΛΑΙΣΙΟ.
 *
 *  Εδώ υπήρχε μαύρο δαχτυλίδι γύρω από το επιλεγμένο πλακίδιο. Σε
 *  μια σειρά από απαλά, σχεδόν άχρωμα τετράγωνα, μια μαύρη γραμμή
 *  είναι ο πιο δυνατός τόνος της οθόνης: τραβούσε το μάτι πιο πολύ
 *  από την ίδια τη λίστα των καταστημάτων, που είναι το θέμα της
 *  σελίδας.
 *
 *  Η επιλογή λέγεται τώρα με ένταση αντί για περίγραμμα: οι
 *  υπόλοιπες κατηγορίες ξεθωριάζουν λίγο, η επιλεγμένη μένει
 *  ζωντανή και το όνομά της πιο μαύρο. Ίδια πληροφορία, καμία
 *  γραμμή. */
.cats2__tile--all{background:var(--soft);color:var(--ink-2)}
.cats2__item.is-on .cats2__lb{font-weight:800;color:var(--ink)}

/*  ΣΤΟ DESKTOP ΤΑ ΒΕΛΑΚΙΑ.
 *
 *  Η ράγα μένει ΜΙΑ σειρά σε κάθε οθόνη. Στο κινητό τη σέρνεις με
 *  το δάχτυλο· στο desktop δεν υπάρχει δάχτυλο, οπότε μπαίνουν δύο
 *  κουμπιά πάνω δεξιά. Το JS τα κρύβει όταν χωράνε όλες οι
 *  κατηγορίες και τα σβήνει όταν φτάσεις στην άκρη — ένα βελάκι
 *  που δεν έχει πού να πάει είναι ψεύτικο κουμπί. */
@media (min-width:900px){
  .cats2__head{display:flex}
  .cats2__head .rail__arrow{display:grid}
}
.cats2__item:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-4)}

/* ════════════════════════════════════════════════════════════
   ΦΙΛΤΡΑ — ύψος 40, κλειδωμένο
   ════════════════════════════════════════════════════════════ */
.chips2{margin-top:var(--s-3)}
.chips2__rail{display:flex;gap:var(--s-2);padding-block:2px}
/* Το «min-height:0» εδώ ΑΚΥΡΩΝΕ τον στόχο αφής των 44px που ορίζει
   το .chip, και τα κλείδωνε στα 40. Μένουν 44, όπως όλα. */
.chips2 .chip{flex:none;min-height:44px}

/* ════════════════════════════════════════════════════════════
   ΠΡΟΩΘΗΤΙΚΑ — δύο πανό, βελάκια πάνω στις άκρες
   λόγος 14:5 → 560 × 200 στο desktop
   ════════════════════════════════════════════════════════════ */
.promos{position:relative;margin-top:var(--s-4)}
.promos__rail{display:flex;gap:var(--gap);scroll-snap-type:x mandatory}
.promo{
  position:relative;overflow:hidden;flex:0 0 100%;scroll-snap-align:start;
  aspect-ratio:14/5;border-radius:var(--r-3);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s-5) var(--s-6);text-decoration:none;
}
.promo b{position:relative;z-index:2;max-width:16ch;
  font:800 var(--fs-19)/24px var(--font);letter-spacing:-.025em}
.promo span{position:relative;z-index:2;max-width:30ch;margin-top:var(--s-2);
  font:600 var(--fs-13)/18px var(--font);opacity:.78}
.promo__ic{position:absolute;right:-12px;bottom:-12px;width:112px;height:112px;
  opacity:.14;stroke-width:1;z-index:1}

.promos__nav{position:absolute;inset:0;display:none;pointer-events:none}
.promos__nav .rail__arrow{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;
  width:36px;height:36px;background:var(--surf);box-shadow:var(--sh-2);
}
.promos__nav .rail__arrow[data-scroll="prev"]{left:calc(var(--s-3) * -1)}
.promos__nav .rail__arrow[data-scroll="next"]{right:calc(var(--s-3) * -1)}

/* ════════════════════════════════════════════════════════════
   ΓΡΑΜΜΗ ΚΑΤΑΣΤΑΣΗΣ
   ════════════════════════════════════════════════════════════ */
.pulse{
  display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-4);
  min-height:40px;padding:var(--s-2) var(--s-4);border-radius:var(--r-2);
  background:var(--ok-l);color:var(--ok);
  font:600 var(--fs-13)/20px var(--font);
}
.pulse b{font-weight:800}
.pulse__dot{width:8px;height:8px;border-radius:var(--r-f);background:var(--ok);flex:none;
  animation:pulseDot 2s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}

/* ════════════════════════════════════════════════════════════
   ΟΡΙΖΟΝΤΙΕΣ ΕΝΟΤΗΤΕΣ
   κεφαλή ύψους 32, κενό 12, μετά οι κάρτες
   ════════════════════════════════════════════════════════════ */
/* s-6, όχι s-8: με s-8 η αρχική στο desktop έδειχνε «τρύπια» —
   περισσότερος αέρας παρά περιεχόμενο ανάμεσα στις ενότητες. */
.rail,.sec{margin-top:var(--s-6)}

.rail__head,.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  /* min-height, ΟΧΙ height. Το καρφωτό ύψος κρατούσε την ευθυγράμμιση
     των μονόγραμμων τίτλων, αλλά όταν ο τίτλος κουβαλά κείμενο του
     ΧΡΗΣΤΗ (μακρύ ερώτημα αναζήτησης) και διπλώνει σε τέσσερις
     γραμμές, το περιεχόμενο ξεχείλιζε και ΠΑΤΟΥΣΕ τον υπότιτλο από
     κάτω — κείμενο πάνω σε κείμενο, σε πραγματικό κινητό. */
  min-height:32px;margin-bottom:var(--s-3);padding:0;
}
/* ΕΓΓΥΤΗΤΑ: κεφαλίδα που ακολουθεί ο,τιδήποτε παίρνει 32px από
   πάνω — παντού τα ίδια, όχι ό,τι κενό τύχει να αφήσει το
   προηγούμενο μπλοκ. Ως πρώτο παιδί ενότητας δεν έχει προηγούμενο
   αδελφό, οπότε ο κανόνας δεν διπλασιάζει το κενό της ενότητας.
   Τα γειτονικά margins συγχωνεύονται· τυχόν paddings όχι — γι'
   αυτό οι ενότητες ΔΕΝ κουβαλούν δικά τους inline paddings πια. */
* + .sec-head{margin-top:var(--s-8)}
/* Το text-overflow ΔΕΝ ισχύει σε flex container. Ο τίτλος της ράγας
   ΕΙΝΑΙ flex, επειδή κουβαλά εικονίδιο — γι' αυτό η περικοπή ζει στο
   εσωτερικό .rail__lbl και όχι πάνω του.

   Ο τίτλος ενότητας (.sec-head__t) όμως ΔΕΝ έχει εικονίδιο: είναι
   σκέτο κείμενο. Έπαιρνε και τους δύο κανόνες — γινόταν flex ΚΑΙ
   ζητούσε αποσιωπητικά — οπότε στα 390px το κείμενο κοβόταν κοφτά
   στη μέση λέξης, χωρίς «…», και χανόταν πάνω από το ένα τρίτο του
   («Όλα τα καταστήματα σε Αθήν»). Μένει block, και τα αποσιωπητικά
   δουλεύουν. */
.rail__title,.sec-head h2{
  display:flex;align-items:center;gap:var(--s-2);min-width:0;
  font:800 var(--fs-19)/32px var(--font);letter-spacing:-.025em;color:var(--ink);
}
.home .sec-head__t{
  display:block;min-width:0;
  font:800 var(--fs-19)/32px var(--font);letter-spacing:-.025em;color:var(--ink);
}
.rail__lbl,.home .sec-head__t{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Τίτλος που κουβαλά κείμενο ΤΟΥ ΧΡΗΣΤΗ (π.χ. το ερώτημα αναζήτησης)
   διπλώνει αντί να κόβεται: «Αποτελέσματα για «Β…»» δεν λέει τίποτα. */
.home .sec-head__t--wrap{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
.rail__ic{width:18px;height:18px;color:var(--brand);flex:none}
.rail__nav{display:flex;align-items:center;gap:var(--s-2);flex:none}
.rail__all{
  display:flex;align-items:center;height:32px;flex:none;text-decoration:none;
  font:700 var(--fs-13)/32px var(--font);color:var(--brand);
}
.rail__all:hover{text-decoration:underline}

.rail__track{display:flex;gap:var(--gap)}
/* min-width:0 και max-width ΔΕΝ είναι διακόσμηση.
   Ένα flex κελί δεν επιτρέπεται από προεπιλογή να γίνει στενότερο
   από το περιεχόμενό του (min-width:auto). Με flex-shrink:0 το κελί
   δεν συρρικνώνεται, οπότε ένα μακρύ όνομα ΜΕΓΑΛΩΝΕΙ την κάρτα:
   μετρημένα 318.2 / 292.9 / 295.6 / 272 μέσα στην ίδια ράγα.
   Το max-width κλειδώνει και την αντίθετη κατεύθυνση. */
.rail__cell{flex:0 0 var(--cell);max-width:var(--cell);min-width:0;scroll-snap-align:start}

/* Βελάκια — ίδια παντού: 32×32 */
/* ── Βελάκια ράγας: 32×32, ΕΠΙΤΗΔΕΣ ──────────────────────────
   Είναι κάτω από τα 44 pixel και μένουν έτσι. Το πρότυπο εξαιρεί
   ρητά έναν στόχο όταν η ίδια ενέργεια γίνεται και αλλιώς στην ίδια
   σελίδα: η ράγα κυλάει με το δάχτυλο, με το ποντίκι και με τα
   βελάκια του πληκτρολογίου. Τα κουμπιά είναι βοήθημα για ποντίκι,
   δεν εμφανίζονται καν σε κινητό, και στα 44 θα ξεπερνούσαν το ύψος
   της κεφαλίδας της ενότητας (32) χαλώντας τη στοίχιση.
   Το data-tap-exempt το δηλώνει ρητά στον έλεγχο ακρίβειας. */
/*  44×44, όχι 32. Ήταν κάτω από τον κανόνα του στόχου αφής και
 *  ζητούσε ρητή εξαίρεση· ένα στρογγυλό κουμπί στα 44 δεν χρειάζεται
 *  δικαιολογία και πατιέται και με χοντρό δάχτυλο σε tablet. */
.rail__arrow{
  display:none;width:44px;height:44px;border-radius:var(--r-f);flex:none;
  background:var(--soft);border:0;cursor:pointer;color:var(--ink);
  place-items:center;transition:background .16s,color .16s,opacity .16s;
}
.rail__arrow:hover{background:var(--brand-xl);color:var(--brand)}
.rail__arrow:disabled{opacity:.32;cursor:default}
.rail__arrow:disabled:hover{background:var(--soft);color:var(--ink)}
.rail__arrow svg{width:16px;height:16px;stroke-width:2.2}

/* ════════════════════════════════════════════════════════════
   ΠΛΕΓΜΑ ΚΑΡΤΩΝ
   Ίδιο πλάτος στήλης με τη ράγα — οι κάρτες ευθυγραμμίζονται
   κάθετα από τη μία ενότητα στην άλλη.
   ════════════════════════════════════════════════════════════ */
.shops,.home .shops{display:grid;gap:var(--s-3);grid-template-columns:minmax(0,1fr);padding:0}

/* ══ ΓΡΑΜΜΗ ΚΑΤΑΣΤΗΜΑΤΟΣ — «η ώρα ως στήλη» ═══════════════════
   Η φωτογραφία 16:9 έτρωγε μισή οθόνη κινητού για ένα κατάστημα.
   Τώρα το μάτι πέφτει πρώτα στην ΩΡΑ, που είναι και το κριτήριο
   της σειράς: μαύρο μπλοκ = σήμερα, γκρι = άλλη μέρα.
   Ίδια οπτική γλώσσα με το ημερολόγιο του panel.               */
.srow{
  position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 44px;
  align-items:stretch;background:var(--surf);border-radius:var(--r-2);
  box-shadow:0 0 0 1.5px var(--line);overflow:hidden;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease);
}
@media (hover:hover){ .srow:hover{box-shadow:0 0 0 1.5px var(--ink-4), var(--sh-2)} }
.srow:active{transform:scale(.995)}

.srow__t{
  background:var(--soft);display:grid;align-content:center;justify-items:center;gap:2px;
  padding:var(--s-3) var(--s-1);text-align:center;
}
.srow__t b{font:800 var(--fs-18)/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.srow__t span{font:700 var(--fs-11)/1 var(--font);color:var(--ink-3)}
.srow__t--now{background:var(--ink)}
.srow__t--now b{color:#fff}
.srow__t--now span{color:rgba(255,255,255,.72)}
.srow__x{display:grid;place-items:center}
.srow__x .i{width:20px;height:20px;color:var(--ink-4)}
.srow--full .srow__t{background:var(--line-2)}

.srow__bd{padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:2px}
/* Το <h3> κρατά το προεπιλεγμένο 1.17em του browser αν δεν του
   δοθεί μέγεθος — 17,55px, εκτός κλίμακας. Το ορίζουμε ρητά. */
.srow__nm{display:flex;align-items:center;gap:var(--s-2);min-width:0;
  font:800 var(--fs-16)/1.25 var(--font)}
.srow__ic{flex:none;width:22px;height:22px;border-radius:var(--r-4);display:grid;place-items:center}
.srow__ic .i{width:14px;height:14px}
.srow__nmt{font:800 var(--fs-16)/1.25 var(--font);letter-spacing:-.02em;color:var(--ink);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow__mt{font:500 var(--fs-13)/1.5 var(--font);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow__tags{display:flex;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap}
.srow__tag{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:var(--r-f);
  background:var(--soft);color:var(--ink-2);font:700 var(--fs-12)/1 var(--font)}
.srow__tag .i{width:12px;height:12px;fill:currentColor;stroke:none}
.srow__tag--ok{background:var(--ok-l);color:var(--ok)}

/* Το «αγαπημένο» πάνω από τον σύνδεσμο, αλλιώς δεν πατιέται ποτέ. */
.srow__fav{position:relative;z-index:2;align-self:center;justify-self:center;
  width:38px;height:38px;border-radius:var(--r-f);display:grid;place-items:center;
  color:var(--ink-4);background:transparent}
.srow__fav .i{width:19px;height:19px}
.srow__link{position:absolute;inset:0;z-index:1}

/*  ΜΙΑ ΣΤΗΛΗ, ΣΕ ΚΑΘΕ ΟΘΟΝΗ.
 *
 *  Δοκιμάστηκαν δύο και τρεις στήλες σε desktop — και η γραμμή
 *  στριμώχτηκε σε 300px: «NETLOGIC» έγινε «N…», «Μαρούσι» έγινε
 *  «Μαρού…», η ετικέτα «22 ώρες σήμερα» έσπασε σε τρεις σειρές.
 *  Μια οριζόντια γραμμή θέλει πλάτος· αν δεν το έχει, δεν είναι
 *  γραμμή. Και επειδή είναι μόλις ~76px ψηλή, μία στήλη δείχνει
 *  ούτως ή άλλως δέκα καταστήματα σε μια οθόνη. */
@media (min-width:900px){
  .shops,.home .shops{gap:var(--s-3)}
  .srow{grid-template-columns:92px minmax(0,1fr) 52px}
  .srow__t b{font-size:var(--fs-21)}   /* το 20 δεν είναι σκαλί της κλίμακας */
}

/* Τίτλος σελίδας — ήταν γραμμένος inline σε πέντε σελίδες, με
   ελαφρώς διαφορετικές τιμές στην καθεμία. */
.page-title{font:800 var(--fs-26)/1.15 var(--font);letter-spacing:-.035em;color:var(--ink)}
.page-sub{font:500 var(--fs-15)/1.5 var(--font);color:var(--ink-2);margin-top:var(--s-2)}
.page-head{margin-top:var(--s-5);margin-bottom:var(--s-5)}
.opts{display:grid;gap:var(--s-3);padding-bottom:var(--s-8)}
@media (min-width:900px){
  .page-title{font-size:var(--fs-32)}
}

/* Τίτλος ήρωα (σελίδες παρουσίασης). Βήματα αντί για clamp: το
   clamp(28px,6vw,44px) έδινε μεγέθη εκτός κλίμακας, διαφορετικά σε
   κάθε πλάτος οθόνης. */
.hero-title{font:800 var(--fs-26)/1.1 var(--font);letter-spacing:-.04em}
@media (min-width:640px){ .hero-title{font-size:var(--fs-32)} }
@media (min-width:1024px){ .hero-title{font-size:var(--fs-40)} }

/* ════════════════════════════════════════════════════════════
   ΚΑΡΤΑ ΚΑΤΑΣΤΗΜΑΤΟΣ

   εικόνα 16:9
   σώμα:  12 + 20 (όνομα) + 4 + 18 (μετα) + 4 + 18 (κατάσταση) + 12 = 88
   Κάθε γραμμή έχει σταθερό ύψος, άρα όλες οι κάρτες είναι ίσες.
   ════════════════════════════════════════════════════════════ */
.shop{
  position:relative;
  display:flex;flex-direction:column;min-width:0;color:inherit;
  background:var(--surf);border-radius:var(--r-3);
  overflow:hidden;transition:box-shadow .18s;
  /* Δαχτυλίδι με box-shadow, ΟΧΙ border. Το border μπαίνει μέσα στο
     border-box: η κάρτα των 272px έδινε εσωτερικό πλάτος 270 και
     εξώφυλλο 270 × 9/16 = 151.875 — μισό pixel, που ο browser το
     στρογγυλοποιεί άλλοτε στα 151 και άλλοτε στα 152. Έτσι μια σειρά
     καρτών «τρέμει» κατά ένα pixel. Το box-shadow δεν πιάνει χώρο,
     οπότε η κάρτα μένει 272 και το εξώφυλλο ακριβώς 272 × 153. */
  box-shadow:0 0 0 1px var(--line-2);
}
.shop:hover{box-shadow:0 0 0 1px var(--line), var(--sh-2)}
.shop:hover .shop__cover img{transform:scale(1.03)}

/* Ο σύνδεσμος καλύπτει την κάρτα· το κουμπί «αγαπημένο» κάθεται από
   πάνω του. Έτσι η κάρτα είναι όλη πατήσιμη χωρίς <button> μέσα σε <a>. */
.shop__link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.shop__cover{position:relative;aspect-ratio:16/9;overflow:hidden;display:grid;place-items:center}
.shop__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .3s var(--ease)}
.shop__glyph{opacity:.5}
.shop__glyph svg{width:56px;height:56px;stroke-width:1.1}

.fav{
  position:absolute;right:0;top:0;z-index:3;
  width:44px;height:44px;padding:8px;border-radius:var(--r-f);
  /* Ο λευκός κύκλος ζωγραφίζεται ΜΟΝΟ πάνω στο περιεχόμενο (28px)·
     το κουμπί όμως πιάνει ολόκληρα τα 44 και είναι εύκολο να πατηθεί. */
  background:rgba(255,255,255,.92);background-clip:content-box;
  color:var(--ink-2);display:grid;place-items:center;
}
.fav svg{width:15px;height:15px;stroke-width:2}
/* Η ίδια καρδιά, σε άλλη θέση: στην κεφαλίδα του καταστήματος κάθεται
   σε σειρά με τα άλλα κουμπιά, όχι απόλυτα τοποθετημένη πάνω σε κάρτα.
   Παίρνει το μέγεθος αφής των γειτόνων της (48px) — η μικρή των 28px
   είναι κάτω από το ελάχιστο για δάχτυλο. */
.hero__acts .fav{position:static;width:var(--tap);height:var(--tap)}
.hero__acts .fav svg{width:19px;height:19px}

.shop__body{padding:var(--s-3)}
.shop__name{
  height:20px;margin:0;
  font:800 var(--fs-16)/20px var(--font);letter-spacing:-.02em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shop__meta{
  display:flex;align-items:center;gap:var(--s-3);
  height:18px;margin-top:var(--s-1);overflow:hidden;
  font:600 var(--fs-13)/18px var(--font);color:var(--ink-2);white-space:nowrap;
}
.shop__m{display:inline-flex;align-items:center;gap:4px;flex:none}
.shop__m svg{width:14px;height:14px;flex:none;stroke-width:2}
.shop__m--rate{color:var(--ink);font-weight:800}
.shop__m--rate svg{fill:var(--star);stroke:none}
.shop__note{
  height:18px;margin-top:var(--s-1);
  font:700 var(--fs-12)/18px var(--font);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shop__note--free{color:var(--ok)}
.shop__where{color:var(--ink-3);font-weight:600}

/* ════════════════════════════════════════════════════════════
   ΥΠΟΛΟΙΠΕΣ ΕΝΟΤΗΤΕΣ ΑΡΧΙΚΗΣ
   ════════════════════════════════════════════════════════════ */
.more{display:flex;justify-content:center;margin-top:var(--s-5)}
.more .btn{width:100%;max-width:340px}

.tags{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tag{
  display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s-4);
  background:var(--soft);border-radius:var(--r-f);text-decoration:none;
  font:600 var(--fs-13)/36px var(--font);color:var(--ink-2);transition:.16s;
}
.tag:hover{background:var(--brand-xl);color:var(--brand)}

.how{margin-top:var(--s-8);padding:var(--s-6);background:var(--soft);border-radius:var(--r-3)}
.how__list{display:grid;gap:var(--s-5);list-style:none}
.how__step{display:grid;grid-template-columns:32px 1fr;gap:0 var(--s-3);align-items:start}
.how__n{
  grid-row:1/3;width:32px;height:32px;border-radius:var(--r-f);
  background:var(--brand);color:#fff;display:grid;place-items:center;
  font:800 var(--fs-13) var(--font);
}
.how__step b{font:800 var(--fs-15)/20px var(--font)}
.how__step span:not(.how__n){font:500 var(--fs-13)/20px var(--font);color:var(--ink-2)}

.bizcta{margin-top:var(--s-8);padding:var(--s-6);border-radius:var(--r-3);background:var(--brand-xl)}
.bizcta__in{display:grid;gap:var(--s-5)}
.bizcta h2{font:800 var(--fs-19)/24px var(--font);letter-spacing:-.025em}
.bizcta p{font:500 var(--fs-14)/22px var(--font);color:var(--ink-2);margin-top:var(--s-2)}
.bizcta .btn{width:100%}

/* ════════════════════════════════════════════════════════════
   «ΜΟΛΙΣ ΑΝΟΙΞΑΜΕ» — η αρχική με 1-4 καταστήματα
   Μία ορφανή καρτούλα σε άδειο πλέγμα 4 στηλών διαφημίζει το
   κενό. Εδώ το λίγο παρουσιάζεται ως επιλεγμένο: φαρδιές
   προβεβλημένες κάρτες, σήμα «Μόλις ανοίξαμε», και το κενό της
   αγοράς γίνεται πρόσκληση προς καταστηματάρχες (.bizfirst).
   Ενεργοποιείται ΑΥΤΟΜΑΤΑ από τον HomeController (≤4 ενεργά)
   και σβήνει μόνο του όταν ο κατάλογος μεγαλώσει.
   ════════════════════════════════════════════════════════════ */
.earlyb{display:inline-flex;align-items:center;gap:7px;min-height:30px;
  padding:0 var(--s-3);border-radius:var(--r-f);flex:none;
  background:var(--ok-l);color:var(--ok);font:700 var(--fs-12)/1 var(--font)}
.earlyb__dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.feat{background:var(--surf);border:1.5px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.feat + .feat{margin-top:var(--s-4)}
.feat__cover{position:relative;min-height:190px;display:grid;place-items:center}
.feat__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat__glyph .i{width:56px;height:56px;opacity:.55}
.feat__new{position:absolute;top:14px;left:14px;background:var(--brand);color:#fff;
  font:700 var(--fs-12)/1 var(--font);padding:8px 12px;border-radius:var(--r-f)}
.feat__body{padding:var(--s-5)}
.feat__name{font:800 var(--fs-21)/1.2 var(--font);letter-spacing:-.03em}
.feat__meta{margin-top:var(--s-2)}
.feat__desc{font:500 var(--fs-14)/1.55 var(--font);color:var(--ink-2);
  margin-top:var(--s-3);max-width:58ch}
.feat__slots{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}
.feat__free{font:700 var(--fs-13)/1 var(--font);color:var(--ok);margin-right:2px}
/* Πληροφορία, ΟΧΙ κουμπί: δεν πατιέται (άρα εκτός κανόνα 44px) —
   η ενέργεια είναι το «Δες όλες τις ώρες» από κάτω */
.feat__slot{display:inline-grid;place-items:center;min-height:36px;padding:0 14px;
  border-radius:10px;border:1.5px solid var(--line);
  font:700 var(--fs-13)/1 var(--font);background:var(--surf)}
.feat__cta{margin-top:var(--s-4);width:100%}

.soonnote{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-4);
  padding:var(--s-4) var(--s-4);border-radius:var(--r-2);background:var(--soft);
  font:500 var(--fs-13)/1.55 var(--font);color:var(--ink-2)}
.soonnote__ic{flex:none}
.soonnote__ic .i{width:18px;height:18px;color:var(--brand)}

.tag__n{font-weight:800;color:var(--brand);margin-left:4px}
.tag--all{color:var(--brand);font-weight:700}

.bizfirst{background:var(--brand-xl)}
.bizfirst__grid{display:grid;gap:var(--s-6)}
.bizfirst__t{font:800 var(--fs-24)/1.2 var(--font);letter-spacing:-.03em;margin-top:var(--s-3)}
.bizfirst__p{font:500 var(--fs-14)/1.55 var(--font);color:var(--ink-2);
  margin-top:var(--s-3);max-width:52ch}
.bizfirst__list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3)}
.bizfirst__list li{display:flex;gap:var(--s-3);align-items:center;font:600 var(--fs-14)/1.4 var(--font)}
.bizfirst__list .i{width:18px;height:18px;color:var(--ok);flex:none}
.bizfirst__cta{margin-top:var(--s-5);width:100%}
.bizfirst__art{min-width:0}
.bizfirst__cal{background:var(--surf);border:1.5px solid var(--line);
  border-radius:var(--r-2);padding:var(--s-4);box-shadow:var(--sh-2)}
.bizfirst__cal-h{font:800 var(--fs-14)/1 var(--font);margin-bottom:var(--s-2)}
.bizfirst__row{display:flex;gap:var(--s-3);align-items:center;padding:11px 12px;
  border-radius:10px;background:var(--soft);margin-top:var(--s-2);
  font:600 var(--fs-13)/1.3 var(--font)}
.bizfirst__row span{color:var(--ink-3);flex:none}
.bizfirst__row.is-new{background:var(--ok-l);color:var(--ok)}

@media (min-width:1024px){
  .feat{display:grid;grid-template-columns:420px minmax(0,1fr)}
  .feat__cover{min-height:280px}
  .feat__body{padding:var(--s-6) var(--s-6)}
  .feat__cta{width:auto}
  .bizfirst__grid{grid-template-columns:minmax(0,1fr) 380px;align-items:center}
  .bizfirst__cta{width:auto}
}

/* ════════════════════════════════════════════════════════════
   ΦΥΛΛΟ ΕΠΙΛΟΓΗΣ ΠΕΡΙΟΧΗΣ
   ════════════════════════════════════════════════════════════ */
.locsheet{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end}
.locsheet__bg{position:absolute;inset:0;background:rgba(23,24,27,.44);opacity:0;transition:.22s}
.locsheet.is-on .locsheet__bg{opacity:1}
.locsheet__panel{
  position:relative;width:100%;max-height:82vh;overflow-y:auto;background:var(--surf);
  border-radius:var(--r-2) var(--r-2) 0 0;
  padding:var(--s-3) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .26s var(--ease);
}
.locsheet.is-on .locsheet__panel{transform:none}
.locsheet__grab{width:40px;height:4px;border-radius:var(--r-f);background:var(--line);
  margin:0 auto var(--s-4)}
.locsheet__title{font:800 var(--fs-18)/24px var(--font);letter-spacing:-.025em;margin-bottom:var(--s-4)}
.locsheet__list{display:grid;gap:2px;margin-bottom:var(--s-5)}
.locsheet__row{
  display:flex;align-items:center;gap:var(--s-3);height:52px;padding-inline:var(--s-3);
  border-radius:var(--r-3);text-decoration:none;color:var(--ink);
  font:600 var(--fs-15) var(--font);transition:.16s;
}
.locsheet__row:hover{background:var(--soft)}
.locsheet__row.is-on{background:var(--brand-xl);color:var(--brand)}
.locsheet__row svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.locsheet__row.is-on svg{color:var(--brand)}
.locsheet__row span{flex:1}
.locsheet__sep{font:700 var(--fs-12) var(--font);letter-spacing:.01em;
  color:var(--ink-3);margin-bottom:var(--s-3)}

/* ════════════════════════════════════════════════════════════
   ΣΗΜΕΙΑ ΑΛΛΑΓΗΣ
   Οι στήλες αλλάζουν ΜΙΑ φορά, στη μεταβλητή --cell, και τις
   ακολουθούν και η ράγα και το πλέγμα.
   ════════════════════════════════════════════════════════════ */
@media (min-width:520px){
  /*  Η --cell αφορά τις ΡΑΓΕΣ της αρχικής (κάρτες που κυλούν
   *  οριζόντια). Η λίστα καταστημάτων ΔΕΝ την ακολουθεί πια:
   *  είναι οριζόντιες γραμμές, και μια γραμμή χωρισμένη σε
   *  τέσσερις στήλες γίνεται «N…» και «Μαρού…». */
  :root{--cell:calc((100% - var(--gap)) / 2)}
  .promo{flex-basis:calc((100% - var(--gap)) / 2)}
}

@media (min-width:640px){
  .hdr__in{flex-wrap:nowrap;height:var(--header-h)}
  .hdr__search{order:0;flex:1 1 auto;max-width:420px;margin:0 auto}
  .how__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how__step{grid-template-columns:1fr;gap:var(--s-2)}
  .how__n{grid-row:auto}
  .bizcta__in{grid-template-columns:1fr auto;align-items:center}
  .bizcta .btn{width:auto}
  .more .btn{width:auto;min-width:280px}
  .locsheet{align-items:center;justify-content:center;padding:var(--s-6)}
  .locsheet__panel{max-width:460px;border-radius:var(--r-2);transform:scale(.97);opacity:0}
  .locsheet.is-on .locsheet__panel{transform:none;opacity:1}
  .locsheet__grab{display:none}
}

@media (min-width:900px){
  :root{--cell:calc((100% - var(--gap) * 2) / 3)}
}

@media (min-width:1024px){
  .hdr__home{display:grid}
  .hdr__nav{display:flex}
  .rail__arrow{display:grid}
  .cats2__head{display:flex}

  /* Τα πανό: στο κινητό είναι ράγα που σαρώνεις (mobile-first)·
     στο desktop χωράνε ΚΑΙ ΤΑ ΤΡΙΑ — οπότε φαίνονται και τα τρία,
     χωρίς βελάκια και μισοκρυμμένες κάρτες. Ό,τι κρύβεται πίσω
     από κύλιση σε οθόνη που το χωράει, απλώς δεν διαβάζεται. */
  .promos__rail{scroll-snap-type:none}
  .promo{flex:1 1 0;min-width:0;aspect-ratio:auto;min-height:150px}
  .promos__nav{display:none}
}

@media (min-width:1184px){
  /* Με πλαίσιο 1300 και gut 24 το περιεχόμενο είναι 1252. Για να
     βγαίνει το εξώφυλλο 16:9 σε ΑΚΕΡΑΙΑ pixel, το πλάτος κάρτας
     πρέπει να είναι πολλαπλάσιο του 16: (1252 − 3×12)/4 = 304,
     304 × 9/16 = 171. Με gap 16 έβγαινε 301 → 169.3125 — μισά
     pixel στην εικόνα. Γι' αυτό εδώ το --gap γίνεται 12. */
  :root{--gap:12px;--cell:calc((100% - var(--gap) * 3) / 4)}

  /* Στο πλήρες πλάτος το περιεχόμενο χωράει ακέραιο: 4 κάρτες,
     2 πανό, 12 κατηγορίες. Το ξεμύτισμα σταματά — μισή κάρτα
     κρεμασμένη στην άκρη είναι θόρυβος, όχι υπόδειξη. */
  .rail__track.bleed,.promos__rail.bleed,.cats2__rail.bleed,.chips2__rail.bleed{
    margin-inline:0;padding-inline:0;scroll-padding-left:0;
  }
}

/* ════════════════════════════════════════════════════════════
   ΣΕΛΙΔΕΣ ΠΕΛΑΤΗ ΧΩΡΙΣ ΛΟΓΑΡΙΑΣΜΟ
   /anazitisi/ · /kratiseis/ · /agapimena/ — μόνο προσθήκες εδώ,
   καμία αλλαγή στους κανόνες πιο πάνω.
   ════════════════════════════════════════════════════════════ */

/* Η καρδιά της κάρτας (.fav, ορισμένη πιο πάνω μέσα στο .shop__cover)
   έγινε πραγματικό κουμπί αντί για διακοσμητικό span — προστίθεται
   μόνο η κίνηση και η «πατημένη» κατάσταση, το υπόλοιπο στυλ της
   μένει ίδιο. Ο επιλογέας εδώ είναι το ζεύγος .shop__cover .fav,
   όχι ξανά bare .fav — δύο bare .fav{} στο ίδιο επίπεδο θα
   συγχωνεύονταν σιωπηλά (δες _tests/smoke.php, «Συγκρούσεις CSS»). */
.shop__cover .fav{ transition:transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.fav:active{ transform:scale(.88); }
.fav.is-on{ color:var(--err); }
.fav.is-on svg{ fill:var(--err); stroke:var(--err); }

/* ════════════════════════════════════════════════════════════
   «ΠΕΣ ΜΑΣ ΤΙ ΘΕΛΕΙΣ» — αρχική
   Ένα πεδίο ελεύθερου κειμένου πάνω από τις κατηγορίες. Ο
   επισκέπτης γράφει ολόκληρη πρόταση αντί για λέξη-κλειδί· η
   φόρμα υποβάλλεται κανονικά (GET) στο /anazitisi/, χωρίς JavaScript.
   ════════════════════════════════════════════════════════════ */
/* ── «Πες μας τι θέλεις» — ο ΗΡΩΑΣ της αρχικής ──────────────
   Είναι το κύριο πράγμα που κάνει το site, οπότε στέκεται σαν
   τέτοιο: κεντραρισμένο, μεγάλο, με τα παραδείγματα από κάτω.
   Πριν καθόταν αριστερά, στο μέγεθος ενός κοινού πεδίου, με άδειο
   χώρο δεξιά του — έμοιαζε δευτερεύον. */
.tellus{ padding:var(--s-6) 0 var(--s-2) }
.tellus__form{ display:block; min-width:0; max-width:1000px; margin-inline:auto; text-align:center }
.tellus__t{ font-size:var(--fs-24); font-weight:900; letter-spacing:-.035em; line-height:1.15 }
.tellus__s{ font-size:var(--fs-14); font-weight:500; color:var(--ink-2); margin-top:var(--s-2) }
.tellus__box{
  text-align:left;   /* η φόρμα κεντράρει· το κείμενο ΜΕΣΑ στο πεδίο μένει αριστερά */
  display:flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); padding-inline:var(--s-4);
  min-height:var(--tap-lg); border-radius:var(--r-f);
  background:var(--surf); border:1.5px solid var(--line); box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tellus__box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-xl) }
/*  Στο κινητό ο διακοσμητικός μεγεθυντής ΔΕΝ χωράει: τα 20px του
    + 8px κενό είναι ακριβώς ο χώρος που λείπει από το placeholder
    («π.χ. ό,τι κοντινό, τώρα» κοβόταν στα 390px). Το κουμπί
    αναζήτησης δεξιά αρκεί ως ένδειξη — το εικονίδιο επιστρέφει
    από τα 768px όπου υπάρχει άνεση. */
.tellus__ic{ display:none; width:20px; height:20px; color:var(--ink-3); flex:none }
/*  ΟΧΙ height:100%.
    Ο γονιός («.tellus__box») έχει min-height, όχι height — δηλαδή
    ύψος «auto». Ένα ποσοστό πάνω σε auto δεν έχει τι να μετρήσει,
    οπότε το πεδίο μάζευε στο ύψος του κειμένου του: 18 pixel μέσα
    σε κουτί 56. Το κλικ έξω από αυτά τα 18 pixel δεν εστίαζε
    πουθενά, και το κύριο πεδίο αναζήτησης της αρχικής έμοιαζε
    νεκρό. Με align-self:stretch το ίδιο το flex δίνει το ύψος.

    16px, όχι 15: κάτω από 16 το Safari σε iPhone κάνει ΖΟΥΜ μόλις
    πατήσεις το πεδίο, και η σελίδα μένει μεγεθυσμένη. */
.tellus__in{
  flex:1; min-width:0; align-self:stretch; height:auto;
  background:none; border:0; outline:0;
  font-size:16px; font-weight:600;
}
.tellus__in::placeholder{ color:var(--ink-3); font-weight:500 }
/* Μικρόφωνο — ίδιο μέγεθος αφής με το κουμπί υποβολής δίπλα του,
   αλλά διακριτικό: είναι εναλλακτική, όχι η κύρια ενέργεια. Όσο
   ακούει, γίνεται κόκκινο και πάλλεται, ώστε να είναι ολοφάνερο
   ότι το μικρόφωνο είναι ανοιχτό. */
.tellus__mic{
  display:grid; place-items:center; flex:none;
  /* 44 (το ελάχιστο αφής), όχι 48: μέσα στο πεδίο του κινητού κάθε
     pixel πλάτους είναι χώρος για το ίδιο το κείμενο */
  width:44px; height:44px; margin-right:-6px; border-radius:var(--r-f);
  background:none; color:var(--ink-3); border:0;
}
.tellus__mic:hover{background:var(--soft);color:var(--ink-2)}
.tellus__mic .i{width:19px;height:19px}
.tellus__mic.is-listening{background:var(--err-l);color:var(--err);animation:pulse 1.2s infinite}

.tellus__go{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:var(--r-f);
  background:var(--brand); color:#fff;
}
.tellus__go .i{ width:20px; height:20px }
.tellus__go:active{ transform:scale(.92) }

/* Τα έτοιμα παραδείγματα: ένα πάτημα = πλήρης αναζήτηση. Δείχνουν
   ΤΙ καταλαβαίνει το πεδίο καλύτερα από κάθε οδηγία. */
/* Η ζωντανή απάντηση «Κατάλαβα: …» — πράσινη, ήρεμη, μία γραμμή */
.tellus__said{
  margin-top:var(--s-2);
  font:700 var(--fs-13)/1.5 var(--font);color:var(--ok);
}
.tellus__try{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:0 var(--s-2); margin-top:var(--s-2);
}
.tellus__try-l{ font:600 var(--fs-13)/1.4 var(--font); color:var(--ink-3) }
.tellus__eg{
  display:inline-flex; align-items:center; min-height:44px;
  font:600 var(--fs-13)/1.4 var(--font); color:var(--brand);
  text-decoration:none; border-radius:var(--r-f); padding-inline:var(--s-2);
}
.tellus__eg:hover{ text-decoration:underline; text-underline-offset:3px }

@media (min-width:768px){
  /* Μαζεμένο, όχι απλωμένο: ο ήρωας κρατά το βάρος του από το
     μέγεθος του πεδίου — όχι από τον αέρα γύρω του. */
  .tellus{ padding:var(--s-6) 0 var(--s-2) }
  .tellus__t{ font-size:var(--fs-32) }
  .tellus__s{ font-size:var(--fs-15) }
  .tellus__form{ max-width:1000px }
  .tellus__box{ min-height:60px; padding-inline:var(--s-5) }
  .tellus__ic{ display:block }
  .tellus__in{ font-size:var(--fs-17) }
  .tellus__go{ width:48px; height:48px }
}

/* ════════════════════════════════════════════════════════════
   ΣΕΛΙΔΑ ΚΑΤΑΣΤΗΜΑΤΟΣ — σύντομη εισαγωγή
   Είτε η δική του περιγραφή, είτε — όταν λείπει — μια πρόταση
   φτιαγμένη από κατηγορία/περιοχή/ωράριο/τιμές (βλ. shop.php).
   ════════════════════════════════════════════════════════════ */
.shop-intro{
  margin-top:var(--s-3); font-size:var(--fs-14); font-weight:500;
  color:var(--ink-2); line-height:1.55; max-width:60ch;
}

/* ════════════════════════════════════════════════════════════
   «ΧΑΘΗΚΕ Η ΩΡΑ» — διάσωση κράτησης
   /kratisi/xekinima/ όταν η ώρα δεν είναι πια ελεύθερη τη στιγμή
   της υποβολής. Κάθε γραμμή είναι μια ανεξάρτητη μικρή φόρμα.
   ════════════════════════════════════════════════════════════ */
.rescue-hd{ text-align:center; padding:var(--s-8) 0 var(--s-2) }
.rescue-hd__t{ font-size:var(--fs-24); font-weight:900; letter-spacing:-.03em; margin-top:var(--s-4) }
.rescue-hd__s{
  font-size:var(--fs-15); color:var(--ink-2); margin-top:var(--s-2);
  max-width:46ch; margin-inline:auto; line-height:1.6;
}

.rescue{ display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-2) }
.rescue__item{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; text-align:left;
  padding:var(--s-3) var(--s-4); min-height:var(--tap-cta);
  border:1.5px solid var(--line); border-radius:var(--r-3); background:var(--surf);
}
.rescue__item.is-featured{ border-color:var(--brand) }
.rescue__item--lg{
  border-width:2px; border-color:var(--brand); background:var(--brand-xl); padding:var(--s-4);
}
.rescue__item .btn{ flex:none }
.rescue__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.rescue__badge{
  font-size:var(--fs-11); font-weight:800; letter-spacing:.02em;
   color:var(--brand);
}
.rescue__time{ font-size:var(--fs-17); font-weight:900; letter-spacing:-.02em; color:var(--ink) }
.rescue__meta{
  font-size:var(--fs-13); font-weight:600; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── «Πού θα μας βρεις» ─────────────────────────────────────
   Στατική εικόνα χάρτη με πινέζα, και από κάτω η διεύθυνση με
   κουμπί οδηγιών. Ο πελάτης θέλει δύο πράγματα — να δει πού
   είναι, και να πάει· τίποτε άλλο δεν χρειάζεται να φορτώσει. */
.place{background:var(--surf);border:1.5px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.place__map{display:block;line-height:0;background:var(--line-2)}
.place__map img{width:100%;height:auto;aspect-ratio:64/26;object-fit:cover}
.place__foot{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);padding:var(--s-4)}
.place__addr{display:flex;align-items:flex-start;gap:var(--s-3);min-width:0}
.place__addr .i{width:18px;height:18px;color:var(--ink-3);flex:none;margin-top:2px}
.place__addr b{display:block;font:800 var(--fs-15)/1.35 var(--font);color:var(--ink)}
.place__addr small{display:block;font:600 var(--fs-13)/1.4 var(--font);color:var(--ink-3);margin-top:2px}
.place__foot .btn{flex:none}

/* ════════════════════════════════════════════════════════════
   ΣΕΛΙΔΑ ΚΑΤΑΣΤΗΜΑΤΟΣ ΣΕ DESKTOP — δύο στήλες

   Στο κινητό (η συντριπτική πλειοψηφία) ΤΙΠΟΤΑ δεν αλλάζει: τα
   περιβλήματα είναι display:contents, δηλαδή ανύπαρκτα για τη
   διάταξη — μία ροή, όπως σχεδιάστηκε.

   Από 1024px: αριστερά το κατάστημα (εικόνα, στοιχεία, χάρτης,
   φωτογραφίες, κριτικές), δεξιά η ΚΡΑΤΗΣΗ σε καρφωμένη κάρτα που
   σε ακολουθεί όσο διαβάζεις. Η στήλη-κινητού απλωμένη σε μεγάλη
   οθόνη ήταν το πιο «πρόχειρο» σημείο του desktop.
   ════════════════════════════════════════════════════════════ */
.shopgrid,.shopgrid__info,.shopgrid__book,.shopgrid__more{display:contents}

@media (min-width:1024px){
  /* ΜΙΑ στήλη, όχι δύο: η δίστηλη εκδοχή (στοιχεία αριστερά,
     κράτηση δεξιά) δοκιμάστηκε και απορρίφθηκε — η δεξιά κάρτα
     γινόταν ψηλό «μακρινάρι» δίπλα σε άδειο χώρο. Το κατάστημα
     διαβάζεται σαν μία ιστορία: στοιχεία → κράτηση (με οδηγό
     βημάτων) → χάρτης → φωτογραφίες → κριτικές, σε πλάτος
     ανάγνωσης, κεντραρισμένο — ίδια ροή με το κινητό. */
  /* Ανάσα από την κεφαλίδα: στο κινητό ο ήρωας ακουμπά επίτηδες
     (γεμάτο πλάτος, όπως σε κάθε mobile app)· στο desktop όμως το
     περιεχόμενο δεν κολλάει ποτέ στην κεφαλίδα.

     Πλάτος: ΟΛΟ το πλαίσιο των 1300, όχι στήλη ανάγνωσης. Η εκδοχή
     των 760px δοκιμάστηκε και απορρίφθηκε — η σελίδα έδειχνε
     στενή λωρίδα μέσα σε φαρδιά οθόνη. Το πλαίσιο και τα περιθώρια
     τα δίνει ήδη το .wrap του layout — το .shopgrid ΔΕΝ ξαναβάζει
     δικά του (διπλό gutter = περιεχόμενο 48px πιο μέσα από την
     κεφαλίδα). Μόνο το κείμενο περιγραφής κρατά τυπογραφικό όριο
     (.shop-intro, 60ch)· ήρωας, κάρτα κράτησης, χάρτης και
     κριτικές απλώνουν σε όλο το πλάτος. */
  .shopgrid{display:block;padding-top:var(--s-6)}
  .shopgrid__info,.shopgrid__book,.shopgrid__more{display:block}
  .shopgrid__book{
    background:var(--surf);border:1.5px solid var(--line);
    border-radius:var(--r-2);padding:var(--s-2) var(--s-2) var(--s-4);
    margin-top:var(--s-6);
  }

  /* Μέσα στην κάρτα, η κολλητή μπάρα CTA του κινητού γίνεται
     απλό πάτωμα της κάρτας — δεν έχει πού να «κολλήσει» */
  .shopgrid__book .cta-bar{position:static;box-shadow:none}

  /* Ο ήρωας του καταστήματος παίρνει σχήμα κάρτας
     αντί για γεμάτο πλάτος οθόνης */
  .shopgrid__info .hero{border-radius:var(--r-2);overflow:hidden}
}

/* ── Οδηγός κράτησης: δύο βήματα, ένα ορατό τη φορά ──────────
   Τα στοιχεία του οδηγού (γραμμή βημάτων, κουμπί «Συνέχεια»)
   υπάρχουν ΜΟΝΟ όταν τρέχει JavaScript — χωρίς αυτό μένουν
   κρυμμένα και τα δύο βήματα φαίνονται ανοιχτά, όπως πριν. */
.wiz__bar{display:none;align-items:center;justify-content:space-between;
  gap:var(--s-3);padding:var(--s-4) var(--s-5) 0}
.js .wiz__bar{display:flex}
.wiz__back{display:inline-flex;align-items:center;gap:var(--s-1);flex:none;
  min-height:44px;padding-inline:var(--s-3);border:0;border-radius:var(--r-f);
  background:var(--soft);color:var(--ink-2);cursor:pointer;
  font:700 var(--fs-13)/1 var(--font);transition:background .16s,color .16s}
.wiz__back:hover{background:var(--brand-xl);color:var(--brand)}
.wiz__back .i{width:15px;height:15px}
.wiz__crumb{font:700 var(--fs-13)/1 var(--font);color:var(--ink-3);
  margin-left:auto}
.wiz__nav{display:none;margin-top:var(--s-2)}
.js .wiz__nav{display:block}

/* ── Κάθετος ρυθμός σελίδας καταστήματος — ΕΝΑ σημείο αλήθειας ──
   Κάθε κεφαλίδα ενότητας (Πού θα μας βρεις, Φωτογραφίες, Κριτικές)
   παίρνει 32px πάνω της και 12px κάτω της (το margin-bottom του
   .sec-head), σε ΚΑΘΕ πλάτος οθόνης. Πριν, το «πάνω» κενό ήταν
   ό,τι padding-bottom έτυχε να κουβαλά η προηγούμενη ενότητα:
   0 μετά τα στατιστικά, 32 μετά τον χάρτη — άνισα κενά, και η
   κεφαλίδα καθόταν πιο κοντά στο ΞΕΝΟ περιεχόμενο απ' ό,τι στο
   δικό της. Ισχύει και στο κινητό: το display:contents δεν
   επηρεάζει τους κανόνες των παιδιών. */
.shopgrid__more .sec-head{margin-top:var(--s-8);scroll-margin-top:var(--s-4)}
.shopgrid__more > .container:last-child{padding-bottom:var(--s-8)}

/* ── Σταθερή περιοχή αποτελεσμάτων ──────────────────────────
   Με ένα κατάστημα η σελίδα ήταν κοντή, χωρίς κανένα ψηλή. Πατούσες
   φίλτρο και όλα μετακινούνταν — τα ίδια τα φίλτρα άλλαζαν θέση κάτω
   από το δάχτυλο. Το ελάχιστο ύψος κρατά τη σελίδα ακίνητη· μαζί με
   το scrollbar-gutter, τίποτα δεν κουνιέται οριζόντια ή κάθετα. */
.results{min-height:56vh}
@media (max-width:768px){ .results{min-height:48vh} }


/* ── Πεδία φόρμας — ΚΟΙΝΑ σε δημόσιο site, panel και admin ───
   Ήταν μόνο στο panel.css· η δημόσια «Επικοινωνία» τα ζητούσε και
   δεν τα έβρισκε. Ένα σύνολο, μία εμφάνιση, παντού. */
.f{display:block;margin-bottom:var(--s-5)}
.f__l{display:block;font:700 var(--fs-14)/1.4 var(--font);color:var(--ink);margin-bottom:var(--s-2)}
.f__i{width:100%;min-height:52px;padding:var(--s-3) var(--s-4);border:1.5px solid var(--line);
      border-radius:var(--r-3);background:var(--paper);color:var(--ink);
      font:500 var(--fs-15)/1.4 var(--font);transition:.18s}
.f__i:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-wash)}
.f__i::placeholder{color:var(--ink-3);font-family:ui-monospace,monospace;font-size:var(--fs-14)}
select.f__i{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B85A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;background-size:18px;
  padding-right:var(--s-10)}
.f__row{display:flex;gap:var(--s-2);align-items:stretch}
.f__row .f__i{flex:1;min-width:0}
.f__row .btn{flex:none;white-space:nowrap}
.f__unit{display:flex;align-items:center;padding:0 var(--s-4);border:1.5px solid var(--line);
         border-radius:var(--r-3);background:var(--soft);color:var(--ink-2);
         font:700 var(--fs-14) var(--font);flex:none}
.f__h{display:block;font:500 var(--fs-13)/1.55 var(--font);color:var(--ink-3);margin-top:var(--s-2)}
.f__h code{background:var(--soft);padding:1px 6px;border-radius:4px;
           font:600 var(--fs-12) ui-monospace,monospace;color:var(--ink-2)}
.f__h b{color:var(--ink-2);font-weight:700}
.f__result{display:none;margin-top:var(--s-2);font:700 var(--fs-13)/1.5 var(--font);
           padding:var(--s-2) var(--s-3);border-radius:var(--r-2)}
.f__result.is-wait{display:block;background:var(--soft);color:var(--ink-2)}
.f__result.is-ok{display:block;background:var(--ok-wash);color:var(--ok)}
.f__result.is-bad{display:block;background:var(--err-wash);color:var(--err)}


/* ── Αστέρια κριτικής ────────────────────────────────────────
   Radio buttons ντυμένα σαν αστέρια: δουλεύουν χωρίς JavaScript,
   με πληκτρολόγιο και με αναγνώστη οθόνης. Η σειρά στο HTML είναι
   ΑΝΑΠΟΔΗ (5→1) ώστε το «~» του CSS να βάφει όσα προηγούνται —
   δηλαδή όσα είναι μικρότερα από αυτό που διάλεξες. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stars{border:0;padding:0;margin:0}
.stars__row{display:flex;flex-direction:row-reverse;justify-content:flex-end;
  gap:var(--s-2);margin-top:var(--s-3)}
.stars__in{position:absolute;opacity:0;width:1px;height:1px}
.stars__st{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-3);
  cursor:pointer;color:var(--line);transition:color .15s, transform .15s}
.stars__st .i{width:34px;height:34px;fill:currentColor;stroke:none}
.stars__st:hover,.stars__st:hover ~ .stars__st,
.stars__in:checked ~ .stars__st,
.stars__in:checked + .stars__st{color:#F5A623}
.stars__in:focus-visible + .stars__st{outline:2px solid var(--brand);outline-offset:2px}
.stars__st:active{transform:scale(.92)}

/* Ο μετρητής μέσα στο τσιπάκι — πόσες κρατήσεις έχει κάθε ομάδα,
   ώστε να ξέρεις τι θα δεις ΠΡΙΝ το πατήσεις. */
.chip__n{margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--soft);
  color:var(--ink-2);font:800 var(--fs-12)/1.5 var(--font)}
.chip.is-on .chip__n{background:rgba(255,255,255,.22);color:#fff}

/* Το πλαίσιο του reCAPTCHA είναι σταθερά 304px — σε στενό κινητό
   ξεχειλίζει. Το συρρικνώνουμε αντί να αφήσουμε τη σελίδα να
   αποκτήσει οριζόντια κύλιση. */
/*  ΚΟΝΤΑ ΣΤΟ ΚΟΥΜΠΙ, ΟΧΙ ΣΤΗ ΜΕΣΗ ΤΟΥ ΠΟΥΘΕΝΑ.
 *
 *  Το πεδίο του μηνύματος αφήνει από κάτω του το κανονικό κενό των
 *  πεδίων (20px) και το κουτάκι πρόσθετε άλλα 8: σαράντα σχεδόν
 *  εικονοστοιχεία αέρα ανάμεσα σε δύο πράγματα που ανήκουν μαζί, τη
 *  στιγμή που το ίδιο το κουτάκι κάθεται κολλητά στο κουμπί. Ο
 *  έλεγχος «δεν είμαι ρομπότ» είναι μέρος της ΥΠΟΒΟΛΗΣ — εκεί
 *  ανήκει οπτικά. */
/*  Και τα έξι εικονοστοιχεία του «ουρανού» κάτω από το textarea:
 *  ένα textarea είναι inline-block, οπότε η γραμμή του αφήνει από
 *  κάτω τον χώρο του υπογεγραμμένου (descender). Φαίνεται σαν
 *  άνισο κενό και δεν είναι κενό — είναι τυπογραφία σε λάθος θέση. */
textarea.f__i{display:block}

/* ════════════════════════════════════════════════════════════
   ΓΡΑΜΜΕΣ ΠΑΚΕΤΟΥ — νούμερο πάνω, εξήγηση από κάτω
   ────────────────────────────────────────────────────────────
   Η εξήγηση μπαίνει ΚΑΤΩ και όχι δίπλα: στα 390px μια δεύτερη
   στήλη κειμένου θα γινόταν τρεις λέξεις ανά σειρά. Το ίδιο
   στοιχείο σερβίρει και τη δημόσια σελίδα τιμών και το panel,
   γι' αυτό ζει εδώ και όχι στο panel.css.
   ════════════════════════════════════════════════════════════ */
.pfeat{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none}
/* flex-start και όχι κέντρο: το εικονίδιο δένει με την ΠΡΩΤΗ
   γραμμή, όπως σε κάθε λίστα δύο σειρών — κεντραρισμένο ανάμεσα
   σε τίτλο και εξήγηση θα έδειχνε ξεκρέμαστο. */
.pfeat__i{display:flex;align-items:flex-start;gap:var(--s-3)}
.pfeat__ic{width:17px;height:17px;margin-top:3px;flex:none}
.pfeat__ic--ok{color:var(--ok)}
.pfeat__ic--brand{color:var(--brand)}
.pfeat__tx{display:grid;gap:3px;min-width:0;flex:1 1 auto}
.pfeat__tx b{font:700 var(--fs-15)/1.35 var(--font);letter-spacing:-.01em;color:var(--ink)}
/* Χωρίς φράγμα πλάτους: η κάρτα έχει ήδη το δικό της περιθώριο και
   δίπλα υπάρχει άδεια στήλη — μια εξήγηση δύο σειρών που σπάει στη
   μέση της κάρτας δείχνει σαν λάθος, όχι σαν τυπογραφία. */
.pfeat__tx span{font:500 var(--fs-13)/1.5 var(--font);color:var(--ink-3)}


/* ── Η προσφορά ενός καταστήματος ───────────────────────────
   Ήσυχη κάρτα, όχι κόκκινη ταμπέλα: η έκπτωση είναι πληροφορία,
   όχι κραυγή. Η λήξη γράφεται πάντα δίπλα — χωρίς αυτήν δεν
   είναι προσφορά, είναι τιμή. */
.offer{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);
  border:1.5px solid var(--ok-b);border-radius:16px;background:var(--ok-l)}
.offer__pc{display:grid;place-items:center;min-width:58px;height:44px;flex:none;
  border-radius:12px;background:var(--ok);color:#fff;font-size:var(--fs-17);font-weight:800;
  letter-spacing:-.02em}
.offer__bd{display:flex;flex-direction:column;gap:2px;min-width:0}
.offer__bd b{font-size:var(--fs-14);font-weight:700;color:var(--ink)}
.offer__bd small{font-size:var(--fs-12);color:var(--ink-2)}
/* Η αντίστροφη μέτρηση: σταθερά ψηφία, να μην τρέμει το πλάτος
   σε κάθε δευτερόλεπτο που αλλάζει. */
.offer__cd{font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}

/* ═══ Τιμοκατάλογος «Για επιχειρήσεις» ═══════════════════════
   Υπολογιστής: πίνακας σύγκρισης σε grid — η πρώτη στήλη οι
   παροχές, μία στήλη ανά πακέτο. Κινητό: ο πίνακας κρύβεται και
   τα ίδια δεδομένα γίνονται κάρτες — ΠΟΤΕ οριζόντια κύλιση. */
.pcards{display:flex;flex-direction:column;gap:var(--s-4);max-width:520px;margin-inline:auto}
/*  ΚΑΘΕ ΠΑΚΕΤΟ ΜΙΑ ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΟΣ: όνομα, δυο λόγια, μεγάλη
    τιμή, κουμπί, και οι παροχές σε λίστα με εικονίδια σε απαλά
    τετράγωνα — η διάταξη που διαβάζεται με τον αντίχειρα. */
.pcard{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r-2);padding:var(--s-5)}
/*  Το «Προτεινόμενο» το λέει η ετικέτα — χωρίς βαρύ περίγραμμα
    που έκανε την κάρτα να μοιάζει… επιλεγμένη σε φόρμα. */
.pcard--star{border-color:var(--line)}
.pcard__head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.pcard__name{font-size:var(--fs-21);font-weight:800;letter-spacing:-.03em}
.pcard__blurb{margin:var(--s-1) 0 0;font-size:var(--fs-13);line-height:1.5;color:var(--ink-2)}
.pcard__price{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-4)}
.pcard__price b{font-size:var(--fs-32);font-weight:900;letter-spacing:-.04em}
.pcard__price span{font-size:var(--fs-13);font-weight:600;color:var(--ink-2)}
.pcard__cta{width:100%;margin-top:var(--s-4)}
.pcard__feats{list-style:none;margin:var(--s-5) 0 0;padding:var(--s-4) 0 0;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:var(--s-2)}
.pcard__feats li{display:flex;align-items:center;gap:var(--s-3);min-height:34px;
  font-size:var(--fs-14);color:var(--ink-2)}
.pcard__feats b{color:var(--ink);font-weight:800}
/* Το κείμενο της γραμμής ρέει σαν πρόταση και διπλώνει από κάτω —
   όχι σε στενή στήλη δίπλα στον αριθμό */
.pcard__tx{min-width:0;line-height:1.4}

/* «Για επιχειρήσεις» — τα αφηγηματικά τμήματα πριν και μετά τα πακέτα:
   ίδια στήλη 1000px με όλο το site, κάρτες στο ύφος των πακέτων */
.biz-sec{max-width:1000px;margin-inline:auto}
.biz-h{font:800 var(--fs-21)/1.25 var(--font);letter-spacing:-.03em;text-align:center;margin:0 0 var(--s-2)}
.biz-sub{text-align:center;color:var(--ink-2);font-size:var(--fs-14);line-height:1.6;margin:0 0 var(--s-6)}
.bgrid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:700px){ .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bcard{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r-2);
  padding:var(--s-4);min-width:0}
.bcard > .pcard__ic{margin-bottom:var(--s-3)}
.bcard b{display:block;font-size:var(--fs-14);font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.bcard > span:not(.pcard__ic){display:block;font-size:var(--fs-12);line-height:1.55;color:var(--ink-2);font-weight:500}
.bfaq{display:grid;gap:var(--s-3)}
.bfaq__i{background:var(--surf);border:1.5px solid var(--line);border-radius:var(--r-2);padding:var(--s-4)}
.bfaq__i b{display:block;font-size:var(--fs-14);font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.bfaq__i p{margin:0;font-size:var(--fs-13);line-height:1.6;color:var(--ink-2)}
.pcard__ic{width:34px;height:34px;flex:none;border-radius:var(--r-3);background:var(--soft);
  display:grid;place-items:center}
.pcard__ic .i{width:17px;height:17px}
.pcard__oks{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--line-2)}
.pcard__oks span{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-13);
  font-weight:700;color:var(--ink)}
.pcard__oks .i{width:16px;height:16px}
.ptable__ok{width:18px;height:18px;color:var(--ok);flex:none}
.ptable__tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;
  background:var(--brand-l);color:var(--brand);font-size:var(--fs-11);font-weight:700;white-space:nowrap}

/*  «Όλα τα πακέτα περιλαμβάνουν» — τα κοινά, μία φορά, σε ΚΟΥΤΑΚΙΑ:
    πλέγμα από μικρές κάρτες με ✓, όχι μια σειρά λεξούλες. */
.pincl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);
  max-width:1000px;margin:var(--s-8) auto 0}
@media (min-width:700px){ .pincl{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pincl__t{grid-column:1 / -1;text-align:center;font-size:var(--fs-15);font-weight:800;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--s-2)}
.pincl__c{display:flex;align-items:center;gap:var(--s-2);background:var(--surf);
  border:1.5px solid var(--line);border-radius:var(--r-3);padding:var(--s-3);
  font-size:var(--fs-13);font-weight:600;color:var(--ink);min-width:0}
.pincl__c .i{width:16px;height:16px;color:var(--ok);flex:none}

/*  Οι σημειώσεις κάτω από τον πίνακα: κεντραρισμένες, σε πλάτος
    πρότασης — όχι απλωμένες με ορφανές λέξεις στο γύρισμα. */
.pnote{text-align:center;max-width:1000px;margin-inline:auto}

@media (min-width:900px){
  /*  DESKTOP: τα τέσσερα πακέτα δίπλα-δίπλα μέσα στα 880 — ίδια
      κάρτα με το κινητό, σε τέσσερις στήλες με λίγο κενό. Τα
      μεγέθη μαζεύουν ένα σκαλί για να αναπνέει η στήλη των 200px. */
  /*  minmax(0,1fr) + min-width:0 — αλλιώς η στήλη δεν μαζεύεται
      κάτω από το πλάτος του κειμένου της και το πλέγμα ξεχειλίζει
      οριζόντια στα στενά desktop. */
  .pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);
    max-width:1000px;align-items:stretch}
  .pcard{padding:var(--s-4);display:flex;flex-direction:column;min-width:0}
  .pcard__name{font-size:var(--fs-17)}
  /*  ΟΛΑ ΤΑ ΚΟΥΜΠΙΑ ΣΤΗΝ ΙΔΙΑ ΕΥΘΕΙΑ: η περιγραφή κρατά πάντα
      χώρο τριών γραμμών, ώστε τιμή και κουμπί να πατάνε στο ίδιο
      ύψος και στις τέσσερις κάρτες — όσο κι αν γράφει η καθεμία. */
  .pcard__blurb{min-height:calc(3 * 1.5em)}
  /*  Μικρότερη γραμματοσειρά στο κουμπί — το «Ξεκίνα με Business»
      χωράει σε ΜΙΑ γραμμή και όλα τα κουμπιά έχουν ίδιο ύψος. */
  .pcard__cta{font-size:var(--fs-13)}
  .pcard__price b{font-size:var(--fs-26)}
  .pcard__feats{padding-top:var(--s-3)}
  .pcard__feats li{font-size:var(--fs-12);min-height:30px;gap:var(--s-2)}
  .pcard__ic{width:28px;height:28px}
  .pcard__ic .i{width:15px;height:15px}
  .pcard__oks span{font-size:var(--fs-12)}
}
@media (min-width:1180px){
  /*  Σε πλήρες desktop: τα τέσσερα πακέτα σε ΜΙΑ σειρά. Στα μεσαία
      πλάτη (με το πλαϊνό μενού ανοιχτό) μένουν 2×2 — τέσσερις
      στήλες εκεί δεν χωρούσαν τα κουμπιά και ξεχείλιζαν. */
  .pcards{grid-template-columns:repeat(4,minmax(0,1fr))}
}