/* Kosyk — one stylesheet, two themes. Tokens first; components after, in the order the screen is
   read: header, search, cards, dock, sheets, product, basket, account, printer. Light and dark share
   every rule; only tokens change. Dark follows the system unless the shopper picked a theme
   (data-theme on <html>). */

/* Onest — a typeface drawn for Cyrillic first (SIL Open Font License, public/fonts/OFL-Onest.txt).
   One variable file per script; a page loads only the scripts it shows. */
@font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/onest-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/onest-cyrillic-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/onest-latin-wght-normal.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-display: swap; font-weight: 100 900; src: url(/fonts/onest-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #f4f5f1;
  --surface: #ffffff;
  --surface-2: #eff0ec;
  --surface-3: #e3e5df;
  --line: rgba(0, 0, 0, .08);
  --line-strong: rgba(0, 0, 0, .16);
  --ink: #1d1d1f;
  --ink-2: #515154;
  --ink-3: #6e6e73; /* ≈ 5:1 on white; #86868b was 3.6:1 for the 12–13 px text it carries */
  --accent: #0b7d49;
  --accent-ink: #ffffff;
  --accent-text: #08693d;
  --accent-soft: rgba(11, 125, 73, .10);
  --promo: #cf2a3c;
  --promo-soft: rgba(207, 42, 60, .09);
  --leaf: #8a5600;
  --leaf-soft: rgba(176, 112, 0, .12);
  --warn: #a8460a;
  --warn-soft: rgba(196, 84, 12, .10);
  --invert: #1d1d1f;
  --invert-ink: #ffffff;
  --glass: rgba(255, 255, 255, .6);
  --glass-line: rgba(255, 255, 255, .7);
  --scrim: rgba(0, 0, 0, .32);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .16);
  --radius: 18px;
  --radius-sm: 12px;
  /* The big cards (home's hero, the basket's total): deep green, white on it. */
  --hero-a: #16613f;
  --hero-b: #0b3b26;
  --hero-line: rgba(255, 255, 255, .14);
  --font: 'Onest', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --dock-h: 64px;
  /* The notch and the home bar. Inside Telegram's full screen also its status bar and its own Close
     and menu buttons, which Telegram reports (Bot API 8.0); outside Telegram those are 0. */
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --glass-edge: rgba(0, 0, 0, .07);
  /* Liquid glass (the tab bar): nearly clear, a little blur, colour pulled up, light on the rim. */
  --lg-tint: rgba(255, 255, 255, .24);
  --lg-rim: rgba(255, 255, 255, .95);
  --lg-rim-far: rgba(255, 255, 255, .3);
  --lg-lens: rgba(255, 255, 255, .5);
  --lg-ink: #3a3a3c;
  --lg-shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .18);
    --ink: #f5f5f7;
    --ink-2: #aeaeb2;
    --ink-3: #8e8e93;
    --accent: #2fcf7a;
    --accent-ink: #00240f;
    --accent-text: #48dc8d;
    --accent-soft: rgba(47, 207, 122, .14);
    --promo: #ff6b7b;
    --promo-soft: rgba(255, 107, 123, .15);
    --leaf: #f5c35b;
    --leaf-soft: rgba(245, 195, 91, .14);
    --warn: #ffb35c;
    --warn-soft: rgba(255, 179, 92, .13);
    --invert: #f5f5f7;
    --invert-ink: #1d1d1f;
    --glass: rgba(38, 38, 42, .5);
    --glass-line: rgba(255, 255, 255, .12);
    --glass-edge: rgba(0, 0, 0, .5);
    --lg-tint: rgba(120, 120, 128, .14);
    --lg-rim: rgba(255, 255, 255, .55);
    --lg-rim-far: rgba(255, 255, 255, .1);
    --lg-lens: rgba(255, 255, 255, .13);
    --lg-ink: #d1d1d6;
    --lg-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .55);
    --shadow-sm: 0 0 0 0 transparent;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
    --hero-a: #13452f;
    --hero-b: #0a2419;
    --hero-line: rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --surface-3: #3a3a3c;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .18);
  --ink: #f5f5f7;
  --ink-2: #aeaeb2;
  --ink-3: #8e8e93;
  --accent: #2fcf7a;
  --accent-ink: #00240f;
  --accent-text: #48dc8d;
  --accent-soft: rgba(47, 207, 122, .14);
  --promo: #ff6b7b;
  --promo-soft: rgba(255, 107, 123, .15);
  --leaf: #f5c35b;
  --leaf-soft: rgba(245, 195, 91, .14);
  --warn: #ffb35c;
  --warn-soft: rgba(255, 179, 92, .13);
  --invert: #f5f5f7;
  --invert-ink: #1d1d1f;
  --glass: rgba(38, 38, 42, .5);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-edge: rgba(0, 0, 0, .5);
  --lg-tint: rgba(120, 120, 128, .14);
  --lg-rim: rgba(255, 255, 255, .55);
  --lg-rim-far: rgba(255, 255, 255, .1);
  --lg-lens: rgba(255, 255, 255, .13);
  --lg-ink: #d1d1d6;
  --lg-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .55);
  --shadow-sm: 0 0 0 0 transparent;
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
  --hero-a: #13452f;
  --hero-b: #0a2419;
  --hero-line: rgba(255, 255, 255, .1);
  color-scheme: dark;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-bottom: calc(var(--dock-h) + 32px + var(--safe-bottom));
  transition: background-color .3s ease;
}
body.has-basket { padding-bottom: calc(var(--dock-h) + 96px + var(--safe-bottom)); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .45; }
a { color: var(--accent-text); }
[hidden] { display: none !important; }
img { display: block; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.i {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.content { max-width: 680px; margin: 0 auto; padding: 4px 16px 0; }
.tab-panel { animation: panel-in .28s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }

.large-title { font-size: 30px; line-height: 1.12; font-weight: 750; letter-spacing: -.024em; margin: 10px 0 6px; }
.lead { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin: 0 0 16px; max-width: 46ch; }
.muted { color: var(--ink-3); font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.status { color: var(--ink-3); text-align: center; padding: 36px 12px; margin: 0; font-size: 14.5px; }
.title-row { display: flex; align-items: baseline; gap: 10px; }
.title-row .muted { margin: 0; }
.dot { color: var(--ink-3); margin: 0 6px; }
.link { border: 0; background: none; padding: 0; color: var(--accent-text); font-weight: 600; font-size: inherit; }
.link-danger { color: var(--promo); }
.tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; margin-left: 6px;
  background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; vertical-align: 1px;
}
.tag-leaf { background: var(--leaf-soft); color: var(--leaf); }

/* ---------- header ---------- */

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--safe-top)) max(16px, calc((100% - 680px) / 2 + 16px)) 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 .5px 0 var(--glass-edge);
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; pointer-events: none;
  background: linear-gradient(var(--glass), transparent);
  opacity: .7;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; user-select: none; transition: opacity .15s ease; }
.brand:active { opacity: .75; }
.logo-mark {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, #16a35f, #0a6f40); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.logo-mark .i { width: 22px; height: 22px; stroke-width: 2; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text b { font-size: 17px; letter-spacing: -.01em; line-height: 1.15; }
/* The wordmark: «кошик» with a basket for its «о»; the letters in the text colour, the basket in
   the brand green (public/brand/ has it as files). */
.wordmark { display: block; height: 22px; width: auto; margin: 1px 0 3px; }
.wordmark .wm-l { fill: var(--ink); }
.wordmark .wm-b path[fill-rule] { fill: var(--accent); }
.wordmark .wm-b path:not([fill-rule]) { stroke: var(--accent); }
.brand-text small { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 0; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 600; max-width: 46vw;
}
.pill .i { width: 17px; height: 17px; color: var(--accent-text); }
.pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); color: var(--ink-2);
  cursor: pointer; transition: transform .12s ease;
}
.avatar:active { transform: scale(.93); }
.avatar .i { width: 19px; height: 19px; }
.avatar.in { background: var(--accent); color: var(--accent-ink); box-shadow: none; font-weight: 700; font-size: 15px; }
.avatar.sign-in { width: auto; padding: 0 14px 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--ink); }
.avatar.sign-in .i { width: 17px; height: 17px; }
.avatar-lg { width: 52px; height: 52px; font-size: 21px; }

/* ---------- fields, buttons, chips ---------- */

