:root {
  --paper: #F6EFE4;
  --paper-card: #FFFDF8;
  --gold: #A9853F;
  --gold-line: rgba(169, 133, 63, .32);
  --gold-dotted: rgba(169, 133, 63, .5);
  --ink: #3A322A;
  --ink-deep: #4A3A1E;
  --ink-soft: #8C7B63;
  --ink-gold: #6E5528;
  --dark: #201B15;
  --dark-text: #E8DCC6;
  --dark-gold: #C9A55C;
  --serif: 'Vollkorn', Georgia, serif;
  --display: 'Cinzel', serif;
  --label: 'Jost', system-ui, sans-serif;
  --script: 'Neucha', cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--script);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #7C5E23; }
::selection { background: rgba(169, 133, 63, .22); }

/* ---------- top bar ---------- */
.topbar {
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 40px;
  background: rgba(246, 239, 228, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(169, 133, 63, .28);
}

.brand {
  white-space: nowrap;
  font-family: var(--script);
  font-size: 15px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-gold);
}

.lang {
  appearance: none;
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-gold);
  background-color: var(--paper-card);
  border: 1px solid rgba(169, 133, 63, .4);
  border-radius: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 34px 0 14px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 380px;
  background-image: url(../i/letterhead.jpg);
  background-size: cover;
  background-position: center 10%;
}

/* Café logo shown directly in the hero (replaces the text wordmark) —
   kept small and centered over the letterhead background rather than
   stretching to the image's native size. */
.hero > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: auto;
  max-width: 40%;
}

/* #top2 — plain logo banner (no background image, unlike .hero): the
   logo fills the full width on small screens, and on larger screens
   keeps its natural size and sits centered instead of stretching. */
#top2 {
  text-align: center;
}

#top2 img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

@media (max-width: 780px) {
  #top2 img { width: 100%; }
}

.hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(246, 239, 228, 0) 62%, rgba(246, 239, 228, .6) 84%, var(--paper) 100%);
}

/* Real text wordmark over the hero image (replaces the text that used to
   be baked into letterhead.jpg, so it renders in our self-hosted fonts
   instead of being locked inside a JPEG). Positioned to sit just below
   the samurai emblem artwork still present in the image. */
.hero-wordmark {
  /* The hero background (assets/letterhead.jpg, 904x1280) is shown with
     background-size: cover + background-position: center 10%, so how much
     of its top gets cropped depends on viewport width vs hero height.
     top = 0.10 * heroHeight + 0.15044 * viewportWidth keeps the wordmark
     aligned just under the samurai emblem art across widths (derived from
     the cover-crop math; the two breakpoints below match the hero height
     values set further down). */
  position: absolute;
  left: 50%;
  top: min(calc(38px + 15.044vw), 280px); /* clamp: stay inside the 380px hero on very wide screens */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink-gold);
  white-space: nowrap;
}

.hero-title {
  /* font-family: var(--display); */
  font-family: var(--script);
  font-weight: 600;
  font-size: 42px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}

.hero-sub {
  margin-top: 10px;
  /* font-family: var(--label); */
  font-family: var(--script);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .5em;
  text-transform: uppercase;
  padding-left: .5em; /* optically re-center the tracked text */
}

.hero-location {
  margin-top: 8px;
  /* font-family: var(--label); */
  font-family: var(--script);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  padding-left: .34em;
  color: var(--gold);
}

@media (max-width: 780px) {
  /* hero height drops to 300px at this breakpoint (see .hero below), so
     the top-offset constant changes from 38px to 30px (= 0.10 * height);
     the 15.044vw term stays the same, see .hero-wordmark comment above. */
  .hero-wordmark { top: min(calc(30px + 15.044vw), 220px); } /* clamp: stay inside the 300px mobile hero */
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 13px; }
  .hero-location { font-size: 11px; }
}

/* ---------- category tabs ---------- */
.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 16px;
  padding: 64px 40px 48px;
  font-family: var(--script);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.categories a {
  display: inline-block;
  color: #4A3A1E;
  padding: 10px 18px;
  border: 1px solid rgba(169, 133, 63, .4);
  background: var(--paper-card);
  text-align: center;
  font-weight: bold;
  transition: background-color .2s ease, border-color .2s ease;
}

.categories a:hover {
  background: rgba(169, 133, 63, .1);
  border-color: rgba(169, 133, 63, .8);
}

/* Featured/"hit" section — sections/<lang>.json items with `"selected": 1`
   get a solid red tile instead of the default cream one. Its own
   "new" badge (see .new-badge below) is then inverted — white on red
   instead of red on white — so it still reads against the red tile. */
.categories a.is-selected {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.categories a.is-selected:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
}

.categories a.is-selected .new-badge {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--red);
}

/* ---------- menu sheet ---------- */
.sheet {
  position: relative;
  max-width: 1180px;
  margin: 0 auto 120px;
  padding: 72px 80px;
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(255, 253, 248, .7), rgba(255, 253, 248, .25));
}

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
}
.corner-tl { top: 10px; left: 10px; border-top: 1px solid rgba(169, 133, 63, .5); border-left: 1px solid rgba(169, 133, 63, .5); }
.corner-tr { top: 10px; right: 10px; border-top: 1px solid rgba(169, 133, 63, .5); border-right: 1px solid rgba(169, 133, 63, .5); }
.corner-bl { bottom: 10px; left: 10px; border-bottom: 1px solid rgba(169, 133, 63, .5); border-left: 1px solid rgba(169, 133, 63, .5); }
.corner-br { bottom: 10px; right: 10px; border-bottom: 1px solid rgba(169, 133, 63, .5); border-right: 1px solid rgba(169, 133, 63, .5); }

.group-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}

.group-num {
  font-family: var(--script);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--gold);
}

.group-title {
  margin: 0;
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: .01em;
  color: var(--ink-deep);
}

/* "New" section badge — sections/<lang>.json items with `"new": true`
   get this small icon+label marker, both next to the category-nav link
   (.categories a) and next to the section's own heading (.group-title). */
.new-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 6px 10px;
  min-height: 24px;
  vertical-align: middle;
  border: 1px solid var(--red);
  border-radius: 12px;
  background: var(--red);
  color: #F6EFE4;
  font-family: var(--script);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.new-badge-icon {
  font-size: 10px;
  line-height: 1;
}

.categories a .new-badge {
  margin-left: 6px;
}

.group-title + .new-badge {
  align-self: center;
}

.group-desc {
  margin: 0 0 40px;
  font-size: 18px;
  font-style: italic;
  color: var(--ink-soft);
}

/* sections/<lang>.json "hint" — a short red note shown both right under
   the section's own title (.section-hint) and under every item that
   belongs to it (.item-hint, placed next to .item-desc). Same text in
   both places; the section just repeats its one hint per item. */
.section-hint {
  margin: -4px 0 32px;
  font-size: 16px;
  font-style: italic;
  color: var(--red);
}

.item-hint {
  margin: 6px 0 0;
  font-size: 15px;
  font-style: italic;
  color: var(--red);
}

.group-body {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px 64px;
  align-items: start;
}

.items { display: flex; flex-direction: column; gap: 30px; }
.items-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; }

.item { display: flex; gap: 18px; align-items: flex-start; }

.item-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid rgba(169, 133, 63, .3);
  padding: 3px;
  background: var(--paper-card);
  flex: none;
  cursor: zoom-in;
}
.item-thumb:hover { border-color: var(--gold); }

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

.item-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.item-name { font-family: var(--script); font-size: 24px; font-style: normal; font-weight: 400; color: var(--ink); }
.item-val { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink-soft); white-space: nowrap; margin-left: -8px; }
.item-order { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
/* js/cart.js hides this (dy=0 items, only while "Delivery" is chosen) via
   the native [hidden] attribute — needs its own [hidden] override since
   an author rule of equal specificity otherwise beats the UA [hidden]
   style (same recurring tie as .order-field[hidden] etc. elsewhere in
   this file). */
.item-order[hidden] { display: none; }

.leader {
  flex: 1 1 24px;
  min-width: 24px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold-dotted) 0 2px, transparent 2px 7px);
}

.price {
  font-family: var(--script);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--gold);
}

.item-desc {
  margin: 6px 0 0;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- plates ---------- */
.plate {
  padding: 10px;
  border: 1px solid rgba(169, 133, 63, .28);
  background: var(--paper-card);
}
.plate img { display: block; width: 100%; height: 480px; object-fit: cover; cursor: zoom-in; }
.plate-caption {
  padding: 10px 2px 2px;
  font-family: var(--script);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.plate-inline { display: none; margin: 0 0 40px; padding: 8px; }
.plate-inline img { height: 260px; }
.plate-inline .plate-caption { padding: 8px 2px 2px; }

/* ---------- rules & buttons ---------- */
.rule {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 88px 0;
}
.rule span { flex: 1; height: 1px; }
.rule .left { background: linear-gradient(90deg, rgba(169, 133, 63, 0), rgba(169, 133, 63, .45) 90%); }
.rule .right { background: linear-gradient(90deg, rgba(169, 133, 63, .45) 10%, rgba(169, 133, 63, 0)); }
.diamond {
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.back-row {
  display: flex;
  justify-content: center;
  margin-top: 72px;
  position: sticky;
  bottom: 24px;
}
.back-row .btn-back {
  background: rgba(246, 239, 228, .95);
  backdrop-filter: blur(6px);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-gold);
  padding: 12px 26px;
  border: 1px solid rgba(169, 133, 63, .45);
}
.btn-back:hover { background: rgba(169, 133, 63, .1); }
/* Basket icon: i/basket.png applied as a CSS mask (see $basketIcon in
   index.php) so it always renders solid white regardless of the PNG's
   own pixel color — only its alpha channel (the cart shape) is used.
   Sized in em so its height always tracks the font-size of whichever
   element it sits inside (.btn-back, .order-mini-label, etc.),
   per-line so it never affects layout beyond its own inline box. */
.basket-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.15em;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.order-mini-label .basket-icon { margin-right: .4em; }
/* Inside the "Basket" button specifically, make the icon noticeably
   bigger than the text's own x-height rather than just matching it. */
.btn-back .basket-icon {
  width: 1.7em;
  height: 1.7em;
  vertical-align: -0.5em;
}

.btn-float-legacy {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 30;
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-gold);
  padding: 14px 24px;
  border: 1px solid rgba(169, 133, 63, .5);
  background: rgba(246, 239, 228, .95);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(58, 50, 42, .12);
  display: none;
}


/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px;
  background: rgba(32, 27, 21, .86);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.lightbox:target,
.lightbox.is-open { display: flex; }
.lightbox-close { position: absolute; inset: 0; }
.lightbox img {
  max-width: min(1000px, 90vw);
  max-height: 78vh;
  object-fit: contain;
  border: 1px solid rgba(201, 165, 92, .5);
  padding: 8px;
  background: var(--paper);
}
.lightbox-caption {
  font-family: var(--script);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark-gold);
}

/* ---------- footer ---------- */
.footer {
  background: var(--dark);
  color: var(--dark-text);
  border-top: 1px solid rgba(201, 165, 92, .3);
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 80px 64px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 64px;
}

.footer h2 {
  margin: 0 0 26px;
  font-family: var(--script);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark-gold);
}

.footer p { margin: 0 0 10px; font-size: 20px; font-style: italic; }
.footer .phone { margin-bottom: 12px; }

.map-link {
  display: inline-block;
  font-size: 15px;
  font-style: normal;
  letter-spacing: .03em;
  color: var(--dark-gold);
  border-bottom: 1px solid rgba(201, 165, 92, .5);
}
.map-link:hover { color: var(--dark-text); border-bottom-color: currentColor; }

.footer-contact-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 16px; margin-bottom: 32px; }
.footer-contact-links a { color: var(--dark-text); }
.footer-contact-links a:hover { color: var(--dark-gold); }

.socials { display: flex; gap: 12px; font-size: 15px; }
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 165, 92, .45);
  border-radius: 50%;
  color: var(--dark-gold);
}
.socials a:hover { background: rgba(201, 165, 92, .14); }

.quick-links { display: flex; flex-direction: column; gap: 12px; font-size: 20px; font-style: italic; }
.quick-links a { color: var(--dark-text); }
.quick-links a:hover { color: var(--dark-gold); }

.copyright {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 80px 48px;
  border-top: 1px solid rgba(201, 165, 92, .22);
  display: flex;
  justify-content: space-between;
  gap: 32px;
  font-family: var(--script);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(232, 220, 198, .7);
}
.copyright p { margin: 0; font-size: 12px; font-style: normal; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .group-body { grid-template-columns: 1fr; }
  .plate-beside { display: none; }
  .plate-inline { display: block; }
  .items-2col { grid-template-columns: 1fr; gap: 30px; }
  .sheet { padding: 48px 24px; margin-bottom: 72px; }
  .footer-inner { grid-template-columns: 1fr; gap: 48px; padding: 64px 24px 48px; }
  .copyright { flex-direction: column; padding: 24px 24px 40px; }
  .categories { gap: 10px 12px; padding: 40px 20px 32px; }
  .back-row {
    grid-template-columns: 1fr;
    row-gap: 14px;
    column-gap: 0;
    justify-items: center;
  }
  .back-row .order-inline { grid-column: 1; grid-row: 1; justify-self: center; flex-wrap: wrap; row-gap: 8px; justify-content: center; }
  .back-row .btn-back { grid-column: 1; grid-row: 2; justify-self: center; }
  .back-row .btn-filter { grid-column: 1; grid-row: 3; justify-self: center; }
  .topbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
  }
  .topbar .order-mini { margin-right: 0; }
  .hero { height: 300px; }
  .rule { margin: 56px 0; }
}

.thumb-link { flex: none; line-height: 0; }
.plate a { display: block; line-height: 0; }

/* ---------- quantity ---------- */
.qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.qty-label {
  font-family: var(--script);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.qty input {
  width: 58px;
  padding: 5px 4px 5px 8px;
  font-family: var(--script);
  font-size: 13px;
  color: var(--ink-deep);
  background: var(--paper-card);
  border: 1px solid rgba(169, 133, 63, .4);
  border-radius: 0;
}
.qty input:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 1px;
}

.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 0;
  font-family: var(--script);
  font-size: 14px;
  line-height: 1;
  color: var(--ink-gold);
  background: var(--paper-card);
  border: 1px solid rgba(169, 133, 63, .4);
  border-radius: 0;
  cursor: pointer;
}
.qty-btn:hover { background: rgba(169, 133, 63, .1); }
.qty-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.qty-minus[hidden] { display: none; }

/* ---------- price parts ---------- */
.currency {
  font-family: var(--script);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--gold);
}
.item-sub {
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  visibility: hidden;
}
.item-sub.is-on { visibility: visible; }

/* ---------- order total ---------- */
.order-mini,
.order-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
/* .order-mini and .order-inline used to each be a single bordered bar
   holding these 5 controls (Order/Clear/Call us/Viber/WhatsApp) as
   plain text+links. Both are now just invisible flex wrappers (kept
   only so cart.js's existing hidden-toggle hook still works) — each
   control is its own free-standing red pill button, see
   .cart-pill-btn below, styled to match "My orders" (.my-orders-btn). */
.order-mini,
.order-inline { flex-wrap: wrap; white-space: normal; }
.order-mini-label {
  font-family: var(--script);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-gold);
}
.order-mini-count {
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-soft);  
}

.back-row {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 24px;
  align-items: center;
  justify-content: center;
}
.back-row .order-inline {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  margin-right: 0;
  white-space: nowrap;
}
.order-inline .order-mini-label,
.order-inline .order-mini-count { white-space: nowrap; }
.back-row .btn-back { grid-column: 2; justify-self: center; background: var(--paper-card); }
.back-row .btn-filter {
  grid-column: 3;
  justify-self: end;
  background: var(--paper-card);
  cursor: pointer;
}
.back-row .btn-filter[hidden] { display: none; }
/* "Back to all categories" — shown only once the top category-nav
   links have scrolled out of view, see js/categories-nav.js. */
.js-back-to-categories[hidden] { display: none; }

.order-mini[hidden], .order-inline[hidden] { display: none; }

/* "My orders" button — styled to match the .order-mini cart bar
   (Order: N items X€ Details Clear) so it reads as part of the same
   group of pill-shaped topbar controls: border, height, background. */
.my-orders-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(169, 133, 63, .45);
  border-radius: 0;
  background: var(--paper-card);
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.my-orders-btn:hover { color: var(--ink-deep); border-color: var(--gold); }
.my-orders-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.my-orders-btn[hidden] { display: none; }

/* Small dot flagging an order status change the customer hasn't seen yet
   — set by js/my-orders.js when js/order-status-watch.js detects a
   change while the popup is closed; cleared the next time it's opened. */
.my-orders-btn { position: relative; }
.my-orders-btn.has-update::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 1px solid var(--paper-card);
}

/* Each control that used to live inside the .order-inline bar (Order /
   Clear / Call us / Viber / WhatsApp) is now its own free-standing pill
   button, same shape as .my-orders-btn — the base look here, the solid
   red fill comes from the shared red-scheme rule further down (see
   ".my-orders-btn" in that selector list). */
.cart-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(169, 133, 63, .45);
  border-radius: 0;
  background: var(--paper-card);
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.cart-pill-btn .order-mini-label,
.cart-pill-btn .order-mini-count { font-size: inherit; letter-spacing: inherit; white-space: nowrap; }
/* .order-mini-count's own base rule (above) sets a muted ink-soft color
   for contexts like "Your order"/"My orders" Total row, which sits on
   the light paper background — but inside a solid-red .cart-pill-btn
   (the "Basket" and "Order: N items" buttons) that reads as low-contrast
   tan-on-red, so it needs the same white the button's price/currency
   already get. Scoped to .cart-pill-btn only, so the paper-background
   Total row is untouched. */
.cart-pill-btn .order-mini-count { color: #fff; }
.cart-pill-btn .price,
.cart-pill-btn .currency { font-size: 13px; font-style: normal; color: #fff; }

/* In-page toasts for live order status changes (js/order-status-watch.js).
   Stacked in a fixed bottom-center container so more than one can be on
   screen at once; each stays until the customer dismisses it with the
   close button — these matter enough (an order's status actually
   changed) that they shouldn't disappear before someone's read them. */
.status-toast-container {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
}
.status-toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 14px 40px 14px 20px;
  background: var(--dark);
  color: var(--dark-text);
  border: 1px solid var(--dark-gold);
  font-family: var(--label);
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.status-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.status-toast-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--label);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
}
.status-toast-close:hover,
.status-toast-close:focus-visible { opacity: 1; }

.order-clear {
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(169, 133, 63, .5);
  border-radius: 0;
  padding: 2px 0;
  cursor: pointer;
}
.order-clear:hover { color: var(--ink-deep); border-bottom-color: var(--gold); }
.order-clear:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* .order-inline .order-clear used to trim this down inside the red cart
   bars, back when that bar's "Clear" reused the .order-clear class — it
   now uses .cart-pill-btn (see index.php), so .order-clear itself only
   ever renders standalone (dev "Clear storage", "Use my location") and
   this narrower override no longer matches anything live; left as-is
   since it's harmless dead CSS, not the subject of this change. */
.order-inline .order-clear { font-size: 11px; }

/* ---------- order details popup ---------- */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(32, 27, 21, .78);
  backdrop-filter: blur(3px);
}
.order-modal[hidden] { display: none; }

.order-modal-panel {
  width: min(620px, 100%);
  max-height: 82vh;
  overflow: auto;
  padding: 32px 36px 28px;
  background: var(--paper);
  border: 1px solid rgba(169, 133, 63, .45);
}
.order-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-line);
}
.order-modal-close {
  margin-left: auto;
  order: 2;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--ink-gold);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.order-modal-close:hover { color: var(--gold); }

.order-lines { display: flex; flex-direction: column; gap: 16px; padding: 22px 0; }
.order-line { display: flex; align-items: baseline; gap: 12px; }
.order-line-name { font-size: 19px; font-style: italic; color: var(--ink); }
.order-line-qty {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.order-line .leader { flex: 1 1 24px; min-width: 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--gold-dotted) 0 2px, transparent 2px 7px); }
.order-empty { font-size: 18px; font-style: italic; color: var(--ink-soft); }

.order-modal-total {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--gold-line);
}
.order-modal-total .order-mini-count { flex: 1; }
.order-modal-total .price, .order-modal-total .currency { font-size: 22px; }

.order-modal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.order-modal-actions .btn-back { background: transparent; cursor: pointer; }
/* "Order" button in the Basket popup — solid red like the site's other
   high-visibility call-to-action buttons (see the --red scheme below). */
.order-modal-actions .btn-back-order {
  background: var(--red);
  border-color: var(--red-line);
  color: #fff;
}
.order-modal-actions .btn-back-order:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}
.order-modal-actions .btn-back-order:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 2px;
}

/* "My selection" popup (js/my-selection.js) — each row is the real menu
   .item card, cloned as-is so it always matches the on-page look, plus
   an [x] to drop that item from the order entirely. */
.my-selection-list { display: flex; flex-direction: column; padding: 22px 0 4px; }
.my-selection-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--gold-line);
}
.my-selection-row:first-child { padding-top: 0; }
.my-selection-row:last-child { border-bottom: none; padding-bottom: 0; }
.my-selection-row .item {
  /* Containing block for .my-selection-remove — anchors the [x] to
     this card's own border instead of the row's outer edge. */
  position: relative;
}
.my-selection-row .item-line {
  flex-wrap: wrap;
  row-gap: 2px;
  padding-right: 26px;
}

@media (max-width: 480px) {
  .order-modal { padding: 24px 12px; }
  .order-modal-panel { padding: 24px 18px 20px; }
  .my-selection-row .item { gap: 12px; }
}

.my-selection-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.my-selection-remove:hover { color: #8C3A2A; }
.my-selection-remove:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ---------- spam honeypot (index.php #orderHoneypot) ---------- */
/* Off-screen rather than display:none/visibility:hidden — some bots skip
   fields hidden that way, but still find and fill plain absolutely
   positioned ones. Real visitors never see or reach it (not in the tab
   order, off-screen, aria-hidden on the wrapper). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- "My order(s)" popup ---------- */
.my-orders-list { display: flex; flex-direction: column; gap: 14px; padding: 22px 0 4px; }

.my-order-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-line);
}
.my-order-row:last-child { border-bottom: 0; padding-bottom: 0; }

.my-order-when { font-size: 16px; font-style: italic; color: var(--ink); }

.my-order-code-value {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.my-order-code {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.my-order-code:hover { color: var(--gold); text-decoration: underline; }
.my-order-row.is-active .my-order-code {
  color: var(--ink-gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}



.my-orders-empty { font-size: 18px; font-style: italic; color: var(--ink-soft); }

/* Status badge — bordered, colored by the raw status value (see
   js/my-orders.js's statusClass()) so a glance at the list tells you
   which orders need attention without opening anything. */
.my-order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--ink-soft);
  background: transparent;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
.my-order-status.status-new { border-color: var(--red); color: var(--red); background: rgba(122, 12, 12, .06); }
.my-order-status.status-reject { border-color: var(--dark); color: var(--dark); background: rgba(32, 27, 21, .06); }
.my-order-status.status-making { border-color: #94551B; color: #94551B; background: rgba(148, 85, 27, .08); }
.my-order-status.status-ready { border-color: #3F7D53; color: #3F7D53; background: rgba(63, 125, 83, .08); }
.my-order-status.status-delivery { border-color: var(--gold); color: var(--ink-gold); background: rgba(169, 133, 63, .1); }
.my-order-status.status-complete-pickup,
.my-order-status.status-complete-delivery { border-color: #2F6F4F; color: #2F6F4F; background: rgba(47, 111, 79, .08); }

.my-orders-detail {
  padding: 14px 16px;
  margin: 10px 0 4px;
  border: 1px solid var(--gold-line);
  border-radius: 4px;
}
.my-orders-detail[hidden] { display: none; }
.my-orders-detail .order-lines { padding: 10px 0 4px; }

/* ---------- fulfilment ---------- */
.order-fulfilment { padding: 4px 0 22px; border-top: 1px solid var(--gold-line); }
.order-choice { display: flex; gap: 22px; padding-top: 16px; }
.order-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  cursor: pointer;
}
.order-radio input { accent-color: var(--gold); }

/* Fulfilment (Pickup/Delivery) on the order form itself: a real
   radiogroup styled as red/light-red pills, matching "Call us"'s size.
   The input itself is visually hidden (not display:none, so it's still
   focusable/tabbable) and js/delivery.js's syncFulfilment() toggles
   .is-active on the matching label. (My orders' read-only Order info
   shows Fulfilment as plain text, not this pill style.) */
.order-choice-fulfilment { padding-top: 6px; gap: 6px; }
/* Same size/type as the "Call us" pill (.call-us.cart-pill-btn): 40px
   tall, 0 16px padding, var(--script) at 14px/.18em. Only the color
   scheme differs, since this pill toggles active/inactive instead of
   always being solid red. */
.order-radio-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--red);
  background: rgba(122, 12, 12, .08);
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--red);
  gap: 0;
}
.order-radio-pill span { pointer-events: none; }
.order-radio-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.order-radio-pill.is-active { background: var(--red); color: #fff; }

.order-delivery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-top: 20px;
}
.order-delivery[hidden] { display: none; }
.order-field { display: flex; flex-direction: column; gap: 6px; }
/* .order-field's own `display: flex` above has the same specificity as
   the browser's default [hidden]{display:none} and, being an author
   rule, wins the tie — so toggling .hidden on #addressField/
   #deliveryCostField (delivery.js #syncFulfilment) left them visibly
   flexed even while hidden. Same fix as .order-delivery[hidden] above. */
.order-field[hidden] { display: none; }
.order-field input,
.order-field select,
.order-field textarea {
  font-family: var(--script);
  font-size: 13px;
  color: var(--ink-deep);
  background: var(--paper-card);
  border: 1px solid rgba(169, 133, 63, .4);
  border-radius: 0;
  padding: 9px 10px;
}
.order-field textarea { resize: vertical; min-height: 52px; }
.order-field input::placeholder,
.order-field textarea::placeholder { color: rgba(140, 123, 99, .8); }
.order-field input:focus-visible,
.order-field select:focus-visible,
.order-field textarea:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.order-field .order-choice { padding-top: 6px; }
.order-choice-wrap { flex-wrap: wrap; gap: 12px 18px; }
.order-choice-wrap .order-radio { font-size: 17px; }

@media (max-width: 700px) {
  .order-delivery { grid-template-columns: 1fr; }
}

.order-line-input {
  width: 48px;
  font-family: var(--script);
  font-size: 12px;
  color: var(--ink-deep);
  background: var(--paper-card);
  border: 1px solid rgba(169, 133, 63, .4);
  border-radius: 0;
  padding: 4px 2px 4px 6px;
}
.order-line-input:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.order-line-remove {
  font-family: var(--script);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
}
.order-line-remove:hover { color: #8C3A2A; }
.order-line-remove:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* "[Use my location] or fill address manually below", sitting above the
   Address field — the hint makes clear typing the address is always
   fine too, so the field itself carries no separate "*" (index.php). */
.address-locate-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 6px;
}
/* Shown as a proper bordered button (not the plain underlined-text look
   .order-clear normally has) so it reads as its own distinct action. */
.js-locate {
  padding: 6px 12px;
  border: 1px solid rgba(169, 133, 63, .6);
  border-radius: 2px;
  background: transparent;
}
.js-locate:hover { color: var(--ink-deep); border-color: var(--gold); background: rgba(169, 133, 63, .08); }
.address-locate-hint {
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  font-style: italic;
}
/* "Use my location" found an address but Address already had something
   typed in it — never silently overwritten (see delivery.js#bindLocate);
   shown instead so the customer picks which one to keep. */
.address-replace-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 6px;
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.address-replace-confirm[hidden] { display: none; }
.address-replace-confirm-yes,
.address-replace-confirm-no {
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 10px;
  border: 1px solid rgba(169, 133, 63, .6);
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.address-replace-confirm-yes:hover,
.address-replace-confirm-no:hover { color: var(--ink-deep); border-color: var(--gold); background: rgba(169, 133, 63, .08); }

.address-geo-note {
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-soft);
  min-height: 14px;
}
/* Small embedded map (OpenStreetMap iframe, no API key) shown once
   "Use my location" successfully gets a fix — see delivery.js#showMap. */
.address-geo-map {
  height: 160px;
  border: 1px solid rgba(140, 123, 99, .4);
  border-radius: 2px;
  overflow: hidden;
}
.address-geo-map[hidden] { display: none; }
.address-geo-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "View on Google Map" — the pickup address block's own external link
   (index.php's #pickupAddressField), sitting right above its small
   OpenStreetMap embed and pointing at the cafe's real Google Maps
   listing ($setting['location']) rather than the OSM embed itself. */
.pickup-map-link {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--script);
  font-size: 13px;
  color: var(--gold);
}
.pickup-map-link:hover { color: #7C5E23; text-decoration: underline; }
.pickup-map-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

.order-field-wide { grid-column: 1 / -1; }
.order-fee-note {
  margin: 0;
  font-size: 16px;
  font-style: italic;
  color: var(--ink-soft);
}
/* Red like "Basket" (.cart-pill-btn / .btn-back-order's red scheme) —
   was a gold/tan fill before, per feedback. */
.order-modal-actions .btn-submit {
  color: #fff;
  background: var(--red);
  border-color: var(--red-line);
}
.order-modal-actions .btn-submit:hover { background: var(--red-deep); border-color: var(--red-deep); }
.order-status {
  margin: 18px 0 0;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-deep);
}
.order-status[hidden] { display: none; }
.order-status.is-error { color: #8C3A2A; }

.order-modal-actions .btn-submit[hidden] { display: none; }

/* ---------- post-order "view mode" summary (order-modal.js #showSuccessView) ---------- */
.order-summary {
  padding: 14px 16px;
  margin-top: 10px;
  border: 1px solid var(--gold-line);
  border-radius: 4px;
}
.order-summary[hidden] { display: none; }
.order-summary .order-lines { padding: 10px 0 4px; }
.order-summary-delivery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--gold-line);
  margin-top: 6px;
}
.order-summary-row { display: flex; align-items: baseline; gap: 14px; }
.order-summary-label {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  min-width: 90px;
}
.order-summary-value { font-size: 16px; font-style: italic; color: var(--ink); }
/* Messenger and map links (js/my-orders.js #renderDetail) — the global
   `a` rule already gives them the gold accent color; this just adds an
   underline on hover so they read as clickable within the italic text. */
.order-summary-value a:hover { text-decoration: underline; }

/* Several elements toggled via .hidden in JS (js/order-modal.js
   #showSuccessView / #exitSuccessView) set an explicit `display` in their
   own rule above, which otherwise wins the cascade over the browser's
   default [hidden]{display:none} — these restore that. */
.order-lines[hidden] { display: none; }
.order-modal-total[hidden] { display: none; }
.js-order-clear[hidden] { display: none; }

.req { color: var(--gold); padding-left: 3px; }
.order-field input.is-invalid,
.order-field .order-choice.is-invalid {
  border: 1px solid #8C3A2A;
}
.order-field .order-choice.is-invalid { padding: 6px 8px; }

.field-error {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .06em;
  color: #8C3A2A;
}
.field-error[hidden] { display: none; }

/* top bar stacks as soon as it gets tight: brand on its own line */
@media (max-width: 780px) {
  .topbar { justify-content: space-between; gap: 10px; row-gap: 12px; }
  .topbar .brand { order: 1; }
  .topbar .lang { order: 2; }
  .topbar .order-mini {
    order: 3;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    margin-right: 0;
    padding: 14px 16px;
  }
}

@media (max-width: 780px) {
  /* The bottom recap bar (back-row) duplicates the "Order total / Call
     us / Viber / WhatsApp" block already shown in the sticky top bar —
     on small screens that's redundant and eats vertical space, so it's
     hidden here; only the two navigation buttons stay. */
  .back-row .order-inline { display: none; }
  .back-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
    bottom: 10px;
  }
  /* font-size 14px / padding 10px are a deliberate larger touch target
     for small screens; at very narrow widths (~375px, e.g. iPhone SE)
     "Back to all categories" no longer fits next to "Basket" on one
     line even after trimming letter-spacing/gap/icon size below — the
     pair just wraps to two lines there (flex-wrap above), by design. */
  .back-row .btn-back,
  .back-row .btn-filter {
    padding: 10px 10px;
    font-size: 14px;
    letter-spacing: 0;
    gap: .3em;
    min-height: 40px;
  }
  /* The Basket button also carries its item count now — trim it down a
     touch on narrow screens so the two buttons keep a fighting chance
     of sharing one line. */
  .back-row .btn-filter .order-mini-count {
    font-size: 11px;
  }
  /* Kept close to the button's own font-size (rather than scaling up
     via em, as the desktop icon does) so it doesn't push the two
     buttons onto separate lines any more than the text itself already
     does at narrow widths. */
  .back-row .btn-back .basket-icon,
  .back-row .btn-filter .basket-icon {
    width: 14px;
    height: 14px;
    vertical-align: -0.15em;
  }
}

.item.is-chosen {
  border: 1px solid rgba(169, 133, 63, .45);
  background: rgba(255, 253, 248, .7);
  padding: 12px;
  margin: -12px;
}

.sheet section { scroll-margin-top: 120px; }
html { scroll-behavior: smooth; }

@media (max-width: 780px) {
  .sheet section { scroll-margin-top: 140px; }
}

.filter-row { display: flex; justify-content: center; margin-top: 56px; }
.filter-row-top { margin: 0 0 48px; }
.filter-row .btn-back { background: var(--paper-card); cursor: pointer; }
.filter-row .btn-back[hidden] { display: none; }
.group-empty {
  margin: 0;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-soft);
}
.group-empty[hidden] { display: none; }

/* "Your order" (#orderModal) used to restore its own pre-switch fonts
   here (var(--serif)/var(--label) on .price/.currency/.btn-back/
   .order-clear/.order-mini-label/.order-mini-count and everything that
   inherits, like order-line-name/radio labels/order-status) — removed
   per feedback so every element in "Your order" now uses the same
   var(--script) font as "Basket" (which never had this override). Its
   own form-only elements (.order-field inputs, .order-line-input/
   -remove, the address-* helper text) are switched to var(--script)
   below too, right next to their base rules. */

/* Same treatment for the "My order(s)" popup (also a .order-modal,
   reusing the same shared classes for its head/total/close styling). */
#myOrdersModal { font-family: var(--serif); }
#myOrdersModal .order-mini-label { font-family: var(--label); }

/* ---------- high-visibility red scheme for the cart bars + core nav
   buttons ---------- */
/* The site's gold/tan palette elsewhere is deliberately soft, but the
   two cart recap bars ("Order: ..." / "Order total: ...") and the three
   buttons a visitor uses to move around the menu ("Back to all
   categories", "My selection", "My orders") need to read clearly at a
   glance, so they get a solid red fill with white text (a proper
   "button" look) instead of the earlier border+red-text treatment.
   Scoped narrowly (specific elements / specific classes) so the shared
   .order-mini-label/.order-clear/.btn-back styling used inside the
   order popups and "My order(s)" popup is untouched. */
:root {
  --red: #7A0C0C;
  --red-deep: #5A0808;
  --red-line: #5A0808;
}

.order-mini .order-mini-label,
.order-mini .order-mini-count,
.order-mini .price,
.order-mini .currency,
.order-inline .order-mini-label,
.order-inline .order-mini-count,
.order-inline .price,
.order-inline .currency {
  color: #fff;
  font-weight: 700;
}
/* "Details" / "Clear" inside the red cart bars — styled to match the
   "Call us" / "Viber" ghost buttons right next to them, instead of the
   plain underlined-text look used elsewhere for .order-clear. */
.order-mini .order-clear,
.order-inline .order-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  box-sizing: border-box;
  padding: 0 14px;
  font-weight: 400;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 0;
  color: #fff;
  white-space: nowrap;
}
/* The "Order" button now carries the order-total label/count/price as
   its own content (moved there from being separate siblings) — those
   pieces keep the same white/bold styling they had outside the button,
   see .order-inline .order-mini-label etc. above. */
.order-mini .js-order-details .order-mini-label,
.order-inline .js-order-details .order-mini-label,
.order-mini .js-order-details .order-mini-count,
.order-inline .js-order-details .order-mini-count { white-space: nowrap; }
.order-mini .order-clear:hover,
.order-inline .order-clear:hover {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.order-mini .order-clear:focus-visible,
.order-inline .order-clear:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .8);
  outline-offset: 2px;
}

.btn-back[href="#categories"],
.btn-back.js-filter-toggle,
.my-orders-btn,
.cart-pill-btn {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  border-color: var(--red-line);
}
.btn-back[href="#categories"]:hover,
.btn-back.js-filter-toggle:hover,
.my-orders-btn:hover,
.cart-pill-btn:hover {
  color: #fff;
  border-color: var(--red-deep);
  background: var(--red-deep);
}
.btn-back.js-filter-toggle:focus-visible,
.my-orders-btn:focus-visible,
.cart-pill-btn:focus-visible,
.btn-back[href="#categories"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* The "Basket" button inside "Online order" also carries .js-filter-toggle
   (so my-selection.js's click handler picks it up) but should look like
   the plain "Clear"/"Close" buttons next to it (light, per feedback), not
   the solid-red topbar Basket toggle .btn-back.js-filter-toggle normally
   renders as — this scoped override wins by coming later and being more
   specific. */
.order-modal-actions .btn-back.js-filter-toggle {
  background: transparent;
  color: var(--ink-gold);
  font-weight: 400;
  border-color: rgba(169, 133, 63, .45);
}
.order-modal-actions .btn-back.js-filter-toggle:hover {
  background: rgba(169, 133, 63, .1);
  color: var(--ink-gold);
  border-color: rgba(169, 133, 63, .45);
}
.order-modal-actions .btn-back.js-filter-toggle:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- "Call us" phone link ---------- */
/* Added next to the cart "Clear" actions (both cart bars) and inside the
   "Your order" / "My orders" popups, so a visitor can always reach the
   café by phone. Reuses the site's small-label typography; color adapts
   to whichever background it sits on (red cart bars vs. paper popups). */
.call-us {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  box-sizing: border-box;
  padding: 0 14px;
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red-line);
}
.call-us:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: #fff;
}
.call-us:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 2px;
}

/* Inside "Your order" / "My orders" these links also carry .cart-pill-btn
   (see index.php) so they read as the same button as "Back to all
   categories" (.btn-back[href="#categories"] shares .cart-pill-btn's red
   styling). Both .call-us and .cart-pill-btn sit at the same (0,1,0)
   specificity, so without this the later-declared .call-us's own smaller
   sizing (11px / 32px / 0 14px) would keep winning over .cart-pill-btn's —
   this combined selector's higher specificity settles it in
   .cart-pill-btn's favor, matching the size the pill normally has. */
.call-us.cart-pill-btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  letter-spacing: .18em;
}

/* inside the order recap bars (already a solid red background) — a
   lighter "ghost" button so it doesn't disappear against the red bar */
.order-mini .call-us,
.order-inline .call-us {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.order-mini .call-us:hover,
.order-inline .call-us:hover {
  background: rgba(255, 255, 255, .28);
  border-color: #fff;
  color: #fff;
}

/* inside the "Your order" / "My orders" popup: its own line under the
   header, clear of the header's border-bottom */
.order-modal-head + .call-us {
  display: inline-flex;
  margin: 14px 0 16px;
}

/* Inside "Your order" / "My orders", Call us/Viber/WhatsApp now get the
   .cart-pill-btn class added in index.php — the same solid-red pill
   "Back to all categories" itself renders as (.btn-back[href="#categories"]
   shares that same red styling — see the rule above .call-us's own
   section). .call-us is kept only for this file's own scoping comments;
   .cart-pill-btn is what actually drives the look now, so no separate
   override is needed here. */