/* ===========================================================================
   Σελίδα πελάτη.

   ΜΗΝ αλλάζεις χρώματα ή γραμματοσειρές εδώ — όλα ορίζονται στο theme.css.

   Σημείωση για όποιον πειράξει τον κώδικα: το φύλλο επιλογών και η μπάρα
   καλαθιού είναι ΟΡΑΤΑ μόλις μπουν στη σελίδα. Το JavaScript τα δημιουργεί
   και τα σβήνει, δεν τα κρύβει με κλάση. Αν τους βάλεις opacity:0 ή
   transform περιμένοντας ένα «.on», παύει να λειτουργεί η παραγγελία.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.18;
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-caps);
  margin: 0;
}
p { margin: 0; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

/* Το κοινό πλάτος περιεχομένου. Μπαίνει και σε στοιχεία που δεν είναι μέσα
   στο .wrap, γι' αυτό επαναλαμβάνεται παρακάτω σε .topbar-in κ.λπ. */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--space);
}

/* --- Κεφαλίδα ----------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .topbar {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
  }
}

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}

.brand-logo { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; }

.brand-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-lg);
  letter-spacing: var(--brand-tracking);
  text-transform: var(--display-caps);
}

.linkbtn {
  background: none;
  border: 0;
  padding: 8px 2px;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.linkbtn:hover { color: var(--accent-dark); }

/* --- Ήρωας -------------------------------------------------------------- */

.hero { padding-block: clamp(24px, 4vw, 44px) clamp(14px, 2vw, 22px); }

.hero h1 { font-size: var(--text-2xl); margin-bottom: 10px; }

.hero .lede { color: var(--muted); font-size: var(--text-lg); max-width: 58ch; margin-bottom: 6px; }

.hero .sub { color: var(--muted); font-size: var(--text-sm); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block: 6px 18px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--ok-soft);
  color: var(--ok);
}

.status .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.status.shut, .status.no { background: var(--bad-soft); color: var(--bad); }
.status.warn, .status.now { background: var(--warn-soft); color: var(--warn); }

/* --- Διεύθυνση ---------------------------------------------------------- */

.addrbox {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 15px;
  margin-block: 4px 8px;
  max-width: 560px;
}

.addrbox > label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 8px;
}

.addrbox > p { font-size: var(--text-base); font-weight: 500; margin-bottom: 10px; }

/* Το .field μπαίνει κατευθείαν στο input, όχι σε περιτύλιγμα. */
.field {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.field::placeholder { color: var(--muted); }

.field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; background: var(--surface); }

.suggest:empty { display: none; }

.suggest {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.suggest li + li { border-top: 1px solid var(--line); }

.suggest button {
  display: block;
  width: 100%;
  text-align: start;
  padding: 11px 14px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--text-sm);
}

.suggest button:hover { background: var(--surface-2); }

.verdict {
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 10px;
}

.verdict.ok { background: var(--ok-soft); color: var(--ok); }
.verdict.no { background: var(--bad-soft); color: var(--bad); }

.pin { height: clamp(230px, 44vh, 360px); width: 100%; border-radius: var(--radius-sm); overflow: hidden; }

/* --- Πλοήγηση κατηγοριών ------------------------------------------------ */

.catnav {
  position: sticky;
  top: 60px;
  z-index: 30;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .catnav { background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); }
}

/* Δεν βρίσκεται μέσα σε .wrap, οπότε παίρνει μόνο του το ίδιο πλάτος. */
.catnav-in {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 11px var(--space);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.catnav-in::-webkit-scrollbar { display: none; }

.catnav-in:empty { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-transform: var(--ui-caps);
  letter-spacing: var(--ui-tracking);
  transition: background .15s, color .15s, border-color .15s;
}

.chip:hover { border-color: var(--line-strong); color: var(--ink); }

.chip[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* --- Κατηγορίες και προϊόντα -------------------------------------------- */

/* .cat είναι η ΕΝΟΤΗΤΑ μιας κατηγορίας, όχι κουμπί. */
.cat { padding-block: clamp(22px, 3vw, 34px) 0; scroll-margin-top: 118px; }

.cat > h2 {
  font-size: var(--text-xl);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}

.items { display: grid; gap: 12px; grid-template-columns: 1fr; }

@media (min-width: 700px)  { .items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .items { grid-template-columns: repeat(3, 1fr); } }

/* Το .item είναι <button> στη δυναμική σελίδα και <li> στην έκδοση που
   βλέπουν οι μηχανές αναζήτησης. Και τα δύο πρέπει να δείχνουν ίδια. */
.item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  text-align: start;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}

button.item:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

button.item:active:not(:disabled) { transform: translateY(0); }

.item-main { flex: 1 1 auto; min-width: 0; }

.item-main h3 { font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; }

.item-desc {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-thumb {
  width: 88px; height: 88px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-2);
}

/* Οι τελείες που ενώνουν το όνομα με την τιμή δουλεύουν σε κατάλογο μιας
   στήλης. Μέσα σε κάρτα θα τέντωναν άσχημα, οπότε φεύγουν. */
.item .leader { display: none; }

.item.out, .item:disabled { opacity: .45; cursor: default; }

.sold {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* --- Τιμές -------------------------------------------------------------- */

.price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.price.was {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-weight: 400;
  font-size: .92em;
}

.price.now { color: var(--accent); }

/* Μέσα στην κάρτα: οι τιμές μαζί, αριστερά. Αλλού χρησιμοποιείται ως γραμμή
   λογαριασμού και τότε απλώνει. */
.item .price-row {
  display: flex;
  align-items: baseline;
  /* Χωρίς αυτό ισχύει το space-between της γενικής .price-row και η παλιά
     τιμή πάει τέρμα αριστερά, η νέα τέρμα δεξιά, με μισή κάρτα κενή. */
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding-block: 0;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-block: 5px;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.price-row.total {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
}

/* --- Κουμπιά ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-transform: var(--ui-caps);
  letter-spacing: var(--ui-tracking);
  transition: background .15s, opacity .15s, transform .12s;
}

.btn:hover:not(:disabled) { background: var(--accent-dark); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: default; }

.btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn.dark { background: var(--brand-2); color: var(--brand-2-text); }
.btn.dark:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-2) 84%, var(--brand-2-text));
}

.btn-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; margin-inline-start: auto; }

/* --- Μπάρα καλαθιού ----------------------------------------------------- */

/* Υπάρχει στη σελίδα μόνο όταν πρέπει να φαίνεται. Καμία κλάση «.on». */
.cartbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: barUp .26s cubic-bezier(.32, .72, 0, 1);
}

@keyframes barUp { from { transform: translateY(100%); } }

.cartbar-in {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 12px var(--space);
  display: flex;
  align-items: center;
  min-height: var(--bar-h);
}

.cartbar .btn { width: 100%; font-size: var(--text-base); }

.count {
  min-width: 26px; height: 26px;
  padding-inline: 8px;
  border-radius: var(--radius-pill);
  /* Ημιδιάφανο πάνω στο ίδιο του το κείμενο: διαβάζεται και σε λευκό
     και σε μαύρο κουμπί, χωρίς το θέμα να χρειάζεται δική του ρύθμιση. */
  background: color-mix(in srgb, currentColor 20%, transparent);
  font-size: var(--text-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Φύλλο επιλογών ----------------------------------------------------- */

.sheet-bg {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 11, 8, .5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade .2s ease;
}

@keyframes fade { from { opacity: 0; } }

@supports (backdrop-filter: blur(1px)) { .sheet-bg { backdrop-filter: blur(3px); } }

.sheet {
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: sheetUp .28s cubic-bezier(.32, .72, 0, 1);
}

@keyframes sheetUp { from { transform: translateY(100%); } }

@media (min-width: 720px) {
  .sheet-bg { align-items: center; padding: 24px; }
  .sheet {
    max-width: 540px;
    max-height: 86vh;
    border-radius: var(--radius);
    animation: sheetIn .2s ease;
  }
  @keyframes sheetIn { from { transform: scale(.96); opacity: 0; } }
}

.sheet-img { width: 100%; height: clamp(150px, 32vw, 210px); object-fit: cover; background: var(--surface-2); flex: 0 0 auto; }

.sheet-head { padding: 18px var(--space) 14px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }

.sheet-head h2 { font-size: var(--text-xl); }

.sheet-head .lede { color: var(--muted); font-size: var(--text-sm); }

.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space) 16px; flex: 1 1 auto; }

.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px var(--space) calc(13px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.sheet-foot .btn { flex: 1 1 auto; }

/* --- Ομάδες επιλογών ---------------------------------------------------- */

.group { padding-top: 18px; }

.group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }

.group-head h3 { font-size: var(--text-base); font-weight: 700; }

.group-rule { font-size: var(--text-xs); color: var(--muted); font-weight: 500; }

.group-rule.req {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.opt:last-child { border-bottom: 0; }

.opt input { width: 21px; height: 21px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }

.opt-name { flex: 1 1 auto; }

.opt-price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }

.choice { margin-top: 16px; }

.opts-note { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

/* --- Ποσότητα ----------------------------------------------------------- */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 0 0 auto;
}

.qty button {
  width: 44px; height: 46px;
  border: 0;
  background: var(--surface);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.qty button:hover { background: var(--surface-2); color: var(--accent); }

.qty output, .qty span {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rm {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rm:hover { color: var(--bad); }

/* --- Απόδειξη ----------------------------------------------------------- */

.receipt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow-sm);
}

.receipt-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-block: 9px;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--line);
}

.receipt-line:last-child { border-bottom: 0; }

.receipt-line .lbl { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); }

.receipt-line .val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}

.receipt-line.total { border-bottom: 0; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 13px; font-size: var(--text-lg); }
.receipt-line.total .lbl { color: var(--ink); font-weight: 700; }
.receipt-line.total .val { font-weight: 700; }

.receipt-line.credit .val { color: var(--ok); }
.receipt-line.sum { color: var(--ink); }

/* Η οδοντωτή γραμμή κοπής. */
.tear {
  height: 10px;
  margin-block: 12px;
  background-image: radial-gradient(circle at 5px 10px, var(--bg) 5px, transparent 5px);
  background-size: 12px 10px;
  background-repeat: repeat-x;
}

/* --- Λοιπά ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow-sm);
  margin-block: 12px;
}

.stack { display: grid; gap: 14px; }

@media (min-width: 560px) { .stack.two { grid-template-columns: 1fr 1fr; } }

.msg { padding: 13px 15px; border-radius: var(--radius-sm); font-size: var(--text-sm); margin-block: 12px; }
.msg.err  { background: var(--bad-soft);  color: var(--bad); }
.msg.warn { background: var(--warn-soft); color: var(--warn); }
.msg.ok   { background: var(--ok-soft);   color: var(--ok); }

.empty { text-align: center; color: var(--muted); padding-block: 56px; }

.sub { font-size: var(--text-sm); color: var(--muted); }

.lede { color: var(--muted); }

.code { font-family: var(--font-mono); background: var(--surface-2); padding: 3px 8px; border-radius: 6px; font-size: .92em; }

.steps { display: grid; gap: 0; margin-block: 16px; }

.steps > * {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--muted);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--line);
}

.steps > *:last-child { border-bottom: 0; }
.steps .ok, .steps .now { color: var(--ink); font-weight: 600; }

.spinner {
  width: 28px; height: 28px;
  margin: 56px auto;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .catnav, .cartbar, .sheet, .sheet-bg, .btn, .linkbtn, .rm { display: none !important; }
  body { background: #fff; padding: 0; }
  .card, .receipt { border: 0; box-shadow: none; }
}

/* --- Μπάρα εργαλείων: μενού και αναζήτηση ------------------------------- */

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-block: 4px 14px;
}

.menubtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  text-transform: var(--ui-caps);
  letter-spacing: var(--ui-tracking);
  transition: border-color .15s, background .15s;
}

.menubtn:hover { border-color: var(--accent); color: var(--accent); }

/* Το εικονίδιο των τριών γραμμών, χωρίς εξωτερική βιβλιοθήκη εικονιδίων. */
.bars {
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
  display: inline-block;
}

.bars::before, .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.bars::before { top: -5px; }
.bars::after  { top: 5px; }

.searchbox { position: relative; flex: 1 1 auto; min-width: 0; }

.search {
  width: 100%;
  padding: 12px 40px 12px 40px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  /* Ο μεγεθυντικός φακός ως εικόνα μέσα στο πεδίο. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7468' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
}

.search::placeholder { color: var(--muted); }

.search:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}

/* Το Safari και το Chrome βάζουν δικό τους «x» που δεν ταιριάζει πουθενά. */
.search::-webkit-search-cancel-button { display: none; }

.clear {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 4px;
  width: 34px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.clear:hover { color: var(--ink); background: var(--surface-2); }

/* --- Φύλλο κατηγοριών --------------------------------------------------- */

.catlist { display: grid; gap: 2px; }

.catlist button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: start;
  cursor: pointer;
  font-weight: 600;
}

.catlist li:last-child button { border-bottom: 0; }

.catlist button:hover .catlist-name { color: var(--accent); }

.catlist-count {
  flex: 0 0 auto;
  min-width: 28px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: center;
}

@media (max-width: 560px) {
  .toolbar { flex-wrap: wrap; }
  .menubtn { flex: 1 1 auto; justify-content: center; }
  .searchbox { flex: 1 1 100%; order: -1; }
}

/* --- Διακόπτης παράδοσης / παραλαβής ------------------------------------ */

.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.modes button {
  padding: 10px 8px;
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: none;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.modes button:hover { color: var(--ink); }

.modes button[aria-selected="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.pickup strong { display: block; font-size: var(--text-base); margin-bottom: 6px; }
.pickup p { margin-bottom: 4px; }

/* ===========================================================================
   Λεπτομέρειες σχεδίασης.

   Τίποτα εδώ δεν είναι απαραίτητο για να δουλέψει η παραγγελία — είναι το
   στρώμα που κάνει τη σελίδα να μοιάζει φτιαγμένη και όχι στημένη.
   =========================================================================== */

/* Η κεφαλίδα του καταστήματος πάνω σε απαλή χρωματική κλίση, ώστε το πάνω
   μέρος να μη μοιάζει άδειο πριν φορτώσει ο κατάλογος. */
.hero {
  position: relative;
  isolation: isolate;
}

/* Η κλίση ήταν -50vw δεξιά και αριστερά, που δημιουργούσε οριζόντια μπάρα
   κύλισης σε όλη τη σελίδα. Τώρα μένει μέσα στα όρια. */
.hero::before {
  content: "";
  position: absolute;
  /* Φτάνει ακριβώς ως την άκρη της σελίδας και ούτε βήμα παραπέρα. */
  inset: -70px calc(var(--space) * -1) -10px;
  z-index: -1;
  background: var(--hero-tint);
  /* Σβήνει μαλακά στις άκρες, αλλιώς σε σκούρο θέμα φαίνεται το κουτί. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  pointer-events: none;
}

/* Δίχτυ ασφαλείας: καμία διακόσμηση δεν πρέπει να μεγαλώνει τη σελίδα πλάγια. */
html, body { overflow-x: clip; }

.hero h1 { text-wrap: balance; }

/* Ο τίτλος κατηγορίας με έντονη γραμμή στο χρώμα της μάρκας, όχι γκρι. */
.cat > h2 {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.cat > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 52px;
  height: var(--rule);
  background: var(--accent);
  border-radius: var(--rule);
}

/* Κάρτα προϊόντος: η τιμή αποκτά βάρος, η εικόνα βάθος, και το πέρασμα του
   ποντικιού δείχνει ότι είναι πατήσιμη χωρίς να τραβάει την προσοχή. */
button.item { position: relative; overflow: hidden; }

button.item::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .18s ease;
}

button.item:hover:not(:disabled)::after { transform: scaleY(1); }

button.item:hover:not(:disabled) { transform: translateY(var(--lift)); }

.item-thumb { box-shadow: var(--shadow-sm); }

.item .price { font-size: 1.05rem; }

/* Η ένδειξη προσφοράς ξεχωρίζει χωρίς να φωνάζει. */
.item .price.now::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* Το κύριο κουμπί αποκτά ελαφριά ανύψωση, ώστε να διαβάζεται ως ενέργεια. */
.btn:not(.ghost) { box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 30%, transparent); }

.btn:not(.ghost):hover:not(:disabled) {
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 34%, transparent);
}

.cartbar .btn { box-shadow: none; }

/* Οι κατηγορίες στην οριζόντια μπάρα σβήνουν στις άκρες αντί να κόβονται
   απότομα, ώστε να φαίνεται ότι συνεχίζουν. */
.catnav-in {
  mask-image: linear-gradient(to right, transparent, #000 18px,
                              #000 calc(100% - 18px), transparent);
}

/* Η απόδειξη αποκτά ελαφρύ πάνω περίγραμμα στο χρώμα της μάρκας. */
.receipt { border-top: 3px solid var(--accent); }

/* Τα πεδία φόρμας ξεχωρίζουν λίγο περισσότερο όταν είναι κενά και
   περιμένουν συμπλήρωση. */
.field:placeholder-shown { background: var(--surface-2); }

/* Κενές καταστάσεις με λίγο περισσότερη ζωή. */
.empty { font-size: var(--text-lg); }

/* Το φύλλο αποκτά λεπτή γραμμή στην κορυφή, ώστε να διαχωρίζεται από το
   σκοτεινό φόντο ακόμα και σε σκούρο θέμα. */
.sheet { border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

@media (min-width: 720px) { .sheet { border-top: 0; } }

/* Ομαλή εμφάνιση των προϊόντων καθώς φορτώνει ο κατάλογος. */
@media (prefers-reduced-motion: no-preference) {
  .items > li { animation: rise .3s ease backwards; }
  .items > li:nth-child(2) { animation-delay: .03s; }
  .items > li:nth-child(3) { animation-delay: .06s; }
  .items > li:nth-child(4) { animation-delay: .09s; }
  .items > li:nth-child(n+5) { animation-delay: .12s; }
}

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Σε πολύ μεγάλες οθόνες η γραμμή κειμένου δεν πρέπει να τεντώνει. */
@media (min-width: 1400px) { :root { --page-width: 1200px; } }

/* --- Αντίστροφη μέτρηση παράδοσης --------------------------------------- */

.eta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  margin-block: 8px 18px;
}

.eta-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.eta-top strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

.eta-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.eta-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  /* Η μπάρα ενημερώνεται κάθε 15΄΄· η μετάβαση κρύβει το άλμα. */
  transition: width 1.2s ease;
}

/* Όταν δεν ξέρουμε πόσο θα πάρει, η μπάρα κινείται αντί να στέκεται στο μηδέν
   — δείχνει ότι κάτι συμβαίνει, χωρίς να υπόσχεται χρόνο. */
.eta-bar.indet > span {
  width: 34%;
  animation: slide 1.6s ease-in-out infinite;
}

@keyframes slide {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(305%); }
}

.eta.soon { border-left-color: var(--warn); }
.eta.soon .eta-bar > span { background: var(--warn); }

.eta.waiting { border-left-color: var(--muted); }

.eta.done { border-left-color: var(--ok); }
.eta.done .eta-bar > span { background: var(--ok); transition: none; }
.eta.done .eta-top strong { color: var(--ok); }

.eta .sub { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .eta-bar.indet > span { animation: none; width: 100%; opacity: .35; }
}

/* --- Σχόλιο ανά προϊόν -------------------------------------------------- */

.notebox { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }

.notebox textarea {
  margin-top: 8px;
  resize: vertical;
  min-height: 62px;
  font-family: inherit;
  line-height: 1.45;
}

/* Το σχόλιο στο καλάθι, ώστε ο πελάτης να βλέπει τι έγραψε. */
.opts-note em { font-style: normal; color: var(--accent); }

/* --- Ενέργειες κεφαλίδας ------------------------------------------------ */

.topbar-actions { display: inline-flex; align-items: center; gap: 4px; }

.topbar-actions .linkbtn { padding: 8px 10px; text-decoration: none; }

.topbar-actions .linkbtn:hover { background: var(--surface-2); border-radius: var(--radius-sm); }

.brand { min-width: 0; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions .linkbtn { white-space: nowrap; }

@media (max-width: 480px) {
  /* Στο κινητό το «Πληροφορίες» υποχωρεί: ο πελάτης θέλει να παραγγείλει. */
  .topbar-actions a.linkbtn[href="#/info"] { display: none; }
  /* Το όνομα φαίνεται μεγάλο αμέσως από κάτω — πάνω αρκεί το σήμα,
     αλλιώς τα αραιά κεφαλαία σπάνε σε δύο γραμμές. */
  .brand-name { font-size: var(--text-sm); letter-spacing: calc(var(--brand-tracking) * .6); }
}
@media (max-width: 400px) {
  .brand-name { display: none; }
}

/* --- Σελίδα πληροφοριών και όρων ---------------------------------------- */

.legal { margin-bottom: 14px; }

.legal h2 {
  font-size: var(--text-lg);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.legal p { margin-bottom: 10px; color: var(--ink-soft); font-size: var(--text-sm); }

.legal p:last-child { margin-bottom: 0; }

.legal .receipt-line .val { font-family: var(--font-sans); font-weight: 600; }

/* --- Υποσέλιδο ---------------------------------------------------------- */

.foot {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 20px;
}

.foot-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--muted);
}

.foot-links { display: flex; gap: 16px; flex-wrap: wrap; }

.foot-links a { color: var(--muted); text-decoration: none; }

.foot-links a:hover { color: var(--accent); text-decoration: underline; }

/* --- Λογαριασμός -------------------------------------------------------- */

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.card-head h2 { font-size: var(--text-lg); }

.field-wrap label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 5px;
}

/* Οι πόντοι με μπάρα προόδου: φαίνεται πόσο απέχει από την επόμενη
   εξαργύρωση, που είναι ο λόγος που ξαναπαραγγέλνει. */
.points-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.points-n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.addr-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.addr-row:last-child { border-bottom: 0; padding-bottom: 0; }

.addr-row.is-default { border-inline-start: 3px solid var(--accent); padding-inline-start: 12px; }

.addr-main { flex: 1 1 240px; min-width: 0; }

.addr-title { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

.addr-row .sub.yes { color: var(--ok); font-weight: 500; }
.addr-row .sub.no  { color: var(--bad); font-weight: 500; }

.addr-acts { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }

.addr-acts .linkbtn { font-size: var(--text-xs); padding: 6px 8px; }

.linkbtn.danger { color: var(--bad); }

#pwBox .btn { margin-inline-end: 8px; }

#pwCode { font-family: var(--font-mono); letter-spacing: .35em; text-align: center; font-size: 1.15rem; }

.points { border-inline-start: 3px solid var(--accent); }

/* ===========================================================================
   Μάζεμα.

   Το περιεχόμενο ήταν σκορπισμένο: κενά παντού, η επιλογή παράδοσης σε
   ξεχωριστό κουτί που αιωρούνταν, η αναζήτηση μακριά από τις κατηγορίες. Εδώ
   σφίγγει ο κατακόρυφος ρυθμός και τα σχετικά μπαίνουν μαζί.
   =========================================================================== */

:root { --page-width: 1040px; }

.hero { padding-block: clamp(20px, 3vw, 30px) 10px; }

.hero h1 { margin-bottom: 8px; }

/* Ο τίτλος και η κατάσταση στην ίδια γραμμή όταν χωράνε — δύο σειρές για
   δύο μικρά στοιχεία είναι σπατάλη. */
@media (min-width: 640px) {
  .hero { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .hero h1 { order: 1; flex: 0 0 auto; margin-bottom: 0; }
  .hero .status { order: 2; margin-block: 0; }
  .hero .lede, .hero .sub { order: 3; flex: 0 0 100%; margin-bottom: 0; }
  .hero > #addrHost { order: 4; flex: 0 0 100%; }
}

.status { margin-block: 0 0; }

.addrbox {
  margin-block: 14px 0;
  max-width: 520px;
  padding: 14px;
}

.modes { margin-bottom: 12px; }

.pickup strong { margin-bottom: 4px; }
.pickup p { font-size: var(--text-sm); }

/* Η μπάρα εργαλείων κολλάει στις κατηγορίες: μαζί είναι ένα πράγμα, η
   πλοήγηση στο μενού. */
.toolbar { padding-block: 18px 10px; }

.catnav { top: 60px; }

.catnav-in { padding-block: 0 12px; }

.cat { padding-block: 22px 0; }

.cat > h2 { margin-bottom: 12px; }

/* Οι κάρτες κρατούν λογικό πλάτος αντί να τεντώνουν σε φαρδιές οθόνες. */
.items { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }

@media (min-width: 700px)  { .items { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } }
@media (min-width: 1060px) { .items { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

.item { padding: 13px; gap: 12px; }

.item-main h3 { margin-bottom: 3px; }

.item-desc { margin-bottom: 7px; }

.item-thumb { width: 76px; height: 76px; }

.card { margin-block: 10px; }

/* Στο κινητό δεν υπάρχει χώρος για πολυτέλειες. */
@media (max-width: 520px) {
  :root { --space: 14px; }
  .hero { padding-block: 16px 8px; }
  .toolbar { padding-block: 14px 8px; }
  .item-thumb { width: 66px; height: 66px; }
}

/* --- Φιλτράρισμα κατηγοριών --------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chip-n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
}

.chip[aria-current="true"] .chip-n {
  background: color-mix(in srgb, currentColor 24%, transparent);
  color: inherit;
}

/* Όταν φαίνεται μόνο μία κατηγορία, ο τίτλος της είναι περιττός: το ίδιο
   όνομα είναι ήδη τονισμένο στην μπάρα ακριβώς από πάνω. */
.cat.solo > h2 { display: none; }
.cat.solo { padding-top: 16px; }

.cat[hidden] { display: none; }

/* ===========================================================================
   Οθόνη φόρτωσης

   Σβήνει με CSS, όχι με JavaScript. Αν σπάσει το JavaScript ή αργήσει το
   δίκτυο, η οθόνη φεύγει ούτως ή άλλως — ένα splash που κολλάει είναι
   χειρότερο από το να μην υπάρχει καθόλου.
   =========================================================================== */

#splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  /* Μένει 900ms, μετά σβήνει σε 400ms. Το JavaScript μπορεί να το κόψει
     νωρίτερα προσθέτοντας την κλάση «gone». */
  animation: splashOut .4s ease .9s forwards;
}

#splash.gone { animation: splashOut .32s ease forwards; }

@keyframes splashOut {
  to { opacity: 0; visibility: hidden; }
}

.splash-in {
  text-align: center;
  padding: var(--space);
  max-width: 90vw;
}

.splash-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
  animation: splashPop .5s cubic-bezier(.2, 1.3, .4, 1) both;
}

@keyframes splashPop {
  from { opacity: 0; transform: scale(.82); }
}

.splash-name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: var(--display-tracking);
  line-height: 1.05;
  color: var(--ink);
}

/* Τα γράμματα ανεβαίνουν ένα ένα. Ο συνολικός χρόνος μένει κάτω από ένα
   δευτερόλεπτο — πάνω από αυτό, η κίνηση γίνεται καθυστέρηση. */
.splash-name span {
  display: inline-block;
  animation: letterUp .42s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes letterUp {
  from { opacity: 0; transform: translateY(14px) rotate(-4deg); }
}

.splash-tag {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--text-base);
  animation: splashFade .5s ease .5s both;
}

@keyframes splashFade { from { opacity: 0; } }

.splash-bar {
  width: 132px;
  height: 3px;
  margin: 26px auto 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.splash-bar > span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: splashSlide 1s ease-in-out infinite;
}

@keyframes splashSlide {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(325%); }
}