.field {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.field:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.field .i { color: var(--ink-3); }
.field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; height: 100%; color: inherit; }
.field input::-webkit-search-cancel-button { display: none; }
.search-row { display: flex; align-items: center; gap: 8px; width: 100%; margin: 6px 0 12px; }
.search-row .searchbar { flex: 1; min-width: 0; margin: 0; height: 50px; border-radius: 16px; }
.search-back-arrow {
  width: 44px; height: 44px; border-radius: 15px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); display: grid; place-items: center; flex: none;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s ease;
}
.search-back-arrow:active { transform: scale(.93); }
.search-back-arrow .i { width: 20px; height: 20px; }
.search-clear-btn {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center;
  cursor: pointer; padding: 0; flex: none;
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.search-clear-btn:active { transform: scale(.9); background: var(--line-strong); color: var(--ink); }
.search-clear-btn .i { width: 14px; height: 14px; }
.searchbar { margin: 6px 0 12px; height: 50px; border-radius: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 13px; border: 0;
  font-size: 15px; font-weight: 650; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .1s ease, background-color .2s ease, opacity .2s;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-tint { background: var(--accent); color: var(--accent-ink); }
.btn-small { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn .i { width: 19px; height: 19px; stroke-width: 2; }
.btn-add { height: 36px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 14px; }
.btn-add .i { width: 17px; height: 17px; stroke-width: 2.2; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-2); text-decoration: none;
  transition: transform .1s ease;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn .i { width: 18px; height: 18px; }
.icon-btn-accent { background: var(--accent); color: var(--accent-ink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; flex: none;
  border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13.5px; font-weight: 550; color: var(--ink); white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.chip:active { transform: scale(.97); }
.chip .i { width: 16px; height: 16px; }
.chip small { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip .logo, .chip .logo-fb { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.chip.on, .chip-on { background: var(--invert); color: var(--invert-ink); box-shadow: none; }
.chip.on small, .chip-on small { color: inherit; opacity: .7; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.segmented {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-3);
}
.segmented button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.segmented button .i { width: 16px; height: 16px; }
.segmented button small { color: var(--ink-3); font-weight: 500; }
.segmented button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
:root[data-theme="dark"] .segmented button.on { background: var(--surface-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segmented button.on { background: #636366; } }
:root[data-theme="dark"] .segmented button.on { background: #636366; }
.segmented-wide { display: flex; margin: 4px 0 6px; }

.switch {
  appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 999px; flex: none; margin: 0;
  background: var(--surface-3); position: relative; cursor: pointer; transition: background-color .2s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .25s var(--ease-sheet);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .4; }

/* ---------- notes and callouts ---------- */

.note {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; line-height: 1.45;
}
.note .i { width: 17px; height: 17px; margin-top: 1px; }
.note-warn { background: var(--warn-soft); color: var(--warn); }
.note-leaf { background: var(--leaf-soft); color: var(--ink-2); }
.note-leaf .i { color: var(--leaf); }
.note-soon { background: var(--warn-soft); color: var(--ink-2); margin-top: 10px; }
.note-soon .i { color: var(--warn); }
.note-save { background: var(--accent-soft); color: var(--accent-text); }

.callout {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
  margin: 14px 0 0; padding: 14px; border-radius: 16px; background: var(--surface-2);
}
.callout > .i { width: 22px; height: 22px; margin-top: 1px; }
.callout b { font-size: 15px; letter-spacing: -.005em; }
.callout p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.callout .btn { grid-column: 2; justify-self: start; margin-top: 8px; }
.callout-value { background: var(--accent-soft); }
.callout-value > .i, .callout-value b { color: var(--accent-text); }
.callout-leaf { background: var(--leaf-soft); }
.callout-leaf > .i { color: var(--leaf); }
.callout-deal { background: var(--promo-soft); }
.callout-deal > .i, .callout-deal b { color: var(--promo); }
.callout-tg > .i { color: #2aabee; }

/* ---------- search: sort, filters, results ---------- */

.filter-bar {
  display: flex; gap: 8px; align-items: center; margin: 0 -16px 10px; padding: 0 16px 2px;
  overflow-x: auto; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.sort { display: flex; gap: 8px; }
.chip-filter { padding-left: 11px; }
.chip-filter.on { background: var(--invert); color: var(--invert-ink); box-shadow: none; }
.count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700;
}
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.active-filters .chip { height: 30px; font-size: 13px; padding: 0 8px 0 12px; }
.active-filters .chip .i { width: 14px; height: 14px; opacity: .7; }
.result-count { color: var(--ink-3); font-size: 13px; margin: 0 0 8px 2px; }

/* ---------- product card ---------- */

.card {
  background: var(--surface); border-radius: var(--radius); padding: 14px; margin: 0 0 10px;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.card-hot { box-shadow: var(--shadow-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
.card-gone { opacity: .78; }
.card-top { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; cursor: pointer; position: relative; }
.thumb {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.thumb .photo { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
/* A picture in a fixed box is laid over the box: as a grid item its height: 100% resolved to the
   picture's own height, so a tall bottle in a short box was cut top and bottom. */
.thumb, .mini-thumb, .p-hero, .b-thumb { position: relative; }
.thumb .photo, .mini-thumb .photo, .p-hero .photo, .b-thumb .photo { position: absolute; inset: 0; }
.ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.ph .i { width: 28px; height: 28px; stroke-width: 1.5; }
.card-head { min-width: 0; padding-top: 1px; }
.card-title { font-size: 15.5px; line-height: 1.3; font-weight: 620; letter-spacing: -.008em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin: 4px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.card-meta .link { color: var(--ink-2); font-weight: 550; }
.unit { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.unit-on { color: var(--accent-text); }
.fav-btn {
  width: 36px; height: 36px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: none; color: var(--ink-3);
  display: grid; place-items: center; transition: transform .15s ease, color .15s ease;
}
.fav-btn:active { transform: scale(.88); }
.fav-btn.on { color: var(--promo); }
.fav-btn .i { width: 22px; height: 22px; }
.pick { position: absolute; left: -4px; top: -4px; width: 20px; height: 20px; accent-color: var(--accent); }

.deal {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; height: 24px; padding: 0 9px 0 7px; border-radius: 7px;
  font-size: 12.5px; font-weight: 650;
}
.deal .i { width: 15px; height: 15px; stroke-width: 2; }
.deal-record { background: var(--warn-soft); color: var(--warn); }
.deal-great { background: var(--promo-soft); color: var(--promo); }

.offers { list-style: none; margin: 12px 0 0; padding: 0; }
.offer {
  display: grid; grid-template-columns: 22px 1fr auto 46px; gap: 10px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line); position: relative;
}
.offer:first-child { border-top: 0; padding-top: 2px; }
.offers.collapsed .offer:nth-child(n + 4) { display: none; }
.logo, .logo-fb {
  width: 22px; height: 22px; border-radius: 6px; flex: none; object-fit: contain; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.logo-fb { display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 700; font-size: 11.5px; }
.o-name { min-width: 0; font-size: 14px; font-weight: 550; display: flex; flex-direction: column; }
.o-name small { color: var(--ink-3); font-size: 12px; font-weight: 450; margin-top: 1px; }
.o-name small .tag { margin-left: 0; }
.app-deal {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 2px 7px 2px 5px; border-radius: 6px; align-self: flex-start;
  background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.app-deal .i { width: 13px; height: 13px; stroke-width: 2; }
.note-app { background: var(--accent-soft); color: var(--ink-2); }
.note-app .i { color: var(--accent-text); }
.o-price { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; line-height: 1.2; }
.o-price b { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.o-price b small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.o-price s { color: var(--ink-3); font-size: 12px; }
.offer.best .o-name { font-weight: 650; }
.offer.best .o-price b { color: var(--accent-text); font-size: 16.5px; }
.o-badge {
  justify-self: end; min-width: 42px; height: 22px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center;
  background: var(--promo-soft); color: var(--promo); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.o-badge-empty { background: none; }
.split-x { position: absolute; right: -6px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--promo); color: #fff; display: grid; place-items: center; }
.split-x .i { width: 12px; height: 12px; stroke-width: 2.4; }
.more-btn {
  display: flex; align-items: center; gap: 4px; margin: 2px 0 0; padding: 4px 0; border: 0; background: none;
  color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.more-btn .i { width: 15px; height: 15px; }
.stat-line { margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; }
.stat-line b { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.value-hint {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center;
  margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft);
}
.value-hint > .i { color: var(--accent-text); width: 22px; height: 22px; }
.vh-text { min-width: 0; display: flex; flex-direction: column; }
.vh-text b { font-size: 13.5px; color: var(--accent-text); font-weight: 650; }
.vh-text small { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vh-save { font-weight: 750; color: var(--accent-text); font-variant-numeric: tabular-nums; font-size: 14.5px; white-space: nowrap; }
.value-hint .btn { grid-column: 2 / -1; justify-self: end; margin-top: 6px; }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.card-note { color: var(--ink-3); font-size: 12.5px; min-width: 0; }
.stepper {
  display: inline-flex; align-items: center; height: 36px; border-radius: 999px; background: var(--surface-2); flex: none;
}
.stepper button { width: 38px; height: 36px; border: 0; background: none; display: grid; place-items: center; color: var(--ink); }
.stepper button .i { width: 17px; height: 17px; stroke-width: 2.2; }
.stepper span { min-width: 22px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper-wide { width: 100%; height: 50px; justify-content: space-between; border-radius: 14px; }
.stepper-wide button { width: 56px; height: 50px; }

/* skeleton while searching */
.skeleton .card { pointer-events: none; }
.sk-row { display: flex; gap: 12px; margin-bottom: 14px; }
.sk-row span { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sk-thumb, .sk-line { display: block; background: var(--surface-2); border-radius: 8px; animation: shimmer 1.4s ease-in-out infinite; }
.sk-thumb { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.sk-line { height: 12px; margin-top: 8px; }
.sk-line.short { width: 55%; }
@keyframes shimmer { 50% { opacity: .5; } }

/* ---------- start screen ---------- */

.hello { padding: 4px 0 16px; }

/* Popular search bar right under the search input: single row horizontal scroll */
.home-popular-bar {
  margin: -2px 0 16px;
}
.chips-hscroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding: 4px 16px 8px;
  margin: 0 -16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips-hscroll::-webkit-scrollbar {
  display: none;
}
.popular-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 34px;
  border-radius: 999px;
  background: var(--promo-soft);
  color: var(--promo);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.popular-tag .i {
  width: 14px;
  height: 14px;
}
.chip-popular {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex: none;
}
.chip-popular .i {
  width: 13px;
  height: 13px;
  color: var(--ink-3);
}

/* Horizontal scroll container wrapper with right-side scroll indicator and cue button */
.hscroll-wrap {
  position: relative;
  width: 100%;
}
.hscroll-cue {
  position: absolute;
  top: calc(50% - var(--cue-lift, 0px));
  right: 2px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
}
.hscroll-cue .i {
  width: 18px;
  height: 18px;
  color: var(--ink);
}
@keyframes cueBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.hscroll-wrap.can-scroll .hscroll-cue {
  opacity: 0.95;
  pointer-events: auto;
}
.hscroll-wrap.can-scroll .hscroll-cue:hover {
  opacity: 1;
  background: var(--surface-2);
  transform: translateY(-50%) scale(1.08);
}
.hscroll-wrap.can-scroll .hscroll-cue:active {
  transform: translateY(-50%) scale(0.92);
}
.hscroll-wrap.at-end .hscroll-cue {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* The row itself fades out at its edges — a mask on the scroller, not a band of page colour laid
   over it: rows of cards run under the screen's edges (margin 0 -16px), and a band drawn on the
   narrower wrapper sat in the middle of a card as a dark stripe. The right fade is wider, so the
   arrow sits on the faded part, never on a chip's text; the left one only once the row has been
   scrolled. On a phone the row is swiped and the fade says there is more, so no arrow there. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hscroll-wrap > :is(.chips-hscroll, .deals-hscroll, .hscroll, .cat-bar) {
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  transition: --fade-l 0.25s ease, --fade-r 0.25s ease;
}
.hscroll-wrap.can-scroll:not(.at-start) > :is(.chips-hscroll, .deals-hscroll, .hscroll, .cat-bar) { --fade-l: 28px; }
.hscroll-wrap.can-scroll:not(.at-end) > :is(.chips-hscroll, .deals-hscroll, .hscroll, .cat-bar) { --fade-r: 56px; }
@media (pointer: fine) {
  .hscroll-wrap.can-scroll:not(.at-end) > :is(.chips-hscroll, .deals-hscroll, .hscroll, .cat-bar) { --fade-r: 72px; }
}
.cat-bar-wrap { --cue-lift: 4px; } /* the bar's padding is 4 px above, 12 below */
@media (pointer: coarse) { .hscroll-cue { display: none; } }

.greet { font-size: 26px; line-height: 1.15; font-weight: 750; letter-spacing: -.022em; margin: 4px 0 4px; }
.greet-sub { color: var(--ink-3); font-size: 14.5px; margin: 0 0 16px; }

/* Signing in offer card */
.login-card {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin: 0 0 20px; padding: 16px;
  border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, #2aabee 18%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.login-card-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #2aabee; color: #fff; flex: none; }
.login-card-icon .i { width: 22px; height: 22px; }
.login-card b { font-size: 16px; display: block; color: var(--ink); }
.login-card p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.login-card .btn {
  grid-column: 1 / -1; height: 44px; border-radius: 14px; background: #2aabee; color: #fff;
  font-size: 14.5px; font-weight: 650; cursor: pointer; transition: transform .12s ease, opacity .15s ease;
}
.login-card .btn:active { transform: scale(.98); opacity: .9; }

/* Featured Deals Carousel replacing repetitive tiles */
.home-deals-block { margin: 0 0 22px; }
.home-deals-block .block-head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.home-deals-block .block-head h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 750; letter-spacing: -.015em; margin: 0; }
.home-deals-block .block-head h2 .i { color: var(--promo); width: 20px; height: 20px; }
.home-deals-block .block-head .link { font-size: 14px; font-weight: 600; color: var(--accent-text); }

.deals-hscroll {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 12px; margin: 0 -16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.deals-hscroll::-webkit-scrollbar { display: none; }

.deal-card {
  flex: none; width: 168px; background: var(--surface); border-radius: 18px;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); padding: 10px;
  display: flex; flex-direction: column; position: relative; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease; user-select: none;
}
.deal-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--line-strong); }
.deal-card:active { transform: scale(.98); }

.deal-badge-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; min-height: 24px; }
.deal-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 8px; background: var(--promo); color: #fff; font-size: 12px; font-weight: 800; }
.deal-badge-hit { background: linear-gradient(135deg, #f5a524, #eb4b37); }
.deal-store-logo .logo, .deal-store-logo .logo-fb { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }

.deal-thumb { width: 100%; height: 108px; background: #ffffff; border-radius: 12px; display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; }
:root[data-theme="dark"] .deal-thumb { background: rgba(255, 255, 255, 0.06); }
.deal-photo { max-width: 90%; max-height: 90%; object-fit: contain; }
.deal-thumb .ph { color: var(--ink-3); font-size: 28px; }

.deal-info { flex: 1; display: flex; flex-direction: column; margin-bottom: 8px; min-width: 0; }
.deal-store-name { font-size: 11.5px; color: var(--ink-3); font-weight: 550; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-title { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.deal-size { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.deal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.deal-prices { display: flex; flex-direction: column; }
.deal-price-cur { font-size: 15px; font-weight: 800; color: var(--promo); font-variant-numeric: tabular-nums; line-height: 1.1; }
.deal-price-old { font-size: 11.5px; color: var(--ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }

.deal-add-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 0; background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, background-color .15s ease, color .15s ease; flex: none;
}
.deal-add-btn:hover { background: var(--accent); color: #fff; transform: scale(1.08); }
.deal-add-btn:active { transform: scale(.92); }
.deal-add-btn .i { width: 17px; height: 17px; }

.deal-sk { pointer-events: none; }
.deal-sk .sk-thumb { width: 100%; height: 108px; border-radius: 12px; }
.deal-sk .sk-line { height: 12px; margin-top: 8px; }

/* Backward compatibility for tiles if referenced */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 20px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border: 0;
  border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); color: var(--ink);
  font-size: 12.5px; font-weight: 600; text-align: center;
}
.tile:active { transform: scale(.96); }
.tile-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; }
.tile-icon .i { width: 21px; height: 21px; }
.tile-promos .tile-icon { background: var(--promo-soft); color: var(--promo); }
.tile-leaflets .tile-icon { background: color-mix(in srgb, #f5a524 20%, transparent); color: #c77d0a; }
.tile-favorites .tile-icon { background: color-mix(in srgb, #ff5a7a 18%, transparent); color: #e5385a; }
.tile-cards .tile-icon { background: var(--accent-soft); color: var(--accent-text); }
.tile-count { position: absolute; top: 6px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--promo); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.hello .chips-wrap { margin: 2px 0 16px; }
.banner {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: var(--radius); text-align: left;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); margin: 0 0 20px;
}
.banner > .i { color: var(--ink-3); }
.banner-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--promo-soft); color: var(--promo); flex: none; }
.banner-text { flex: 1; display: flex; flex-direction: column; }
.banner-text b { font-size: 15.5px; }
.banner-text small { color: var(--ink-3); font-size: 13px; }
.banner-static {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--accent-soft); color: var(--ink); font-size: 14px; box-shadow: none;
}
.banner-static .i { color: var(--accent-text); margin-top: 1px; }
.install {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 14px; margin: 0 0 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.install-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.install b { display: block; font-size: 15px; }
.install small { display: block; color: var(--ink-3); font-size: 13px; margin: 2px 0 8px; }
.install-ios { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.install-ios .i { width: 16px; height: 16px; color: var(--accent-text); }
.block { margin: 0 0 20px; }
.block h2 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 10px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; }
.block-head .link { font-size: 14px; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.mini {
  flex: none; width: 128px; padding: 10px; border: 0; border-radius: 16px; text-align: left; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.mini-thumb { width: 100%; height: 72px; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.mini-thumb .photo { width: 100%; height: 100%; object-fit: contain; }
.mini-title { font-size: 12.5px; line-height: 1.3; font-weight: 550; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-price { font-size: 13px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.how { list-style: none; counter-reset: how; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.how li {
  counter-increment: how; display: grid; grid-template-columns: 32px 1fr; gap: 2px 12px; padding: 14px;
  border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.how li::before {
  content: counter(how); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2); font-weight: 700; font-size: 14px;
}
.how b { font-size: 15px; }
.how span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }

/* ---------- promos, leaflets, favourites, empty states ---------- */

.leaflets { display: grid; gap: 8px; margin: 12px 0; }
.leaflet {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px;
  background: var(--leaf-soft);
}
.leaflet .logo, .leaflet .logo-fb { width: 30px; height: 30px; border-radius: 8px; }
.leaflet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.leaflet-text b { font-size: 14.5px; }
.leaflet-text small { color: var(--ink-2); font-size: 12.5px; }
.leaflet .btn { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.leaflet .icon-btn { background: var(--surface); }

.sheet-lead { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; line-height: 1.45; }
.lf-list { list-style: none; margin: 12px 0 0; padding: 0; }
.lf-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.lf-row:first-child { border-top: 0; }
.lf-main { display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 0; text-align: left; min-width: 0; }
.lf-main .ph { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.lf-main .ph .i { width: 20px; height: 20px; }
.lf-text { min-width: 0; display: flex; flex-direction: column; }
.lf-text b { font-size: 14px; font-weight: 560; line-height: 1.3; }
.lf-text small { color: var(--ink-3); font-size: 12px; }
.lf-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lf-price small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

.empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); margin-bottom: 8px; }
.empty-icon .i { width: 30px; height: 30px; stroke-width: 1.5; }
.empty b { font-size: 17px; }
.empty p { color: var(--ink-2); font-size: 14px; max-width: 34ch; margin: 0 0 12px; line-height: 1.45; }

/* ---------- shops in Deals: the list, a shop's page, the leaflet viewer ---------- */

.logo-lg { width: 34px !important; height: 34px !important; border-radius: 10px !important; font-size: 15px; }
.chain-list { list-style: none; margin: 8px 0 0; padding: 0 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.chain-list li + li { border-top: 1px solid var(--line); }
.chain-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: none; text-align: left; }
.chain-row .o-name { flex: 1; }
.chain-row .o-name b { font-size: 15.5px; }
.chain-row > .i { color: var(--ink-3); width: 18px; height: 18px; }
.chain-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.chain-head .o-name b { font-size: 20px; letter-spacing: -.015em; }
.segmented-scroll { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; max-width: 100%; }
/* The four deal views fit a phone's width: «Магазини» was cut off at the edge. */
#promoViews button { padding: 0 6px; font-size: 13px; letter-spacing: -.01em; min-width: 0; }
/* «Where are you?» on a first visit */
.place-card {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; margin: 0 0 14px; padding: 14px 16px;
  border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.place-card-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.place-card b { font-size: 15px; display: block; }
.place-card p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.place-card-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.place-card-actions .btn { height: 42px; border-radius: 12px; }
.segmented-scroll::-webkit-scrollbar { display: none; }
.segmented-scroll button { flex: none; }
.leaflet-big { margin: 0 0 12px; padding: 14px; }
.leaflet-cover { width: 44px; height: 56px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: var(--leaf); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); flex: none; }
.leaflet-cover .i { width: 24px; height: 24px; }
.chain-filter { margin: 0 0 12px; height: 44px; }
.sheet-viewer { display: flex; flex-direction: column; height: 94vh; height: 94dvh; padding-bottom: 0; overflow: hidden; }
.viewer-stage { flex: 1; overflow: auto; border-radius: 14px; background: var(--surface-2); touch-action: pan-x pan-y pinch-zoom; }
.viewer-stage canvas { display: block; margin: 0 auto; background: #fff; }
.viewer-poster { display: block; flex: none; max-width: none; height: auto; margin: auto; background: #fff; }
.viewer-stage:has(.viewer-poster) { display: flex; }
.viewer-stage.is-turning .viewer-poster { opacity: .55; transition: opacity .2s; }
.viewer-stage .status { padding-top: 30vh; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 calc(12px + var(--safe-bottom)); }
.viewer-page { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
#viewerZoom[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* ---------- loyalty cards ---------- */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.loyal {
  --tile: #3b3f4a;
  aspect-ratio: 1.586; border: 0; border-radius: 16px; padding: 14px; text-align: left; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tile) 82%, #fff), var(--tile) 60%, color-mix(in srgb, var(--tile) 80%, #000));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tile) 35%, transparent);
  transition: transform .15s ease;
}
.loyal:active { transform: scale(.97); }
.loyal-head { display: flex; align-items: center; gap: 8px; }
.loyal-head b { font-size: 15px; }
.loyal-head .logo, .loyal-head .logo-fb { width: 24px; height: 24px; border-radius: 7px; }
.loyal-number { font: 500 14px var(--mono); letter-spacing: .1em; opacity: .9; }

/* Suggestions under the search field: words, other spellings, last searches */
.suggest { margin: -4px 0 12px; padding: 6px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }
.sg { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; border-radius: 12px; background: none; text-align: left; font-size: 15px; }
.sg .i { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.sg span { flex: 1; min-width: 0; }
.sg small { color: var(--ink-3); font-size: 13px; }
.sg.on, .sg:hover { background: var(--surface-2); }
.note-info { background: var(--accent-soft); color: var(--ink); }
.note-info .i { color: var(--accent-text); }

/* What each chain found, and the next page */
.found { margin: 18px 0 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.found p { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.found b { color: var(--ink); font-variant-numeric: tabular-nums; }
.found .found-all { margin: 0; color: var(--ink-3); }

/* ---------- dock: basket bar and tab bar ---------- */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px calc(10px + var(--safe-bottom));
  /* Only a light veil under the bar, so the page stays visible through the glass. */
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 80%, transparent), transparent calc(var(--safe-bottom) + 30px));
}
.dock > * { pointer-events: auto; width: min(100%, 460px); }
/* Liquid glass. There is no web API for Apple's material — it is native-only — so it is drawn: the
   bar is nearly clear with a light blur and the colour behind it pulled up; a thin rim catches light
   where it would strike a thick pane (top left) and again on the far edge; an inner glow gives the
   pane depth. The chosen tab is a lens of brighter glass that slides between tabs with a little
   squash, the way iOS 26 does it. Where the browser can bend the backdrop (Chromium: Android's
   Telegram, desktop), public/glass.js adds refraction at the rim; WebKit (iPhone) cannot, and keeps
   this. */
.tabbar {
  --lg-blur: 7px;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(5, 1fr); height: var(--dock-h); padding: 6px; border-radius: 999px;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(210%) brightness(1.06);
  backdrop-filter: blur(var(--lg-blur)) saturate(210%) brightness(1.06);
  box-shadow: var(--lg-shadow), inset 0 1px 1.5px rgba(255, 255, 255, .22), inset 0 -8px 18px -10px rgba(255, 255, 255, .14);
}
.tabbar.refracts {
  -webkit-backdrop-filter: var(--lg-refract) blur(var(--lg-blur)) saturate(210%) brightness(1.06);
  backdrop-filter: var(--lg-refract) blur(var(--lg-blur)) saturate(210%) brightness(1.06);
}
/* The rim: a one-pixel ring, bright where the light hits, faint across the middle. */
.tabbar::before, .tab-lens::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--lg-rim), var(--lg-rim-far) 28%, transparent 48%, transparent 62%, var(--lg-rim-far) 80%, var(--lg-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* A soft sheen across the top half, as on a curved surface. */
.tabbar::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, .16), transparent 62%);
}
.tab-lens {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 999px;
  background: var(--lg-lens);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), inset 0 -2px 6px rgba(255, 255, 255, .06), 0 4px 14px rgba(0, 0, 0, .22);
  transform: translateX(calc(var(--tab, 0) * 100%));
  transition: transform .55s cubic-bezier(.34, 1.36, .5, 1);
  pointer-events: none;
}
.tab-lens.moving { animation: lens-squash .5s ease; }
@keyframes lens-squash {
  35% { scale: 1.16 .86; }
  70% { scale: .97 1.04; }
}
.tabbar button {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 999px; background: none; color: var(--lg-ink); font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  min-width: 0; transition: color .25s ease;
}
.tabbar button .i { width: 23px; height: 23px; transition: transform .25s cubic-bezier(.34, 1.36, .5, 1); }
.tabbar button:active .i { transform: scale(1.14); }
.tabbar button.on { color: var(--accent-text); }
.badge {
  position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--promo); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
.basketbar { animation: rise .35s var(--ease-sheet) both; }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
#openBasket {
  width: 100%; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px; border: 0; border-radius: 20px;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 35%, transparent);
  text-align: left;
}
#openBasket:active { transform: scale(.985); }
.bb-icon { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); }
:root[data-theme="dark"] .bb-icon { background: rgba(0, 0, 0, .14); }
.bb-icon b {
  position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--accent-ink); color: var(--accent); font-size: 11px; display: grid; place-items: center;
}
.bb-icon b.bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.35); } }
.bb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.bb-text b { font-size: 15px; }
.bb-text small { font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-total { font-weight: 750; font-size: 16px; font-variant-numeric: tabular-nums; }

.adminbar {
  position: fixed; left: 50%; top: calc(64px + var(--safe-top)); translate: -50% 0; z-index: 26;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600;
}

/* ---------- sheets ---------- */

body.sheet-open {
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

.backdrop {
  position: fixed; inset: 0; z-index: 30; background: var(--scrim); opacity: 0; transition: opacity .3s ease;
  touch-action: none;
}
.backdrop.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; margin: 0 auto; max-width: 640px; max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(18px + var(--safe-bottom));
  background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-lg);
  transform: translateY(100%); transition: transform .44s var(--ease-sheet);
  touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
:root[data-theme="dark"] .sheet { background: #1c1c1e; }
.sheet.open { transform: none; }
.sheet.dragging { transition: none; }
.sheet-tall { max-height: 94vh; max-height: 94dvh; }
.sheet-grip { width: 38px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 8px auto 0; }
.sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 12px; margin-bottom: 4px; background: inherit; touch-action: none;
}
.sheet-head h2 { font-size: 21px; font-weight: 750; letter-spacing: -.018em; }
.sheet-head-float { background: transparent; margin-bottom: -58px; pointer-events: none; }
.sheet-head-float .icon-btn { pointer-events: auto; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sheet-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; position: sticky; bottom: 0; padding: 14px 0 0; background: inherit; margin-top: 18px; }

.group-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 20px 4px 8px; }
.group { background: var(--surface-2); border-radius: 16px; padding: 2px 14px; }
:root[data-theme="dark"] .group { background: #2c2c2e; }
.place-row { display: flex; gap: 8px; margin-bottom: 8px; }
.place-city {
  flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; padding: 8px 14px; border: 0; border-radius: 14px;
  background: var(--surface-2);
}
.place-city small { grid-column: 1; color: var(--ink-3); font-size: 12px; }
.place-city b { grid-column: 1; font-size: 16px; }
.place-city .i { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); }
.place-row .btn { height: auto; }
.city-picker { margin: 0 0 8px; }
.city-picker .field { background: var(--surface-2); box-shadow: none; }
.city-list { max-height: 42vh; overflow-y: auto; margin-top: 6px; }
.city-list button {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 6px; border: 0; border-bottom: 1px solid var(--line);
  background: none; text-align: left; font-size: 15px;
}
.city-list button small { color: var(--ink-3); font-size: 12.5px; }
.city-list button.on { color: var(--accent-text); font-weight: 650; }
.s-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.s-row:first-child { border-top: 0; }
.s-row.off .s-text, .s-row.off .logo, .s-row.off .logo-fb { opacity: .5; }
.s-toggle { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 0; min-width: 0; cursor: pointer; }
.s-toggle .logo, .s-toggle .logo-fb { width: 28px; height: 28px; border-radius: 8px; }
.s-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.s-text b { font-size: 15px; font-weight: 600; }
.s-text small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-change { border: 0; background: none; color: var(--accent-text); font-size: 13.5px; font-weight: 600; padding: 6px 0 6px 6px; }
.s-options { display: grid; gap: 4px; padding: 0 0 10px 40px; }
.s-options button { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--surface); text-align: left; font-size: 13.5px; }
.s-options button small { color: var(--ink-3); white-space: nowrap; }
.s-options button.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.row-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; cursor: pointer; }
.row-switch span { display: flex; flex-direction: column; }
.row-switch small { color: var(--ink-3); font-size: 12.5px; }

/* ---------- a chain's leaflets, like in its own app ---------- */
.chain-papers { margin-top: 4px; margin-bottom: 14px; }
.cpaper {
  flex: none; width: 116px; display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none;
}
.cpaper-cover {
  width: 116px; height: 150px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); position: relative;
}
.cpaper-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cpaper b { font-size: 13px; line-height: 1.25; margin-top: 4px; }
.cpaper small { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cpaper-soon { align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 11.5px; font-weight: 650; }
.announce { margin: 0 0 16px; }
.announce h3 { font-size: 17px; margin: 4px 0 10px; }

/* ---------- product page ---------- */
/* Pushed over the list it was opened from, the way iOS does it: in from the right, and back by the
   ‹ button, a swipe from the left edge, or the browser's / Android's / Telegram's Back. The list
   underneath keeps its place. */

.page {
  position: fixed; inset: 0; z-index: 28; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0 max(16px, calc((100% - 680px) / 2 + 16px)) calc(28px + var(--safe-bottom));
  background: var(--bg); box-shadow: -10px 0 30px rgba(0, 0, 0, .16);
  transform: translateX(100%); transition: transform .42s var(--ease-sheet);
}
.page.open { transform: none; }
.page.dragging { transition: none; }
.page-shade { position: fixed; inset: 0; z-index: 27; background: rgba(0, 0, 0, .22); opacity: 0; transition: opacity .42s ease; pointer-events: none; }
.page-shade.open { opacity: 1; }
.page-shade.dragging { transition: none; }
.page-bar {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  margin: 0 -8px 4px; padding: calc(8px + var(--safe-top)) 8px 8px;
  transition: background-color .2s ease;
}
/* Clear while the photo is under it (a tinted band over a white photo looked like a stain); a bar
   once the photo has scrolled away. */
.page.scrolled .page-bar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.p-code {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 5px 10px; border: 0; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.p-code .i { width: 15px; height: 15px; }
.page-bar .icon-btn { flex: none; background: var(--glass); }
.product-nav-strip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--surface-2); padding: 3px 6px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); flex: none;
}
.product-nav-btn {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  background: transparent !important; color: var(--ink-2); display: grid; place-items: center;
  cursor: pointer; padding: 0 !important; border: 0 !important;
  transition: transform .12s ease, opacity .15s ease, background-color .15s ease;
}
.product-nav-btn:hover:not(:disabled) { background: var(--surface) !important; color: var(--ink); }
.product-nav-btn:active:not(:disabled) { transform: scale(.9); }
.product-nav-btn:disabled, .product-nav-btn.disabled { opacity: .25; cursor: default; pointer-events: none; }
.product-nav-btn .i { width: 14px; height: 14px; }
.product-page-num {
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--ink-2); padding: 0 4px; min-width: 38px; text-align: center;
}
.product-side-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 35;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); box-shadow: var(--shadow-md); display: grid; place-items: center;
  cursor: pointer; transition: transform .15s ease, opacity .2s ease, background-color .2s ease;
}
.product-side-arrow.prev { left: max(12px, calc((100% - 680px) / 2 - 56px)); }
.product-side-arrow.next { right: max(12px, calc((100% - 680px) / 2 - 56px)); }
.product-side-arrow:hover:not(:disabled) { background: var(--surface); transform: translateY(-50%) scale(1.08); }
.product-side-arrow:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.product-side-arrow:disabled { opacity: .2; cursor: default; pointer-events: none; }
.product-side-arrow .i { width: 22px; height: 22px; }
@media (max-width: 820px) {
  .product-side-arrow { display: none !important; }
}

#productBody {
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
  will-change: transform, opacity;
}
#productBody.slide-out-next { transform: translateX(-35px); opacity: .3; }
#productBody.slide-out-prev { transform: translateX(35px); opacity: .3; }
#productBody.slide-in-next { animation: pSlideInNext .22s cubic-bezier(.16, 1, .3, 1) forwards; }
#productBody.slide-in-prev { animation: pSlideInPrev .22s cubic-bezier(.16, 1, .3, 1) forwards; }
#productBody.bounce-left { animation: pBounceLeft .24s ease-out; }
#productBody.bounce-right { animation: pBounceRight .24s ease-out; }

@keyframes pSlideInNext {
  from { transform: translateX(35px); opacity: .4; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes pSlideInPrev {
  from { transform: translateX(-35px); opacity: .4; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes pBounceLeft {
  0% { transform: translateX(0); }
  50% { transform: translateX(-16px); }
  100% { transform: translateX(0); }
}
@keyframes pBounceRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(16px); }
  100% { transform: translateX(0); }
}

.page-title {
  flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s ease;
}
.page.scrolled .page-title { opacity: 1; }
.page .p-foot { background: linear-gradient(to top, var(--bg) 75%, transparent); }
:root[data-theme="dark"] .page .p-foot { background: linear-gradient(to top, var(--bg) 75%, transparent); }
@media (prefers-reduced-motion: reduce) { .page, .page-shade, #productBody { transition: none; animation: none; } }

/* ---------- product sheet ---------- */

.p-hero {
  height: min(84vw, 360px); border-radius: 24px; overflow: hidden; display: grid; place-items: center; margin: 4px 0 18px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.p-hero .photo { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
/* The cheapest offer, large, under the title: what the page is for. */
.p-best {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin: 16px 0 0; padding: 14px 16px; border-radius: 18px; background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.p-best-where { display: flex; flex-direction: column; min-width: 0; }
.p-best-where small { color: var(--ink-3); font-size: 12.5px; }
.p-best-where b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-best-price { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; line-height: 1.1; }
.p-best-price b { font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--accent-text); white-space: nowrap; }
.p-best-price b small { font-size: 14px; font-weight: 550; color: var(--ink-3); }
.p-best-price s { color: var(--ink-3); font-size: 13px; }
.p-best .o-badge { grid-column: 3; justify-self: end; margin-top: -4px; }
.p-hero .ph .i { width: 64px; height: 64px; stroke-width: 1.2; }
.p-title { font-size: 22px; line-height: 1.22; font-weight: 720; letter-spacing: -.016em; }
.p-meta { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.p-actions .chip.chip-on .i { color: var(--promo); }
.p-section { margin-top: 24px; }
.p-section h3 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 4px; }
.p-offers { list-style: none; margin: 8px 0 0; padding: 0 14px; border-radius: 16px; background: var(--surface-2); }
.p-offer { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.p-offer:first-child { border-top: 0; }
.p-offer .logo, .p-offer .logo-fb { width: 26px; height: 26px; border-radius: 7px; }
.p-offer.best .o-price b { color: var(--accent-text); }
.p-text { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.stats div { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.stats small { color: var(--ink-3); font-size: 12px; }
.stats b { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stats .accent b { color: var(--accent-text); }
.stats-top { margin-top: 14px; }
.chart { width: 100%; height: auto; margin-top: 12px; display: block; }
.chart-area { fill: var(--accent-soft); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); }
.chart-label { font-size: 11px; fill: var(--ink-2); font-weight: 600; }
.chart-axis { font-size: 10.5px; fill: var(--ink-3); }
.sizes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.size-row button {
  width: 100%; display: grid; grid-template-columns: 70px 1fr auto; grid-template-areas: "name bar unit" "name price tag"; gap: 4px 12px; align-items: center;
  padding: 10px 12px; border: 0; border-radius: 14px; background: var(--surface-2); text-align: left;
}
.size-row button:disabled { opacity: 1; cursor: default; }
.size-row.current button { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.size-row.best button { background: var(--accent-soft); }
.size-name { grid-area: name; display: flex; flex-direction: column; }
.size-name b { font-size: 15px; }
.size-name small { color: var(--ink-3); font-size: 11.5px; }
.size-bar { grid-area: bar; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.size-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink-3); }
.size-row.best .size-bar i { background: var(--accent); }
.size-unit { grid-area: unit; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
.size-row.best .size-unit { color: var(--accent-text); }
.size-price { grid-area: price; display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.size-price .logo, .size-price .logo-fb { width: 16px; height: 16px; border-radius: 4px; font-size: 9px; }
.size-tag { grid-area: tag; text-align: right; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.size-row.best .size-tag { color: var(--accent-text); }
.p-foot { position: sticky; bottom: 0; padding: 14px 0 2px; margin-top: 20px; background: linear-gradient(to top, var(--surface) 75%, transparent); }
:root[data-theme="dark"] .p-foot { background: linear-gradient(to top, #1c1c1e 75%, transparent); }
.p-foot .btn { height: 50px; border-radius: 14px; font-size: 16px; }

/* ---------- basket ---------- */

.b-head { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.b-list { list-style: none; margin: 0; padding: 0 14px; border-radius: 16px; background: var(--surface-2); }
.b-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.b-thumb { width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.b-thumb .photo { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.b-thumb .ph .i { width: 22px; height: 22px; }
.b-price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.b-price .logo { width: 18px; height: 18px; border-radius: 5px; }
.b-price b { font-size: 15px; font-weight: 700; }
.b-price b.promo { color: var(--accent-text); }
.b-price s { color: var(--ink-3); font-size: 12.5px; }
.b-price .o-badge { min-width: 0; height: 19px; font-size: 11.5px; }
.b-item:first-child { border-top: 0; }
.b-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.b-info b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.b-info small { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.b-info .wait { color: var(--warn); }
.b-item .stepper { background: var(--surface); }
.b-section { margin-top: 22px; }
.b-section h3 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 10px; }
.swaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.swap { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--accent-soft); }
.swap > .i { color: var(--accent-text); width: 22px; height: 22px; }
.swap .btn { grid-column: 2 / -1; justify-self: end; margin-top: 6px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.tier {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border: 0; border-radius: 14px; text-align: left;
  background: var(--surface-2); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s ease, background-color .2s ease;
}
.tier span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.tier b { font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tier small { font-size: 12px; color: var(--ink-3); }
.tier.on { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.tier.on small { color: var(--accent-text); font-weight: 600; }
.tier.partial b { color: var(--ink-2); }
.route { list-style: none; margin: 0 0 10px; padding: 0 14px; border-radius: 16px; background: var(--surface-2); }
.route li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.route li:first-child { border-top: 0; }
.route .logo, .route .logo-fb { width: 26px; height: 26px; border-radius: 7px; }
.route .o-price small { color: var(--ink-3); font-size: 12px; }

/* ---------- account and settings ---------- */

.profile { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.profile > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.profile b { font-size: 18px; }
.profile small { color: var(--ink-3); font-size: 13px; }
.receipts { list-style: none; margin: 10px 0 0; padding: 0 14px; border-radius: 16px; background: var(--surface-2); }
.receipt { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.receipt:first-child { border-top: 0; }
.receipt-actions { display: flex; gap: 4px; }
.receipt-actions .icon-btn { background: var(--surface); }
.settings { padding: 4px 14px; }
.row-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.row-setting:first-child { border-top: 0; }
.row-setting > span { font-size: 15px; font-weight: 550; }
.row-setting .segmented { background: var(--surface-3); }
.row-link {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left;
}
.row-link > .i:first-child { color: var(--accent-text); }
.row-link > span { flex: 1; display: flex; flex-direction: column; }
.row-link small { color: var(--ink-3); font-size: 12.5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.row-link small .i { width: 15px; height: 15px; }
.details { margin-top: 12px; padding: 0 14px; }
.details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 600; cursor: pointer; }
.details summary::-webkit-details-marker { display: none; }
.details[open] summary .i { transform: rotate(180deg); }
.form { display: grid; gap: 12px; }
.form h3 { font-size: 16px; }
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); font-weight: 550; }
.form input, .form select {
  height: 46px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--surface); color: var(--ink); font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.form input:focus, .form select:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.group.form { padding: 14px; margin-top: 16px; }
.details .form { padding-bottom: 14px; }
#cardEditSheet .form input, #cardEditSheet .form select { background: var(--surface-2); box-shadow: none; }
#scanVideo { width: 100%; border-radius: 14px; }
#accountBody > .btn-block { margin-top: 18px; }
/* Telegram's own button blue, dark enough for white text. */
.btn-tg { height: 50px; border-radius: 14px; font-size: 16px; background: #2481cc; color: #fff; text-decoration: none; }
.btn-tg.is-loading { opacity: .55; pointer-events: none; }
.login-how { color: var(--ink-3); font-size: 13px; line-height: 1.45; margin: 10px 2px 6px; }
.login-wait { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.login-wait b { display: block; font-size: 15px; }
.login-wait small { color: var(--ink-2); font-size: 13px; }
.login-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.login-actions .btn { text-decoration: none; }
.spinner { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: #2481cc; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- loyalty card view ---------- */

.cardview { position: fixed; inset: 0; z-index: 40; background: var(--scrim); display: grid; place-items: center; padding: 16px; }
.cardview-inner { width: 100%; max-width: 420px; padding: 16px 16px 10px; border-radius: 24px; background: var(--surface); text-align: center; box-shadow: var(--shadow-lg); }
.cardview-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.cardview-head b { flex: 1; font-size: 17px; }
.cardview-head .logo, .cardview-head .logo-fb { width: 30px; height: 30px; border-radius: 8px; }
.cardview-code { background: #fff; padding: 22px 12px 8px; border-radius: 14px; margin-top: 12px; }
.cardview-code svg { width: 100%; height: auto; max-height: 150px; }
.cardview-number { font: 600 18px var(--mono); letter-spacing: .12em; margin-top: 10px; }
.cardview-tip { color: var(--ink-2); font-size: 13.5px; margin: 14px 0 6px; text-align: left; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.cardview .link { padding: 12px; }

/* ---------- printer and receipt (paper stays paper in both themes) ---------- */

/* Three rows: the bar, the printer, the buttons. The buttons never move: a long receipt scrolls
   inside the printer, under its slot, instead of pushing them off the screen. */
.printer {
  position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center;
  padding: 0 16px calc(14px + var(--safe-bottom));
}
.printer-top { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + var(--safe-top)) 0 18px; }
.printer-title { display: flex; flex-direction: column; align-items: center; }
.printer-title b { font-size: 16px; }
.printer-title small { color: var(--ink-3); font-size: 12px; }
.round-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.round-btn.ghost { background: none; box-shadow: none; }
.stage { position: relative; width: 100%; max-width: 360px; height: 100%; min-height: 0; }
.slot {
  position: absolute; top: 0; left: -14px; right: -14px; height: 66px; z-index: 1;
  background: linear-gradient(#2b2e35, #16181d); border-radius: 18px;
  box-shadow: 0 14px 30px rgba(20, 24, 36, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.slot span { display: none; }
/* The paper comes out of the slit itself, as in a real printer: layered over the printer's lower
   half (which shows only at the paper's sides), under the slit and the dark of the mouth. The feed
   begins at the slit, scrolls a long receipt and fades out at the bottom. */
.stage::before {
  content: ""; position: absolute; left: -3px; right: -3px; top: 29px; height: 9px; z-index: 4; pointer-events: none;
  border-radius: 6px; background: #050506; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .06);
}
.feed {
  position: absolute; left: 0; right: 0; top: 33px; bottom: 0; z-index: 2;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
  padding: 0 4px 40px;
  -webkit-mask: linear-gradient(#000 calc(100% - 36px), transparent); mask: linear-gradient(#000 calc(100% - 36px), transparent);
}
.feed::-webkit-scrollbar { display: none; }
.feed.printing { overflow: hidden; }
.stage::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 37px; height: 40px; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(10, 12, 16, .42), rgba(10, 12, 16, .14) 45%, transparent);
}
.paper-shadow { filter: drop-shadow(0 14px 22px rgba(20, 24, 36, .16)); }
.paper {
  --ink: #15171c; --ink-2: #4b4f5a; --ink-3: #6b7079; --accent: #1e7e34; --promo: #b3261e;
  background: #fff; padding: 28px 22px 34px; font: 12.5px/1.45 var(--mono); color: var(--ink);
  -webkit-mask: radial-gradient(circle 7px at 50% calc(100% + 1px), #0000 97%, #000) 50% 100% / 18px 100% repeat-x;
  mask: radial-gradient(circle 7px at 50% calc(100% + 1px), #0000 97%, #000) 50% 100% / 18px 100% repeat-x;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; transform-origin: 50% 0;
}
/* Printing: the paper slides out of the slot, its bottom edge first, at a till's pace (the time is
   set from its length, at most 3.6 s), with a slight judder of the feed rollers. */
.feed.printing .paper { animation: print var(--print-ms, 2400ms) cubic-bezier(.33, .33, .45, 1) both, judder .09s steps(2) 0s var(--print-steps, 24); }
@keyframes print { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
@keyframes judder { 50% { margin-left: .6px; } }
.feed.ready .paper { cursor: grab; }
.paper.back { transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
/* Torn off: it swings away the way it was pulled and falls. */
.paper.torn {
  transition: transform .65s cubic-bezier(.5, 0, .9, .4), opacity .65s;
  transform: translate(var(--tear-x, 40px), 120vh) rotate(var(--tear-r, 12deg)) !important; opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .feed.printing .paper { animation: none; } .paper.torn { transition: opacity .2s; } }
.r-logo { text-align: center; font-weight: 700; font-size: 24px; letter-spacing: .12em; margin-bottom: 2px; }
.r-center { text-align: center; }
.r-muted { color: var(--ink-3); font-size: 11.5px; }
.r-sep { border-top: 1px dashed #c9ccd3; margin: 10px 0; }
.r-store { display: flex; flex-direction: column; margin-bottom: 6px; }
.r-store span { color: var(--ink-3); font-size: 11px; }
.r-item { margin-top: 4px; }
/* A line's picture: small and grey, as thermal paper would print it. */
.r-item-photo { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; margin-top: 8px; }
.r-photo { width: 34px; height: 34px; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; }
.r-item-photo + .r-row, .r-item-photo + .r-row + .r-promo, .r-item-photo + .r-row + .r-multi { padding-left: 44px; }
.r-row { display: flex; justify-content: space-between; gap: 10px; }
.r-row[data-id] { padding-left: 12px; color: var(--ink-2); }
.r-row[data-id] span:last-child { color: var(--ink); }
.r-promo { padding-left: 12px; color: var(--promo); font-size: 11px; }
.r-multi { padding-left: 12px; color: var(--accent); font-size: 11px; }
.r-wait { color: #8a5a00; }
.r-sub { font-weight: 700; margin-top: 6px; }
.r-regular { color: var(--ink-2); font-size: 13px; }
.r-regular span:last-child { color: var(--ink); }
.r-total { font-weight: 700; font-size: 17px; margin: 4px 0 6px; }
.r-save { color: var(--accent); font-weight: 600; }
.r-item.done, .r-row.done { text-decoration: line-through; color: var(--ink-3); }
.r-card { margin: 4px 0 8px; text-align: center; }
.r-card svg { width: 100%; height: 46px; }
.r-card small { color: var(--ink-3); font-size: 10.5px; }
.printer-actions { width: 100%; max-width: 360px; padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.printer-actions .link { padding: 10px; color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: 12.5px; margin: 2px 0 0; text-align: center; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock-h) + 26px + var(--safe-bottom)); z-index: 50;
  max-width: min(92vw, 440px); padding: 11px 16px; border-radius: 14px;
  background: var(--invert); color: var(--invert-ink); font-size: 14px; font-weight: 550; text-align: center;
  box-shadow: var(--shadow-lg); translate: -50% 12px; opacity: 0; transition: translate .3s var(--ease-sheet), opacity .25s ease;
}
.toast.show { translate: -50% 0; opacity: 1; }
body.has-basket .toast { bottom: calc(var(--dock-h) + 90px + var(--safe-bottom)); }

/* ---------- wider screens ---------- */

@media (min-width: 760px) {
  .content { padding-top: 12px; }
  .large-title { font-size: 34px; }
  .card { padding: 16px; }
  .card-top { grid-template-columns: 76px 1fr auto; }
  .thumb { width: 76px; height: 76px; }
  .sheet { bottom: 16px; border-radius: 24px; max-height: calc(100vh - 48px); }
  .sheet-tall { max-height: calc(100vh - 32px); }
}

/* ---------- comfort settings ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .sheet { transition: opacity .2s ease; transform: none; opacity: 0; }
  .sheet.open { opacity: 1; }
  .toast { transition: opacity .2s ease; translate: -50% 0; }
  .tab-panel { animation: none; }
  .tab-lens { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .top, .tabbar, .sheet-head-float .icon-btn { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tabbar::before, .tabbar::after, .tab-lens::before { display: none; }
  .tab-lens { background: var(--surface-2); box-shadow: none; }
  .dock { background: var(--bg); }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(0, 0, 0, .3); --ink-3: #5a5a5f; }
  .card, .chip, .field { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
}
html.in-telegram .sheet { max-height: calc(100dvh - var(--safe-top) - 12px); }

/* ---------- release profile, subscription, legal & native ads ---------- */

.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 8%, var(--surface-2)));
  border: 1px solid var(--line);
  margin-bottom: 16px;
}
.profile-avatar-box {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 750;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.profile-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-hero-info b {
  font-size: 17px;
  font-weight: 750;
}
.profile-hero-info small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.3;
}
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-text);
  border: 1px solid var(--line);
}
.profile-pill.pill-dim {
  color: var(--ink-3);
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.stat-box {
  background: var(--surface-2);
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
}
.stat-box small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.stat-box b {
  font-size: 19px;
  font-weight: 750;
  color: var(--ink);
}
.stat-box.stat-accent {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.stat-box.stat-accent b {
  color: var(--accent-text);
}

/* Telegram Auth Card at top of Profile */
.profile-tg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  margin: 12px 0 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-tg-card.is-logged {
  background: var(--surface-2);
}
.tg-auth-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tg-auth-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #2aabee;
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 4px 12px rgba(42, 171, 238, .28);
}
.tg-auth-icon.logged {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}
.tg-auth-icon .i {
  width: 22px;
  height: 22px;
}
.tg-auth-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tg-auth-text b {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.tg-auth-text small {
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.35;
}

/* Simplified Subscription Card */
.sub-plan-simple {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sub-simple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sub-simple-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sub-simple-info b {
  font-size: 14.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}
.sub-simple-info b .i {
  width: 16px;
  height: 16px;
  color: var(--accent-text);
}
.sub-simple-info small {
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.35;
}

/* Subscription cards */
.sub-plan-card {
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.sub-plan-card.plan-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}
.sub-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.sub-plan-head b {
  font-size: 16px;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
}
.sub-badge.badge-soon {
  background: var(--leaf);
  color: #fff;
}
.sub-plan-desc {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 12px;
  line-height: 1.35;
}
.sub-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sub-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.sub-features li .i {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
  color: var(--accent-text);
}
.sub-plan-card.plan-pro .sub-features li .i {
  color: var(--leaf);
}
.sub-pro-action {
  margin-top: 14px;
}
.btn-pro-preview {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--leaf) 35%, transparent);
  background: var(--surface);
  color: var(--leaf);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-pro-preview:active {
  transform: scale(.98);
}

/* Legal disclosure accordions */
.legal-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}
.legal-item {
  border-bottom: 1px solid var(--line);
}
.legal-item:last-child {
  border-bottom: 0;
}
.legal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.legal-summary::-webkit-details-marker {
  display: none;
}
.legal-summary .i {
  color: var(--ink-3);
  transition: transform .2s ease;
}
details[open] .legal-summary .i {
  transform: rotate(180deg);
}
.legal-content {
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.legal-content p {
  margin: 0;
}

/* Contacts section */
.contacts-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
}
.contact-row small {
  color: var(--ink-3);
}
.contact-row b {
  font-weight: 650;
}
.contact-row a {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 650;
}

/* Native Ads */
.native-ad {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.native-ad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.native-ad-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
}
.native-ad-disclosure {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-left: auto;
  margin-right: 8px;
}
.native-ad-close {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 50%;
  display: grid;
  place-items: center;
  line-height: 1;
}
.native-ad-close .i {
  width: 14px;
  height: 14px;
}
.native-ad-close:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.native-ad-body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.native-ad-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  flex: none;
}
.native-ad-icon-wrap .i {
  width: 22px;
  height: 22px;
}
.native-ad-content {
  flex: 1;
  min-width: 0;
}
.native-ad-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  line-height: 1.25;
}
.native-ad-text {
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0 0 10px;
  line-height: 1.35;
}
.native-ad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.native-ad-tag {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.native-ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.native-ad-btn:active {
  opacity: .85;
}
.native-ad-btn .i {
  width: 14px;
  height: 14px;
}
.native-ad-search {
  margin: 8px 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.native-ad-profile {
  margin-top: 6px;
  background: var(--surface-2);
}
.native-ad-product {
  margin: 16px 0;
  background: var(--surface-2);
}

/* Google AdSense container */
.google-ad-container {
  margin: 12px 0 16px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
}
.google-ad-container:has(ins[data-ad-status="unfilled"]) {
  display: none !important;
}
.google-ad-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 600;
}

/* ---------- Category navigation & filter bar ---------- */
.cat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar {
  display: none;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all .16s ease;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.cat-pill:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
}
.cat-pill.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(11, 125, 73, .25);
}
.cat-pill.on .cat-count {
  background: rgba(255, 255, 255, .25);
  color: var(--accent-ink);
}
.cat-emoji {
  font-size: 14px;
  line-height: 1;
}
.cat-name {
  line-height: 1.2;
}
.cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  min-width: 18px;
  line-height: 1.2;
}

/* Home screen category grid */
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 420px) {
  .home-cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}
.home-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select: none;
}
.home-cat-card:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.home-cat-card:active {
  transform: scale(0.97);
}
.home-cat-emoji {
  font-size: 24px;
  line-height: 1;
}
.home-cat-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* ---------- 2026-10 redesign: home, deals' shops, the basket and profile tabs ----------
   One structure for everyone: five tabs named for what they hold, one big card per screen that says
   the main thing, round icons where every shop's app has them, and the same card language everywhere
   (20-24 px radius, white on the page in light, a lifted grey with a hairline in dark). */

/* Header: the city is the one control there; the chevron says it opens a choice. */
.pill .pill-chev { width: 15px; height: 15px; color: var(--ink-3); margin-left: -2px; }

/* Greeting */
.greet-wrap { margin: 4px 0 14px; }
.greet-hi { margin: 0 0 2px; color: var(--ink-3); font-size: 15px; font-weight: 550; }
.greet { font-size: 28px; line-height: 1.12; font-weight: 760; letter-spacing: -.026em; margin: 0; }

/* The hero card: text left, a round picture right, the action under them. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center;
  margin: 0 0 24px; padding: 18px 18px 16px; border-radius: 24px;
  background: linear-gradient(145deg, var(--hero-a), var(--hero-b)); color: #fff;
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--hero-b) 70%, transparent);
}
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%);
}
.hero::before { width: 240px; height: 240px; right: -70px; top: -90px; }
.hero::after { width: 160px; height: 160px; left: -50px; bottom: -80px; opacity: .6; }
.hero-text { min-width: 0; }
.hero-kicker { display: block; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.hero h2 { margin: 4px 0 6px; font-size: 23px; line-height: 1.15; font-weight: 760; letter-spacing: -.022em; }
.hero p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.4; }
.hero-art {
  width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--hero-line); color: #fff;
}
.hero-art .i { width: 38px; height: 38px; stroke-width: 1.6; }
.hero-photo { background: #fff; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.hero-photo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.hero-logos { background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; width: auto; min-width: 86px; }
.hero-logos .logo, .hero-logos .logo-fb {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; margin-left: -12px; font-size: 18px;
  box-shadow: 0 0 0 3px var(--hero-a), 0 6px 14px rgba(0, 0, 0, .25); object-fit: contain;
}
.hero-logos .logo:first-child, .hero-logos .logo-fb:first-child { margin-left: 0; }
.hero-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 10px; }
.btn-hero { background: #fff; color: #0b3b26; height: 44px; border-radius: 999px; padding: 0 18px; }
.btn-hero .i { color: #16613f; }
.btn-hero-ghost { background: rgba(255, 255, 255, .14); color: #fff; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hero-line); }

/* Section heads */
.block-head { margin-bottom: 10px; align-items: center; }
.block h2, .home-deals-block .block-head h2 { font-size: 19px; font-weight: 750; letter-spacing: -.018em; margin: 0; }
.block > h2 { margin-bottom: 10px; }

/* Categories: round, coloured by what is in them, names under. */
.cat-circles { gap: 6px; padding-bottom: 6px; }
.cat-circle {
  --c: #2e7d4f; flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; color: var(--ink); text-align: center;
}
.cat-circle-icon {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
  transition: transform .15s ease;
}
.cat-circle-icon .i { width: 27px; height: 27px; stroke-width: 1.7; }
.cat-circle:active .cat-circle-icon { transform: scale(.93); }
.cat-circle-name { font-size: 12px; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-coffee { --c: #8a5a2b; } .cat-dairy { --c: #2f74c0; } .cat-meat { --c: #c2413b; } .cat-fish { --c: #1f8a9a; }
.cat-fruits_veg { --c: #2f9a4a; } .cat-bakery { --c: #b9771f; } .cat-grocery { --c: #a48420; } .cat-sweets { --c: #c64f86; }
.cat-drinks { --c: #2395c4; } .cat-alcohol { --c: #8a3fb0; } .cat-clean { --c: #3a7fd6; } .cat-home { --c: #d0732a; } .cat-pets { --c: #6d5bd0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat-circle-icon { color: color-mix(in srgb, var(--c) 58%, #fff); background: color-mix(in srgb, var(--c) 24%, var(--surface)); }
}
:root[data-theme="dark"] .cat-circle-icon { color: color-mix(in srgb, var(--c) 58%, #fff); background: color-mix(in srgb, var(--c) 24%, var(--surface)); }

/* Deals of the week: the photo carries the discount and the shop, like a shop's own app. */
.deals-hscroll { gap: 12px; }
.deal-card {
  width: 162px; padding: 0; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.deal-card:hover { transform: none; }
.deal-thumb { position: relative; height: 138px; margin: 0; border-radius: 0; background: #fff; }
:root[data-theme="dark"] .deal-thumb { background: #fff; }
.deal-photo { max-width: 84%; max-height: 82%; }
.deal-badge { position: absolute; top: 9px; left: 9px; padding: 3px 8px; border-radius: 999px; font-size: 12px; }
.deal-store-logo { position: absolute; top: 8px; right: 8px; }
.deal-store-logo .logo, .deal-store-logo .logo-fb { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .14); object-fit: contain; }
.deal-info { padding: 10px 12px 0; margin: 0; }
.deal-title { min-height: 35px; font-size: 13.5px; }
.deal-size { font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-footer { padding: 8px 10px 10px 12px; border-top: 0; }
.deal-price-cur { color: var(--ink); font-size: 16px; }
.deal-price-cur.promo { color: var(--promo); }
.deal-add-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.deal-add-btn:hover { background: var(--accent); color: var(--accent-ink); transform: none; }
.deal-add-btn.in { background: var(--accent-soft); color: var(--accent-text); }
.deal-add-btn .i { stroke-width: 2.3; }

/* Shops nearby: logos in circles, the distance under. */
.chain-circles { gap: 4px; padding-bottom: 6px; }
.chain-circle {
  flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0; border: 0; background: none; color: var(--ink); text-align: center;
}
.chain-circle-logo {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; margin-bottom: 4px;
  background: #fff; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); transition: transform .15s ease;
}
.chain-circle:active .chain-circle-logo { transform: scale(.93); }
.chain-circle-logo .logo { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; padding: 9px; }
.chain-circle-logo .logo-fb { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 750; font-size: 20px; }
.chain-circle-logo > .i { width: 24px; height: 24px; color: var(--ink-2); }
.chain-circle-all .chain-circle-logo { background: var(--surface-2); }
.chain-circle-name { font-size: 12px; font-weight: 600; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chain-circle small { color: var(--ink-3); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.chain-circles-sm .chain-circle { width: 68px; }
.chain-circles-sm .chain-circle-logo { width: 52px; height: 52px; }
.promo-chains { margin: 2px 0 10px; }
#tab-promos.in-chain #promoChains, #tab-promos.in-chain #promoViews, #tab-promos.in-chain #promoNote { display: none; }
.chain-head { margin: 6px 0 10px; }

/* Home: the "how it works" steps sit on cards like everything else */
.how li { border-radius: 18px; }
.how li::before { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- the basket tab ---------- */
.bk-hero {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 2px;
  margin: 6px 0 4px; padding: 18px; border-radius: 24px; color: #fff;
  background: linear-gradient(145deg, var(--hero-a), var(--hero-b));
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--hero-b) 70%, transparent);
}
.bk-hero::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%); }
.bk-total { font-size: 36px; line-height: 1.1; font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.bk-stores { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); font-size: 14px; min-width: 0; }
.bk-logos { display: inline-flex; flex: none; }
.bk-logos .logo, .bk-logos .logo-fb { width: 24px; height: 24px; border-radius: 50%; background: #fff; margin-left: -6px; box-shadow: 0 0 0 2px var(--hero-a); object-fit: contain; font-size: 11px; }
.bk-logos .logo:first-child, .bk-logos .logo-fb:first-child { margin-left: 0; }
.bk-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hero-line); }
.bk-stats span { display: flex; flex-direction: column; padding: 0 10px; border-left: 1px solid var(--hero-line); min-width: 0; }
.bk-stats span:first-child { padding-left: 0; border-left: 0; }
.bk-stats b { font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-stats small { color: rgba(255, 255, 255, .7); font-size: 12px; }
#tab-basket .b-head { margin-bottom: 10px; }
#tab-basket .b-head h3 { margin: 0; }
#tab-basket .b-head h3 small { color: var(--ink-3); font-size: 13px; font-weight: 550; margin-left: 4px; }
#tab-basket .b-list, #tab-basket .route { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); border-radius: 20px; }
#tab-basket .tier { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); border-radius: 16px; }
#tab-basket .tier.on { box-shadow: inset 0 0 0 2px var(--accent); }
#tab-basket .b-item .stepper { background: var(--surface-2); }
/* The receipt button stays in reach, just above the tab bar. */
.bk-foot { position: sticky; bottom: calc(var(--dock-h) + 22px + var(--safe-bottom)); z-index: 4; background: none; padding: 12px 0 0; }
:root[data-theme="dark"] .bk-foot { background: none; }
.bk-foot .btn { box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.empty-basket { padding-top: 56px; }
.empty-basket .btn { margin-top: 4px; }
.empty-icon { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- the profile tab ---------- */
.pf-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; }
.pf-avatar {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--surface-2); color: var(--ink-3); font-size: 24px; font-weight: 750;
}
.pf-avatar .i { width: 28px; height: 28px; }
.pf-avatar.in { background: linear-gradient(145deg, var(--hero-a), var(--hero-b)); color: #fff; }
.pf-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-who b { font-size: 20px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-who small { color: var(--ink-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-login {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; margin: 0 0 18px; padding: 16px;
  border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.pf-login-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #2481cc; color: #fff; }
.pf-login b { font-size: 16px; display: block; }
.pf-login p { margin: 3px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.42; }
.pf-login-action { grid-column: 1 / -1; }
.pf-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 6px; }
.pf-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 20px; min-width: 0;
  background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.pf-tile small { color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.pf-tile b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-tile-wide { grid-column: 1 / -1; background: linear-gradient(145deg, var(--hero-a), var(--hero-b)); color: #fff; box-shadow: none; }
.pf-tile-wide small { color: rgba(255, 255, 255, .72); }
.pf-tile-wide b { font-size: 30px; }
.pf-tile-wide > span { position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); }
.pf-tile-wide > span .i { width: 24px; height: 24px; }
.pf-section { margin-top: 22px; }
.pf-section > h3 { font-size: 19px; font-weight: 750; letter-spacing: -.018em; margin: 0 0 10px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pf-head h3 { font-size: 19px; font-weight: 750; letter-spacing: -.018em; margin: 0; }
.pf-section .card-grid { margin: 0; }
.cards-empty {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: 20px;
  background: none; color: var(--ink-2); text-align: left; font-size: 14px; line-height: 1.4;
}
.cards-empty .i { width: 28px; height: 28px; color: var(--accent-text); flex: none; }
.pf-section .group { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); border-radius: 20px; padding: 2px 16px; }
.pf-section .group .row-link:first-child { border-top: 0; }
.pf-section .group-label { margin-top: 0; }
.pf-section .receipts { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); border-radius: 20px; }
.pf-section .receipt-actions .icon-btn { background: var(--surface-2); }
.pf-section .contacts-card { margin-top: 10px; }
#tab-profile .callout-tg { margin: 0 0 16px; }

/* Tab bar: the basket's count, the profile's initial. */
.badge-count { background: var(--accent); color: var(--accent-ink); }
.badge.bump { animation: bump .4s ease; }
.tab-avatar {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--hero-a), var(--hero-b)); color: #fff; font-size: 12.5px; font-weight: 750;
}
.tabbar button.on .tab-avatar { box-shadow: 0 0 0 2px var(--accent); }
.tabbar button span:not(.tab-avatar) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- product page: the photo across the top, under round floating buttons ---------- */
.page-bar .icon-btn {
  width: 40px; height: 40px; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.page-bar .icon-btn .i { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .p-hero {
    margin: calc(-60px - var(--safe-top)) -16px 18px; height: calc(min(96vw, 430px) + var(--safe-top));
    padding-top: var(--safe-top); border-radius: 0 0 30px 30px; box-shadow: none;
  }
  .p-hero .photo { padding: 64px 28px 20px; }
}
.p-title { font-size: 24px; letter-spacing: -.02em; }
.p-best { border-radius: 20px; }
.page .p-foot { padding-bottom: 4px; }
.page .p-foot .btn { border-radius: 999px; box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 60%, transparent); }

/* Profile: «Налаштування» reads like the other section titles; the «Про Кошик» rows keep their
   icon beside the words, and only the chevron turns. */
.pf-section .group-label { font-size: 19px; font-weight: 750; letter-spacing: -.018em; text-transform: none; color: var(--ink); margin: 0 0 10px; }
.legal-summary > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.legal-summary > span .i { width: 18px; height: 18px; color: var(--accent-text); flex: none; transform: none !important; }
.pf-section .legal-card { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); border: 0; border-radius: 20px; overflow: hidden; }
.pf-section .contacts-card { background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); border: 0; border-radius: 20px; }
.pf-section .row-link .sub-badge { flex: none; }

/* Category pills (search, deals, a shop's page): the same drawn icons as the home screen's circles,
   in the category's colour, instead of emoji that look different on every phone. */
.cat-emoji { display: inline-grid; place-items: center; color: var(--c, var(--ink-2)); font-size: 0; }
.cat-emoji .i { width: 17px; height: 17px; stroke-width: 1.9; }
.cat-pill.on .cat-emoji { color: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cat-emoji { color: color-mix(in srgb, var(--c, #aeaeb2) 58%, #fff); } }
:root[data-theme="dark"] .cat-emoji { color: color-mix(in srgb, var(--c, #aeaeb2) 58%, #fff); }
/* The add button stays 36 px to look at, 48 px to hit. */
.deal-add-btn { position: relative; }
.deal-add-btn::after { content: ""; position: absolute; inset: -6px; }
/* The hero on a dark page: a hairline, as on the other cards. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.hero, .bk-hero, .pf-tile-wide) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } }
:root[data-theme="dark"] :is(.hero, .bk-hero, .pf-tile-wide) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* The tab bar's lens moves like a critically damped spring: no overshoot, so at the first and last
   tab it never swings past the bar's rounded end, and the squash is slight. The bar clips it anyway. */
.tabbar { overflow: hidden; }
.tab-lens { transition: transform .42s cubic-bezier(.25, .9, .3, 1); }
@keyframes lens-squash { 40% { scale: 1.05 .94; } 100% { scale: 1 1; } }
.badge { top: 5px; }

/* The basket reminder above the tab bar. */
.mini-basket {
  display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; text-align: left;
  background: linear-gradient(145deg, var(--hero-a), var(--hero-b)); color: #fff;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--hero-b) 75%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .08);
  animation: rise .35s var(--ease-sheet) both; transition: transform .12s ease;
}
.mini-basket:active { transform: scale(.98); }
.mb-logos { display: inline-flex; flex: none; padding-left: 2px; }
.mb-logos .logo, .mb-logos .logo-fb { width: 34px; height: 34px; border-radius: 50%; background: #fff; margin-left: -10px; box-shadow: 0 0 0 2px var(--hero-a); object-fit: contain; font-size: 13px; }
.mb-logos .logo:first-child, .mb-logos .logo-fb:first-child { margin-left: 0; }
.mb-logos > .i { width: 22px; height: 22px; margin: 0 6px; }
.mb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.mb-text b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-text small { font-size: 12.5px; color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-go { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 10px 0 14px; border-radius: 999px; background: #fff; color: #0b3b26; font-size: 14px; font-weight: 700; }
.mb-go .i { width: 17px; height: 17px; stroke-width: 2.2; }
body.has-mini-basket { padding-bottom: calc(var(--dock-h) + 96px + var(--safe-bottom)); }
body.sheet-open .mini-basket { display: none; }
body.has-mini-basket .toast { bottom: calc(var(--dock-h) + 92px + var(--safe-bottom)); }
.toast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* What Koshyk is, in words, under the start screen: for people who scroll that far and for search
   engines (it is in the page's HTML, not drawn by the script). Hidden while searching. */
.seo-about { margin: 8px 0 24px; padding: 18px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.seo-about h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.seo-about p { margin: 0 0 8px; }
.seo-about p:last-child { margin-bottom: 0; }

/* An offer out of stock at the chosen store: shown with its price, quieter, marked. */
.offer.off, .p-offer.off { opacity: .6; }
.offer.off .o-price b, .p-offer.off .o-price b { color: var(--ink-2); }
.tag-off { background: var(--surface-2); color: var(--ink-3); }

/* A channel post's products (koshyk.site/?picks=…) */
.picks-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 0 4px; }
.picks-head small { color: var(--accent-text); font-weight: 650; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.picks-head h2 { font-size: 26px; font-weight: 760; letter-spacing: -.024em; margin: 2px 0 0; }
.picks-lead { margin: 0 0 14px; }


/* How fresh the basket's prices are, under its list. */
.b-fresh { display: flex; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 13px; }
.b-fresh .i { width: 14px; height: 14px; animation: b-spin 1s linear infinite; }
@keyframes b-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .b-fresh .i { animation: none; } }

/* Search results. Everything sits at the top of the page as it always did — the header, the search
   box, the sorts, the categories — and scrolls away with it; only the search box is magnetic: it stays
   with you, floating at the top of the screen. Scrolling down hides the header too; the least scroll
   back up brings the header and the sorts and categories down again with a short slide, until the top
   of the list puts them back in their places. Transforms and position changes that take no room, so
   nothing above the results changes size (iOS has no scroll anchoring). Heights: --top-h, --search-h,
   --extras-h (app.js). States on body: .chrome-hidden (scrolled down) and .chrome-up (scrolled back up
   in the middle of the list). */
.top, .search-sticky { transition: transform .34s cubic-bezier(.2, .9, .25, 1); }
.search-sticky { position: sticky; top: var(--top-h, 60px); z-index: 16; margin: 0 -16px; padding: 2px 16px 0; }
.search-sticky .search-row { margin: 4px 0 10px; position: relative; z-index: 1; }
.search-sticky .searchbar { transition: box-shadow .25s ease; }
/* Floating: the page's colour fades in behind the box only, so the products slide under softly. */
.search-sticky::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -14px; pointer-events: none;
  background: linear-gradient(var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent));
  opacity: 0; transition: opacity .2s ease;
}
.search-sticky.pinned::before { opacity: 1; }
.search-sticky.pinned .searchbar { box-shadow: 0 10px 28px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--line); }
/* A little room between the box and the sorts — on the page's colour, so nothing shows through it.
   Always there (not only when floating), so the block never changes height while you scroll. */
.search-extras { position: relative; z-index: 15; margin: 0 -16px; padding: 6px 16px 0; background: var(--bg); }
.search-extras .filter-bar { margin-bottom: 8px; }
.search-extras .cat-bar { padding: 2px 0 10px; }
#searchCats:empty { display: none; }
/* Not up to the screen's edge: the status bar and, in Telegram, its own Close/⌄/⋯ buttons keep the
   top --safe-top. The header goes whole; a strip of the same glass covers that top while it is away,
   and the box stops right under it. */
body.chrome-hidden .top, body.chrome-up .top { transform: translateY(-100%); }
body.chrome-hidden .search-sticky, body.chrome-up .search-sticky { transform: translateY(calc(var(--safe-top, 0px) - var(--top-h, 60px))); }
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--safe-top, 0px); z-index: 19; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  opacity: 0; transition: opacity .2s ease;
}
body.chrome-hidden::before, body.chrome-up::before { opacity: 1; }
/* Scrolled back up in the middle of the list: only the sorts and categories come down — the header
   stays away — right under the box and on the page's colour, so nothing shows between them. The
   offset (transform) is the header's room given back; the slide is `translate`. */
body.chrome-up .search-sticky::before { background: var(--bg); opacity: 1; bottom: 0; }
body.chrome-up .search-extras, body.chrome-hidden .search-extras {
  position: sticky; top: calc(var(--top-h, 60px) + var(--search-h, 64px));
  transform: translateY(calc(var(--safe-top, 0px) - var(--top-h, 60px)));
  box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .35);
}
body.chrome-up .search-extras { animation: extras-in .3s cubic-bezier(.2, .9, .25, 1) both; }
body.chrome-hidden .search-extras { translate: 0 -120%; opacity: 0; pointer-events: none; }
body.chrome-hidden.chrome-leaving .search-extras { transition: translate .24s ease, opacity .2s ease; }
@keyframes extras-in { from { translate: 0 -100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .top, .search-sticky { transition: none; }
  body.chrome-up .search-extras { animation: none; }
}

/* ---------- the reference look (2026-10-19): soft white cards, tiles, a raised basket ---------- */
/* Categories on Home: tiles — a white card with the category's coloured icon and its name inside. */
.cat-circles { gap: 10px; padding: 4px 16px 10px; }
.cat-circle {
  width: 84px; padding: 12px 6px 10px; gap: 8px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 4px 14px rgba(0, 0, 0, .06), inset 0 0 0 1px var(--line);
  transition: transform .14s ease, box-shadow .2s ease;
}
.cat-circle:active { transform: scale(.95); }
.cat-circle-icon { width: 48px; height: 48px; border-radius: 15px; box-shadow: none; }
.cat-circle-icon .i { width: 25px; height: 25px; }
.cat-circle:active .cat-circle-icon { transform: none; }
.cat-circle-name { font-size: 11.5px; font-weight: 650; line-height: 1.2; min-height: 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Deal cards: the photo on white, the name, the price in the promo colour, a round «+». */
.deal-card { width: 160px; border-radius: 22px; padding: 10px 10px 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .07), inset 0 0 0 1px var(--line); }
.deal-thumb { height: 116px; border-radius: 16px; }
.deal-footer { border-top: 0; padding-top: 2px; }
.deal-price-cur { font-size: 16.5px; }
.deal-add-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent); }
.deal-add-btn:hover { background: var(--accent); color: var(--accent-ink); }
.deal-add-btn .i { width: 18px; height: 18px; stroke-width: 2.4; }

/* The tab bar: the basket in the middle is a round button in the brand colour, inside the bar (a
   raised one spilled over the glass), its count on it; the label stays for screen readers only. */
.tabbar button[data-tab="basket"] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tabbar button[data-tab="basket"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: linear-gradient(160deg, #22b86f, var(--accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .2s cubic-bezier(.34, 1.36, .5, 1);
}
.tabbar button[data-tab="basket"] .i { position: relative; color: #fff; width: 25px; height: 25px; }
.tabbar button[data-tab="basket"]:active::before { transform: scale(.92); }
.tabbar button[data-tab="basket"] .badge { top: 2px; left: calc(50% + 10px); box-shadow: 0 0 0 2px var(--surface); }

/* Small controls keep their look and get a 44 px hit area (DESIGN.md: touch targets ≥ 44 px; the heart
   and «Додати» were 36, a card's brand link 18, round icon buttons 34). The area only ever grows:
   min(0px, …) leaves anything already 44 px or more as it is. */
.fav-btn, .btn-add, .icon-btn, .btn-small, .card-meta .link { position: relative; }
.fav-btn::after, .btn-add::after, .icon-btn::after, .btn-small::after, .card-meta .link::after {
  content: ""; position: absolute;
  top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
  left: min(0px, calc((100% - 44px) / 2)); right: min(0px, calc((100% - 44px) / 2));
}

.more-sentinel { height: 1px; }
.pf-guest-note { margin: -4px 4px 4px; font-size: 13px; }

/* ---------- Profile → the bot's notifications (src/notify.js) ---------- */
.notify-group .row-switch + .row-switch { border-top: 1px solid var(--line); }
.notify-group .row-switch b { font-size: 15px; font-weight: 600; }
.notify-group .row-switch small { margin-top: 2px; line-height: 1.35; }
.notify-group .switch { flex: none; }
.pf-note { font-size: 12.5px; margin: 8px 4px 0; }

/* ---------- «Скоро на знижках» on the start screen, and a leaflet's pages inside the app ---------- */
.home-soon-block .hscroll-wrap + .hscroll-wrap { margin-top: 6px; }
.deal-soon {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.deal-soon .i { width: 13px; height: 13px; color: var(--warn); }
button.cpaper { border: 0; padding: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.cpaper:active .cpaper-cover { transform: scale(.97); }
.cpaper-cover { transition: transform .15s ease; }
.viewer-frame .viewer-bar { display: none; }
.viewer-frame .viewer-stage { display: flex; flex-direction: column; background: #fff; margin-bottom: calc(10px + var(--safe-bottom)); overflow: hidden; }
.paper-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; }
.paper-source { flex: none; padding: 8px 12px; font-size: 12.5px; color: var(--ink-3); text-align: center; background: var(--surface-2); }

/* ---------- the chains' logos (2026-10-29): full-bleed square tiles, 192 px, each on its own colour ---------- */
img.logo { object-fit: cover; outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; }
.chain-circle-logo .logo { padding: 0; object-fit: cover; }

/* ---------- «Скоро» with nothing announced: when things appear, and the bot's offer ---------- */
.soon-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  margin: 8px 0 18px; padding: 22px 18px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.soon-empty-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); margin-bottom: 4px; }
.soon-empty-icon .i { width: 22px; height: 22px; }
.soon-empty b { font-size: 16px; letter-spacing: -.01em; }
.soon-empty p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; max-width: 36ch; }
.soon-empty .btn { margin-top: 8px; }
.soon-on { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px !important; color: var(--accent-text) !important; font-weight: 600; }
.soon-on .i { width: 16px; height: 16px; }
.announce.fresh .chips-wrap { margin-top: 2px; }

/* ---------- «Скоро»: when the chains near the shopper renew their deals ---------- */
.rhythm { margin: 4px 0 18px; }
.rhythm h3 { font-size: 17px; font-weight: 750; letter-spacing: -.015em; margin: 0 0 8px; }
.rh-list { list-style: none; margin: 0; padding: 2px 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.rh-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.rh-row + .rh-row { border-top: 1px solid var(--line); }
.rh-row .logo { width: 34px; height: 34px; border-radius: 10px; }
.rh-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rh-text b { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.rh-text small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.rh-remind { flex: none; }
.rh-remind .i, .rh-on .i { width: 15px; height: 15px; }
.rh-on { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-size: 12.5px; font-weight: 650; }

/* ---------- the product scanner: the camera full screen, a frame for the barcode ---------- */
.search-scan-btn {
  width: 34px; height: 34px; border-radius: 11px; border: 0; padding: 0; flex: none; margin-right: -6px;
  background: none; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; position: relative;
}
.search-scan-btn .i { width: 21px; height: 21px; }
.search-scan-btn::after { content: ""; position: absolute; inset: -5px; }
.search-scan-btn:active { transform: scale(.9); }
body.scanning { overflow: hidden; }
.scanner { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; left: 50%; top: 42%; width: min(78vw, 340px); height: min(42vw, 180px); transform: translate(-50%, -50%);
  border-radius: 22px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .52); }
.scanner-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .9); }
.scanner-frame i { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: scan-line 1.6s ease-in-out infinite alternate; }
@keyframes scan-line { from { transform: translateY(-60px); } to { transform: translateY(60px); } }
@media (prefers-reduced-motion: reduce) { .scanner-frame i { animation: none; } }
.scanner-hint { position: absolute; left: 24px; right: 24px; top: calc(42% + min(21vw, 90px) + 22px); margin: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.scanner-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 20px calc(22px + var(--safe-bottom)); }
.scanner-photo { background: rgba(255, 255, 255, .16); color: #fff; height: 48px; border-radius: 999px; padding: 0 20px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.scanner-close { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.scanner-close .i, .scanner-photo .i { width: 20px; height: 20px; }
.p-hero { position: relative; }
.p-photo-note { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; font-weight: 600; }

/* ---------- nothing wider than the screen (2026-10-30) ----------
   A chip never wraps, and «З попередніх покупок» put whole product names in them: one long name made
   the page wider than the phone, so it slid sideways and the browser zoomed out. A chip is now at
   most the width of its row, its words cut with «…»; and the page itself never scrolls sideways
   (overflow: clip keeps the sticky search box working, unlike hidden). */
.chip { max-width: 100%; min-width: 0; }
.chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }