/* WCAG 2.5.5 — ελάχιστος στόχος αφής 44px (ήταν μικρότερος). */
/* =========================================================================
   GRILLBOX ORDER — Mobile-first PWA
   Brand tokens: char #0E0E0E, ember #FF4019, paper #F4ECDE, cream #FBF6EC
   ========================================================================= */
:root {
  --char:    #0E0E0E;
  --smoke:   #1A1A1A;
  --ash:     #2A2A2A;
  --grease:  #6B6259;
  --paper:   #F4ECDE;
  --cream:   #FBF6EC;
  --ember:   #FF4019;
  --ember-tx: #C42E0F;   /* το ίδιο κόκκινο, σκουρότερο — ΓΙΑ ΚΕΙΜΕΝΟ σε ανοιχτό φόντο */
  --flame:   #FF6A3D;
  --mustard: #F4B43C;
  --green:   #16a34a;
  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--char);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* ΣΤΗΛΗ FLEX: το .app-shell μεγαλωνει (flex:1) και σπρωχνει το υποσελιδο
     στο κατω μερος. Πριν, το υποσελιδο ηταν ΜΕΣΑ στην οθονη του μενου και
     «κρεμοταν» στη μεση της σελιδας, κατω απο τα προϊοντα. */
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding-bottom: calc(72px + var(--safe-bottom));
}
.app-shell { flex: 1 0 auto; }
button { font-family: var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.screen { display: none; }
.screen.active { display: block; }

/* ===== HEADER ===== */
#app-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--char);
  border-bottom: 3px solid var(--ember);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; max-width: 480px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 6px; }
.logo-grill { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--cream); letter-spacing: 1px; }
.logo-box { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--ember); letter-spacing: 1px; }
.logo-tag {
  font-size: 8px; font-weight: 800; color: var(--ember);
  border: 1.5px solid var(--ember); padding: 1px 5px; border-radius: 3px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.cart-icon {
  /* WCAG 2.5.5: ήταν 34x38 — κάτω από το ελάχιστο 44px. */
  position: relative; background: none; border: none; color: var(--cream);
  min-width: 44px; min-height: 44px; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-badge {
  position: absolute; top: 0; right: 0;
  background: var(--ember); color: var(--cream);
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ===== CATEGORIES ===== */
.cats-scroll {
  display: flex; gap: 6px; padding: 12px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 480px; margin: 0 auto;
  scrollbar-width: none;
}
.cats-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
  /* WCAG 2.5.5 / Apple HIG / Material: ελάχιστος στόχος αφής 44px.
     Ήταν 35px ύψος — δύσκολο σε κινητό, που είναι το 90% της κίνησης. */
  white-space: nowrap; padding: 12px 16px; border-radius: 99px;
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; border: 2px solid var(--char);
  background: transparent; color: var(--char); flex-shrink: 0;
  transition: all 0.15s;
}
.cat-pill.active { background: var(--char); color: var(--cream); }

/* ===== ITEMS GRID =====
   Καθε κατηγορια ειναι δικο της <section class="cat-block"> με ΕΝΑΝ τιτλο και
   δικο του πλεγμα. Πριν ολα ηταν σε μια ροη και ο τιτλος επαναλαμβανοταν
   καθε φορα που αλλαζε κατηγορια στη σειρα της βασης — «CHICKEN BURGERS»
   εμφανιζοταν τρεις φορες. */
.items-grid {
  display: flex; flex-direction: column; gap: 22px;
  padding: 0 16px 16px; max-width: 480px; margin: 0 auto;
}
.cat-items { display: flex; flex-direction: column; gap: 10px; }
.cat-divider {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 0 0 8px; margin: 0 0 12px; color: var(--char);
  border-bottom: 2px solid var(--char);
}
.cat-count {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: #554D45; background: rgba(0,0,0,.06);
  border-radius: 99px; padding: 2px 8px; letter-spacing: 0;
}
.items-empty {
  text-align: center; padding: 40px 20px; color: var(--grease); font-size: 14px;
}
.item-card {
  display: flex; gap: 12px; background: var(--cream);
  border: 2px solid var(--char); border-radius: 10px;
  padding: 10px; padding-right: 52px; position: relative; cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
  /* Ιδιο υψος για ολες τις καρτες της ιδιας σειρας — αλλιως το πλεγμα
     βγαινει «σκαλωτο» οταν καποιο ονομα πιανει δυο γραμμες. */
  height: 100%;
}
.item-card:active { transform: scale(0.98); }
.item-card-img {
  width: 72px; height: 72px; border-radius: 6px; flex-shrink: 0;
  object-fit: cover; background: var(--ash);
}
.item-card-img-placeholder {
  width: 72px; height: 72px; border-radius: 6px; flex-shrink: 0;
  background: var(--ash); display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--cream);
}
.item-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.item-card-name { font-size: 14px; font-weight: 700; line-height: 1.25; margin-bottom: 2px; }
.item-card-desc { font-size: 11px; color: var(--grease); line-height: 1.3; margin-bottom: 4px; }
/* ΠΡΟΣΟΧΗ: εδώ υπήρχε "justify-content: space-between". Στα προϊόντα με μέγεθος
   η γραμμή έχει ΔΥΟ παιδιά («από» + τιμή), οπότε το space-between τα έσπρωχνε
   στις δύο άκρες: το «από» αριστερά και η τιμή κολλητά στο κουμπί «+» δεξιά.
   Τα δύο κομμάτια είναι ΜΙΑ φράση («από 5,00 €») και πρέπει να μένουν μαζί. */
.item-card-bottom { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px; }
.item-card-price { font-size: 15px; font-weight: 800; color: var(--ember-tx); }
.item-card-from { font-size: 10px; color: var(--grease); font-weight: 600; }
.item-card-add {
  min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ember); border: none; color: var(--cream);
  font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  position: absolute; bottom: 10px; right: 10px;
  transition: transform 0.1s;
}
.item-card-add:active { transform: scale(0.9); }

