/* Cogni Menu: стили сайта-меню. Цвета кафе задаются токенами ниже. */

/* ---------- font: Onest (OFL), self-hosted ---------- */
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- tokens ----------
   The page is white by day and black at night; colour goes only where the actions and offers are.
   --accent*: buttons, cart bar, active tab, the chosen language and size. Preset is the Prepd pair:
   dark green #1C2918 with light-green letters by day, light green #AEF38D with dark-green letters at night.
   Another cafe's colour arrives as --theme-* from applyTheme() in app.js.
   --mark-ink: discounts, gifts and the "new" label: no marker, the text itself is green. By day #3A7A22, Prepd's light green
   made darker to read on white (the dark green looks black in small text); at night the light green #AEF38D.
   Another cafe: its ink colour.
   --hl*: the "2×" before a dish in the cart: a light-green marker (another cafe: its tint).
   --wa*: the send button keeps WhatsApp's own colours.
   Night colours follow the phone; ?theme=dark|light sets data-theme for one visit. */
:root {
  --accent: var(--theme-accent, #1C2918);
  --on-accent: var(--theme-on, #AEF38D);
  --accent-ink: var(--theme-ink-l, #1C2918);
  --mark-ink: var(--theme-ink-l, #3A7A22);
  --hl: var(--theme-weak-l, #AEF38D);
  --on-hl: var(--theme-ink-l, #1C2918);
  --wa: #25D366;
  --on-wa: #0B141A;
  --photo-bg-set: #282B2F;
  --photo-bg-dish: #F29D3D;
  --bg: #FFFFFF;
  --surface: #F4F4F2;
  --surface-press: #EAEAE7;
  --raised: #FFFFFF;
  --page-outside: #EDEDEA;
  --ink: #161616;
  --ink-2: #5E5E5A;
  --ink-3: #737370;
  --line: #E6E6E3;
  --handle: #D6D6D2;
  --danger: #B42318;
  --scrim: rgba(0,0,0,.40);
  --shadow-float: 0 4px 16px rgba(0,0,0,.12);
  --shadow-control: 0 1px 4px rgba(0,0,0,.14);
  --r-img: 10px; --r-btn: 12px; --r-input: 10px; --r-bar: 14px; --r-sheet: 20px; --r-pill: 999px;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --cover-focus: 50% 50%;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121212; --surface: #1E1E1D; --surface-press: #2A2A28; --raised: #383836; --page-outside: #0A0A0A;
    --ink: #F2F2F0; --ink-2: #A9A9A4; --ink-3: #8C8C87;
    --line: #2A2A28; --handle: #3A3A38; --danger: #F97066;
    --accent: var(--theme-accent, #AEF38D); --on-accent: var(--theme-on, #1C2918); --accent-ink: var(--theme-ink-d, #AEF38D);
    --mark-ink: var(--theme-ink-d, #AEF38D);
    --hl: var(--theme-weak-d, #AEF38D); --on-hl: var(--theme-ink-d, #1C2918);
    --scrim: rgba(0,0,0,.60); --shadow-float: 0 4px 16px rgba(0,0,0,.5); --shadow-control: 0 1px 4px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #121212; --surface: #1E1E1D; --surface-press: #2A2A28; --raised: #383836; --page-outside: #0A0A0A;
  --ink: #F2F2F0; --ink-2: #A9A9A4; --ink-3: #8C8C87;
  --line: #2A2A28; --handle: #3A3A38; --danger: #F97066;
  --accent: var(--theme-accent, #AEF38D); --on-accent: var(--theme-on, #1C2918); --accent-ink: var(--theme-ink-d, #AEF38D);
  --mark-ink: var(--theme-ink-d, #AEF38D);
  --hl: var(--theme-weak-d, #AEF38D); --on-hl: var(--theme-ink-d, #1C2918);
  --scrim: rgba(0,0,0,.60); --shadow-float: 0 4px 16px rgba(0,0,0,.5); --shadow-control: 0 1px 4px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page-outside); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* a button reached with the Tab key stops clear of the title bar with the tabs on top and of the cart bar below (WCAG 2.4.11) */
html { scroll-padding: 100px 0 calc(96px + var(--safe-b)); }
html.is-locked { overflow: hidden; }
body {
  margin: 0 auto; max-width: 480px; min-height: 100vh; min-height: 100svh;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 22px; font-weight: 400;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
body.has-cart { padding-bottom: calc(96px + var(--safe-b)); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }
/* search hides the menu but keeps its layout, so closing search does not lay out every dish again */
@supports (content-visibility: hidden) { #menu[hidden] { display: block !important; content-visibility: hidden; } }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ic-16 { width: 16px; height: 16px; }
.ic-22 { width: 22px; height: 22px; }
.ic-24 { width: 24px; height: 24px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 8px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: var(--r-btn); background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.ph-set { background-color: var(--photo-bg-set); }
.ph-dish { background-color: var(--photo-bg-dish); }
.fade { opacity: 0; transition: opacity 150ms ease-out; }
.fade.is-loaded { opacity: 1; }
.fade.no-anim { transition: none; }
img.is-broken { visibility: hidden; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- cover + venue ---------- */
/* The first dish with its price and "+" must show at the bottom of the first screen, so the guest sees there is more below.
   From the logo down to the end of the first dish the page takes about 460px, so on a short screen (Instagram's in-app
   browser, iPhone SE) the cover gives way, down to 96px, where the logo still clears the language switch. */
.cover {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--photo-bg-set);
  max-height: max(96px, min(160px, 20vh, calc(100vh - 460px)));
  max-height: max(96px, min(160px, 20svh, calc(100svh - 460px)));
}
.cover > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-focus); }
.cover-actions { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; display: flex; gap: 8px; }
/* AZ · RU · EN: the current language is filled with the accent */
.lang-seg {
  position: relative; display: flex; height: 36px; padding: 3px; border-radius: var(--r-pill);
  background: var(--bg); box-shadow: var(--shadow-control);
}
.lang-seg button {
  position: relative; min-width: 34px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); text-align: center;
}
.lang-seg button::before { content: ''; position: absolute; top: -7px; bottom: -7px; left: 0; right: 0; }
.lang-seg button[aria-checked='true'] { background: var(--accent); color: var(--on-accent); }
.round::before { content: ''; position: absolute; inset: -4px; }
.round {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow-control);
}
.round.flat { background: var(--surface); box-shadow: none; }
/* logo, name, tagline and the hours line are centred under the cover; the logo sits half on the cover */
.venue { padding: 0 16px; text-align: center; }
.logo {
  position: relative; z-index: 1; width: 80px; height: 80px; margin: -40px auto 0; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 4px var(--bg); overflow: hidden; display: grid; place-items: center;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
.logo.is-initials { background: var(--theme-accent, #1C2918); color: var(--theme-on, #AEF38D); font-size: 28px; line-height: 34px; font-weight: 700; }
.cafe-name { margin-top: 8px; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }
.tagline { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.facts {
  display: block; width: 100%; min-height: 44px; margin-top: 2px; padding: 10px 0;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); text-align: center;
}
.facts .f { white-space: nowrap; }
.facts .st { color: var(--ink); font-weight: 600; }
.facts .ic { vertical-align: -3px; margin-left: 2px; }
.venue-end { height: 2px; }

/* ---------- offer row ---------- */
.offer { margin: 4px -16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.offer.in-cart { margin: 20px 0 0; }
.offer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 6px 16px;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink);
}
.offer-head b { color: var(--mark-ink); font-weight: 600; }
.offer-head .tail { color: var(--ink-2); }
.offer-head .ic { color: var(--ink-2); transition: transform 200ms ease-out; }
.offer.is-open .offer-head .ic { transform: rotate(180deg); }
.offer-head.is-done { justify-content: flex-start; gap: 8px; }
.offer-head.is-done .ic { color: var(--ink); }
.offer-body { padding: 0 16px 16px; }
.offer-body.is-entering { animation: offer-in 200ms ease-out; }
@keyframes offer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.offer-help { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.offer-form { display: flex; gap: 8px; margin-top: 12px; }
.tel {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 48px; border-radius: var(--r-input);
  background: var(--surface); border: 2px solid transparent;
}
.tel:focus-within { border-color: var(--ink); }
.tel-prefix { flex: none; padding: 0 10px 0 12px; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); border-right: 1px solid var(--line); }
.tel input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; outline: none;
  font: 400 16px/22px var(--font); color: var(--ink);
}
.tel input::placeholder, .input::placeholder, .search-field input::placeholder { color: var(--ink-2); opacity: 1; }
.btn-ink {
  flex: none; height: 48px; padding: 0 16px; border-radius: var(--r-btn); background: var(--ink); color: var(--bg);
  font-size: 15px; line-height: 20px; font-weight: 600;
}
.btn-ink:disabled { opacity: .6; cursor: default; }
.offer-err { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--danger); }
.offer-note { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ---------- title bar ---------- */
.titlebar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25; max-width: 480px; margin: 0 auto;
  height: calc(52px + var(--safe-t)); padding-top: var(--safe-t);
  background: var(--bg); border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden; transition: opacity 160ms ease-out, visibility 0s linear 160ms;
}
.titlebar.is-on { opacity: 1; visibility: visible; transition: opacity 160ms ease-out, visibility 0s; }
.tb-name {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: calc(100% - 248px);
  height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-name span { overflow: hidden; text-overflow: ellipsis; }
.lang-seg.tb-lang { position: absolute; right: 8px; bottom: 10px; height: 32px; padding: 2px; background: var(--surface); box-shadow: none; }

/* ---------- category bar ---------- */
.catbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: 48px; background: var(--bg); }
body.has-titlebar .catbar { top: calc(52px + var(--safe-t)); }
.catbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; }
.catbar.is-stuck::after { opacity: 1; }
.cb-search { flex: none; width: 44px; height: 48px; margin-left: 5px; display: grid; place-items: center; color: var(--ink); }
.cb-search .ic { width: 22px; height: 22px; }
.cb-div { flex: none; width: 1px; height: 20px; background: var(--line); }
.tabs {
  position: relative; flex: 1; min-width: 0; height: 48px; display: flex; overflow-x: auto; overflow-y: hidden;
  padding: 0 16px 0 6px; scroll-padding-inline: 6px 16px; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 20px), transparent 100%);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; height: 48px; padding: 0 12px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.tab::after { content: attr(data-label); height: 0; visibility: hidden; overflow: hidden; font-weight: 600; }
.tab[aria-current='true'] { color: var(--ink); font-weight: 600; }
.tab-ind {
  position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; border-radius: 2px; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 180ms ease-out; pointer-events: none;
}
.search { flex: 1; display: none; align-items: center; gap: 4px; padding-left: 16px; min-width: 0; }
.catbar.is-search .cb-search, .catbar.is-search .cb-div, .catbar.is-search .tabs { display: none; }
.catbar.is-search .search { display: flex; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field .ic { position: absolute; left: 12px; top: 10px; color: var(--ink-2); pointer-events: none; }
.search-field input {
  width: 100%; height: 40px; padding: 0 12px 0 40px; border-radius: var(--r-input); border: 2px solid transparent;
  background: var(--surface); color: var(--ink); font: 400 16px/22px var(--font); outline: none; -webkit-appearance: none; appearance: none;
}
.search-field input:focus { border-color: var(--ink); }
.search-field input::-webkit-search-decoration, .search-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
#search-results { min-height: calc(100vh - 100px); min-height: calc(100svh - 100px); }
.search-close { flex: none; height: 44px; padding: 0 16px 0 8px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }

/* ---------- popular ---------- */
.pop-title { padding: 24px 16px 12px; font-size: 20px; line-height: 26px; font-weight: 700; }
.pop { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 0 16px 4px; scrollbar-width: none; }
.pop::-webkit-scrollbar { display: none; }
.pc { position: relative; flex: none; width: 148px; scroll-snap-align: start; }
.pc-main { display: block; width: 100%; text-align: left; }
.pc-ph { display: block; width: 148px; height: 148px; border-radius: var(--r-img); overflow: hidden; }
.pc-ph img { width: 100%; height: 100%; object-fit: cover; }
.pc .r-price { margin-top: 4px; }
.pc-name { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.pc-meta { display: block; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.pc .ctl { top: 116px; right: -4px; }

/* ---------- sections + rows ---------- */
.section { scroll-margin-top: 100px; }
.sec-head { display: flex; align-items: baseline; gap: 6px; padding: 24px 16px 2px; }
#menu > .section:first-child .sec-head { padding-top: 12px; }
.sec-title { font-size: 20px; line-height: 26px; font-weight: 700; }
.sec-count { font-size: 15px; line-height: 20px; font-weight: 400; color: var(--ink-3); }
/* sideways rows (size chips, popular, cart extras) move only left and right: overflow-x alone would let them scroll up and down too */
.chips { display: flex; gap: 8px; padding: 6px 16px 2px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  position: relative; flex: none; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.chip::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
/* inside the row the bigger tap area stops at the row's edge, so the row has nothing to scroll up and down */
.chips .chip::before { bottom: -2px; }
.chip[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.row { position: relative; }
.row + .row::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--line); }
.row-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 12px; align-items: start;
  width: 100%; padding: 12px 16px; text-align: left;
}
.row.no-ph .row-main { grid-template-columns: minmax(0, 1fr); padding-right: 64px; }
button.row-main:active { background: var(--surface); }
.r-text { display: flex; flex-direction: column; min-width: 0; }
.r-name { font-size: 16px; line-height: 22px; font-weight: 600; }
/* "2×" before the name of a dish in the cart; the no-break space inside pads the marker's right side */
.inq:not(:empty) { margin-right: 4px; padding: 0 1px 0 5px; border-radius: 6px; background: var(--hl); color: var(--on-hl); font-weight: 600; }
.r-meta { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.r-new { color: var(--mark-ink); font-size: 13px; line-height: 18px; font-weight: 600; }
.r-desc { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.r-gift { margin-top: 4px; color: var(--mark-ink); font-size: 13px; line-height: 18px; font-weight: 500; }
.r-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; margin-top: 6px; font-size: 15px; line-height: 20px; font-weight: 600; }
.r-price .sale, .is-price .sale { color: var(--mark-ink); }
.old { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-3); text-decoration: line-through; }
.r-off { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.thumb { display: block; width: 96px; height: 96px; border-radius: var(--r-img); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.row.is-off .thumb img.is-loaded { opacity: .45; }
.ctl { position: absolute; right: 12px; top: 76px; z-index: 1; }
.row.no-ph .ctl { top: 12px; }

/* quick-add and in-place stepper */
.qa {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-control);
  transition: transform 100ms ease-out;
}
.qa::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.qa:active { transform: scale(.92); }
.qa.sm { width: 32px; height: 32px; }
.qa.sm::before { inset: -7px; }
.qa.is-new { animation: qa-in 160ms ease-out; }
@keyframes qa-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.stp {
  display: flex; align-items: center; width: 104px; height: 36px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-control); transform-origin: 100% 50%;
}
.stp.is-new { animation: stp-grow 160ms ease-out; }
.stp.is-new > * { animation: fade-in 160ms ease-out; }
@keyframes stp-grow { from { transform: scaleX(.3462); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.stp button, .stp36 button { position: relative; flex: none; width: 36px; height: 34px; display: grid; place-items: center; color: var(--ink); }
.stp button::before, .stp36 button::before { content: ''; position: absolute; top: -5px; bottom: -5px; left: -4px; right: -4px; }
.stp .q, .stp36 .q { flex: 1; text-align: center; font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
.foot { margin-top: 28px; padding: 24px 16px 32px; border-top: 1px solid var(--line); }
/* empty until the menu is drawn: it would sit on the first screen and jump away (layout shift) */
.foot:empty { display: none; }
.foot-name { font-size: 15px; line-height: 22px; font-weight: 600; }
.foot p { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-underline-offset: 3px; }
.foot .credit { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* ---------- search results ---------- */
.sr-count { padding: 16px 16px 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.sr-empty { padding: 28px 16px; }
.sr-empty p { font-size: 15px; line-height: 22px; }
.sr-empty a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sr-cats-h { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.sr-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ---------- cart bar ---------- */
.cartbar-wrap {
  position: fixed; left: 0; right: 0; bottom: calc(12px + var(--safe-b)); z-index: 30;
  max-width: 480px; margin: 0 auto; padding: 0 16px; pointer-events: none;
}
.cartbar {
  pointer-events: auto; width: 100%; height: 56px; padding: 0 16px; border-radius: var(--r-bar);
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-float);
  transform: translateY(calc(100% + 16px + var(--safe-b))); visibility: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 220ms;
}
.cartbar.is-on { transform: none; visibility: visible; transition: transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s; }
.cartbar:focus-visible { outline-offset: 3px; }
.cb-count {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--on-accent); color: var(--accent);
  font-size: 14px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cb-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cb-l1 { font-size: 16px; line-height: 20px; font-weight: 600; }
.cb-l2 { font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-total { flex: none; font-size: 16px; line-height: 20px; font-weight: 600; }

/* ---------- sheets ---------- */
.layer {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  visibility: hidden; transition: visibility 0s linear 200ms;
}
.layer.is-open { visibility: visible; transition-delay: 0s; }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 200ms ease-out; }
.layer.is-open .scrim { opacity: 1; }
.sheet {
  position: relative; width: 100%; max-width: 480px; max-height: 92vh; max-height: 92svh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-float);
  transform: translateY(100%); transition: transform 200ms cubic-bezier(.4,0,1,1);
  outline: none;
}
.layer.is-open .sheet { transform: none; transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
.sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.grab { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--handle); }
.sheet-tools { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; }

/* item sheet */
.is-photo { position: relative; display: block; width: 100%; max-height: 50vh; max-height: 50svh; overflow: hidden; }
.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.is-actions-off { margin: 0; }
.is-photo .handle {
  position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
  background: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.is-body { padding: 20px 16px 24px; }
.is-name { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; padding-right: 0; }
.is-meta { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.is-gift { margin-top: 10px; color: var(--mark-ink); font-size: 15px; line-height: 22px; font-weight: 500; }
.is-price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-size: 20px; line-height: 26px; font-weight: 700; }
.is-price .old { font-size: 15px; line-height: 22px; }
.comp-h { margin-top: 20px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.comp { margin-top: 2px; }
.comp li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; font-size: 15px; line-height: 22px; }
.comp li + li { border-top: 1px solid var(--line); }
.comp .c { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.comp-p { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--ink-2); }
.opts { margin-top: 8px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; line-height: 22px; }
.opt input { width: 20px; height: 20px; accent-color: var(--ink); }
.actions {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line);
}
.stp48 { flex: none; display: flex; align-items: center; height: 48px; border-radius: var(--r-pill); background: var(--surface); }
.stp48 button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.stp48 button:disabled { color: var(--ink-3); cursor: default; }
.stp48 .q { min-width: 28px; text-align: center; font-size: 16px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.primary {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 52px; padding: 0 18px; border-radius: var(--r-btn); background: var(--accent); color: var(--on-accent);
  font-size: 16px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.primary .p { flex: none; }
/* on a narrow phone the label takes two lines instead of pushing the price out of the button */
.primary > span:first-child { white-space: normal; text-wrap: balance; line-height: 18px; text-align: left; }
@media (max-width: 399px) { .primary { gap: 8px; padding: 0 14px; } }
/* a 320 px phone has no room for the price in the button; it is shown above it */
@media (max-width: 339px) { .primary .p { display: none; } }

/* cart sheet */
.cs-head { flex: none; position: relative; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 12px 0 16px; background: var(--bg); }
.cs-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; }
.cs-head.is-scrolled::after { opacity: 1; }
.cs-title { flex: 1; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.text-btn { min-height: 44px; padding: 0 10px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.text-btn.is-armed { color: var(--danger); }
.cl { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 14px 16px; }
.cl + .cl::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--line); }
.cl-ph { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; }
.cl-ph img { width: 100%; height: 100%; object-fit: cover; }
.cl-name { font-size: 15px; line-height: 20px; font-weight: 600; }
.cl-gift { margin-top: 4px; color: var(--mark-ink); font-size: 13px; line-height: 18px; font-weight: 500; }
.cl-opt { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cl-unit { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.cl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stp36 { display: flex; align-items: center; height: 36px; border-radius: var(--r-pill); background: var(--surface); }
.stp36 button { height: 36px; }
.stp36 .q { min-width: 24px; }
.cl-total { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.up-h { padding: 20px 16px 8px; font-size: 16px; line-height: 22px; font-weight: 600; }
.up { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 0 16px 4px; scroll-padding: 0 16px; scrollbar-width: none; }
.up::after { content: ''; flex: none; width: 4px; }
.up::-webkit-scrollbar { display: none; }
.uc { position: relative; flex: none; width: 120px; }
.uc-main { display: block; width: 100%; text-align: left; }
.uc-ph { display: block; width: 120px; height: 90px; border-radius: var(--r-img); overflow: hidden; }
.uc-ph img { width: 100%; height: 100%; object-fit: cover; }
.uc-name { margin-top: 8px; font-size: 13px; line-height: 18px; font-weight: 500; }
.uc-price { display: block; font-size: 13px; line-height: 18px; font-weight: 600; }
.uc .ctl { top: 54px; right: 4px; }
.fs { padding: 20px 16px 0; }
.fs-h { font-size: 16px; line-height: 22px; font-weight: 600; }
.field { margin-top: 12px; }
.flabel { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-2); }
.input {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-input);
  background: var(--surface); border: 2px solid transparent; color: var(--ink);
  font: 400 16px/22px var(--font); outline: none; -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--ink); }
textarea.input { min-height: 72px; max-height: 160px; resize: none; overflow-y: auto; }
.seg { display: flex; height: 44px; padding: 4px; border-radius: var(--r-btn); background: var(--surface); }
.seg button { position: relative; flex: 1; border-radius: 9px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink-2); text-align: center; }
.seg button::before { content: ''; position: absolute; top: -4px; bottom: -4px; left: 0; right: 0; }
.seg button[aria-checked='true'] { background: var(--raised); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-control); }
.sum { padding: 16px; margin-top: 8px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 15px; line-height: 22px; }
.sum-row dt { color: var(--ink-2); }
.sum-row dd { color: var(--ink); text-align: right; white-space: nowrap; }
.sum-row .disc { color: var(--mark-ink); }
.sum-total { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 18px; line-height: 24px; font-weight: 700; }
.sum-total dt { color: var(--ink); }
.sum-note { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.min-warn { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--danger); }
.cs-foot { flex: none; padding: 12px 16px calc(12px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); }
.send {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px; border-radius: var(--r-btn);
  background: var(--wa); color: var(--on-wa); text-decoration: none;
  font-size: 16px; line-height: 20px; font-weight: 600;
}
/* on a narrow phone the label takes two lines instead of ending in "…" */
.send .lbl { flex: 1; min-width: 0; line-height: 18px; }
.send .tot { flex: none; }
.send[aria-disabled='true'] { opacity: .4; cursor: not-allowed; }
.next { margin-top: 8px; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-2); }
/* the exact text that goes to WhatsApp */
.msg { margin: 16px 16px 0; border-radius: var(--r-input); background: var(--surface); }
.msg summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer; list-style: none; }
.msg summary::-webkit-details-marker { display: none; }
.msg summary .ic { color: var(--ink-2); transition: transform 200ms ease-out; }
.msg[open] summary .ic { transform: rotate(180deg); }
.msg-text { margin: 0; padding: 0 14px 14px; font: 400 14px/20px var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.next b { color: var(--ink); font-weight: 500; }
.empty { padding: 32px 16px 40px; text-align: center; }
.empty p { font-size: 15px; line-height: 22px; color: var(--ink-2); }
.empty button { min-height: 44px; margin-top: 4px; padding: 0 12px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }

/* info + fallback sheets */
.ih { position: relative; padding: 0 64px 8px 16px; }
.ih h2 { padding-top: 16px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.ih h2.sm { font-size: 18px; line-height: 24px; letter-spacing: 0; }
.ih .round { position: absolute; top: 12px; right: 12px; }
.info-body { padding-bottom: calc(16px + var(--safe-b)); }
.ir { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 16px; text-decoration: none; }
.ir + .ir::before { content: ''; position: absolute; top: 0; left: 56px; right: 16px; height: 1px; background: var(--line); }
.ir > .ic { width: 24px; height: 24px; color: var(--ink-2); }
.ir-text { flex: 1; min-width: 0; }
.ir-main { font-size: 15px; line-height: 22px; }
.ir-sub { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ir-sub a { text-underline-offset: 3px; }
/* links in the info rows are at least 24 px tall, a finger's minimum (WCAG 2.5.8) */
.ir-text a { display: inline-block; padding: 2px 0; }
.ir .ir-act { flex: none; position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; }
.hours { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.hours div { display: flex; justify-content: space-between; gap: 16px; }
.fb { padding-bottom: calc(16px + var(--safe-b)); }
.fbr {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 0 16px;
  font-size: 16px; line-height: 22px; font-weight: 500; text-decoration: none; text-align: left;
}
.fbr + .fbr::before { content: ''; position: absolute; top: 0; left: 56px; right: 16px; height: 1px; background: var(--line); }
.fbr .ic { width: 24px; height: 24px; color: var(--ink-2); }
.fb-hint { padding: 8px 16px 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }

/* the menu did not open: a note with WhatsApp slides in after 8 s; app.js removes it once the menu is drawn */
.boot-fail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; max-width: 480px; margin: 0 auto;
  padding: 20px 16px calc(16px + var(--safe-b)); text-align: center; background: var(--bg);
  border-top: 1px solid var(--line); box-shadow: var(--shadow-float); visibility: hidden; animation: boot-fail 0s 8s forwards;
}
@keyframes boot-fail { to { visibility: visible; } }
.boot-fail p { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.boot-fail p:first-child { color: var(--ink); font-weight: 500; }
.boot-fail .send { justify-content: center; margin-top: 14px; }
.boot-fail .send .lbl { flex: none; }
.boot-fail .text-btn { display: inline-flex; align-items: center; margin-top: 4px; }

/* toast */
.toast {
  position: fixed; left: 0; right: 0; bottom: calc(84px + var(--safe-b)); z-index: 90; width: max-content;
  max-width: min(340px, calc(100% - 32px)); margin: 0 auto; padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 14px; line-height: 20px; font-weight: 500; text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity 160ms ease-out, transform 160ms ease-out; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }

/* ---------- desktop: sheets become centred dialogs ---------- */
@media (min-width: 900px) {
  .layer { justify-content: center; }
  .sheet { width: 480px; max-height: 80vh; border-radius: var(--r-sheet); transform: translateY(16px); opacity: 0;
    transition: transform 200ms ease-in, opacity 200ms ease-in; }
  .layer.is-open .sheet { transform: none; opacity: 1; transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease-out; }
  .is-photo .handle, .grab { display: none; }
  .ih h2 { padding-top: 20px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .layer.is-open .sheet { transform: none !important; opacity: 0; transition: opacity 120ms linear !important; }
  .layer.is-open .sheet { opacity: 1; }
  .scrim { transition: opacity 120ms linear; }
  .layer { transition-delay: 120ms; }
  .cartbar { transform: none; opacity: 0; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .cartbar.is-on { opacity: 1; transition: opacity 120ms linear, visibility 0s; }
  .tab-ind, .offer-head .ic, .msg summary .ic { transition: none; }
  .stp.is-new, .stp.is-new > *, .qa.is-new, .offer-body.is-entering { animation: none; }
  .qa { transition: none; }
  .qa:active { transform: none; }
  .fade { transition: opacity 120ms linear; }
  .titlebar, .titlebar.is-on { transition-duration: 120ms; }
  .toast { transform: none; transition: opacity 120ms linear; }
}