/* Χωρίς κίνηση: εμφανίζεται και σβήνει, χωρίς χορό. */
@media (prefers-reduced-motion: reduce) {
  .splash-name span, .splash-logo, .splash-tag { animation: none; }
  .splash-bar > span { animation: none; width: 100%; opacity: .4; }
}

/* ===========================================================================
   Στο κέντρο.

   Όλα ήταν κολλημένα αριστερά με ένα άδειο δεξί μισό σε υπολογιστή. Τώρα η
   αρχική στοιχίζεται σε μία κεντρική στήλη — όνομα, banners, προσφορές,
   επιλογή παράδοσης — και οι σελίδες περιεχομένου (καλάθι, ταμείο,
   λογαριασμός) σε στενή στήλη που διαβάζεται χωρίς να τρέχει το μάτι.
   Ο κατάλογος κρατά όλο το πλάτος: εκεί το πλάτος είναι χρήσιμο.
   =========================================================================== */

:root { --col: 640px; }

.hero,
.page .hero {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  text-align: center;
  padding-block: clamp(22px, 4vw, 40px) 8px;
}

.hero h1,
.hero .lede,
.hero .sub,
.hero .status { order: 0; flex: none; margin-inline: auto; }

.hero h1 { margin-bottom: 4px; }
.hero .lede { max-width: 46ch; margin-bottom: 0; }
.hero .status { margin-top: 12px; }

@media (min-width: 640px) {
  .hero { flex-direction: column; align-items: center; }
  .hero h1 { margin-bottom: 4px; }
  .hero .status { margin-top: 14px; }
}

/* Στενή στήλη για τις σελίδες που διαβάζονται. */
.wrap.page { max-width: calc(var(--col) + 2 * var(--space) + 80px); }

/* --- Προωθήσεις ------------------------------------------------------------ */

.promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 10px 0;
}

.promo > * { width: 100%; max-width: var(--col); }

.banners { position: relative; }

.banners-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.banners-track::-webkit-scrollbar { display: none; }

.banner { flex: 0 0 100%; scroll-snap-align: center; }
.banner a { display: block; }

/* Σταθερή αναλογία 16:9, ώστε δύο banners με διαφορετικό μέγεθος να μην
   κάνουν τη σελίδα να πηδάει καθώς αλλάζουν. */
.banner img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }

.banner-dots button {
  width: 7px; height: 7px; padding: 0; border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--line-strong);
  cursor: pointer;
  transition: width .2s, background .2s;
}

.banner-dots button[aria-current] { width: 22px; background: var(--ink); }

.offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  min-height: 50px;
}

.offer-tag {
  flex: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.offer-text { font-weight: 600; transition: opacity .25s, transform .25s; }
.offer-text.out { opacity: 0; transform: translateY(5px); }

.points-line {
  display: block;
  padding: 12px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  font-size: var(--text-sm);
  transition: border-color .15s;
}

.points-line:hover { border-color: var(--ink); }
.points-line span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-xs); }

.quick { display: flex; gap: 10px; }
.quick > .btn { flex: 1 1 0; min-width: 0; }
.quick .count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: var(--text-xs);
}

/* --- Διεύθυνση, εργαλεία, κατηγορίες --------------------------------------- */

.addrwrap { display: flex; justify-content: center; }
.addrwrap > #addrHost { width: 100%; max-width: var(--col); }
.addrwrap .addrbox { max-width: none; margin-inline: 0; }

.toolbar { max-width: calc(var(--col) + 2 * var(--space) + 120px); }

/* Κεντραρισμένα όταν χωράνε, κύλιση όταν όχι. Τα αυτόματα περιθώρια
   κεντράρουν αλλά μηδενίζονται μόλις δεν υπάρχει χώρος — οπότε το πρώτο
   κουμπί δεν κόβεται ποτέ αριστερά, όπως θα γινόταν με justify-content. */
.catnav-in > :first-child { margin-inline-start: auto; }
.catnav-in > :last-child  { margin-inline-end: auto; }

.cat > h2 { text-align: center; }
.cat > h2::after { left: 50%; transform: translateX(-50%); }

/* --- Παράθυρο «κλειστά» ---------------------------------------------------- */

.popup-bg {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(4px);
  animation: popFade .2s ease both;
}

.popup-bg.gone { opacity: 0; transition: opacity .2s; }

.popup {
  width: 100%;
  max-width: 380px;
  padding: 28px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: popUp .25s cubic-bezier(.2, .9, .3, 1.2) both;
}

.popup h2 { margin-bottom: 10px; font-size: var(--text-xl); }
.popup p { color: var(--ink-soft); margin-bottom: 18px; }

/* Ρολόι σχεδιασμένο με CSS: δύο δείκτες σε κύκλο, χωρίς εικόνα. */
.popup-icon {
  position: relative;
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.popup-icon::before, .popup-icon::after {
  content: ""; position: absolute; left: 50%; bottom: 50%;
  width: 2px; background: var(--ink); transform-origin: bottom; border-radius: 2px;
}
.popup-icon::before { height: 14px; transform: translateX(-50%); }
.popup-icon::after  { height: 10px; transform: translateX(-50%) rotate(90deg); }

.popup-offers {
  list-style: none;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}
.popup-offers li + li { margin-top: 6px; }

@keyframes popFade { from { opacity: 0; } }
@keyframes popUp { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* --- Κληρώσεις ------------------------------------------------------------- */

.give { padding: 0; overflow: hidden; }
.give-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.give-body { padding: 18px; }

.give-top {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-xs);
}
.give-phase { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ok); }
.give.drawn .give-phase, .give.closed .give-phase { color: var(--muted); }
.give-left { color: var(--muted); }

.give h2 { margin: 8px 0 4px; font-size: var(--text-xl); text-transform: none; letter-spacing: -.01em; }
.give-prize { font-weight: 600; }
.give-desc { margin-top: 8px; color: var(--ink-soft); }

.give-rule {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.give-dates { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 0; }
.give-dates dt { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.give-dates dd { margin: 2px 0 0; font-weight: 600; }

.give-mine {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.give-n { font: 800 2rem/1 var(--font-mono); }

.give-winners { margin-top: 14px; }
.give-winners h3 { font-size: var(--text-base); margin-bottom: 6px; }
.give-winners ol { margin: 0 0 10px; padding-inline-start: 20px; }
.give-winners li { padding-block: 3px; }
.give-winners .mono { color: var(--muted); font-family: var(--font-mono); margin-inline-start: 6px; }

.give-note {
  display: block;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ok);
  background: var(--ok-soft);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-sm);
}
.give-note strong { display: block; font-size: var(--text-base); margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
  .popup, .popup-bg, .offer-text { animation: none; transition: none; }
}

@media (max-width: 480px) {
  .quick > .btn { padding-inline: 10px; letter-spacing: .04em; font-size: var(--text-sm); white-space: nowrap; }
}

/* Αρχική χωρίς μεγάλο τίτλο: το όνομα το λέει το λογότυπο πάνω αριστερά. */
.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;
}
.hero.hero-slim { padding-block: 16px 2px; }
.hero.hero-slim .status { margin-top: 0; }
.hero.hero-slim::before { display: none; }

/* Αφού δεν υπάρχει τίτλος από κάτω, το όνομα στη μπάρα μένει και στο κινητό. */
@media (max-width: 400px) {
  .brand-name { display: inline; font-size: var(--text-xs); letter-spacing: .14em; }
}

/* --- «Μαζί με…» ------------------------------------------------------------ */
.upsell h2 { margin-bottom: 10px; }
.upsell-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.upsell-item {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 44px 12px 12px; text-align: start; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink);
}
.upsell-item:hover { border-color: var(--ink); }
.upsell-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 4px; }
.upsell-name { font-weight: 600; }
.upsell-price { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.upsell-add {
  position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text); border-radius: var(--radius-pill, 999px); font-weight: 700;
}

/* --- Αξιολόγηση --------------------------------------------------------------- */
.review { text-align: center; }
.review h2 { margin-bottom: 8px; }
.review .stars { display: flex; justify-content: center; gap: 6px; }
.review .stars button {
  font-size: 2.2rem; line-height: 1; padding: 4px; background: none; border: 0; cursor: pointer;
  color: var(--line-strong); transition: transform .12s, color .12s;
}
.review .stars button.on { color: #E5B84B; }
.review .stars button:hover { transform: scale(1.12); }
.review .review-more { margin-top: 12px; text-align: start; }
.review.done { display: block; }
.stars-static { color: #E5B84B; letter-spacing: 2px; margin-inline-start: 8px; }

/* ===========================================================================
   Σελίδα παραγγελίας: αντίστροφη μέτρηση, «ήρθε;», γιορτή.
   =========================================================================== */
.order-page { text-align: center; }
.order-page .receipt, .order-page .give-note, .order-page .card { text-align: start; }
.order-code-top { margin: 18px auto 6px; display: inline-block; }

.stage {
  margin: 10px 0 14px; padding: 26px 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.stage h2 { font-size: var(--text-xl); text-transform: none; letter-spacing: -.01em; margin: 6px 0 6px; text-wrap: balance; }
.stage .sub { color: var(--muted); }
.stage .btn { margin-top: 12px; }
.thanks { font-weight: 700; margin-bottom: 14px; }
.big-ico { font-size: 2.6rem; line-height: 1; }

.ring-wrap { position: relative; width: min(230px, 62vw); margin: 0 auto 10px; aspect-ratio: 1; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring-bg { stroke: var(--surface-2); }
.ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-txt strong { font: 800 clamp(2.2rem, 9vw, 3rem)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ring-txt span { margin-top: 6px; color: var(--muted); font-size: var(--text-xs); max-width: 70%; }

.pulse-dot { width: 16px; height: 16px; margin: 4px auto 12px; border-radius: 50%; background: var(--accent);
  animation: pdot 1.4s ease-in-out infinite; }
@keyframes pdot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
                  100% { box-shadow: 0 0 0 22px transparent; } }

.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ask-btns .btn { margin: 0; padding-block: 16px; }
#noBox { margin-top: 14px; text-align: start; }

.stage.alert { border-color: var(--warn); }
.stage.done { border-color: var(--ok); }
.stage.dead { border-color: var(--bad); }

.bubble { margin: 14px auto 4px; max-width: 420px; padding: 12px 14px; text-align: start;
  background: var(--surface-2); border-radius: var(--radius) var(--radius) var(--radius) 4px; }
.bubble span { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: 3px; }

.pts { margin-top: 14px; }
.pts-n { font: 800 3rem/1 var(--font-mono); color: var(--ok); }
.pts-goal { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); text-align: start; }
.pts-goal.ok { outline: 1px solid var(--ok); }
.pts-goal .eta-bar { margin-top: 8px; }

.again-btn { width: 100%; margin: 4px 0 14px; padding-block: 16px; }
.receipt-box { margin-top: 10px; text-align: start; }
.receipt-box > summary { cursor: pointer; padding: 12px 2px; color: var(--muted); font-weight: 600; list-style: none; }
.receipt-box > summary::before { content: "▸ "; }
.receipt-box[open] > summary::before { content: "▾ "; }

.myorder { padding: 0; overflow: hidden; }
.myorder-main { display: block; width: 100%; padding: 14px 16px; background: none; border: 0; color: inherit; text-align: start; cursor: pointer; }
.again-small { width: calc(100% - 32px); margin: 0 16px 14px; }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 95; max-width: calc(100% - 32px); padding: 13px 18px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--bg); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  animation: toastIn .25s ease both; transition: opacity .3s;
}
.toast.out { opacity: 0; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 96; }

/* --- Εγκατάσταση στην αρχική οθόνη ------------------------------------------ */
.install {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto;
  padding: 12px 12px 12px 14px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: toastIn .3s ease both;
}
.install img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.install div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.install span { color: var(--muted); font-size: var(--text-xs); }
.install .btn { padding: 11px 14px; flex: none; }
.install .x { background: none; border: 0; color: var(--muted); font-size: 1.4rem; padding: 4px 6px; cursor: pointer; }
.cartbar ~ .install, body:has(.cartbar) .install { bottom: calc(var(--bar-h) + 20px + env(safe-area-inset-bottom)); }
.ios-install ol { text-align: start; padding-inline-start: 22px; margin: 12px 0; line-height: 1.8; }
.ios-share { display: inline-block; width: 16px; height: 18px; vertical-align: -3px;
  border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; position: relative; }
.ios-share::before { content: "↑"; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); font-weight: 700; }