/* ===== ΓΡΑΜΜΗ ΠΡΟΣΦΟΡΑΣ =====
   Ηταν στο ΤΕΛΟΣ της σελιδας, δηλαδη ο πελατης την εβλεπε αφου ειχε ηδη
   διαλεξει. Ειναι ο λογος να παραγγειλει απευθειας — ανηκει στην κορυφη. */
.promo-bar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #fff7e6, #fef3c7);
  border: 2px solid var(--mustard); border-radius: 10px;
  padding: 11px 16px; margin: 0 16px 14px;
  max-width: calc(480px - 32px); margin-left: auto; margin-right: auto;
  color: #78350f; font-size: 13px;
}
.promo-badge {
  font-family: var(--font-display); font-weight: 900; font-size: 15px;
  background: var(--char); color: var(--mustard);
  padding: 4px 10px; border-radius: 7px; flex-shrink: 0; letter-spacing: .5px;
}
.promo-txt { font-weight: 700; }

/* ===== DETAIL SCREEN ===== */
.detail-back {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--cream);
  font-size: 14px; font-weight: 700; padding: 8px 0;
}
.detail-hero {
  width: 100%; aspect-ratio: 16/10; max-height: 240px;
  object-fit: cover; background: var(--ash);
}
.detail-hero-placeholder {
  width: 100%; aspect-ratio: 16/10; max-height: 240px;
  background: var(--ash); display: flex; align-items: center; justify-content: center;
  font-size: 64px;
}
.detail-body { padding: 16px; max-width: 480px; margin: 0 auto; }
.detail-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; margin-bottom: 4px; }
.detail-desc { font-size: 13px; color: var(--grease); line-height: 1.5; margin-bottom: 12px; }
.detail-price { font-size: 22px; font-weight: 800; color: var(--ember-tx); margin-bottom: 16px; }
.detail-section {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--grease); margin: 14px 0 8px;
}
.size-options { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn {
  flex: 1; min-width: 80px; padding: 12px 8px; min-height: 44px; border-radius: 8px;
  font-size: 12px; font-weight: 700; text-align: center;
  border: 2px solid var(--char); background: transparent; color: var(--char);
  transition: all 0.12s;
}
.size-btn.active { background: var(--char); color: var(--cream); }
.size-btn-price { display: block; font-size: 13px; font-weight: 800; margin-top: 2px; }
.detail-notes {
  width: 100%; border: 2px solid var(--char); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; font-family: var(--font-body);
  background: var(--cream); color: var(--char); resize: none; min-height: 44px;
}
.detail-notes::placeholder { color: var(--grease); }
.qty-row {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin: 16px 0;
}
.qty-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--char);
  background: transparent; font-size: 20px; font-weight: 700; color: var(--char);
  display: flex; align-items: center; justify-content: center;
}
.qty-num { font-size: 22px; font-weight: 800; min-width: 32px; text-align: center; }
.add-to-cart-btn {
  width: 100%; padding: 14px; background: var(--ember); color: var(--cream);
  border: none; border-radius: 10px; font-size: 15px; font-weight: 800;
  transition: transform 0.1s;
}
.add-to-cart-btn:active { transform: scale(0.97); }

/* ===== CART SCREEN ===== */
.cart-header {
  background: var(--char); color: var(--cream); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.cart-back {
  background: none; border: none; color: var(--cream); font-size: 20px;
  padding: 4px; cursor: pointer;
}
.cart-title { font-family: var(--font-display); font-weight: 900; font-size: 16px; flex: 1; text-align: center; }
.cart-body { padding: 20px 16px 16px; max-width: 480px; margin: 0 auto; }
.delivery-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.del-btn {
  flex: 1; padding: 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  text-align: center; border: 2px solid var(--char); background: transparent;
  color: var(--char); transition: all 0.12s;
}
.del-btn.active { background: var(--char); color: var(--cream); }
.cart-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cart-item {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--cream); border: 2px solid var(--char); border-radius: 8px;
}
.cart-item-qty {
  width: 28px; height: 28px; background: var(--char); color: var(--cream);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}

/* ===== ΜΙΚΡΟΓΡΑΦΙΑ ΠΡΟΪΟΝΤΟΣ (καλάθι + οθόνη επιβεβαίωσης) =====
   Αντικατέστησε το σκέτο τετράγωνο με την ποσότητα. Η ποσότητα δεν χάθηκε:
   μπήκε ως σήμα πάνω στην εικόνα, ώστε ο πελάτης να βλέπει ΚΑΙ τι πήρε ΚΑΙ πόσα. */
.cart-item-thumb {
  position: relative; width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: var(--ash);
}
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-thumb-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: var(--ash); color: var(--cream);
}
.cart-item-qty-badge {
  position: absolute; bottom: 0; right: 0;
  background: var(--char); color: var(--cream);
  font-size: 11px; font-weight: 800; line-height: 1;
  padding: 3px 5px; border-radius: 6px 0 0 0;
}
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-name { font-size: 13px; font-weight: 700; }
.cart-item-meta { font-size: 10px; color: var(--grease); }
.cart-item-price { font-size: 13px; font-weight: 800; color: var(--ember-tx); flex-shrink: 0; }
.cart-item-remove {
  background: none; border: none; color: var(--grease); font-size: 18px;
  padding: 4px; min-width: 44px; min-height: 44px; flex-shrink: 0; line-height: 1;
}
/* ===== ΟΘΟΝΗ ΕΠΙΒΕΒΑΙΩΣΗΣ — τι παρήγγειλε, με εικόνες ===== */
.success-items {
  text-align: left; background: var(--cream); border: 2px solid var(--char);
  border-radius: 10px; padding: 12px; margin-bottom: 16px;
}
.success-items-head {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grease); margin-bottom: 10px;
}
.success-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.success-item + .success-item { border-top: 1px solid var(--ash); }
.success-item-body { flex: 1; min-width: 0; }
.success-item-name { font-size: 13px; font-weight: 700; }
.success-item-meta { font-size: 10px; color: var(--grease); }
.success-item-price { font-size: 13px; font-weight: 800; color: var(--ember-tx); flex-shrink: 0; }
.success-items-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--char);
  font-size: 13px; font-weight: 800;
}

.cart-empty { text-align: center; padding: 40px 20px; color: var(--grease); }
.cart-empty-icon { font-size: 48px; margin-bottom: 12px; }
.cart-empty h3 { font-size: 16px; font-weight: 700; color: var(--char); margin-bottom: 4px; }
.cart-summary {
  padding: 14px 0; border-top: 2px solid var(--char); margin-top: 4px;
}
.cart-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.cart-row--discount { color: var(--green); font-weight: 600; }
.cart-row--total {
  font-weight: 800; font-size: 16px; padding: 10px 0 0;
  border-top: 2px dashed var(--grease); margin-top: 6px;
}
.cart-row--total .cart-row-val { color: var(--ember); }
.address-section { margin: 14px 0; }
.address-field {
  width: 100%; border: 2px solid var(--char); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; font-family: var(--font-body);
  background: var(--cream); color: var(--char); margin-bottom: 8px;
}
.address-field::placeholder { color: var(--grease); }
.order-btn {
  width: 100%; padding: 16px; background: var(--ember); color: var(--cream);
  border: none; border-radius: 10px; font-size: 16px; font-weight: 800;
  margin-top: 10px; transition: transform 0.1s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.order-btn:active { transform: scale(0.97); }
.order-btn svg { flex-shrink: 0; }
.order-note {
  text-align: center; padding: 10px 0 0; font-size: 11px; color: var(--grease);
}

/* ===== STICKY CART BAR ===== */
.cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: var(--char); border-top: 2px solid var(--ember);
  padding: 10px 16px calc(10px + var(--safe-bottom));
  display: flex; align-items: center; justify-content: space-between;
}
.cart-bar-info { display: flex; align-items: center; gap: 10px; }
.cart-bar-count {
  background: var(--cream); color: var(--char);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.cart-bar-total { color: var(--cream); font-size: 15px; font-weight: 800; }
.cart-bar-btn {
  background: var(--ember); color: var(--cream); border: none;
  padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: 800;
}

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--char); color: var(--cream); padding: 10px 18px;
  border-radius: 8px; font-size: 13px; font-weight: 700; z-index: 100;
  border-left: 4px solid var(--ember); transition: transform 0.25s; white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ===== RESPONSIVE ===== */
@media (min-width: 481px) {
  .items-grid { padding: 0 24px 24px; }
  .detail-body, .cart-body { padding: 20px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ  (≥1024px)
   ---------------------------------------------------------------------------
   ΤΟ ΠΡΟΒΛΗΜΑ: όλη η σελίδα ήταν κλειδωμένη στα 480px. Σε οθόνη 1600px αυτό
   σημαίνει ότι χρησιμοποιούνταν το 30% του πλάτους, έμεναν 1120px κενά, και
   το μενού γινόταν μια στήλη 3.000 pixel ύψος — ατελείωτο κύλισμα.

   Η ΛΥΣΗ, σε τρία μέρη:
     1. Πλέγμα προϊόντων σε δύο στήλες → οι μισές κυλήσεις.
     2. Μόνιμο πλαϊνό καλάθι δεξιά → ο πελάτης βλέπει τι μαζεύει ΟΣΟ διαλέγει,
        χωρίς να φύγει από το μενού. Το πρότυπο κάθε σοβαρής πλατφόρμας.
     3. Ταμείο σε δύο στήλες: στοιχεία αριστερά, σύνοψη δεξιά κολλημένη —
        η σύνοψη μένει ορατή όσο συμπληρώνει διεύθυνση και τηλέφωνο.

   ΤΙΠΟΤΑ ΑΠΟ ΑΥΤΑ ΔΕΝ ΑΓΓΙΖΕΙ ΤΟ ΚΙΝΗΤΟ: κάθε κανόνας είναι μέσα σε
   media query, και η σειρά των στοιχείων στο DOM έμεινε ίδια.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Η κάτω μπάρα καλαθιού είναι λύση για κινητό. Σε desktop τη θέση της
     παίρνει το μόνιμο πλαϊνό καλάθι, οπότε φεύγει μαζί με το padding της. */
  body { padding-bottom: 0; }
  .cart-bar { display: none !important; }

  .header-inner { max-width: 1440px; padding: 14px 32px; }
  .logo-grill, .logo-box { font-size: 22px; }

  .app-shell {
    /* width: 100% ΥΠΟΧΡΕΩΤΙΚΟ. Το <body> είναι στήλη flex· χωρίς ρητό πλάτος
       το «margin: 0 auto» ακυρώνει το τέντωμα και το περίβλημα παίρνει το
       πλάτος του ΠΕΡΙΕΧΟΜΕΝΟΥ (μετρήθηκε 669px αντί 1376px), οπότε το πλέγμα
       προϊόντων έπεφτε σε μία στήλη. Ίδια παγίδα με τα στοιχεία πλέγματος. */
    width: 100%;
    max-width: 1440px; margin: 0 auto; padding: 26px 32px 60px;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
    align-items: start;
  }

  /* Το πλαϊνό καλάθι εμφανίζεται ΜΟΝΟ όσο ο πελάτης περιηγείται στο μενού.
     Στο ταμείο θα ήταν διπλή —και αντιφατική— εμφάνιση των ίδιων αριθμών. */
  /* Στα 1024-1279 το πλαϊνό είναι πιο στενό: αλλιώς μένουν 580px για το
     μενού και δεν χωρούν δύο κάρτες, οπότε βλέπεις μία τεντωμένη 565px. */
  .app-shell:has(#screen-menu.active) { grid-template-columns: minmax(0, 1fr) 300px; }
  .app-shell:has(#screen-menu.active) .cart-aside { display: block; }

  /* Τα εσωτερικά πλάτη 480px δεν έχουν πια νόημα — το πλέγμα ορίζει το πλάτος.
     ΠΡΟΣΟΧΗ ΣΤΟ margin: όλα αυτά είχαν «margin: 0 auto» για να κεντράρονται σε
     κινητό. Σε στοιχείο ΠΛΕΓΜΑΤΟΣ όμως τα αυτόματα πλαϊνά περιθώρια ακυρώνουν
     το τέντωμα: το στοιχείο παίρνει το πλάτος του ΠΕΡΙΕΧΟΜΕΝΟΥ του και
     κεντράρεται. Έτσι το πλέγμα προϊόντων έμενε 409px μέσα σε στήλη 788px και
     χωρούσε μόνο μία κάρτα. Τα μηδενίζουμε ρητά. */
  .cats-scroll, .items-grid, .promo-bar,
  .detail-body, .cart-body {
    max-width: none; margin-left: 0; margin-right: 0;
  }
  .items-grid { padding: 0; }
  .promo-bar { margin: 0 0 18px; }
  .order-footer-inner {
    max-width: 1440px; padding: 22px 32px;
    flex-direction: row; justify-content: space-between; text-align: left;
  }

  /* ── ΠΛΕΓΜΑ ΠΡΟΪΟΝΤΩΝ ──
     Το πλεγμα ειναι μεσα σε ΚΑΘΕ κατηγορια (.cat-items), οχι στη συνολικη
     λιστα. Ετσι καθε κατηγορια ξεκιναει σε καθαρη σειρα και δεν μενουν
     μισοαδειες σειρες αναμεσα στους τιτλους. */
  .items-grid { display: flex; flex-direction: column; gap: 30px; }
  .cat-items {
    display: grid;
    /* auto-fill + minmax: ο browser βαζει οσες στηλες χωρανε ΠΡΑΓΜΑΤΙΚΑ,
       με ελαχιστο πλατος καρτας 278px. Καμια καρτα δεν στριμωχνεται. */
    grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
    gap: 12px; align-items: stretch;
  }
  .item-card { padding-right: 62px; padding-top: 12px; padding-bottom: 12px; }
  /* Μεγαλυτερη εικονα σε desktop: στα 72px το φαγητο δεν διαβαζεται. */
  .item-card-img, .item-card-img-placeholder { width: 104px; height: 104px; border-radius: 8px; }
  .item-card-name { font-size: 15px; }
  .item-card-price { font-size: 17px; }
  .item-card:hover { border-color: var(--ember); transform: translateY(-1px); }
  .item-card-add { width: 40px; height: 40px; min-width: 40px; min-height: 40px; bottom: 12px; right: 12px; }
  .cat-divider { font-size: 15px; }

  /* ── ΜΟΝΙΜΟ ΠΛΑΪΝΟ ΚΑΛΑΘΙ ── */
  .cart-aside { position: sticky; top: 96px; }

  /* ── ΤΑΜΕΙΟ ΣΕ ΔΥΟ ΣΤΗΛΕΣ ──
     Η σειρά στο DOM είναι: τρόπος → σύνοψη → στοιχεία. Με ρητές θέσεις
     πλέγματος τα βάζουμε σωστά ΧΩΡΙΣ να πειράξουμε τη σειρά ανάγνωσης. */
  /* ΤΟ ΠΡΟΒΛΗΜΑ ΠΟΥ ΔΙΟΡΘΩΝΕΤΑΙ ΕΔΩ:
     Η αριστερή στήλη ήταν 932px ενώ τα πεδία μέσα της κόβονταν στα 520px.
     Αποτέλεσμα: η μαύρη μπάρα έπιανε 1075px, ο διακόπτης 730px, η επιλογή
     ταυτότητας 400px και η σύνοψη κρεμόταν στην άκρη — τέσσερα διαφορετικά
     πλάτη, τίποτα σε κοινή γραμμή, και ένα τεράστιο κενό δεξιά της φόρμας.
     Τώρα ΟΛΟ το ταμείο ζει σε ένα μπλοκ 1040px: η φόρμα γεμίζει τη στήλη της
     και δεν χρειάζεται καπάκι, οπότε αριστερή και δεξιά άκρη είναι κοινές
     για μπάρα, διακόπτη, φόρμα και σύνοψη. */
  /* ΠΡΟΣΟΧΗ: το padding μηδενίστηκε επειδή το πλέγμα ορίζει πλέον τα
     περιθώρια — αλλά έτσι έφυγε και το ΠΑΝΩ κενό, και ο διακόπτης
     Delivery/Takeaway κόλλησε πάνω στη μαύρη μπάρα. Το ξαναδίνουμε ρητά. */
  .cart-body { padding: 0; }
  .cart-header, .cart-layout { max-width: 1040px; }
  .cart-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 372px;
    gap: 36px; align-items: start;
    margin-top: 24px;
  }
  .cart-mode { grid-column: 1; grid-row: 1; }
  .cart-main { grid-column: 1; grid-row: 2; }
  .cart-side {
    grid-column: 2; grid-row: 1 / span 2;
    position: sticky; top: 96px;
    background: var(--cream); border: 2px solid var(--char);
    border-radius: 14px; padding: 18px;
  }
  /* Ο διακόπτης τρόπου γεμίζει τη στήλη του — ήταν το πιο εμφανές
     «ξεχειλωμένο» στοιχείο της οθόνης. */
  .cart-mode .delivery-toggle { width: 100%; }
  .acc-box { max-width: 560px; }
}

/* ── ΠΟΛΥ ΜΕΓΑΛΕΣ ΟΘΟΝΕΣ (≥1280px): οι κατηγορίες γίνονται κάθετη στήλη ──
   Οριζόντιο κύλισμα με ποντίκι είναι δυσκίνητο· σε κάθετη λίστα φαίνονται
   όλες μαζί και μένουν κολλημένες όσο ο πελάτης κατεβαίνει. */
@media (min-width: 1280px) {
  /* Από εδώ και πάνω υπάρχει χώρος για πιο άνετο πλαϊνό καλάθι. */
  .app-shell:has(#screen-menu.active) { grid-template-columns: minmax(0, 1fr) 348px; }
  #screen-menu.active {
    display: grid; grid-template-columns: 178px minmax(0, 1fr);
    gap: 30px; align-content: start;
  }
  .promo-bar { grid-column: 1 / -1; }
  .cats-scroll {
    flex-direction: column; align-items: stretch;
    overflow: visible; padding: 0;
    position: sticky; top: 96px; align-self: start;
    gap: 6px;
  }
  .cat-pill { text-align: left; }
  .items-grid { grid-column: 2; }
}

/* ===== v4.9.x: accessibility + mobile hardening (shared) ===== */
:focus-visible { outline: 2px solid #FF4019; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; } /* iOS: αποτροπή auto-zoom στο focus */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
/* Offline/connection banner (kitchen/driver) */
.conn-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #c2410c; color: #fff; text-align: center; font-weight: 800;
  padding: 10px 14px; font-size: 14px; display: none;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* WhatsApp απενεργοποιημένο → κρύψε το λογότυπο στο κουμπί (v4.10.27) */
.order-btn.no-wa svg { display: none; }

/* ============ ΛΟΓΑΡΙΑΣΜΟΣ ΠΕΛΑΤΗ (v4.12.3) ============ */
/* ═══════════ ΜΟΝΙΜΟ ΠΛΑΪΝΟ ΚΑΛΑΘΙ (μόνο σε μεγάλη οθόνη) ═══════════
   Κρυμμένο εξ ορισμού. Εμφανίζεται μόνο μέσα από το media query των
   1024px — σε κινητό δεν υπάρχει καν, ώστε να μη φορτώνει τίποτα περιττό. */
.cart-aside { display: none; }
.ca-box {
  background: var(--cream); border: 2px solid var(--char);
  border-radius: 14px; padding: 16px;
  max-height: calc(100dvh - 130px); display: flex; flex-direction: column;
}
.ca-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: .5px;
  padding-bottom: 12px; border-bottom: 2px solid var(--char); margin-bottom: 12px;
}
.ca-count {
  background: var(--ember); color: #fff; font-size: 12px; font-weight: 800;
  min-width: 22px; height: 22px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
/* Η λίστα κυλάει μόνη της· τα σύνολα και το κουμπί μένουν πάντα ορατά. */
.ca-items { overflow-y: auto; flex: 1; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.ca-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ca-item + .ca-item { border-top: 1px solid rgba(0,0,0,.10); }
.ca-item-body { flex: 1; min-width: 0; }
.ca-item-name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.ca-item-meta { font-size: 10px; color: var(--grease); }
.ca-item-price { font-size: 13px; font-weight: 800; color: var(--ember-tx); flex-shrink: 0; }
.ca-item-rm {
  background: none; border: none; color: var(--grease); font-size: 15px;
  min-width: 32px; min-height: 32px; flex-shrink: 0; line-height: 1; border-radius: 6px;
}
.ca-item-rm:hover { background: rgba(0,0,0,.07); color: var(--char); }
.ca-free {
  background: #FEF3C7; border: 1px solid var(--mustard); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; margin-top: 12px; text-align: center;
}
.ca-sum { border-top: 2px solid var(--char); margin-top: 12px; padding-top: 12px; }
.ca-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.ca-row--dis { color: var(--green); }
.ca-row--tot {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--char);
  border-top: 1px solid rgba(0,0,0,.15); padding-top: 8px; margin-top: 8px; margin-bottom: 0;
}
.ca-go {
  width: 100%; min-height: 50px; margin-top: 14px; border: none; border-radius: 12px;
  background: var(--ember); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 15px; letter-spacing: .3px;
  transition: background .15s, transform .1s;
}
.ca-go:hover { background: #E63710; }
.ca-go:active { transform: scale(.985); }
.ca-empty { text-align: center; padding: 26px 10px; color: var(--grease); font-size: 13px; line-height: 1.5; }
.ca-empty-icon { font-size: 34px; margin-bottom: 8px; }

/* ===== ΥΠΟΣΕΛΙΔΟ =====
   flex-shrink: 0 ωστε να μη συμπιεζεται· το body ειναι στηλη flex και το
   .app-shell (flex: 1) το σπρωχνει παντα στο κατω μερος της σελιδας. */
.order-footer {
  flex-shrink: 0; margin-top: 28px;
  background: var(--char); color: var(--paper);
}
.order-footer-inner {
  max-width: 480px; margin: 0 auto;
  padding: 18px 16px calc(18px + var(--safe-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.order-footer-brand {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--cream);
}
.order-footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 18px;
}
.order-footer a, .order-footer-btn {
  color: rgba(244,236,222,.72); font-size: 12px; font-family: inherit;
  text-decoration: none; background: none; border: none; cursor: pointer;
  padding: 8px 2px; min-height: 40px; display: inline-flex; align-items: center;
}
.order-footer a:hover, .order-footer-btn:hover { color: var(--cream); text-decoration: underline; }
.order-footer a:focus-visible, .order-footer-btn:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px;
}

/* ===== ΕΠΙΛΟΓΗ ΤΑΥΤΟΤΗΤΑΣ ΣΤΟ ΤΑΜΕΙΟ =====
   Ο «επισκέπτης» είναι ΠΡΩΤΟΣ και τονισμένος. Δεν είναι σχεδιαστικό καπρίτσιο:
   κάθε βήμα που μοιάζει υποχρεωτικό πριν την παραγγελία χάνει πελάτες, και
   ο λογαριασμός εδώ είναι όντως προαιρετικός. */
.co-gate {
  border: 2px solid var(--char); border-radius: 12px; padding: 14px;
  background: var(--cream); margin-bottom: 4px;
}
.co-gate-title { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.co-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; min-height: 56px; padding: 10px 14px; margin-bottom: 8px;
  border: 2px solid rgba(0,0,0,.15); border-radius: 10px;
  background: transparent; color: var(--char);
  font-family: inherit; text-align: left; cursor: pointer;
}
.co-opt:last-child { margin-bottom: 0; }
.co-opt--primary { border-color: var(--ember); background: rgba(255,64,25,.06); }
.co-opt-main { font-size: 15px; font-weight: 800; }
.co-opt-sub { font-size: 12px; color: var(--grease); font-weight: 500; }
.co-opt:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }

.co-as {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--grease);
  background: var(--cream); border: 2px solid rgba(0,0,0,.12);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.co-as b { color: var(--char); word-break: break-all; }
.co-as-link {
  background: none; border: none; color: var(--ember); font-family: inherit;
  font-size: 13px; font-weight: 800; text-decoration: underline; cursor: pointer;
  min-height: 44px; flex-shrink: 0; padding: 0 4px;
}

.acc-box { padding: 20px 16px 40px; max-width: 560px; margin: 0 auto; }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-title { font-size: 22px; font-weight: 900; margin: 0 0 6px; }
.acc-sub { font-size: 13px; color: var(--grease); margin: 0 0 16px; line-height: 1.5; }
.acc-h3 { font-size: 15px; font-weight: 800; margin: 22px 0 10px; }

.acc-err { background: rgba(255,64,25,.12); border: 1px solid rgba(255,64,25,.4);
  color: var(--ember); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }

.acc-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.acc-tab { flex: 1; min-height: 44px; border-radius: 10px; border: 2px solid var(--char);
  background: transparent; color: var(--char); font-weight: 800; font-size: 14px; cursor: pointer; }
.acc-tab.is-on { background: var(--char); color: var(--cream); }

.acc-field { margin-bottom: 14px; }
.acc-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.acc-field input { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  border: 2px solid rgba(0,0,0,.15); font-size: 16px; font-family: inherit; }
.acc-field input:focus { outline: none; border-color: var(--ember); }
.acc-row { display: flex; gap: 8px; }
.acc-row input { flex: 1; }

/* Επιτυχία — ίδιο σχήμα με το .acc-err αλλά πράσινο. Τα δύο δεν πρέπει να
   μοιάζουν: «στάλθηκε το email» δεν είναι σφάλμα και δεν πρέπει να τρομάζει. */
.acc-ok { background: rgba(22,101,52,.10); border: 1px solid rgba(22,101,52,.35);
  color: #14532d; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }

/* ── Πεδίο κωδικού με κουμπί εμφάνισης ── */
.acc-pass-wrap { position: relative; }
.acc-pass-wrap input { padding-right: 48px; }
.acc-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-width: 40px; min-height: 40px; border: none; background: none;
  font-size: 17px; cursor: pointer; line-height: 1; padding: 0;
}
.acc-eye:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 8px; }

/* ── Ένδειξη ισχύος κωδικού ── */
.acc-strength { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.acc-strength[hidden] { display: none; }
.acc-strength-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; }
.acc-strength-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
  transition: width .18s ease, background-color .18s ease; background: var(--ember); }
.acc-strength-bar i.lv0, .acc-strength-bar i.lv1 { background: #DC2626; }
.acc-strength-bar i.lv2 { background: #D97706; }
.acc-strength-bar i.lv3 { background: #65A30D; }
.acc-strength-bar i.lv4 { background: #166534; }
.acc-strength-txt { font-size: 11px; color: var(--grease); font-weight: 700; min-width: 92px; }

.acc-btn { width: 100%; min-height: 48px; border: none; border-radius: 12px;
  background: var(--ember); color: #fff; font-weight: 800; font-size: 16px;
  font-family: inherit; cursor: pointer; }
.acc-btn:disabled { opacity: .6; }
.acc-btn--ghost { background: transparent; color: var(--char); border: 2px solid var(--char); }
.acc-btn--sm { width: auto; min-height: 44px; padding: 0 16px; font-size: 14px; }
.acc-link { display: block; width: 100%; margin-top: 14px; min-height: 44px;
  background: none; border: none; color: var(--grease); font-family: inherit;
  font-size: 14px; cursor: pointer; text-decoration: underline; }

.acc-points { text-align: center; padding: 18px; border-radius: 14px;
  background: var(--char); color: var(--cream); margin-bottom: 16px; }
.acc-points-num { font-size: 40px; font-weight: 900; line-height: 1; }
.acc-points-lbl { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }

.acc-ref { border: 2px dashed rgba(0,0,0,.2); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.acc-ref-lbl { font-size: 12px; font-weight: 700; color: var(--grease); }
.acc-ref-code { font-size: 24px; font-weight: 900; letter-spacing: .12em; margin: 4px 0; }
.acc-ref-hint { font-size: 12px; color: var(--grease); line-height: 1.45; }

.acc-order { border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.acc-order-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.acc-order-num { font-weight: 900; }
.acc-order-st { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px;
  background: rgba(0,0,0,.08); }
.acc-order-st.st-delivered { background: rgba(22,101,52,.15); color: #166534; }
.acc-order-st.st-cancelled { background: rgba(0,0,0,.1); color: var(--grease); }
.acc-order-items { font-size: 13px; color: var(--grease); line-height: 1.45; }
.acc-order-foot { display: flex; justify-content: space-between; font-size: 12px;
  color: var(--grease); margin-top: 6px; }
.acc-order-total { font-weight: 800; color: var(--char); }
.acc-track { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
  min-height: 44px; line-height: 44px; }
.acc-empty { text-align: center; color: var(--grease); padding: 24px 0; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ΥΠΕΡΒΑΣΕΙΣ ΜΕΓΑΛΗΣ ΟΘΟΝΗΣ — ΣΤΟ ΤΕΛΟΣ ΤΟΥ ΑΡΧΕΙΟΥ, ΕΠΙΤΗΔΕΣ
   ---------------------------------------------------------------------------
   ΠΡΟΣΟΧΗ ΣΤΗ ΣΕΙΡΑ: το CSS δεν κοιτάει αν ένας κανόνας είναι μέσα σε media
   query — με ίδια βαρύτητα κερδίζει όποιος γράφτηκε ΤΕΛΕΥΤΑΙΟΣ. Το μπλοκ
   των 1024px βρίσκεται στη μέση του αρχείου, οπότε κανόνες που ορίζονται
   αργότερα (υποσέλιδο, λογαριασμός) το ακυρώνουν σιωπηλά. Μετρήθηκε:
   το υποσέλιδο έμενε 480px πλατύ σε οθόνη 1920px.
   Ό,τι πρέπει σίγουρα να ισχύσει σε desktop μπαίνει εδώ.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .order-footer-inner {
    max-width: 1440px; padding: 22px 32px;
    flex-direction: row; justify-content: space-between;
    align-items: center; text-align: left;
  }
  .acc-box { max-width: 560px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΣΕΛΙΔΑ ΠΡΟΪΟΝΤΟΣ ΣΕ ΜΕΓΑΛΗ ΟΘΟΝΗ  (v4.16.0)
   ---------------------------------------------------------------------------
   ΤΙ ΗΤΑΝ: μία τεντωμένη στήλη. Η μαύρη μπάρα έπιανε 815px ενώ η φωτογραφία
   1080px — δεν ευθυγραμμίζονταν καν μεταξύ τους. Τα τρία κουμπιά μεγέθους
   απλώνονταν σε 1040px, το πεδίο σημειώσεων γινόταν λωρίδα, το κουμπί
   «Προσθήκη» έπιανε όλο το πλάτος, και από κάτω έμενε μισή οθόνη κενή.
   Η φωτογραφία ήταν 16:10 κομμένη στα 240px ύψος — το φαγητό μισο-κομμένο.

   ΤΙ ΕΙΝΑΙ ΤΩΡΑ: δύο στήλες, όπως κάθε σοβαρή σελίδα προϊόντος.
   Φωτογραφία αριστερά σε τετράγωνη αναλογία και κολλημένη στην κύλιση,
   επιλογές δεξιά σε αναγνώσιμο πλάτος. Όλα σε κοινό μπλοκ 1040px, ίδιο με
   το ταμείο — ώστε οι δύο οθόνες να μη «χοροπηδάνε» όταν αλλάζεις μεταξύ τους.
   ΤΟ ΚΙΝΗΤΟ ΔΕΝ ΑΓΓΙΖΕΤΑΙ: όλα εδώ είναι μέσα σε media query.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 40px; align-items: start;
    max-width: 1040px; margin-top: 22px;
  }
  .detail-media { position: sticky; top: 96px; }
  .detail-hero, .detail-hero-placeholder {
    /* Τετράγωνη αναλογία αντί για 16:10 κομμένο στα 240px: το φαγητό
       φαίνεται ολόκληρο, όχι μια λωρίδα από τη μέση του. */
    aspect-ratio: 1 / 1; max-height: none;
    border-radius: 14px; border: 2px solid var(--char);
  }
  .detail-body { padding: 0; max-width: none; margin: 0; }
  .detail-name { font-size: 30px; line-height: 1.12; margin-bottom: 8px; }
  .detail-desc { font-size: 14px; margin-bottom: 14px; }
  .detail-price { font-size: 28px; margin-bottom: 6px; }

  /* Πλέγμα αντί για flex: τα κουμπιά μεγέθους μένουν ίσα και δεν
     τεντώνονται όταν είναι δύο ή τέσσερα. */
  .size-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
  .size-btn { min-width: 0; }
  .detail-notes { min-height: 76px; }

  /* Η ποσότητα αριστερά, μαζί με τα υπόλοιπα στοιχεία ελέγχου —
     κεντραρισμένη έμοιαζε ξεκρέμαστη δίπλα σε αριστερά στοιχισμένη στήλη. */
  .qty-row { justify-content: flex-start; gap: 14px; margin: 18px 0 16px; }

  .add-to-cart-btn { width: 100%; }
  .detail-body .cart-header { max-width: 1040px; }
}

/* ═══════════ ΛΟΓΟΤΥΠΟ ═══════════
   Η κεφαλίδα έγραφε «GRILL BOX» με ΓΡΑΜΜΑΤΑ — το λογότυπο δεν εμφανιζόταν
   πουθενά στις δύο σελίδες που βλέπει ο πελάτης (παραγγελία, παρακολούθηση).
   Το αρχείο μπαίνει ΑΝΑΛΛΟΙΩΤΟ· αλλάζει μόνο το μέγεθος απόδοσης.
   Αναλογία 285x339 (κατακόρυφο) — το width δίνεται από το ύψος, ποτέ αντίστροφα. */
.logo-img { height: 34px; width: auto; display: block; }
@media (min-width: 1024px) { .logo-img { height: 40px; } }

/* ═══════════ ΚΛΕΙΣΤΗ ΚΟΥΖΙΝΑ ═══════════
   Η ευγενική όψη. Η ΠΡΑΓΜΑΤΙΚΗ άρνηση γίνεται μέσα στην place_order, στη
   βάση — εδώ απλώς δεν αφήνουμε τον πελάτη να χάσει χρόνο. */
.promo-bar--closed {
  background: var(--char); border-color: var(--char); color: var(--paper);
}
.promo-bar--closed .promo-badge { background: var(--ember); color: #fff; }
.closed-note {
  background: var(--char); color: var(--paper); border-radius: 12px;
  padding: 18px 16px; text-align: center; margin-bottom: 14px;
}
.closed-icon { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.closed-title {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  color: var(--cream); margin-bottom: 4px;
}
.closed-msg { font-size: 13px; line-height: 1.5; }
.closed-hint { font-size: 12px; opacity: .7; margin-top: 8px; }
.order-btn.is-closed {
  background: rgba(0,0,0,.18) !important; color: var(--grease) !important;
  cursor: not-allowed; border: 2px solid rgba(0,0,0,.15);
}
.order-btn.is-closed svg { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ΕΠΙΛΟΓΕΑΣ ΜΕΓΕΘΟΥΣ  (v4.17.0)
   ---------------------------------------------------------------------------
   ΠΡΙΝ: το «+» σε προϊόν με μεγέθη έφευγε σε ΑΛΛΗ ΣΕΛΙΔΑ. Για ένα burger σε
   τρία μεγέθη ο πελάτης έκανε πλοήγηση, τρία πατήματα, και μετά έπρεπε να
   γυρίσει πίσω — χάνοντας και τη θέση του στη λίστα.
   ΤΩΡΑ: ανοίγει εδώ. Ένα πάτημα στο μέγεθος και μπήκε στο καλάθι.
   Σε κινητό ανεβαίνει από κάτω (εκεί φτάνει ο αντίχειρας), σε desktop
   εμφανίζεται στο κέντρο.
   ═══════════════════════════════════════════════════════════════════════════ */
.size-sheet { display: none; }
.size-sheet.is-open { display: block; position: fixed; inset: 0; z-index: 200; }
.ss-lock { overflow: hidden; }

.ss-backdrop { position: absolute; inset: 0; background: rgba(14,14,14,.55); }

.ss-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper); border-top: 3px solid var(--ember);
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(20px + var(--safe-bottom));
  max-height: 82vh; overflow-y: auto;
  animation: ss-up .18s ease-out;
}
@keyframes ss-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

.ss-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ss-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--ash); }
.ss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--cream); }
.ss-title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.2; }
.ss-x {
  background: none; border: none; font-size: 17px; color: var(--grease);
  min-width: 44px; min-height: 44px; flex-shrink: 0; line-height: 1; border-radius: 8px;
}
.ss-x:hover { background: rgba(0,0,0,.06); color: var(--char); }

.ss-label {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grease); margin-bottom: 8px;
}
.ss-opts { display: flex; flex-direction: column; gap: 8px; }
.ss-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 12px 16px;
  background: var(--cream); border: 2px solid var(--char); border-radius: 12px;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: background .12s, transform .1s;
}
.ss-opt:hover { background: var(--char); color: var(--cream); }
.ss-opt:hover .ss-opt-price { color: var(--flame); }
.ss-opt:active { transform: scale(.985); }
.ss-opt:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.ss-opt-label { font-size: 15px; font-weight: 700; }
.ss-opt-price { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ember-tx); }

.ss-more {
  width: 100%; margin-top: 12px; min-height: 44px;
  background: none; border: none; color: var(--grease);
  font-family: inherit; font-size: 13px; text-decoration: underline; cursor: pointer;
}
.ss-more:hover { color: var(--char); }

/* Desktop: κεντραρισμένο παράθυρο αντί για φύλλο από κάτω. */
@media (min-width: 1024px) {
  .ss-panel {
    left: 50%; top: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 48px));
    border-radius: 16px; border: 3px solid var(--ember);
    padding: 20px; animation: ss-pop .16s ease-out;
  }
  @keyframes ss-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ss-panel { animation: none; }
}