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

   ΜΗΝ αλλάζεις χρώματα ή γραμματοσειρές εδώ — όλα ορίζονται στο 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: calc(60px + env(safe-area-inset-top, 0px));
  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: calc(118px + env(safe-area-inset-top, 0px)); }

.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.combo-hint { background: rgba(230,126,34,.12); color: inherit; border: 1px dashed rgba(230,126,34,.6); }
.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; }
  body, body * { font-family: Arial, "Liberation Sans", Helvetica, sans-serif !important; }
  .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; }
.popup-deals { margin: 0 0 18px; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.popup-deals-h { padding: 10px 14px; font-weight: 700; font-size: var(--text-sm); border-bottom: 1px solid var(--line-strong); }
.popup-deals ul { list-style: none; margin: 0; padding: 0; }
.popup-deals li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: var(--text-sm); }
.popup-deals li + li { border-top: 1px solid var(--line); }
.popup-deals li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-deals li b { flex: none; }
.popup-alt { display: block; width: 100%; margin-top: 10px; padding: 10px; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@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 .card.review.greview { display: block; text-align: center; }
.greview .sub { margin: 2px 0 6px; }
.greview .gstars { color: #E5B84B; font-size: 1.5rem; letter-spacing: 4px; margin: 4px 0 12px; }
.greview .gbtn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.greview .gbtn svg { background: #fff; border-radius: 50%; padding: 2px; flex: none; }
.greview .linkish { margin-top: 12px; background: none; border: 0; color: var(--muted, #9a9a9a); text-decoration: underline; font: inherit; font-size: .9rem; cursor: pointer; }

/* ===========================================================================
   Σελίδα παραγγελίας: αντίστροφη μέτρηση, «ήρθε;», γιορτή.
   =========================================================================== */
.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; }
/* Στον υπολογιστή: στο κέντρο ΜΟΝΟ όταν χωράνε όλες (με margin auto στην πρώτη/τελευταία).
   Με justify-content:center, όταν δεν χωράνε, η αρχή «κοβόταν» αριστερά και δεν κυλούσε ως εκεί. */
.catnav-in > :first-child { margin-inline-start: auto; }
.catnav-in > :last-child  { margin-inline-end: auto; }
.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); }
  /* Δύο στήλες: η γραμμή από κάτω στην ίδια ευθεία, ακόμα κι αν η μία περιγραφή είναι μεγαλύτερη. */
  .items > li { display: flex; }
  .items > li > .item { height: 100%; }
}
.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; }
/* Μετρητά / κάρτα στον διανομέα: δύο επιλογές δίπλα-δίπλα */
.segm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segm label.choice { margin: 0; }
@media (max-width: 380px) { .segm { grid-template-columns: 1fr; } }
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); }

/* --- Διεύθυνση: οδός + αριθμός, GPS, προαιρετική πινέζα --- */
.row2 { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
.hint { margin: -2px 0 0; font-size: .8125rem; color: var(--ink-soft); line-height: 1.45; }
.addr-alt { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.addr-alt .linkbtn, .addr-pin-opt { display: inline-flex; align-items: center; gap: 6px; }
.addr-pin-opt { margin-top: 10px; font-size: .875rem; }
.addr-pin-opt .sub { color: var(--ink-soft); font-weight: 400; }
#gpsMsg .verdict { margin-top: 10px; }

/* ==========================================================================
   Κάτω μπάρα πλοήγησης (μόνο κινητό)
   ========================================================================== */
:root { --tab-h: 58px; }
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar:not([hidden]) {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 55;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--ink-soft); text-decoration: none; font-size: .6875rem; font-weight: 500; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent; min-height: 44px;
  }
  .tabbar a .ico { width: 23px; height: 23px; stroke-width: 1.7; }
  .tabbar a[aria-current] { color: var(--ink); font-weight: 700; }
  .tabbar a[aria-current] .ico { stroke-width: 2.1; }
  .tabbar a[aria-current]::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 2px; margin-left: -13px;
    border-radius: 0 0 2px 2px; background: var(--ink);
  }
  .tabbar a:active .ico { transform: scale(.9); }
  .tab-badge {
    position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
    border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .625rem; font-weight: 800;
    display: grid; place-items: center; line-height: 1;
  }
  .tab-badge[hidden] { display: none; }

  /* Τα υπόλοιπα «πατάνε» πάνω στη μπάρα, όχι κάτω από αυτήν. */
  body.has-tabbar { padding-bottom: calc(var(--tab-h) + var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .cartbar { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 0;
    border-top: 0; box-shadow: none; background: transparent; backdrop-filter: none; padding-block: 0 8px; }
  body.has-tabbar .cartbar .btn { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  body.has-tabbar .toast { bottom: calc(var(--tab-h) + 76px + env(safe-area-inset-bottom)); }
  body.has-tabbar .install { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
  body.has-tabbar .foot { padding-bottom: 8px; }
}

/* ==========================================================================
   Φύλλο εγκατάστασης εφαρμογής (κινητό)
   ========================================================================== */
.inst-bg {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55); animation: fadeIn .2s ease both;
}
@keyframes fadeIn { from { opacity: 0; } }
.inst {
  position: relative; width: 100%; max-width: 520px; margin: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
  padding: 20px 18px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 -10px 40px rgba(0,0,0,.4); animation: barUp .32s cubic-bezier(.32,.72,0,1) both;
}
.inst-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); cursor: pointer; }
.inst-head { display: flex; gap: 14px; align-items: center; margin: 0 36px 16px 0; }
.inst-head img { width: 60px; height: 60px; border-radius: 14px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.inst-head h2 { margin: 0 0 3px; font-size: var(--text-lg); }
.inst-head p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.45; }
.inst-steps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.inst-steps li { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px;
  background: var(--surface-2); font-size: var(--text-sm); line-height: 1.45; }