/* Κουμπί γλώσσας */
.lang-btn { font-weight: 800; letter-spacing: .04em; min-width: 40px; border: 1px solid var(--line, rgba(0,0,0,.15)); border-radius: 999px; padding: 4px 10px; }
@media (max-width: 440px) { .brand-logo + .brand-name { display: none; } .topbar-actions { gap: 4px; } }
/* Κινητό: το κουμπί πάει σε δική του σειρά, ώστε το κείμενο να έχει χώρο. */
.install { flex-wrap: wrap; }
.install .btn { font-size: var(--text-xs); letter-spacing: .08em; }
@media (max-width: 520px) {
  .install div { flex-basis: calc(100% - 44px - 12px - 40px - 12px); }
  .install .btn { order: 4; flex: 1 1 100%; }
  .install .x { order: 3; align-self: flex-start; }
}

/* ===========================================================================
   Αρχική, απλή: κατάσταση σε μία γραμμή → (εικόνες/προσφορά) → παράδοση ή
   παραλαβή σε μία γραμμή → αναζήτηση → κατηγορίες → προϊόντα.
   Χωρίς έντονα χρώματα: οι καταστάσεις δείχνονται με μια μικρή κουκκίδα.
   =========================================================================== */
.hero-slim { padding-block: 12px 4px !important; }
.statusline {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 14px; font-size: var(--text-sm); color: var(--ink-soft);
}
.statusline .st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.statusline .dot { width: 8px; height: 8px; border-radius: 50%; background: #6FBF8E; flex: none; }
.statusline .st.off { color: var(--muted); }
.statusline .st.off .dot { background: #8A8A8A; }
.statusline .mini { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.statusline .mini:hover { color: var(--ink); border-color: var(--ink); }

.promo { margin-top: 10px; }
.offer { min-height: 0; padding: 9px 14px; gap: 10px; font-size: var(--text-sm); }
.offer-tag { background: var(--surface-2); color: var(--ink-soft); padding: 2px 7px; }
.offer-text { font-weight: 500; }

.addrwrap { margin-top: 10px; }
.addrbox { margin: 0 auto; padding: 12px; max-width: 560px; }
.addrbox .modes { margin-bottom: 10px; }
.modes button[aria-selected="true"] { color: var(--ink); }
.addr-line { display: flex; align-items: center; gap: 10px; text-align: start; }
.addr-line .addr-ico { font-size: 1.1rem; flex: none; }
.addr-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.addr-txt strong { font-weight: 600; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-txt .sub { font-size: var(--text-xs); color: var(--muted); }
.addr-txt .sub.no { color: #D9A09A; }
.addr-line .linkbtn { flex: none; font-size: var(--text-sm); }

.toolbar { padding-block: 12px 6px !important; max-width: 560px; margin-inline: auto; }
.toolbar .searchbox { flex: 1 1 auto; }

/* Κατηγορίες: μία σειρά που κυλάει οριζόντια, όχι τοίχος από κουτιά. */
.catnav-in { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; }
@media (min-width: 700px) { .catnav-in { justify-content: center !important; } }
.chip { flex: none; padding: 7px 12px; font-size: var(--text-xs); }
.chip-n { display: none; }
.chip[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Τιμές προσφοράς χωρίς κόκκινο που «τρυπάει» το μάτι. */
.price .old, .price del, s.price-old { color: var(--muted); }

/* --- Πληροφορίες ---------------------------------------------------------- */
.info-page { max-width: 640px; }
.info-card h2, .legal h2 { font-size: var(--text-lg); }
.info-card .sub { color: var(--muted); font-size: var(--text-sm); margin-bottom: 12px; }
.plat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px;
        background: var(--surface-2); margin-bottom: 12px; }
.plat button { border: 0; background: none; color: var(--muted); padding: 9px 4px; font-weight: 600;
               font-size: var(--text-xs); cursor: pointer; }
.plat button[aria-selected="true"] { background: var(--surface); color: var(--ink); }
.plat-body ol { margin: 0 0 8px; padding-inline-start: 20px; line-height: 1.75; color: var(--ink-soft);
                font-size: var(--text-sm); text-align: start; }
.ok-line { color: #8FCFA7; }
.shop-map { height: 240px; margin: 4px 0 12px; background: var(--surface-2); border: 1px solid var(--line); }
.shop-pin img { width: 38px; height: 38px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); display: block; }
.where-addr { font-weight: 600; margin-bottom: 10px; }
.where-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.where-btns .btn { flex: 1 1 140px; }
.receipt-line.today .lbl, .receipt-line.today .val { color: var(--ink); font-weight: 700; }
.docs .doc-link { display: flex; justify-content: space-between; align-items: center; padding: 12px 0;
                  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.docs .doc-link:first-of-type { border-top: 0; }
.docs .doc-link:hover span:first-child { text-decoration: underline; }
.legal.doc { text-align: start; }
.legal.doc h3 { font-size: var(--text-base); margin: 18px 0 6px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.legal.doc p, .legal.doc li { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; }
.legal.doc ul { padding-inline-start: 18px; margin: 0 0 10px; }
.consent { font-size: var(--text-xs); color: var(--muted); text-align: center; margin-bottom: 10px; }
.consent a { color: var(--ink-soft); }

/* ===========================================================================
   Ελαφρύ σχέδιο: κανονικά γράμματα αντί για αραιά κεφαλαία, λεπτές γραμμές,
   απαλές γωνίες, λιγότερα κουτιά. Ο κατάλογος διαβάζεται σαν λίστα, όχι σαν
   στοίβα από πλακάκια.
   =========================================================================== */
h1, h2, h3, .btn, .chip, .linkbtn, .menubtn, .modes button, label { text-transform: none !important; letter-spacing: normal; }
body { -webkit-font-smoothing: antialiased; }

.hero h1, .page .hero h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.01em; }
.hero { padding-block: 18px 6px; }

/* Κουμπιά: πιο χαμηλά, στρογγυλεμένα, χωρίς βαριά γράμματα. */
.btn { padding: 12px 18px; min-height: 46px; font-weight: 600; font-size: .95rem;
       border-radius: var(--radius-sm); letter-spacing: 0; box-shadow: none; }
.btn.ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
.btn-price { font-family: var(--font-sans); font-weight: 600; opacity: .85; }

/* Κάρτες και πεδία: λεπτότερα. */
.card, .addrbox, .receipt, .offer { border-color: var(--line) !important; border-radius: var(--radius); }
.card h2 { font-size: var(--text-lg); font-weight: 650; margin-bottom: 10px; }
.field, .search { border-radius: var(--radius-sm); border-color: var(--line-strong); min-height: 44px; }
.banner, .banners-track, .banner img { border-radius: var(--radius); }

/* Κατηγορίες ως μικρή ετικέτα, όχι τεράστιος τίτλος με γραμμή. */
.cat > h2 { font-size: var(--text-sm); font-weight: 700; color: var(--muted); text-align: start;
            text-transform: uppercase !important; letter-spacing: .08em; margin: 0 0 6px; padding-bottom: 0; border: 0; }
.cat > h2::after { display: none !important; }
.cat { padding-block: 18px 0; }

/* Προϊόντα σαν λίστα: μία γραμμή ανά προϊόν, λεπτός διαχωριστής. */
.items { display: block !important; }
.item, button.item { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
                     border-radius: 0; padding: 14px 2px !important; text-align: start; }
.items > li:last-child .item, .items > .item:last-child { border-bottom: 0; }
button.item:hover:not(:disabled) { background: var(--surface); border-color: var(--line); }
.item-main h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.item-desc { font-size: var(--text-sm); color: var(--muted); margin-bottom: 4px; }
.price, .price-row .price { font-family: var(--font-sans); font-weight: 600; font-size: .95rem; letter-spacing: 0; }
.price.was { font-weight: 400; color: var(--muted); }
.price.now { color: var(--ink); }
.item-thumb { border-radius: var(--radius-sm); }

/* Φίλτρα κατηγοριών: απαλά «χάπια». */
.chip { border-radius: var(--radius-pill); padding: 7px 14px; font-weight: 600; font-size: .82rem;
        border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); }
.catnav { border-bottom: 1px solid var(--line); background: var(--bg); }

/* Παράδοση/Παραλαβή: λεπτός διακόπτης. */
.modes { border-radius: var(--radius-pill); padding: 3px; }
.modes button { border-radius: var(--radius-pill); padding: 8px; font-weight: 600; }
.modes button[aria-selected="true"] { background: var(--ink); color: var(--bg); }

/* Επάνω μπάρα πιο ήσυχη. */
.topbar .linkbtn, .topbar-actions .linkbtn { font-size: var(--text-sm); font-weight: 500; }
.lang-btn { min-width: 36px; padding: 4px 8px !important; font-size: .75rem !important; border-color: var(--line-strong); }
.brand-name { letter-spacing: var(--brand-tracking); font-size: var(--text-sm); }

/* Φύλλο προϊόντος. */
.sheet { border-radius: 18px 18px 0 0; }
.sheet h2, .sheet-head h2 { font-size: var(--text-xl); }
.opts-title, .sheet .grp h3, .sheet h3 { font-size: var(--text-base); text-transform: none; letter-spacing: 0; }

/* Μπάρα καλαθιού: λεπτότερη. */
.cartbar { padding-block: 10px; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); }
.cartbar .btn { min-height: 48px; }
.cartbar .count { border-radius: var(--radius-pill); min-width: 24px; }

/* Κουπόνι: μικρός σύνδεσμος που ανοίγει, όχι ολόκληρη κάρτα. */
.coupon-box { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.coupon-box summary { cursor: pointer; color: var(--ink-soft); font-size: var(--text-sm); list-style: none; }
.coupon-box summary::-webkit-details-marker { display: none; }
.coupon-box summary::before { content: '＋ '; color: var(--muted); }
.coupon-box[open] summary::before { content: '－ '; }

/* Καλάθι / απόδειξη: λιγότερη «μονοσπαστική» βαρύτητα. */
.receipt-line .val { font-family: var(--font-sans); font-weight: 500; }
.receipt-line.total .val, .receipt-line.total .lbl { font-weight: 700; }
.tear { display: none; }

/* Προσφορά / πόντοι / εγκατάσταση: ήσυχα. */
.install { border-radius: var(--radius); }
.install .btn { min-height: 40px; }
.statusline { font-size: .82rem; }

/* Υπολογιστής: ο κατάλογος στη μέση, στο ίδιο πλάτος με ό,τι είναι από πάνω,
   σε δύο στήλες για να μη χρειάζεται ατελείωτο κύλισμα. */
#menuList, #results { max-width: 760px; margin-inline: auto; }
@media (min-width: 900px) {
  #menuList, #results { max-width: 900px; }
  .items { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .items > li:last-child .item, .items > .item:last-child { border-bottom: 1px solid var(--line); }
}
.req { color: #D9A09A; font-weight: 600; }
.field.bad { border-color: #C9776F !important; box-shadow: 0 0 0 3px rgba(201,119,111,.18); }
.addr-chosen { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }

/* Χάρτης επιλογής διεύθυνσης: η πινέζα στέκεται στο κέντρο, ο χάρτης κινείται από κάτω. */
.map-wrap { position: relative; height: clamp(260px, 48vh, 380px); border-radius: var(--radius-sm); overflow: hidden; }
.map-wrap #map { position: absolute; inset: 0; }
.map-wrap .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
                 height: auto; width: auto; overflow: visible; pointer-events: none; z-index: 2; border-radius: 0; }
.map-pin { display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }

/* Εικονίδια: στο χρώμα και στο μέγεθος του κειμένου δίπλα τους. */
.ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; flex: none; }
h2 .ico { margin-inline-end: 6px; color: var(--ink-soft); }
.btn .ico { margin-inline-end: 6px; }
.statusline .mini .ico { margin-inline-end: 4px; color: var(--ink-soft); }
.addr-ico .ico { width: 20px; height: 20px; color: var(--ink-soft); vertical-align: middle; }
.big-ico { line-height: 1; margin-bottom: 8px; }
.big-ico .ico { width: 46px; height: 46px; stroke-width: 1.4; color: var(--ink); }
.pts-goal .ico { margin-inline-end: 4px; }

/* Επιλογές (πληρωμή, δώρα πόντων): μία καθαρή κάρτα ανά επιλογή. */
label.choice { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 0; padding: 12px 14px;
               border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; }
label.choice:first-child { margin-top: 0; }
label.choice[data-on] { border-color: var(--ink); background: var(--surface-2); }
label.choice input[type=radio], label.choice input[type=checkbox] { margin-top: 3px; accent-color: #fff; flex: none; }
label.choice > span { flex: 1; font-weight: 600; }
label.choice .sub { font-weight: 400; font-size: var(--text-xs); color: var(--muted); }
.maplink .ico{margin-inline-end:4px;vertical-align:-.15em}
.suggest .approx { color: var(--ink-soft); font-style: italic; }
.floor-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fchip { border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); border-radius: 999px;
         padding: 7px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.fchip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }