/* Theme 4 -- "Studio". Same one-accent-as-stroke-and-tint system as the
   home/marketing page (web/css/h/): soft warm-white ground, a single
   deep-coffee accent (--gold, kept as the variable name so every rule
   below that already referenced it falls in line automatically) used
   for strokes, links and a light --tint fill on chips/hover states --
   no second accent, no photography. One typeface, Inter, weights
   400/500/600/700, no italic -- emphasis is carried by weight, the way
   the home page does it, not by style. */
:root {
  --paper: #FBFAF8;
  --paper-card: #FFFFFF;
  --gold: #4A3324;
  --gold-deep: #35241A;
  --gold-line: rgba(74, 51, 36, .35);
  --gold-dotted: rgba(74, 51, 36, .55);
  --tint: #F2EAE3;
  --ink: #211C17;
  --ink-deep: #211C17;
  --ink-soft: #635B51;
  --ink-gold: #4A3324;
  --dark: #FBFAF8;
  --dark-footer: #F2EAE3;
  --dark-text: #211C17;
  --dark-gold: #4A3324;
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --label: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { 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: var(--gold-deep); }
::selection { background: rgba(74, 51, 36, .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(251, 250, 248, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(74, 51, 36, .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: 0;
  color: var(--ink-gold);
  background-color: var(--paper-card);
  border: 1px solid rgba(74, 51, 36, .4);
  border-radius: 999px;
  font-weight: 600;
  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 ---------- */
/* No photography here (same as the home page) -- a plain tinted band
   with the wordmark centered in normal flow, instead of text absolutely
   positioned over a background image. */
/* Photo on its own ::before layer at reduced opacity, same treatment
   as theme 3 -- keeps the existing --tint backing showing through
   underneath rather than fading the wordmark text along with it. */
.hero {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  /* background: var(--tint); */
  border-bottom: 1px solid var(--gold-line);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* --hero-bg is set inline on .hero (see the t/2 rule's own comment)
     and inherits into this pseudo-element -- Customer::get('Background')
     when set, this theme's own default photo (i/hero-bg.jpg) as the
     fallback otherwise, same as the old hardcoded url() here. */
  background-image: var(--hero-bg, url(../i/hero-bg.jpg));
  background-size: cover;
  background-position: center;
  opacity: .3;
}

.hero-fade { display: none; }

.hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--ink-gold);
}

.hero-emblem {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
}

/* content.php wraps title/address/map-link/wifi in a shared .hero-info
   div (added for theme 3's card treatment) -- this theme doesn't want
   the card look, just the original vertical stack, so this is the
   minimum needed to keep that: without it, .hero-info is a plain
   block div and its span/a children default to inline, so they'd try
   to flow side by side instead of stacking like they did as direct
   flex children of .hero-wordmark. Same fix as theme 2. */
.hero-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}

.hero-sub {
  margin-top: 10px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* .hero-sub's text-only rules above still apply here; this just adds
   the icon/text layout, same gap as .hero-location/.hero-wifi. */
.hero-worktime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
/* WiFi line (My Data > Contact details > WiFi Network/Password) --
   same sizing/spacing as .hero-location above (this theme's
   .hero-location is already --ink-soft, not a gold link color, so no
   further distinction is needed here). */
.hero-wifi {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
/* Small inline pin/wifi icons in front of the text above -- sized off
   the element's own font-size so they scale with the mobile
   breakpoint below rather than needing their own media query, and
   flex:none so the flex row's gap doesn't get eaten shrinking them. */
.hero-icon {
  flex: none;
  width: 1em;
  height: 1em;
}

/* Messengers + Socials icon row, last line of .hero-info -- see
   frontend/views/domain/content.php's $heroContactIcons. */
.hero-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.hero-contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-soft);
  text-decoration: none;
}
.hero-contact-link svg { width: 1em; height: 1em; }
.hero-contact-link:hover { color: var(--gold); }
.hero-contact-plain { cursor: default; opacity: .6; }

@media (max-width: 780px) {
  .hero { min-height: 0; padding: 36px 20px; }
  .hero-emblem { width: 110px; }
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 13px; }
  .hero-location { font-size: 11px; }
  .hero-wifi { font-size: 11px; }
}

/* ---------- category tabs ---------- */
.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  padding: 48px 40px 40px;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: .01em;
}

.categories a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--ink-gold);
  padding: 9px 18px;
  border: 1px solid var(--gold-line);
  background: var(--tint);
  border-radius: 999px;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease;
}
.categories a:hover {
  border-color: var(--gold);
  background: var(--tint);
  filter: brightness(0.97);
}

/* ---------- 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, 255, 255, .7), rgba(255, 255, 255, .25));
}

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
}
.corner-tl { top: 10px; left: 10px; border-top: 1px solid rgba(74, 51, 36, .5); border-left: 1px solid rgba(74, 51, 36, .5); }
.corner-tr { top: 10px; right: 10px; border-top: 1px solid rgba(74, 51, 36, .5); border-right: 1px solid rgba(74, 51, 36, .5); }
.corner-bl { bottom: 10px; left: 10px; border-bottom: 1px solid rgba(74, 51, 36, .5); border-left: 1px solid rgba(74, 51, 36, .5); }
.corner-br { bottom: 10px; right: 10px; border-bottom: 1px solid rgba(74, 51, 36, .5); border-right: 1px solid rgba(74, 51, 36, .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);
}

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

.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(74, 51, 36, .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; 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-weight: 400;
  font-size: 25px;
  color: var(--gold);
}

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

/* ---------- plates ---------- */
.plate {
  padding: 10px;
  border: 1px solid rgba(74, 51, 36, .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(74, 51, 36, 0), rgba(74, 51, 36, .45) 90%); }
.rule .right { background: linear-gradient(90deg, rgba(74, 51, 36, .45) 10%, rgba(74, 51, 36, 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(251, 250, 248, .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-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink-gold);
  padding: 12px 26px;
  border: 1px solid rgba(74, 51, 36, .45);
  border-radius: 999px;
}
.btn-back:hover { border-color: var(--gold); }
/* 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(74, 51, 36, .5);
  background: rgba(251, 250, 248, .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(74, 51, 36, .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-footer);
  color: var(--dark-text);
  border-top: 1px solid rgba(74, 51, 36, .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: 400;
  font-size: 20px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dark-gold);
}

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

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-style: normal;
  letter-spacing: .03em;
  color: var(--dark-gold);
  border-bottom: 1px solid rgba(74, 51, 36, .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); text-decoration: underline; }
/* WeChat has no universal "add by ID" link (frontend/views/domain/
   content.php renders it as plain text, not an <a>, when its contact
   value is filled in) -- matches the same color the other contact
   links use so it doesn't stand out as an error. */
.footer-contact-links .contact-plain { color: var(--dark-text); }

.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(74, 51, 36, .45);
  border-radius: 50%;
  color: var(--dark-gold);
}
.socials a:hover { background: rgba(74, 51, 36, .14); }

.quick-links { display: flex; flex-direction: column; gap: 12px; font-size: 20px; }
.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(74, 51, 36, .22);
  display: flex;
  justify-content: space-between;
  gap: 32px;
  font-family: var(--script);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(99, 91, 81, .85);
}
.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: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.qty input {
  width: 45px;
  padding: 2px 0 2px 10px;
  font-family: var(--script);
  font-size: 17px;
  color: var(--ink-deep);
  background: var(--paper-card);
  border: 1px solid rgba(74, 51, 36, .4);
  border-radius: 8px;
}
.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-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-gold);
  background: var(--paper-card);
  border: 1px solid rgba(74, 51, 36, .4);
  border-radius: 4px;
  cursor: pointer;
}
.qty-btn.qty-plus,
.qty-btn.qty-minus {
  width: 24px;
  height: 24px;
}
.qty-btn:hover { border-color: var(--gold); }
.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-weight: 400;
  font-size: 19px;
  color: var(--gold);
}
.item-sub {
  font-family: var(--script);
  font-size: 16px;
  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: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  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;
}
/* Was scoped to .back-row .btn-filter[hidden] only, which missed
   #filterToggleTop -- the same "My selection" button repeated in
   .topbar, outside .back-row. That copy kept showing regardless of
   the hidden attribute cart.js's syncFilterVisibility() sets, for the
   same reason as every other [hidden] override on this page: an
   author-origin display rule (.cart-pill-btn's inline-flex) always
   beats the UA [hidden] style, whatever the selector's scope. Dropped
   the .back-row prefix so this covers both buttons, matching every
   other [hidden] override here (none of them are container-scoped). */
.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(74, 51, 36, .45);
  border-radius: 999px;
  background: var(--paper-card);
  font-family: var(--script);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  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(74, 51, 36, .45);
  border-radius: 999px;
  background: var(--paper-card);
  font-family: var(--script);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  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-label/.order-mini-count's own base rules (above) set a
   muted tan/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 "My selection: N items"/"Order: N
   items" buttons) that reads as low-contrast tan-on-red, so both need
   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-label,
.cart-pill-btn .order-mini-count { color: #fff; }
.cart-pill-btn .price,
.cart-pill-btn .currency { font-size: 13px; font-style: normal; font-weight: 700; 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(74, 51, 36, .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(74, 51, 36, .45);
  border-radius: 16px;
}
.order-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  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); }

/* "Call us" popup (js/d/contacts-toggle.js) -- small anchored dropdown
   listing every filled-in contact/messenger link, opened from the
   topbar button. Not a full .order-modal: there's nothing to fill in
   or submit, just links to tap, so a lightweight positioned box under
   the button is enough instead. */
.contacts-mini { position: relative; display: inline-flex; }
.contacts-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  padding: 14px 16px;
  background: var(--paper-card);
  border: 1px solid var(--gold-line);
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
/* .contacts-popup'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 index.php's `hidden` attribute (the popup's
   closed state on load, and whenever contacts-toggle.js sets/clears it)
   left it visibly flexed open regardless. Same recurring fix as
   .order-field[hidden] etc. elsewhere in this file. */
.contacts-popup[hidden] { display: none; }
.contacts-popup-link {
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.contacts-popup-link:hover { color: var(--gold); }
/* Phone/SMS in this popup use a raw inline <svg> (no fa-* font glyph
   for those, see content.php's $heroSvgIcons) -- without an explicit
   size it renders at the browser's intrinsic default, many times
   larger than the <i class="fab"> icons next to it. */
.contacts-popup-link svg { width: 1em; height: 1em; flex: none; }
/* "Socials" heading inside the same popup, shown above the social
   links below it when any are filled in -- a thin rule separates it
   from the messenger links above, same gap the popup's own flex
   column already uses. */
.contacts-popup-title {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--gold-line);
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contacts-popup-social-link { display: inline-flex; align-items: center; gap: 6px; }

/* "My selection" and "My orders" modals' own close buttons (.order-modal-close
   is shared with the checkout modal's close button too, which stays
   borderless) -- same subtle gold-tinted border as .qty-btn, plus a
   little padding so it doesn't hug the glyph. */
.order-modal-close.js-my-selection-close,
.order-modal-close.js-my-orders-close {
  padding: 2px 8px;
  border: 1px solid rgba(169, 133, 63, .4);
}
.order-modal-close.js-my-selection-close { border-radius: 6px; }

.order-lines { display: flex; flex-direction: column; gap: 16px; padding: 14px 0; }
.order-line { display: flex; align-items: baseline; gap: 12px; }
.order-line-name { font-size: 19px; 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; 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;
  /* Same subtle gold-tinted border as .qty-btn/.order-modal-close's own
     "My selection" variant, so the [x] reads as a button rather than a
     bare glyph floating over the row's card. */
  border: 1px solid rgba(169, 133, 63, .4);
  border-radius: 6px;
  cursor: pointer;
}
.my-selection-remove:hover { color: #8C3A2A; }
.my-selection-remove:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.my-selection-remove svg { width: 14px; height: 14px; flex: none; }

/* ---------- 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; 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: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}



.my-orders-empty { font-size: 18px; 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: 400;
  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); }
.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: 12px;
}
.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;
  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(74, 51, 36, .4);
  border-radius: 8px;
  padding: 9px 10px;
}
.order-field textarea { resize: vertical; min-height: 52px; }
.order-field input::placeholder,
.order-field textarea::placeholder { color: rgba(99, 91, 81, .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: 40px;
  font-family: var(--script);
  font-size: 15px;
  color: var(--ink-deep);
  background: var(--paper-card);
  border: 1px solid rgba(74, 51, 36, .4);
  border-radius: 8px;
  padding: 2px 0 2px 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;
  font-weight: 600;
  border: 1px solid rgba(74, 51, 36, .6);
  border-radius: 999px;
  background: transparent;
}
.js-locate:hover { color: var(--ink-deep); border-color: var(--gold); }
.address-locate-hint {
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
/* "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-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 10px;
  border: 1px solid rgba(74, 51, 36, .6);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.address-replace-confirm-yes:hover,
.address-replace-confirm-no:hover { color: var(--ink-deep); border-color: var(--gold); }

.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(99, 91, 81, .4);
  border-radius: 10px;
  overflow: hidden;
}
.address-geo-map[hidden] { display: none; }
.address-geo-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.order-field-wide { grid-column: 1 / -1; }
.order-fee-note {
  margin: 0;
  font-size: 16px;
  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;
  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: 12px;
}
.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; 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(74, 51, 36, .45);
  background: rgba(255, 255, 255, .7);
  padding: 12px;
  margin: -12px;
}

.sheet section { scroll-margin-top: 120px; }
/* "Back to all categories" (.btn-back[href="#categories"]) jumps here
   via a plain anchor link -- .topbar is position: sticky; top: 0, so
   without this the category row would land flush behind it (or
   partly hidden). scroll-margin-top offsets the native anchor-scroll
   target so the row lands with a clear gap below the topbar instead:
   roughly the topbar's own height (~68px on one line) plus 30px of
   breathing room, more on narrow screens where the topbar wraps onto
   two rows and gets taller. */
#categories { scroll-margin-top: 100px; }
html { scroll-behavior: smooth; }

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

.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;
  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); }