.inst-steps .n { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font-weight: 800; font-size: .8125rem; }
.inst-steps .ico { width: 1.15em; height: 1.15em; vertical-align: -3px; }
.inst-steps .sub { display: block; color: var(--ink-soft); font-size: .8125rem; margin-top: 2px; }
.i-share { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  background: color-mix(in srgb, #0a84ff 18%, transparent); color: #3d9bff; vertical-align: -6px; }
.i-share .ico { width: 16px; height: 16px; }
.inst #instGo { min-height: 52px; font-size: var(--text-base); margin-top: 2px; }
.inst #instGo .ico { width: 20px; height: 20px; }
.inst .btn.ghost { margin-top: 4px; }
.inst-later { display: block; margin: 8px auto 0; padding: 8px 12px; color: var(--ink-soft); font-size: var(--text-sm); }
/* iPhone: βέλος που δείχνει το κουμπί Κοινοποίηση του Safari (κάτω στη μέση). */
.inst-arrow { position: fixed; left: 50%; bottom: 2px; transform: translateX(-50%); color: #fff; z-index: 91;
  animation: nudge 1.1s ease-in-out infinite; pointer-events: none; }
.inst-arrow .ico { width: 30px; height: 30px; stroke-width: 2.4; }
@keyframes nudge { 50% { transform: translate(-50%, 6px); } }
@media (min-width: 761px) { .inst { margin-bottom: 24px; } .inst-arrow { display: none; } }
.inst-bg.has-arrow .inst { margin-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
body:has(.inst-bg) .tabbar { visibility: hidden; }

/* ==========================================================================
   Header: το λογότυπο ολόκληρο (όχι κομμένο σε τετράγωνο)· στο κινητό στη μέση,
   γλώσσα δεξιά. Ο λογαριασμός και οι πληροφορίες είναι στην κάτω μπάρα.
   ========================================================================== */
.brand-logo { width: auto; height: 40px; max-width: 150px; object-fit: contain; border-radius: 0; }
@media (max-width: 760px) {
  .topbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 58px; }
  .brand { grid-column: 2; justify-self: center; gap: 0; }
  .brand-logo { height: 44px; max-width: 160px; }
  .brand-logo + .brand-name { display: none !important; }
  .brand-name { font-size: var(--text-sm); }
  .topbar-actions { grid-column: 3; justify-self: end; }
  #accountBtn, .topbar-actions a.linkbtn[href="#/info"] { display: none !important; }
  .lang-btn { min-width: 40px; height: 32px; padding: 0 10px !important; font-size: .75rem !important;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
}
.brand-logo { height: 50px; max-width: 170px; }
.brand-logo + .brand-name { display: none; }
@media (max-width: 760px) { .brand-logo { height: 52px; max-width: 170px; } .topbar-in { min-height: 62px; } }
/* Κουμπί «Εφαρμογή» (μόνο κινητό, αριστερά στο header) */
.inst-btn { display: none; }
@media (max-width: 760px) {
  .inst-btn:not([hidden]) {
    grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: transparent; color: var(--ink); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .inst-btn .ico { width: 15px; height: 15px; stroke-width: 2.2; }
  .inst-btn:active { background: var(--surface-2); }
  .brand { grid-row: 1; }
  .topbar-actions { grid-row: 1; }
}

/* ==========================================================================
   Φύλλο προϊόντος: φωτογραφία, ✕, σύρσιμο για κλείσιμο
   ========================================================================== */
html.sheet-open, html.sheet-open body { overflow: hidden; }
.psheet { position: relative; max-height: 92vh; max-height: 92dvh; transition: transform .22s cubic-bezier(.32,.72,0,1); }
.psheet.closing { transform: translateY(100%); transition: transform .2s ease-in; }
.sheet-bg.closing { opacity: 0; transition: opacity .2s; }
@media (min-width: 720px) { .psheet.closing { transform: scale(.97); opacity: 0; } }

.ps-grab { position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; z-index: 3;
  border-radius: 999px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.psheet.has-img .ps-grab { background: rgba(255,255,255,.75); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
@media (min-width: 720px) { .ps-grab { display: none; } }

.ps-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center; border: 0; cursor: pointer; color: var(--ink);
  background: var(--surface-2); -webkit-tap-highlight-color: transparent; }
.psheet.has-img .ps-close { background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ps-close .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.ps-close:active { transform: scale(.92); }

.ps-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.psheet .sheet-body { overflow: visible; flex: none; padding-bottom: 20px; }

.ps-hero { position: relative; aspect-ratio: 16 / 10; max-height: 300px; width: 100%; background: var(--surface-2); overflow: hidden; }
.ps-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--surface) 55%, transparent)); pointer-events: none; }

.ps-head { padding: 20px var(--space) 16px; border-bottom: 1px solid var(--line); }
.psheet:not(.has-img) .ps-head { padding-top: 26px; padding-right: 60px; }
.ps-head h2 { font-size: var(--text-xl); line-height: 1.2; margin: 0; }
.ps-price { margin-top: 6px; font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.ps-price s { color: var(--muted); font-weight: 500; font-size: var(--text-sm); margin-right: 4px; }
.ps-desc { margin: 8px 0 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.5; }

/* Ομάδες: κεφαλίδα σαν «ενότητα», σήμα Υποχρεωτικό → ✓ όταν συμπληρωθεί. */
.psheet .group { padding-top: 22px; }
.psheet .group-head { justify-content: space-between; align-items: center; margin-bottom: 6px; }
.psheet .group-head h3 { font-size: var(--text-base); }
.psheet .group-rule { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-weight: 600; }
.psheet .group-rule.req { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.psheet .group.done .group-rule.req { background: color-mix(in srgb, var(--req-ok) 22%, transparent); color: var(--req-ok); }
.psheet .group.done .group-rule.req::before { content: "✓ "; }
.psheet .opt { border-radius: 12px; padding-inline: 10px; margin-inline: -10px; transition: background .15s; }
.psheet .opt:has(input:checked) { background: var(--surface-2); }
.psheet .opt:has(input:checked) .opt-name { font-weight: 600; }
.psheet .group.shake { animation: shake .45s; }
.psheet .group.shake .group-rule.req { background: #c62828; color: #fff; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.psheet #add.needs { opacity: .75; }

/* Μπάρα κατηγοριών: σβήνει στη δεξιά άκρη (φαίνεται ότι συνεχίζει) + κουμπί «Όλες». */
.catnav-row { position: relative; display: flex; align-items: center; max-width: var(--page-width); margin-inline: auto; }
.catnav-row .catnav-in { flex: 1 1 auto; min-width: 0; margin: 0; padding-right: 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); scroll-behavior: smooth; }
.cat-all { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space); padding: 8px 12px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.cat-all .ico { width: 16px; height: 16px; }
@media (max-width: 420px) { .cat-all span { display: none; } .cat-all { padding: 9px; } }

/* Υποσέλιδο: σύντομο κείμενο/συχνές ερωτήσεις (τα διαβάζουν Google & AI) + υπογραφή κατασκευής. */
.seo-faq { padding-block: 22px 6px; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.seo-faq h2 { font-size: var(--text-base); color: var(--ink); margin: 0 0 6px; }
.seo-faq p { margin: 0 0 10px; }
.seo-faq details { border-top: 1px solid var(--line); padding: 9px 0; }
.seo-faq summary { cursor: pointer; color: var(--ink); font-weight: 600; list-style: none; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: "+"; float: right; color: var(--ink-soft); }
.seo-faq details[open] summary::after { content: "–"; }
.seo-faq details p { margin: 6px 0 0; }
.credit { padding-block: 14px 18px; text-align: center; font-size: .75rem; color: var(--ink-soft); letter-spacing: .02em;
  border-top: 1px solid var(--line); margin-top: 10px; }
.credit a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.credit a:hover { border-bottom-color: var(--ink); }

/* ==========================================================================
   Μπάρα κατηγοριών στο κινητό — τελική μορφή
   · κολλάει ακριβώς κάτω από το header (ύψος από JS: --hdr-h) ως το τέλος της σελίδας
   · header & μπάρα συμπαγή: τίποτα δεν «φαίνεται από πίσω»
   · σβήσιμο μόνο στην πλευρά που έχει κι άλλες κατηγορίες
   ========================================================================== */
.page-body { display: block; }
/* Το main «λιώνει» μέσα στο .page-body, ώστε η κολλητή μπάρα να μένει στη θέση της και πάνω από το υποσέλιδο. */
.page-body > main { display: contents; }
.topbar { background: var(--head-bg) !important; color: var(--head-ink); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.catnav { top: calc(var(--hdr-h, 63px) - 1px) !important; z-index: 35; background: var(--bg) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 6px 12px -10px rgba(0,0,0,.45); }
.catnav-row { gap: 8px; padding-inline-end: var(--space); }
.catnav-row .catnav-in { padding: 10px 6px 10px var(--space) !important; align-items: center;
  -webkit-mask-image: none; mask-image: none; }
.catnav-row.fade-r .catnav-in { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.catnav-row.fade-l .catnav-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
  mask-image: linear-gradient(90deg, transparent, #000 36px); }
.catnav-row.fade-l.fade-r .catnav-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.catnav-in .chip { white-space: nowrap; line-height: 1.2; }
.cat-all { margin: 0 !important; height: 36px; padding: 0 12px; position: relative; }
.cat-all::before { content: ""; position: absolute; left: -9px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
@media (max-width: 420px) { .cat-all { width: 36px; padding: 0 !important; justify-content: center; } }
@media (max-width: 760px) { .chip { padding: 7px 13px; font-size: .8rem; } }
/* Χωρίς καλάθι δεν χρειάζεται κενό για τη μπάρα καλαθιού κάτω από το υποσέλιδο. */
@media (max-width: 760px) {
  body.has-tabbar:not(:has(.cartbar)) { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar .foot { padding-bottom: 16px; }
}

/* ==========================================================================
   Περιοχές παράδοσης: χάρτης ζωνών + λίστα με ελάχιστη παραγγελία
   ========================================================================== */
.zones-map { height: 300px; }
@media (max-width: 520px) { .zones-map { height: 260px; } }
.zone-list { list-style: none; margin: 14px 0 0; padding: 0; }
.zone-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.zone-row:first-child { border-top: 0; }
.zone-dot { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--zc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zc) 25%, transparent); }
.zone-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zone-main strong { font-size: var(--text-base); }
.zone-min { flex: none; text-align: right; display: flex; flex-direction: column; line-height: 1.2; }
.zone-min b { font-size: 1.05rem; }
.zones-note { margin: 10px 0 0; font-size: var(--text-xs); }
.zone-tag { background: #fff; color: #111 !important; font: 700 12px/1 system-ui, sans-serif; padding: 5px 8px;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.28); white-space: nowrap; pointer-events: none; }
.addr-alt a.linkbtn { text-decoration: none; }
.zone-tag { z-index: 3; } .maplibregl-marker.shop-pin { z-index: 2; }
/* Πληροφορίες: μεγάλες τιμές (διεύθυνση, email) αναδιπλώνονται αντί να βγαίνουν έξω από την κάρτα. */
.legal .receipt-line { gap: 12px; align-items: flex-start; }
.legal .receipt-line .lbl { flex: none; }
.legal .receipt-line .val { min-width: 0; text-align: right; overflow-wrap: anywhere; white-space: normal; }
.maplink { display: inline; overflow-wrap: anywhere; }
.inst-steps li.inst-br { display: block; background: none; padding: 4px 2px; font-size: var(--text-sm); color: var(--ink-soft); }

/* ==========================================================================
   Φύλλο προϊόντος: ομάδες επιλογών όπως στο e-food
   · κάθε ομάδα κάρτα με σήμα «Υποχρεωτική / Προαιρετική επιλογή / Μη διαθέσιμο»
   · κλειδωμένες ομάδες (π.χ. «Είδος ζάχαρης» πριν διαλέξεις ζάχαρη) θαμπές
   · κινητό: πατάς την ομάδα για να ανοίξει· υπολογιστής: όλες ανοιχτές, 2 στήλες
   ========================================================================== */
.psheet .group { padding: 0; margin-top: 12px; border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.psheet .group-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; margin: 0; }
.psheet .group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.psheet .gh-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.psheet .gh-txt h3 { margin: 0; font-size: var(--text-base); font-weight: 700; }
.psheet .gh-pick { font-size: var(--text-sm); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psheet .gh-pick:empty { display: none; }
.psheet .group-rule { flex: none; align-self: flex-start; padding: 4px 10px; border-radius: 8px; font-size: .74rem; font-weight: 700;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.psheet .group-rule.req { background: color-mix(in srgb, var(--req) 16%, transparent); color: var(--req); }
.psheet .group-rule.off { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); }
.psheet .group.done .group-rule.req { background: color-mix(in srgb, var(--req-ok) 22%, transparent); color: var(--req-ok); }
.psheet .group.done .group-rule.req::before { content: "✓ "; }
.psheet .gh-chev { flex: none; display: inline-flex; color: var(--ink-soft); transition: transform .2s; }
.psheet .gh-chev .ico { width: 20px; height: 20px; }
.psheet .group.open .gh-chev { transform: rotate(180deg); }
.psheet .group[hidden] { display: none; }
.psheet .group.locked { opacity: .55; }
.psheet .group.locked .group-head { cursor: not-allowed; }
.psheet .group.locked .gh-chev { visibility: hidden; }
.psheet .group-opts { display: none; padding: 0 12px 12px; gap: 8px; }
.psheet .group.open .group-opts { display: grid; grid-template-columns: 1fr; }
.psheet .group-opts .opt { margin: 0; padding: 12px 12px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; cursor: pointer; }
.psheet .group-opts .opt:has(input:checked) { border-color: var(--pick); background: color-mix(in srgb, var(--pick) 8%, var(--surface)); }
.psheet .group-opts .opt input { accent-color: var(--pick); width: 20px; height: 20px; flex: none; margin: 0; }
.psheet .group-opts .opt input:disabled + .opt-name { color: var(--muted); }
.psheet .group .msg { margin: 0 12px 12px; }
@media (min-width: 700px) {
  .psheet .group.open .group-opts { grid-template-columns: 1fr 1fr; }
  .psheet .gh-chev { display: none; }
  .psheet .group-head { cursor: default; }
}
.psheet .gh-txt .group-rule { align-self: flex-start; }
.psheet .opt-price { white-space: nowrap; font-family: inherit; font-size: var(--text-sm); }
@media (min-width: 700px) { .sheet.psheet { max-width: 760px; width: min(760px, calc(100vw - 48px)); } }

/* ==========================================================================
   Χρώματα από τη Διαχείριση → Χρώματα. Προεπιλογές = του θέματος.
   ========================================================================== */
:root { --pick: #E07A70; --req: var(--pick); --req-ok: var(--pick); --price: var(--ink); --head-bg: var(--surface); --head-ink: var(--ink);
  --tab-bg: var(--surface); --tab-ink: var(--ink-soft); --tab-active: var(--ink); }
.topbar .lang-btn, .topbar .inst-btn, .topbar .linkbtn { color: var(--head-ink); }
.price, .ps-price, .item .price { color: var(--price); }
@media (max-width: 760px) {
  .tabbar:not([hidden]) { background: var(--tab-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tabbar a { color: var(--tab-ink); }
  .tabbar a[aria-current] { color: var(--tab-active); }
  .tabbar a[aria-current]::before { background: var(--tab-active); }
}

/* ==========================================================================
   Cookies — μήνυμα συγκατάθεσης κάτω-κάτω (πάνω από την κάτω μπάρα στο κινητό)
   ========================================================================== */
.cc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); color: var(--ink); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 40px rgba(0,0,0,.45); animation: ccIn .25s ease-out; }
.cc-bar.cc-out { transform: translateY(100%); transition: transform .25s ease-in; }
@keyframes ccIn { from { transform: translateY(100%); } to { transform: none; } }
.cc-in { max-width: var(--page-width, 1040px); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; }
.cc-txt b { font-size: var(--text-base); }
.cc-txt p { margin: 4px 0 0; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5; }
.cc-txt a { color: var(--ink); }
.cc-opts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.cc-opts[hidden] { display: none; }
.cc-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); cursor: pointer; }
.cc-opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pick, #E07A70); flex: none; }
.cc-opt span { display: flex; flex-direction: column; gap: 2px; }
.cc-opt small { color: var(--muted); font-size: var(--text-xs); }
.cc-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cc-b { font: inherit; font-weight: 700; font-size: var(--text-sm); padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); min-height: 44px; }
.cc-b.cc-yes, .cc-b.cc-save { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.cc-b[hidden] { display: none; }
@media (max-width: 760px) {
  .cc-in { grid-template-columns: 1fr; }
  .cc-btns { justify-content: stretch; }
  .cc-btns .cc-b { flex: 1 1 40%; }
}

/* Ωράριο delivery / παραλαβής */
.hours-sub { display: flex; align-items: center; gap: 6px; font-size: .9rem; margin: 14px 0 4px; color: var(--ink-soft); }
.hours-sub:first-of-type { margin-top: 4px; }
.hours-sub .ico { width: 16px; height: 16px; }
.modes .mode-off { display: block; font-size: .68rem; font-weight: 500; color: var(--muted); }

/* Social media: στρογγυλά «χαπάκια» με εικονίδιο + όνομα, στα χρώματα του θέματος. */
.soc-row, .foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-social { justify-content: center; padding-block: 18px 4px; }
.soc { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-decoration: none;
  font-size: .85rem; font-weight: 600; min-height: 40px; transition: border-color .15s, background .15s; }
.soc .ico { width: 18px; height: 18px; }
.soc:hover, .soc:focus-visible { border-color: var(--ink); background: var(--surface-2); }

/* Συμμετοχή σε κλήρωση με QR · email προσφορών */
.optin { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.45; cursor: pointer; margin: 4px 0 12px; }
.optin input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--pick, var(--accent)); }
.optin .sub { color: var(--muted); }
.join-title { font-size: 1.5rem; margin: 6px 0 4px; }
.join-terms summary { cursor: pointer; color: var(--ink-soft); font-size: .9rem; margin-top: 6px; }
.join-sent, .join-done { text-align: center; padding: 8px 4px; }
.join-sent > .ico, .join-done > .ico { width: 48px; height: 48px; color: var(--ok); margin: 6px auto 8px; display: block; }
.join-done h1 { font-size: 1.5rem; margin: 0 0 10px; }
.join-done p, .join-sent p { margin: 0 0 10px; }
.join-page .give { margin-bottom: 14px; }

/* Μπάρα κατηγοριών: ίδιο πλάτος και στοίχιση με το μενού από κάτω. */
.catnav-row { max-width: 760px; }
@media (min-width: 900px) { .catnav-row { max-width: 900px; } }

/* Κληρώσεις & πόντοι στην κορυφή του μενού: κάρτες-κουμπιά που φαίνονται. */
.perks { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 640px; margin: 12px auto 2px; }
.perks.two { grid-template-columns: 1fr 1fr; }
.perk { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 12px 12px 10px; border-radius: 14px; text-decoration: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 0 transparent; transition: transform .12s, border-color .15s, background .15s; min-width: 0; }
.perk:hover, .perk:focus-visible { border-color: var(--ink-soft); background: var(--surface-2); }
.perk:active { transform: scale(.98); }
.perk-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.perk-ico .ico { width: 26px; height: 26px; }
.perk-give .perk-ico { animation: perkNudge 3.2s ease-in-out 1.2s 3; }
@keyframes perkNudge { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(10deg); } 97% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .perk-give .perk-ico { animation: none; } }
.perk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.perk-txt b { font-size: .92rem; }
.perk-txt small { font-size: .78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.perk-go { margin-inline-start: auto; flex: none; font-size: 1.4rem; line-height: 1; color: var(--muted); padding-left: 2px; }
@media (max-width: 480px) {
  .perk { padding: 10px; gap: 9px; }
  .perk-ico { width: 36px; height: 36px; border-radius: 10px; } .perk-ico .ico { width: 23px; height: 23px; }
  .perk-go { display: none; }
  .perk-txt b { font-size: .88rem; } .perk-txt small { font-size: .74rem; }
}

/* Επιλογές: «Επέλεξε» σε κενές υποχρεωτικές, «Χωρίς» στις προαιρετικές με μία επιλογή. */
.psheet .gh-pick.need { color: var(--req, var(--pick)); font-weight: 600; }
.psheet .group-opts .opt-none .opt-name { color: var(--ink-soft); font-style: italic; }

/* Παλιές κληρώσεις & νικητές */
.give-hist { margin-top: 26px; }
.give-hist-h { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 10px; }
.give-hist-h .ico { width: 22px; height: 22px; color: var(--ink); }
.hist { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 10px; }
.hist-img { flex: none; width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.hist-ph { display: grid; place-items: center; color: var(--muted); } .hist-ph .ico { width: 28px; height: 28px; }
.hist-body { min-width: 0; flex: 1; }
.hist-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hist-win { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.hist-win li { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.hist-win .ico { width: 15px; height: 15px; color: var(--ink-soft); flex: none; }

/* «‹ Πίσω» πάνω αριστερά σε κάθε σελίδα εκτός από το μενού */
.backrow { padding-top: 12px; padding-bottom: 0; }
.backbtn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.backbtn .ico { width: 18px; height: 18px; transform: rotate(90deg); }
.backbtn:hover { background: var(--surface-2); }
@media (max-width: 760px) { .topbar-actions a.linkbtn[href="#/menu"] { display: none; } }

/* ==========================================================================
   ☰ Πλαϊνό μενού
   ========================================================================== */
.burger { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px;
  border: 0; background: var(--brand-2, var(--ink)); color: var(--brand-2-text, var(--surface)); font: inherit; font-weight: 700;
  font-size: .85rem; letter-spacing: .06em; cursor: pointer; flex: none; -webkit-tap-highlight-color: transparent; }
.burger .ico { width: 20px; height: 20px; stroke-width: 2.4; }
.burger:active { transform: scale(.97); }
@media (max-width: 760px) {
  .burger { grid-column: 1; grid-row: 1; justify-self: start; height: 36px; padding: 0 12px 0 9px; font-size: .78rem; }
  .inst-btn:not([hidden]) { display: none; }          /* η «Εφαρμογή» είναι πλέον μέσα στο ☰ */
}
html.drawer-open, html.drawer-open body { overflow: hidden; }
.drawer-bg { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); animation: dFade .2s ease-out; }
.drawer-bg.gone { opacity: 0; transition: opacity .2s; }
.drawer-bg.gone .drawer { transform: translateX(-100%); transition: transform .2s ease-in; }
@keyframes dFade { from { opacity: 0; } }
@keyframes dIn { from { transform: translateX(-100%); } }
.drawer { position: absolute; inset: 0 auto 0 0; width: min(340px, 86vw); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); box-shadow: 12px 0 40px rgba(0,0,0,.4); animation: dIn .22s cubic-bezier(.32,.72,0,1);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-brand img { height: 56px; max-width: 200px; object-fit: contain; display: block; }
.drawer-brand { color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.drawer-x { width: 42px; height: 42px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.drawer-x .ico { width: 24px; height: 24px; } .drawer-x:hover { background: var(--surface-2); }
.drawer-nav { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.drawer-nav a, .drawer-nav button { display: flex; align-items: center; gap: 16px; padding: 14px 14px; border-radius: var(--radius-sm, 10px);
  color: var(--ink); text-decoration: none; font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
  background: transparent; border: 0; cursor: pointer; text-align: start; }
.drawer-nav .ico { width: 24px; height: 24px; flex: none; color: var(--ink-soft); }
.drawer-nav a:hover, .drawer-nav button:hover { background: var(--surface-2); }
.drawer-nav a[aria-current] { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--ink); }
.drawer-nav a[aria-current] .ico { color: var(--ink); }
.drawer-nav hr { border: 0; border-top: 1px solid var(--line); margin: 8px 6px; }
.drawer-foot { padding: 16px 20px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.drawer-foot a { color: var(--ink-soft); font-weight: 700; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 3px; }
.drawer-foot a:hover { color: var(--ink); }

/* ==========================================================================
   Αρχική σελίδα
   ========================================================================== */
body.home-bg { background-color: var(--bg); }
body.home-bg::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)), var(--home-bg) center / cover no-repeat; }
body.home-bg .page-body, body.home-bg main { background: transparent; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  body.home-bg::before { background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)), var(--home-bg-m, var(--home-bg)) center / cover no-repeat; }
}
.home { max-width: 560px; margin: 0 auto; padding-block: 18px 34px; display: flex; flex-direction: column; gap: 14px; }
.home-promo:empty { display: none; }
.home-promo .banners { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.home-promo .offer { margin-top: 10px; }
.home-closed { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); font-weight: 600;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); border: 1px solid var(--line-strong); }
.home-closed .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--bad, #F0685E); flex: none; }
.home-points { display: block; text-align: center; text-decoration: none; padding: 18px 20px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); font-size: 1.12rem; line-height: 1.5;
  border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.home-points b { font-size: 1.3em; }
.home-btns { display: flex; flex-direction: column; gap: 12px; }
.home-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 14px 20px;
  border-radius: var(--radius); text-decoration: none; font-weight: 800; font-size: 1.12rem; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .08s; }
.home-btn .ico { width: 24px; height: 24px; }
.home-btn.main { background: var(--brand-2, var(--ink)); color: var(--brand-2-text, var(--surface)); border-color: transparent; }
.home-btn:active { transform: scale(.98); }
.home-acc { align-self: center; margin-top: 8px; padding: 12px 26px; border-radius: 999px; text-decoration: none; font-weight: 700;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--line-strong); }

/* Το «Είμαστε κλειστά» πάνω από τη μπάρα cookies (αλλιώς στο κινητό σκέπαζε το κουμπί του). */
.popup-bg { z-index: 260; }

/* ==========================================================================
   Αρχική χωρίς υποσέλιδο · γλώσσα ΕΛ/EN · social στο ☰
   ========================================================================== */
body.is-home .foot { display: none; }
.home-seo { margin: 18px auto 0; max-width: 460px; text-align: center; font-size: .78rem; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 62%, transparent); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lang-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent); }
.lang-seg button { border: 0; background: transparent; color: var(--head-ink, var(--ink)); opacity: .65; font: inherit; font-size: .74rem;
  font-weight: 700; letter-spacing: .06em; min-width: 34px; height: 28px; padding: 0 9px; border-radius: 999px; cursor: pointer; }
.lang-seg button:hover { opacity: 1; }
.lang-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); opacity: 1; cursor: default; }
@media (max-width: 760px) { .lang-seg button { min-width: 30px; height: 26px; padding: 0 7px; font-size: .7rem; } }
.drawer-soc { padding: 12px 20px 4px; border-top: 1px solid var(--line); }
.drawer-soc-h { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.drawer-soc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer-soc-row a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: .85rem; font-weight: 600; background: var(--surface-2); }
.drawer-soc-row a .ico { width: 18px; height: 18px; }
.drawer-soc-row a:hover { border-color: var(--ink); }
.drawer-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 20px 4px; font-size: .8rem; }
.drawer-mini a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.drawer-mini a .ico { width: 14px; height: 14px; }
.drawer-mini a:hover { color: var(--ink); text-decoration: underline; }
.drawer-foot { border-top: 0; padding-top: 10px; }
/* Όλο το πλαϊνό κυλάει μαζί (λίστα + social + σύνδεσμοι), ώστε να μην κόβεται τίποτα σε μικρές οθόνες. */
.drawer { overflow-y: auto; overscroll-behavior: contain; }
.drawer-nav { flex: none; overflow: visible; }
.drawer-soc { margin-top: auto; }
.drawer-nav a, .drawer-nav button { padding: 12px 14px; }
@media (max-height: 760px) { .drawer-nav a, .drawer-nav button { padding: 10px 14px; font-size: .95rem; } .drawer-brand img { height: 46px; } }
.drawer-soc-row a { padding: 7px 11px 7px 9px; font-size: .82rem; }

/* --- Κάρτα «Πρόγραμμα πόντων» στην αρχική --------------------------------- */
.pcard { padding: 18px 18px 16px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 93%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.25); color: var(--ink); }
.pcard-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
.pcard-h .ico { width: 26px; height: 26px; flex: none; }
.pcard-h h2 { margin: 0; font-size: 1.12rem; font-weight: 800; text-align: center; }
.pcard-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.pstep { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 10px 6px;
  border-radius: var(--radius-sm, 10px); background: var(--surface-2); }
.pstep b { font-size: 1.45rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pstep span { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.pstep small { font-size: .74rem; color: var(--muted); }
.prew { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.prew li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--radius-sm, 10px); border: 1px dashed var(--line-strong); }
.prew-pts { font-weight: 800; font-size: 1.1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prew-pts small { font-size: .74rem; font-weight: 600; color: var(--muted); }
.prew-arrow { color: var(--muted); font-weight: 700; }
.prew-what { display: flex; flex-direction: column; min-width: 0; }
.prew-what b { font-size: 1.02rem; }
.prew-what small { font-size: .76rem; color: var(--muted); }
.pcard-cta { display: block; margin-top: 14px; text-align: center; padding: 12px 16px; border-radius: 999px; text-decoration: none;
  font-weight: 700; background: var(--brand-2, var(--ink)); color: var(--brand-2-text, var(--surface)); }
.pcard-cta:active { transform: scale(.98); }

/* Banners & κληρώσεις: η εικόνα μπαίνει ΟΛΟΚΛΗΡΗ στο πλαίσιο 16:9 — δεν κόβεται
   ποτέ γράμμα ή ημερομηνία. Ιδανικό μέγεθος 1600×900 (ή 1400×788, 1920×1080). */
.banner img, .give-img { object-fit: contain; background: #000; }

/* Απλή κάρτα πόντων (πάτημα → λεπτομέρειες) */
.pmini { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; cursor: pointer; font: inherit; color: var(--ink);
  padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.pmini:hover { border-color: var(--ink); }
.pmini-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); }
.pmini-ico .ico { width: 28px; height: 28px; }
.pmini-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pmini-txt b { font-size: 1.05rem; line-height: 1.3; }
.pmini-txt small { font-size: .84rem; color: var(--ink-soft); }
.popup.pinfo { position: relative; max-width: 440px; text-align: start; max-height: 88vh; max-height: 88dvh; overflow-y: auto; }
.pinfo-x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 999px; border: 0; background: transparent;
  color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pinfo-x:hover { background: var(--surface-2); } .pinfo-x .ico { width: 22px; height: 22px; }
.pinfo .pcard-h { padding-inline: 30px; }
.prules { margin: 14px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }
.pinfo .pstep { padding-inline: 4px; } .pinfo .pstep small { font-size: 11.5px; }

/* ---- Κοινοποίηση (κληρώσεις, προϊόντα) ---- */
.give-share { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line, rgba(255,255,255,.18)); background: transparent; color: inherit; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.give-share:hover { background: rgba(127,127,127,.12); }
.give-share .ico { width: 17px; height: 17px; }
.give.flash { animation: giveFlash 1.6s ease-out 1; }
@keyframes giveFlash { 0% { box-shadow: 0 0 0 3px var(--accent, #c8a46e); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ps-head { position: relative; }
.ps-share { position: absolute; top: 18px; right: var(--space, 16px); width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line, rgba(127,127,127,.3));
  background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.ps-share .ico { width: 19px; height: 19px; }
.ps-head h2 { padding-inline-end: 46px; }
.popup.share-pop { position: relative; max-width: 420px; text-align: start; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-b { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 8px 10px; border-radius: 12px;
  font: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; color: #fff; border: 0; cursor: pointer; text-align: center; }
.share-b .ico { width: 18px; height: 18px; }
.share-b.fb { background: #1877F2; } .share-b.wa { background: #1FA855; } .share-b.vb { background: #7360F2; } .share-b.ms { background: #0A7CFF; }
.share-b.cp, .share-b.more { grid-column: 1 / -1; background: var(--surface-2, rgba(127,127,127,.16)); color: inherit; border: 1px solid var(--line, rgba(127,127,127,.3)); }
.share-url { width: 100%; margin-top: 12px; padding: 10px 12px; font: inherit; font-size: .82rem; color: inherit; background: transparent; border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 10px; opacity: .85; }

.psheet:not(.has-img) .ps-share { right: 58px; top: 22px; }
.psheet:not(.has-img) .ps-head h2 { padding-inline-end: 50px; }
@media (hover: hover) and (pointer: fine) { .share-b.ms { display: none; } }

/* ---- iPhone/Android με «εγκατάσταση» (πλήρης οθόνη): τίποτα κάτω από την ώρα/μπαταρία ----
   Με viewport-fit=cover + black-translucent η σελίδα ξεκινά ΚΑΤΩ από τη γραμμή κατάστασης·
   ό,τι είναι στην κορυφή παίρνει περιθώριο ίσο με αυτήν (0 στους browsers χωρίς «εγκοπή»). */
.topbar { padding-top: env(safe-area-inset-top, 0px); }
.drawer {
  /* Περίγραμμα, όχι padding: το περίγραμμα ΔΕΝ κυλάει μαζί με το περιεχόμενο, οπότε ό,τι
     κυλάει σταματά κάτω από την ώρα/μπαταρία και πάνω από τη μπάρα χειρονομιών. */
  padding-top: 0; padding-bottom: 0;
  border-top: env(safe-area-inset-top, 0px) solid var(--surface);
  border-bottom: env(safe-area-inset-bottom, 0px) solid var(--surface);
}
.popup-bg { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
@media (max-width: 719px) {
  .sheet-bg { padding-top: env(safe-area-inset-top, 0px); }
  .sheet, .psheet { max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)); }
}
/* Μεγαλύτερος στόχος αφής για το ☰ MENU (Apple: τουλάχιστον 44px). */
.burger { position: relative; }
.burger::after { content: ""; position: absolute; inset: -6px -8px; }

/* ---- Όλα τα κινητά: πλάγια «εγκοπή» (iPhone οριζόντια, Android με cutout) και κάτω μπάρα χειρονομιών ----
   Το env(...) είναι 0 όπου δεν υπάρχει εγκοπή, οπότε σε κανονικές οθόνες δεν αλλάζει τίποτα. */
.wrap {
  padding-left: max(var(--space), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space), env(safe-area-inset-right, 0px));
}
.topbar, .catnav, .cartbar, .tabbar, .cc-bar {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.cc-bar { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
.drawer { padding-left: env(safe-area-inset-left, 0px); }
.inst-arrow { bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
.popup-bg { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 719px) {
  .sheet-bg { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
h1.home-seo { font-family: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; }
.home-seo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin: 6px auto 0; max-width: 460px; font-size: .74rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.home-seo-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.seo-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; padding-block: 8px; }
.seo-links a { color: inherit; opacity: .8; }

/* 🏷️ Οι προσφορές μας (αρχική): μία κάρτα-λίστα στο ύφος της κάρτας πόντων, ασπρόμαυρη όπως το κουμπί «Δείτε το μενού». */
.hof { border-radius: var(--radius); border: 1px solid var(--line-strong); overflow: hidden;
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.hof-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.hof-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.hof-head a { font-size: .9rem; font-weight: 700; color: var(--ink-soft, var(--muted)); text-decoration: none; white-space: nowrap; }
.hof-list { list-style: none; margin: 0; padding: 0; }
.hof-it { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 12px 18px; text-align: start; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: none; background: none; border: 0; border-top: 1px solid var(--line); }
.hof-it:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hof-it:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.hof-pic { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 900; font-size: .84rem; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hof-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hof-pic.tag { background: var(--brand-2, var(--ink)); color: var(--brand-2-text, var(--surface)); }
.hof-pic.tag.big { font-size: .95rem; }
.hof-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hof-name { font-weight: 800; line-height: 1.25; }
.hof-sub { font-size: .84rem; color: var(--ink-soft, var(--muted)); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-live { display: inline-block; margin-inline-end: 6px; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800;
  vertical-align: 1px; background: var(--ok, #2F9E44); color: #fff; }
.hof-price { flex: none; text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hof-price s { display: block; font-size: .78rem; color: var(--muted); }
.hof-price b { font-size: 1rem; }
.hof-price small { display: block; font-family: var(--font-sans); font-size: .72rem; color: var(--muted); }
.hof-chev { flex: none; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.menu-offers { display: flex; justify-content: center; margin-top: 12px; }
.menu-offers[hidden] { display: none; }
.menu-offers > .hof { width: 100%; max-width: var(--col); box-shadow: none; }
.hof-more { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font-family: inherit; cursor: pointer; }
.hof-more { display: block; padding: 12px 18px; border-top: 1px solid var(--line); text-align: center; font-weight: 700; font-size: .9rem;
  color: var(--ink); text-decoration: none; }

/* 🔥 Combo: ετικέτα στο μενού και κουτί μέσα στο προϊόν — ίδιο ασπρόμαυρο ύφος. */
.deal-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 800;
  background: var(--brand-2, var(--ink)); color: var(--brand-2-text, var(--surface)); white-space: nowrap; }
.ps-deal { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-strong); }
.ps-deal-pct { flex: none; display: grid; place-items: center; min-width: 52px; height: 44px; padding: 0 8px; border-radius: 10px;
  background: var(--brand-2, var(--ink)); color: var(--brand-2-text, var(--surface)); font-weight: 900; font-size: 1.02rem; }
.ps-deal-t { display: block; font-size: var(--text-sm); color: var(--muted); }

/* 📦 Πακέτο στο καλάθι: «▸ Cappuccino: Διπλός · Rich» */
.opts-note .opt-head { color: var(--ink, inherit); font-weight: 600; }

/* 📦 Πακέτο: ό,τι όρισε το κατάστημα (π.χ. «Περιλαμβάνει: Κέικ», «Μέγεθος: Διπλός») — μόνο ένδειξη. */
.psheet .group.fixed .group-opts, .psheet .group.fixed .gh-chev, .psheet .group.fixed .group-rule { display: none; }
.psheet .group.fixed .group-head { pointer-events: none; }

/* 💳 Παραλαβή: «Θα πληρώσω με: Μετρητά / Κάρτα» */
.paypick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.paypick.bad { border-color: #C9776F; box-shadow: 0 0 0 3px rgba(201,119,111,.18); }
.paypick .fchip svg { width: 16px; height: 16px; vertical-align: -3px; }

/* 🔔 Ειδοποιήσεις */
.push-card, .push-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; padding: 14px 16px;
  border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); font-size: var(--text-sm); }
.push-card > svg, .push-hint > svg, .push-card .eico { width: 22px; height: 22px; flex: none; }
.push-card > span, .push-hint > span { flex: 1 1 200px; min-width: 0; text-align: start; }
.push-card small { display: block; color: var(--muted); margin-top: 2px; }
.push-card .btn { flex: none; width: auto; padding: 10px 16px; font-size: var(--text-sm); }
.push-card.on { border-color: color-mix(in srgb, var(--ok, #2e8b57) 50%, var(--line)); }
.push-hint svg { width: 16px; height: 16px; vertical-align: -3px; }
.push-acc h2 svg { width: 20px; height: 20px; vertical-align: -3px; }

/* 🎁 Δώρο με κάθε καφέ (καλάθι + προϊόν) */
.pts-ex { display: block; font-size: var(--text-xs); color: var(--muted); font-weight: 400; }
.gift-note { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-sm); color: var(--ok, #1e8449); }
.gift-note b { font-weight: 800; letter-spacing: .02em; }
.gift-note .eico, .gift-note svg, .ps-gift svg { width: 16px; height: 16px; flex: none; }
.ps-gift { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-strong); font-size: var(--text-sm); }

/* ☕ Coffee Club (λογαριασμός) */
.club { padding: 18px; }
.club-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.club-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.25rem; }
.club-head h2 .ico { width: 1.15em; height: 1.15em; }
.club-pill { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); }
.club-box { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); margin-top: 10px; }
.club-k { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.club-pts { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; }
.club-pts b { font: 800 2.2rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.club-pts span { color: var(--muted); }
.club-bar, .club-mbar { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
.club-bar > span, .club-mbar > span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .6s ease; }
.club-sub { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.club-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.club-mh h3 { margin: 0; font-size: 1.02rem; }
.club-gift .ico { width: 22px; height: 22px; }
.club-m p { margin: 6px 0 10px; line-height: 1.45; }
.club-prog { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
.club-dots { display: inline-flex; gap: 6px; }
.club-dots > span { width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); display: grid; place-items: center; }
.club-dots > span.on { background: transparent; border: 1.6px solid var(--ok, #2F9E44); color: var(--ok, #2F9E44); }
.club-dots .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.club-mbar { flex: 1; min-width: 80px; max-width: 160px; }
.club-rw { margin-inline-start: auto; font-weight: 800; color: var(--ink); }
.club-m.done { outline: 1.5px solid var(--ok, #2F9E44); }
.club-m.done .club-gift { color: var(--ok, #2F9E44); }
.club-m.just { animation: club-pop .7s ease; }
@keyframes club-pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.club-note { margin-top: 8px; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.club-note.ok { color: var(--ok, #2F9E44); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .club-m.just { animation: none; } }

/* 🔔 Ερώτηση ειδοποιήσεων στο πρώτο άνοιγμα της εφαρμογής */
.pw { text-align: left; }
.pw h2, .pw > p:first-of-type { text-align: center; }
.pw-ico { width: 52px; height: 52px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--surface); }
.pw-ico svg { width: 26px; height: 26px; }
.pw-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; font-size: var(--text-sm); }
.pw-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.pw-list li i { flex: none; font-style: normal; }
.pw-list li span { flex: 1; min-width: 0; }
.pw-off { margin: 0 0 14px; font-size: var(--text-sm); }
.pw-small { margin: 8px 0 0 !important; font-size: .78rem; color: var(--muted); text-align: center; }

/* 🎁 Κράτα τους πόντους σου (σελίδα παραγγελίας επισκέπτη) */
.claim.card { margin-top: 14px; border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.claim.card h2 { margin: 0 0 6px; font-size: 1.15rem; }
.claim.card .sub { margin: 0 0 12px; }
.claim .cl-no { display: block; margin: 10px auto 0; color: var(--muted); }
div.claim { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); }
div.claim > svg { width: 26px; height: 26px; flex: none; }
div.claim > span { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
div.claim > span small { color: var(--muted); }
div.claim .cl-msg { flex-basis: 100%; }
div.claim.on { border-color: var(--ok, #2F9E44); }