/* The four contact pills (Call us/Telegram/Viber/WhatsApp) right under
   the popup header -- in both "Online order" (#orderModal) and
   "My orders" (#myOrdersModal) -- are plain sibling <a> tags, direct
   children of .order-modal-panel, not a flex row (unlike .order-mini/
   .order-inline, which use gap). Add breathing room between them and
   before the content below. */
.order-modal-panel > .cart-pill-btn {
  margin: 0 8px 12px 0;
}

/* ---------- 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: var(--gold);
  --red-deep: var(--gold-deep);
  --red-line: var(--gold);
}

/* "New" badge -- a section or item marked new (login area's "Mark as
   new" toggle) shows this solid-red pill next to its label in the
   category nav / heading (frontend/views/domain/content.php's
   .badge-new spans, shared by every theme). Solid red + white text
   matches the site's other high-visibility red UI above rather than
   the soft bordered look .my-order-status uses for its own
   (unrelated) "new" order status. */
.badge-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--red);
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.badge-new::before {
  content: '\2726';
  font-size: 10px;
}
.categories a .badge-new { margin-left: 8px; vertical-align: middle; }
.group-head .badge-new { align-self: center; }
.item-line .badge-new { align-self: center; }

.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: 600;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  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. */
/* "Basket" (Online order modal), "Clear" and "Close" across both the
   Online order modal and the Basket (My Selection) modal all share the
   .categories-a look: same resting/hover background+border, so the
   secondary actions in these popups read as one family with the
   category tabs. */
/* .js-order-close also matches the Basket toggle's icon-free variant, and
   .js-my-selection-close also matches the red "Online order" submit
   button in the Basket (My Selection) modal (it carries both
   .btn-back-order and .js-my-selection-close) -- :not(.js-order-details)
   keeps that one red instead of picking it up here. */
.order-modal-actions .btn-back.js-filter-toggle,
.order-modal-actions .btn-back.js-order-clear,
.order-modal-actions .btn-back.js-order-close,
.order-modal-actions .btn-back.js-my-selection-clear,
.order-modal-actions .btn-back.js-my-selection-close:not(.js-order-details) {
  background: var(--paper-card);
  color: var(--ink-gold);
  font-weight: 400;
  border-color: rgba(74, 51, 36, .45);
}
.order-modal-actions .btn-back.js-filter-toggle:hover,
.order-modal-actions .btn-back.js-order-clear:hover,
.order-modal-actions .btn-back.js-order-close:hover,
.order-modal-actions .btn-back.js-my-selection-clear:hover,
.order-modal-actions .btn-back.js-my-selection-close:not(.js-order-details):hover {
  color: var(--ink-gold);
  border-color: var(--gold);
  background: var(--tint);
}
.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;
}

/* First-pill-only spacing under the header used to live here, but with
   only one .call-us element (the adjacent-sibling combinator only ever
   matches the first of the four contact pills) it left buttons 2-4
   touching -- superseded by .order-modal-panel > .cart-pill-btn above,
   which spaces all four evenly. */
/* 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. */