/* INTERFLORA brand layer + iOS-style Liquid Glass. Loaded after the prototype styles.
   Glass recipe: translucent tint + strong blur/saturation + specular top rim +
   soft inner glow + deep drop shadow. Dark theme by default, light via [data-theme]. */

:root {
  --glass-tint: rgba(28, 25, 24, 0.42);
  --glass-tint-strong: rgba(28, 25, 24, 0.62);
  --glass-rim: rgba(255, 255, 255, 0.22);
  --glass-rim-soft: rgba(255, 255, 255, 0.06);
  --glass-edge: rgba(201, 155, 106, 0.35);
  --glass-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.85), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --glass-blur: blur(22px) saturate(180%);
}
:root[data-theme="light"] {
  --glass-tint: rgba(255, 255, 255, 0.45);
  --glass-tint-strong: rgba(255, 255, 255, 0.68);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-rim-soft: rgba(255, 255, 255, 0.35);
  --glass-edge: rgba(91, 68, 50, 0.22);
  --glass-shadow: 0 18px 40px -18px rgba(91, 68, 50, 0.45), 0 2px 8px -3px rgba(91, 68, 50, 0.2);
}

/* shared glass surface */
.arrow,
.fav,
.tabbar,
.tabbar .tb.center,
.tg-fab,
header.top.scrolled {
  background: linear-gradient(160deg, var(--glass-rim-soft), transparent 45%), var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 18px -6px var(--glass-rim-soft),
    var(--glass-shadow);
}

/* arrows: small glass orbs with the gold chevron */
.arrow { color: var(--accent); background-clip: padding-box; }
.arrow::before {
  inset: 1px 5px 55% 5px;
  background: linear-gradient(180deg, var(--glass-rim), transparent);
  opacity: 0.55;
}
.arrow:hover { box-shadow: inset 0 1px 0 var(--glass-rim), 0 14px 30px -12px rgba(201, 155, 106, 0.45); }
:root[data-theme="light"] .arrow { color: var(--ink); }

/* favourite heart on photos */
.fav { width: 40px; height: 40px; }
.fav svg { fill: rgba(239, 233, 225, 0.95); stroke: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.fav.on svg { fill: var(--sale, #9a4b4e); }
:root[data-theme="light"] .fav svg { fill: #fff; stroke: rgba(6, 6, 7, 0.25); stroke-width: 1; }

/* mobile tab bar: floating liquid-glass capsule */
@media (max-width: 760px) {
  .tabbar {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 8px 10px;
    border-radius: 30px;
    justify-content: space-between;
  }
  .tabbar .tb {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    color: var(--mute);
  }
  .tabbar .tb.on { color: var(--accent); background: rgba(201, 155, 106, 0.14); }
  :root[data-theme="light"] .tabbar .tb.on { color: var(--ink); background: rgba(91, 68, 50, 0.1); }
  /* centre action: raised gold-tinted glass lens */
  .tabbar .tb.center {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-top: -26px;
    color: var(--on-accent);
    background:
      radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.45), transparent 50%),
      linear-gradient(160deg, #d9b386, #c99b6a 55%, #a87d50);
    border: 1px solid rgba(255, 255, 255, 0.35);
  }
  .tabbar .badge { background: var(--sale, #9a4b4e); color: #fff; }
}

/* Telegram button: glass instead of flat blue */
.tg-fab { color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, 0.25), transparent 50%), rgba(34, 158, 217, 0.72); }

/* header turns to glass once the page scrolls */
header.top { transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; }
header.top.scrolled { border-width: 0 0 1px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8); }

/* glass needs something behind it; fall back to solid tint where blur is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .arrow, .fav, .tabbar, .tg-fab, header.top.scrolled { background: var(--glass-tint-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  .arrow, .fav, .tabbar, .tg-fab, header.top.scrolled { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* horizontal rows: lighter edge fade, and the glass arrows stay visible on phones */
@media (max-width: 760px) {
  .scroller { --fr: 24px; }
  .scroller.mid { --fl: 24px; }
  .scroller.end { --fr: 0px; }
  .scroller.nofade { --fl: 0px; --fr: 0px; }
  .arrow { display: grid; width: 34px; height: 34px; }
  .arrow.r { right: 6px; }
  .arrow.l { left: 6px; }
  .arrow.off { opacity: 0; pointer-events: none; }
}

/* page-transition loader */
.pl-veil {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s;
}
.pl-on .pl-veil { opacity: 1; visibility: visible; transition: opacity .18s ease; }
.pl-mark {
  width: 74px; height: 74px; border-radius: 26px; display: grid; place-items: center; color: var(--logo);
  background: linear-gradient(160deg, var(--glass-rim-soft), transparent 45%), var(--glass-tint);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-shadow);
}
.pl-mark svg { width: 30px; height: 34px; }
.pl-on .pl-mark { animation: pl-breathe 1.1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes pl-breathe { 0%,100% { transform: scale(.94); opacity: .75 } 50% { transform: scale(1.04); opacity: 1 } }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pl-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 91; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), #e8c79f); box-shadow: 0 0 10px var(--accent);
  opacity: 0; transition: width .2s ease, opacity .3s ease .1s;
}
.pl-on .pl-bar { opacity: 1; width: 82%; transition: width .42s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .pl-on .pl-mark { animation: none; }
  .pl-bar { display: none; }
}

/* one left edge for the whole page: logo, occasion band and category row start on the same gutter */
@media (min-width: 901px) {
  .band .row { padding-inline: 0; }
}
.logo { margin-left: 0; }
.logo .wm { display: block; }

/* arrows step aside while a row scrolls */
.row .arrow { transition: opacity .25s ease, transform .3s var(--ease), box-shadow .3s; }
.row.is-scrolling .arrow { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.85); }

/* ── prototype colours that were hard-coded for the light theme ── */
.btn-soft { background: var(--band); color: var(--ink); }
.btn-soft:hover { background: rgba(201, 155, 106, 0.18); color: var(--accent); }
:root[data-theme="light"] .btn-soft:hover { background: #e6dccf; color: var(--ink); }

/* "Доставка сегодня": glass chip with a green status dot */
.today {
  background: rgba(6, 6, 7, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  color: #efe9e1; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(239, 233, 225, 0.14);
  display: inline-flex; align-items: center; gap: 6px;
}
.today::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6fbf8e; box-shadow: 0 0 6px #6fbf8e; }
:root[data-theme="light"] .today { background: rgba(255, 255, 255, 0.8); color: #2f6b4b; box-shadow: inset 0 0 0 1px rgba(47, 107, 75, 0.15); }

.freebar .track { background: rgba(239, 233, 225, 0.12); }
:root[data-theme="light"] .freebar .track { background: rgba(6, 6, 7, 0.08); }
.fld.bad input { background: rgba(154, 75, 78, 0.18); }
.pay label:hover { background: var(--band); }
.stars { color: var(--accent); }
/* image skeleton shimmer: subtle on dark */
.ph.photo::after { background: linear-gradient(100deg, transparent 30%, rgba(239, 233, 225, 0.07) 50%, transparent 70%); background-size: 220% 100%; }
:root[data-theme="light"] .ph.photo::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%); background-size: 220% 100%; }

/* occasion band: no arrows on phones (swipe), keep them on desktop */
@media (max-width: 760px) {
  .band .arrow { display: none; }
}

/* "Купить в 1 клик": light pill with dark text (both themes) */
.btn[data-quickbuy] { background: #efe9e1; color: #060607; font-weight: 600; }
.btn[data-quickbuy]:hover { background: #ffffff; color: #060607; box-shadow: 0 10px 24px -14px rgba(239, 233, 225, 0.6); }
:root[data-theme="light"] .btn[data-quickbuy] { background: #ffffff; color: #060607; box-shadow: inset 0 0 0 1px rgba(91, 68, 50, 0.18); }
:root[data-theme="light"] .btn[data-quickbuy]:hover { background: #f7f3ee; }

/* benefits: 4 even cards — one row on desktop, 2×2 on tablet and phone */
.usp { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .usp { grid-template-columns: 1fr 1fr; }
  .usp div, .usp div:nth-child(n+4), .usp div:last-child { grid-column: auto; }
}

/* "Купить в 1 клик": light gold (lightened guide gold), dark text — 12:1 */
.btn[data-quickbuy] { background: linear-gradient(160deg, #eed6b5, #e6c9a2); color: #060607; }
.btn[data-quickbuy]:hover { background: linear-gradient(160deg, #f3e0c6, #ebd1ad); color: #060607; box-shadow: 0 10px 24px -14px rgba(201, 155, 106, 0.7); }
:root[data-theme="light"] .btn[data-quickbuy] { background: linear-gradient(160deg, #eed6b5, #e6c9a2); box-shadow: none; }
:root[data-theme="light"] .btn[data-quickbuy]:hover { background: linear-gradient(160deg, #e9cda7, #dfbf95); }

/* "Купить в 1 клик": brand gold #C99B6A exactly (guide p.11), dark text 8.1:1 */
.btn[data-quickbuy],
:root[data-theme="light"] .btn[data-quickbuy] { background: #c99b6a; color: #060607; box-shadow: none; }
.btn[data-quickbuy]:hover,
:root[data-theme="light"] .btn[data-quickbuy]:hover { background: #c99b6a; color: #060607; filter: brightness(1.08); box-shadow: 0 10px 24px -14px rgba(201, 155, 106, 0.8); }

/* Telegram button: bigger, and lifted above the floating glass tab bar */
.tg-fab { width: 68px; height: 68px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.tg-fab svg { width: 32px; height: 32px; }
@media (max-width: 760px) {
  .tg-fab { width: 64px; height: 64px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  .tg-fab svg { width: 30px; height: 30px; }
  body.pdp-on .tg-fab { bottom: calc(176px + env(safe-area-inset-bottom, 0px)); }
}

/* add-ons without a photo yet: brand-tinted tile with the gold flower line icon */
.ph:not(.photo) { background: radial-gradient(120% 90% at 30% 20%, #1f1b19, #121011) !important; }
:root[data-theme="light"] .ph:not(.photo) { background: radial-gradient(120% 90% at 30% 20%, #ffffff, #f2ebe2) !important; }

/* ── one-screen checkout ── */
.co1 { max-width: 560px; padding-block: 18px 140px; display: grid; gap: 12px; }
.co1-h { font-size: clamp(26px, 5vw, 34px); font-weight: 600; margin: 0 0 4px; }
.co1-card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 16px; display: grid; gap: 12px; transition: opacity .3s, filter .3s; }
.co1-card.off { opacity: .45; filter: saturate(.6); pointer-events: none; }
.co1-items { display: grid; gap: 10px; }
.co1-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.co1-item img, .co1-ph { width: 52px; height: 65px; object-fit: cover; border-radius: 12px; background: var(--band); }
.co1-item b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.co1-item small { color: var(--mute); }
.co1-sum { display: flex; justify-content: space-between; color: var(--mute); }
.co1-sum.total { color: var(--ink); font-weight: 600; font-size: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.co1-step { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.co1-step i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #c99b6a; color: #060607; }
.co1-geo {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; border-radius: 18px; font-weight: 600; font-size: 16px;
  background: #c99b6a; color: #060607; box-shadow: 0 14px 30px -16px rgba(201, 155, 106, .9); transition: transform .15s, filter .2s;
}
.co1-geo:active { transform: scale(.98); }
.co1-geo svg, .co1-picked svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.co1-geo.busy { filter: saturate(.7); pointer-events: none; }
.co1-geo.busy svg { animation: pl-breathe 1s ease-in-out infinite; }
.co1-picked { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--band); }
.co1-picked svg { color: #c99b6a; }
.co1-picked b { display: block; font-weight: 600; }
.co1-picked small, .co1-note { color: var(--mute); font-size: 13px; }
.co1-alt { display: flex; gap: 16px; flex-wrap: wrap; }
.co1-link { color: var(--link, #c99b6a); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; background: none; padding: 0; justify-self: start; }
:root[data-theme="light"] .co1-link { color: #5b4432; }
.co1-when { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--mute); font-size: 14px; }
.co1-when select { background: var(--band); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; height: 40px; padding: 0 12px; }
.co1 .fld input { width: 100%; height: 54px; font-size: 18px; letter-spacing: .02em; border-radius: 16px; background: var(--band); color: var(--ink); border: 1px solid var(--line); padding: 0 16px; }
.co1-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co1-paybtn { height: 56px; border-radius: 16px; font-weight: 700; font-size: 16px; background: var(--band); color: var(--ink); border: 1px solid var(--line); transition: transform .15s, border-color .2s, background .2s; }
.co1-paybtn:hover { border-color: #c99b6a; }
.co1-paybtn:active { transform: scale(.97); }
.co1-paybtn:disabled { opacity: .5; }

/* overlays: page behind is locked; inner panels scroll without dragging the page */
.scroll-lock, .scroll-lock body { overflow: hidden; }
.drawer, .sheet, .modal-box, .drawer *, .sheet * { overscroll-behavior: contain; }

/* "Купить в 1 клик" back to dark; the cart button next to it is brand gold */
.btn[data-quickbuy],
:root[data-theme="light"] .btn[data-quickbuy] { background: var(--band); color: var(--ink); filter: none; box-shadow: inset 0 0 0 1px var(--line); }
.btn[data-quickbuy]:hover { background: rgba(201, 155, 106, 0.16); color: #c99b6a; filter: none; box-shadow: inset 0 0 0 1px rgba(201, 155, 106, 0.45); }
:root[data-theme="light"] .btn[data-quickbuy] { background: #060607; color: #efe9e1; box-shadow: none; }
:root[data-theme="light"] .btn[data-quickbuy]:hover { background: #2a2522; color: #efe9e1; }
.cart-btn, :root[data-theme="light"] .cart-btn { background: #c99b6a; color: #060607; }
.cart-btn:hover { background: #c99b6a; color: #060607; filter: brightness(1.08); }

/* soft dark fade under the floating tab bar so content does not clash with the glass */
@media (max-width: 760px) {
  body::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; pointer-events: none;
    height: calc(120px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(6, 6, 7, 0.92) 0%, rgba(6, 6, 7, 0.6) 45%, rgba(6, 6, 7, 0) 100%);
  }
  :root[data-theme="light"] body::after {
    background: linear-gradient(to top, rgba(239, 233, 225, 0.95) 0%, rgba(239, 233, 225, 0.6) 45%, rgba(239, 233, 225, 0) 100%);
  }
  .pdp-on body::after, body.pdp-on::after { height: calc(170px + env(safe-area-inset-bottom, 0px)); }
}

/* ═════ mobile home fixes ═════ */
:root {
  --space-section: 20px;   /* band → categories == categories → first panel */
  --tabbar-h: 66px;        /* floating capsule: 48px items + 2×8px padding + border */
  --tabbar-gap: 20px;      /* capsule lifted from the bottom edge */
}

/* 2. category tiles: equal top/bottom padding, caption block of exactly 2 lines, centred */
.cat { padding: 8px; gap: 8px; }
.cat .cl {
  width: 100%; min-height: calc(2 * 1.3em);
  display: flex; align-items: center; justify-content: center;
}
.cat .cl > span {
  min-height: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 3. row arrows: hidden on phones/tablets and on touch devices */
@media (max-width: 900px), (hover: none) {
  .arrow, .band .arrow, .row .arrow { display: none !important; }
}

/* 4. section heads */
.sa-short { display: none; }
@media (max-width: 900px) {
  .sec-head { align-items: center; }
  .sec-head h2 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sec-head .link-u { flex: none; }
  .sa-full { display: none; }
  .sa-short { display: inline; }
}

/* 5. one spacing token between the band, the category row and the first panel */
.cats { padding-block: var(--space-section) 0; }
.cats + .section { padding-top: var(--space-section); }

/* tab bar lifted a bit; fade follows it */
@media (max-width: 760px) {
  .tabbar { bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px)); }
  body::after { height: calc(var(--tabbar-gap) + var(--tabbar-h) + 56px + env(safe-area-inset-bottom, 0px)); }
}

/* 6. Telegram button sits above the tab bar, never on the product page */
@media (max-width: 760px) {
  .tg-fab { bottom: calc(var(--tabbar-gap) + var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
}
body.pdp-on .tg-fab { display: none; }

/* catalog pager */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.pg, .pg-arrow {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 14px; font-weight: 600; font-size: 15px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); transition: background .2s, border-color .2s, transform .15s;
}
.pg:hover, .pg-arrow:hover:not(:disabled) { border-color: #c99b6a; }
.pg:active, .pg-arrow:active { transform: scale(.95); }
.pg.on { background: #c99b6a; color: #060607; border-color: #c99b6a; }
.pg-arrow { font-size: 20px; line-height: 1; }
.pg-arrow:disabled { opacity: .35; }
.pg-gap { color: var(--mute); padding: 0 2px; }
.pg-info { display: block; text-align: center; color: var(--mute); margin-top: 10px; font-size: 13px; }
@media (max-width: 420px) { .pg, .pg-arrow { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; } .pager { gap: 4px; } }

/* bottom fade reaches the very edge: solid up to the middle of the tab bar, then a soft fade */
@media (max-width: 760px) {
  body::after {
    bottom: 0;
    height: calc(var(--tabbar-gap) + var(--tabbar-h) + 72px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
      #060607 0,
      #060607 calc(var(--tabbar-gap) + var(--tabbar-h) / 2 + env(safe-area-inset-bottom, 0px)),
      rgba(6, 6, 7, 0.75) calc(var(--tabbar-gap) + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)),
      rgba(6, 6, 7, 0) 100%);
  }
  :root[data-theme="light"] body::after {
    background: linear-gradient(to top,
      #efe9e1 0,
      #efe9e1 calc(var(--tabbar-gap) + var(--tabbar-h) / 2 + env(safe-area-inset-bottom, 0px)),
      rgba(239, 233, 225, 0.75) calc(var(--tabbar-gap) + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)),
      rgba(239, 233, 225, 0) 100%);
  }
}

/* add-on illustrations: gold line art on a dark glass tile */
.ph.ico {
  aspect-ratio: 1; display: grid; place-items: center; color: #c99b6a;
  background:
    radial-gradient(90% 70% at 30% 15%, rgba(201, 155, 106, 0.18), transparent 60%),
    linear-gradient(160deg, #1f1b19, #0d0b0b) !important;
  box-shadow: inset 0 1px 0 rgba(239, 233, 225, 0.08), inset 0 0 0 1px rgba(201, 155, 106, 0.22);
}
.ph.ico svg { width: 52%; height: 52%; filter: drop-shadow(0 4px 14px rgba(201, 155, 106, 0.35)); transition: transform .5s var(--ease); }
.ao:hover .ph.ico svg, .card:hover .ph.ico svg { transform: scale(1.06) rotate(-2deg); }
:root[data-theme="light"] .ph.ico {
  color: #5b4432;
  background: radial-gradient(90% 70% at 30% 15%, rgba(201, 155, 106, 0.25), transparent 60%), linear-gradient(160deg, #ffffff, #f2ebe2) !important;
  box-shadow: inset 0 0 0 1px rgba(91, 68, 50, 0.15);
}

/* light theme: buttons follow the theme */
:root[data-theme="light"] .btn[data-quickbuy] { background: #ffffff; color: #060607; box-shadow: inset 0 0 0 1px rgba(91, 68, 50, 0.2); }
:root[data-theme="light"] .btn[data-quickbuy]:hover { background: #f7f3ee; color: #060607; box-shadow: inset 0 0 0 1px rgba(201, 155, 106, 0.6); }
/* Telegram button keeps its blue in both themes (white glass made the icon disappear) */
.tg-fab, :root[data-theme="light"] .tg-fab {
  color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.35), transparent 50%), #2aabee;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.tg-fab svg { fill: #fff; }

/* product cards: no "Доставка сегодня" chip */
.card .today { display: none !important; }

/* favourite heart: outline follows the theme, turns red when selected */
.fav svg, :root[data-theme="light"] .fav svg {
  fill: transparent; stroke-width: 1.8; filter: none;
  transition: fill .25s, stroke .25s, transform .25s var(--ease);
}
.fav svg { stroke: #efe9e1; }
:root[data-theme="light"] .fav svg { stroke: #060607; }
.fav.on svg, :root[data-theme="light"] .fav.on svg {
  fill: #e5484d; stroke: #e5484d; filter: drop-shadow(0 2px 8px rgba(229, 72, 77, 0.55));
}
.fav.on { box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.55), 0 8px 20px -10px rgba(229, 72, 77, 0.6); }
.fav:active svg { transform: scale(.85); }

/* Telegram button — blue Liquid Glass (both themes) */
.tg-fab, :root[data-theme="light"] .tg-fab {
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
    linear-gradient(160deg, rgba(64, 190, 250, 0.62), rgba(26, 140, 210, 0.5));
  -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -8px 16px -8px rgba(10, 80, 140, 0.45),
    0 14px 30px -12px rgba(42, 171, 238, 0.75),
    0 2px 8px -2px rgba(0, 0, 0, 0.35);
}
.tg-fab svg { fill: #fff; filter: drop-shadow(0 1px 2px rgba(0, 40, 80, 0.45)); }
.tg-fab::before { background: rgba(42, 171, 238, 0.35); }

/* favourite heart — frosted white glass everywhere (the light-theme look), red when selected */
.fav, :root[data-theme="light"] .fav {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28));
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
.fav svg, :root[data-theme="light"] .fav svg {
  fill: #ffffff; stroke: rgba(6, 6, 7, 0.22); stroke-width: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.fav.on svg, :root[data-theme="light"] .fav.on svg {
  fill: #e5484d; stroke: #e5484d; filter: drop-shadow(0 2px 8px rgba(229, 72, 77, 0.55));
}
.fav.on, :root[data-theme="light"] .fav.on { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 8px 22px -10px rgba(229, 72, 77, 0.7); }

/* favourite heart — glass that follows the theme */
.fav {
  background: linear-gradient(145deg, rgba(40, 36, 34, 0.62), rgba(6, 6, 7, 0.38));
  -webkit-backdrop-filter: blur(12px) saturate(170%); backdrop-filter: blur(12px) saturate(170%);
  border: 1px solid rgba(239, 233, 225, 0.22);
  box-shadow: inset 0 1px 0 rgba(239, 233, 225, 0.22), 0 8px 20px -10px rgba(0, 0, 0, 0.7);
}
.fav svg { fill: rgba(239, 233, 225, 0.95); stroke: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
:root[data-theme="light"] .fav {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 8px 20px -10px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .fav svg { fill: #ffffff; stroke: rgba(6, 6, 7, 0.22); stroke-width: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)); }
.fav.on svg, :root[data-theme="light"] .fav.on svg { fill: #e5484d; stroke: #e5484d; filter: drop-shadow(0 2px 8px rgba(229, 72, 77, 0.55)); }

/* Telegram button — neutral glass that follows the theme (no blue) */
.tg-fab {
  color: #efe9e1;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(239, 233, 225, 0.18), rgba(239, 233, 225, 0) 45%),
    linear-gradient(145deg, rgba(40, 36, 34, 0.66), rgba(6, 6, 7, 0.42));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(239, 233, 225, 0.24);
  box-shadow: inset 0 1px 0 rgba(239, 233, 225, 0.25), 0 14px 30px -12px rgba(0, 0, 0, 0.8);
}
.tg-fab svg { fill: #efe9e1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.tg-fab::before { background: rgba(239, 233, 225, 0.18); }
:root[data-theme="light"] .tg-fab {
  color: #060607;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 50%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 14px 30px -14px rgba(91, 68, 50, 0.5);
}
:root[data-theme="light"] .tg-fab svg { fill: #060607; filter: none; }
:root[data-theme="light"] .tg-fab::before { background: rgba(91, 68, 50, 0.15); }

/* add-on cards: fixed 2-line name block, price + button pinned to the bottom — rows never jump */
.ao { align-self: stretch; }
.ao > .ao-row:first-of-type span,
.ao > span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3; min-height: calc(2 * 1.3em);
}
.ao > .ao-row:first-of-type { align-items: flex-start; }
.ao > .ao-row:last-of-type, .ao > [data-cartaddon] { margin-top: auto; }
.ao-row b { white-space: nowrap; }
.ao-add { transition: background .2s, color .2s, transform .15s; }
.ao-add:active { transform: scale(.9); }

/* tab bar icons a touch larger */
@media (max-width: 760px) {
  .tabbar .tb svg { width: 25px; height: 25px; }
  .tabbar .tb.center svg { width: 28px; height: 28px; }
}

/* ═════ stories ═════ */
.stories { padding-top: 14px; }
.st-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; scroll-snap-type: x proximity; }
.st-row::-webkit-scrollbar { display: none; }
.st-ring { flex: none; width: 74px; display: grid; justify-items: center; gap: 6px; scroll-snap-align: start; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
.st-img {
  width: 70px; height: 70px; border-radius: 50%; padding: 3px; display: block;
  background: conic-gradient(from 210deg, #c99b6a, #f0d7b2, #9a4b4e, #c99b6a);
  transition: transform .2s;
}
.st-ring:active .st-img { transform: scale(.94); }
.st-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); display: block; background: var(--panel); }
.st-ring.seen .st-img { background: color-mix(in srgb, var(--mute) 45%, transparent); }
.st-ring small { font-size: 11px; line-height: 1.2; color: var(--ink); max-width: 74px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ring.seen small { color: var(--mute); }

.st-view {
  position: fixed; inset: 0; z-index: 120; background: #000; display: none;
  transform: translateY(var(--drag, 0px)); transition: transform .25s var(--ease);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.st-view.on { display: block; animation: st-in .28s var(--ease); }
@keyframes st-in { from { opacity: 0; transform: scale(.96); } }
.st-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
@media (min-width: 761px) { .st-video { object-fit: contain; } }
.st-bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; z-index: 3; display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.st-bars i b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.st-bars i.done b { transform: scaleX(1); }
.st-head {
  position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 3;
  display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.st-mark { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #c99b6a;
  background: rgba(6, 6, 7, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .2); }
.st-mark svg { width: 14px; height: 16px; }
.st-title { flex: 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-close { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-size: 16px;
  background: rgba(6, 6, 7, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .2); }
.st-cta {
  position: absolute; left: 16px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  height: 56px; border-radius: 28px; font-weight: 600; font-size: 16px; color: #060607;
  background: radial-gradient(120% 120% at 30% 10%, rgba(255, 255, 255, .5), transparent 50%), #c99b6a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 30px -12px rgba(201, 155, 106, .8);
}
.st-cta:active { transform: scale(.98); }
.st-nav { display: none; }
@media (hover: hover) and (min-width: 761px) {
  .st-nav { display: block; position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%;
    background: rgba(6, 6, 7, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
  .st-nav.prev { left: 24px; } .st-nav.next { right: 24px; }
  .st-nav.prev::after { content: "‹"; font-size: 28px; } .st-nav.next::after { content: "›"; font-size: 28px; }
  .st-cta { left: 50%; right: auto; width: 420px; margin-left: -210px; }
}
.st-view.paused .st-bars, .st-view.paused .st-head, .st-view.paused .st-cta { opacity: .35; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .st-ring, .st-view.on { animation: none; } }

/* stories CTA: white outline + text only */
.st-cta {
  background: rgba(0, 0, 0, 0.12); color: #ffffff; font-weight: 600; letter-spacing: .01em;
  border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* stories row: same soft edge fade and rhythm as the category row */
.stories { padding-block: var(--space-section) 0; }
.st-row {
  --fl: 0px; --fr: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  padding: 4px 4px 10px; margin-inline: -4px;
}
.st-row.mid { --fl: 28px; }
.st-row.end { --fr: 0px; }

/* stories sit a little closer to the header */
.stories { padding-top: 8px; }

/* theme swap happens under the preloader in one frame — no per-element colour transitions */
.theme-swap *, .theme-swap *::before, .theme-swap *::after { transition: none !important; animation-play-state: paused !important; }

/* stories row: no edge fade on the right (and none on the left either) */
.st-row, .st-row.mid, .st-row.end { -webkit-mask-image: none; mask-image: none; }

/* category row: barely-there edge fade (edge stays ~75% visible) */
.cats .scroller, .cats .scroller.mid, .cats .scroller.end, .cats .scroller.nofade {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.75) 0, #000 var(--fl-s, 0px), #000 calc(100% - var(--fr-s, 24px)), rgba(0,0,0,.75) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.75) 0, #000 var(--fl-s, 0px), #000 calc(100% - var(--fr-s, 24px)), rgba(0,0,0,.75) 100%);
}
.cats .scroller.mid { --fl-s: 24px; }
.cats .scroller.end { --fr-s: 0px; }

/* stories labels in capitals, like the occasion chips */
.st-ring small { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 600; }

/* tab bar badges stay inside the capsule */
@media (max-width: 760px) {
  .tabbar .badge { top: 3px; right: 3px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
}
/* story labels: normal sentence case (first letter capital) */
.st-ring small { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; }

/* story captions: the post description, up to two lines */
.st-ring small {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.25em); line-height: 1.25; font-size: 11px; max-width: 76px;
}

/* story captions: one short line */
.st-ring small { -webkit-line-clamp: 1; min-height: 0; white-space: nowrap; display: block; text-overflow: ellipsis; font-size: 11px; }

/* ═════ top blocks: occasion band + typographic category tiles (category-tiles.html) ═════ */
.band { background: none; padding-block: 12px 0; }
.band .scroller { background: #120f0d; border-radius: 18px; padding: 10px; margin: 0; gap: 8px; }
.band .chip { height: auto; font: 500 12px/1 var(--font); letter-spacing: .06em; padding: 12px 16px; }
:root[data-theme="light"] .band .scroller { background: #ffffff; }

.cats .scroller { gap: 10px; scroll-snap-type: x mandatory; padding: 8px 6px 18px; margin: 0 -6px; }
.cats .tile {
  --t1: #1a1512; --t2: #0e0c0a; --acc: #c99b6a; --txt: #efe9e1; --sub: #9b8a78;
  position: relative; flex: none; width: 132px; height: 112px; border-radius: 20px; padding: 14px 14px 12px; scroll-snap-align: start; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; color: var(--txt);
  background: radial-gradient(120% 90% at 0% 0%, var(--t1), var(--t2) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -20px 40px -30px rgba(0, 0, 0, .6);
  transition: transform .35s var(--ease), box-shadow .35s; animation: tile-rise .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
}
.cats .tile:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 34px -18px rgba(216, 176, 111, .45); }
.cats .tile:active { transform: scale(.97); }
.cats .tile:focus-visible { outline: 2px solid #c99b6a; outline-offset: 3px; }
.cats .tile.on { box-shadow: inset 0 0 0 1px #c99b6a; }
@keyframes tile-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.cats .bottom { display: flex; flex-direction: column; }
.cats .ttl { display: flex; flex-direction: column; justify-content: flex-end; min-height: 2.5em; font-weight: 600; font-size: 16px; line-height: 1.22; letter-spacing: -.01em; }
.cats .ttl span { display: block; white-space: nowrap; }
.cats .ttl em { font-style: normal; font-weight: 300; color: var(--acc); }
.cats .meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .08); font: 300 11px/1 var(--font); letter-spacing: .01em; color: var(--sub); white-space: nowrap; }
.cats .go { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: var(--acc); transition: transform .3s var(--ease), background .3s; }
.cats .go svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cats .tile:hover .go { transform: translateX(2px); background: rgba(255, 255, 255, .14); }
@media (min-width: 900px) { .cats .tile { width: 156px; height: 120px; } .cats .ttl { font-size: 17px; } }
:root[data-theme="light"] .cats .tile { --t1: #ffffff; --t2: #f4eee6; --txt: #060607; --sub: #6d6258; --acc: #8a6238;
  box-shadow: inset 0 0 0 1px rgba(91, 68, 50, .12), 0 10px 24px -20px rgba(91, 68, 50, .5); }
@media (prefers-reduced-motion: reduce) { .cats .tile { animation: none; } }

/* desktop: top rows are never cut at the edge */
@media (min-width: 900px) {
  /* stories: one row of whole rings only (the viewer still plays all of them) */
  .st-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0;
    overflow: hidden; row-gap: 0; justify-items: center; }
  .st-ring { width: 80px; }
  /* occasion chips wrap instead of scrolling past the edge */
  .band .scroller { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .band .arrow { display: none !important; }
  /* category tiles share the full width in one row */
  .cats .scroller { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; margin: 0; padding: 8px 0 18px; }
  .cats .tile { width: auto; }
  .cats .arrow { display: none !important; }
}

/* home "Показать ещё" */
.home-more { display: flex; justify-content: center; margin-top: 22px; }
.home-more .btn { min-width: 220px; }
.card.more-in { animation: more-in .6s var(--ease) both; }
@keyframes more-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card.more-in { animation: none; } }

/* desktop: occasion chips in ONE row stretched edge to edge; stories show no peek of a hidden row */
@media (min-width: 900px) {
  .band .scroller { flex-wrap: nowrap; justify-content: space-between; }
  .band .chip { flex: 1 1 auto; padding: 12px 10px; white-space: nowrap; }
  .st-row { padding-bottom: 0; margin-bottom: 10px; }
}

/* equal, smaller gaps between the top blocks: stories → occasions → tiles → first section = 12px each */
:root { --top-gap: 12px; }
.stories { padding-bottom: 0; }
.st-row { margin-bottom: 0; }
.band { padding-block: var(--top-gap) 0; }
.cats { padding-block: calc(var(--top-gap) - 8px) 0; }          /* the tile row has 8px of its own top padding */
.cats .scroller { padding-bottom: 8px; }
.cats + .section { padding-top: calc(var(--top-gap) - 8px); }

/* bigger tile text */
.cats .ttl { font-size: 19px; }
.cats .meta { font-size: 12px; }
.cats .tile { height: 120px; }
@media (min-width: 900px) { .cats .ttl { font-size: 20px; } .cats .tile { height: 128px; } }

/* chips stretch to one row only where they fit; narrower desktops scroll */
@media (min-width: 900px) and (max-width: 1279px) {
  .band .scroller { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .band .chip { flex: none; padding: 12px 16px; }
}

/* stories → occasions gap = 12px on phones too (the row had 10px of bottom padding) */
.st-row { padding-bottom: 0; }

/* tile hover stays inside its own box (no glow spilling onto the next section) */
.cats .tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(201, 155, 106, .45); }
:root[data-theme="light"] .cats .tile:hover { box-shadow: inset 0 0 0 1px rgba(201, 155, 106, .6); }

/* breathing room between the header and the story rings */
.stories { padding-top: 16px; }
.st-row { padding-top: 2px; }

/* order chips → stories → tiles: header→chips 16px, then equal 12px gaps */
.band { padding-top: 16px; }
.stories { padding-top: var(--top-gap); }
.stories + .cats { padding-top: calc(var(--top-gap) - 8px); }

/* order stories → tiles → chips: equal gaps; chips are the last block before the first section */
.stories { padding-top: 16px; }
.stories + .cats { padding-top: calc(var(--top-gap) - 8px); }
.cats + .band { padding-top: calc(var(--top-gap) - 8px); }
.band + .section { padding-top: var(--top-gap); }

/* calm entrance: content fades in place — no sliding of the whole page or sections */
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal { from { opacity: .001; } to { opacity: 1; } }
@keyframes tile-rise { from { opacity: 0; } to { opacity: 1; } }

/* bottom fade: fully solid behind and under the whole tab bar, soft fade only above it */
@media (max-width: 760px) {
  body::after {
    height: calc(var(--tabbar-gap) + var(--tabbar-h) + 64px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
      #060607 0,
      #060607 calc(var(--tabbar-gap) + var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)),
      rgba(6, 6, 7, 0) 100%);
  }
  :root[data-theme="light"] body::after {
    background: linear-gradient(to top,
      #efe9e1 0,
      #efe9e1 calc(var(--tabbar-gap) + var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)),
      rgba(239, 233, 225, 0) 100%);
  }
}

/* no hairline seam at the bottom edge on fractional display scaling (e.g. Windows 125%) */
@media (max-width: 760px) {
  body::after { bottom: -6px; padding-bottom: 6px; box-sizing: content-box; }
}

/* softer bottom fade: solid only under the capsule, translucent behind it, short fade above */
@media (max-width: 760px) {
  body::after {
    height: calc(var(--tabbar-gap) + var(--tabbar-h) + 40px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
      #060607 0,
      #060607 calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px) - 4px),
      rgba(6, 6, 7, .55) calc(var(--tabbar-gap) + var(--tabbar-h) / 2 + env(safe-area-inset-bottom, 0px)),
      rgba(6, 6, 7, 0) 100%);
  }
  :root[data-theme="light"] body::after {
    background: linear-gradient(to top,
      #efe9e1 0,
      #efe9e1 calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px) - 4px),
      rgba(239, 233, 225, .55) calc(var(--tabbar-gap) + var(--tabbar-h) / 2 + env(safe-area-inset-bottom, 0px)),
      rgba(239, 233, 225, 0) 100%);
  }
}

/* phones: the strip behind the occasion chips runs edge to edge, square corners */
@media (max-width: 900px) {
  .band .row { margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gutR)); }
  .band .scroller { border-radius: 0; padding-inline: var(--gut) var(--gutR); scroll-padding-inline: var(--gut); }
}

/* order stories → chips → tiles: equal 12px gaps */
.stories + .band { padding-top: var(--top-gap); }
.band + .cats { padding-top: calc(var(--top-gap) - 8px); }

/* ═════ light theme: clean white + cool light grey (no beige) ═════ */
:root[data-theme="light"] {
  --bg: #ffffff; --panel: #f5f6f8; --band: #f5f6f8; --beige: #f5f6f8;
  --line: #ececf0; --mute: #6f6f78; --ink: #060607;
}
:root[data-theme="light"] body { background: #ffffff; }
:root[data-theme="light"] .band .scroller { background: #f5f6f8; }
:root[data-theme="light"] .band .chip { background: #ffffff; color: #060607; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
:root[data-theme="light"] .band .chip.on { background: #060607; color: #ffffff; }
:root[data-theme="light"] .cats .tile { --t1: #f7f8fa; --t2: #f2f3f6; --txt: #060607; --sub: #6f6f78; --acc: #8a6238;
  background: #f5f6f8; box-shadow: inset 0 0 0 1px #eceef2; }
:root[data-theme="light"] .cats .tile:hover { box-shadow: inset 0 0 0 1px rgba(201, 155, 106, .6); }
:root[data-theme="light"] .cats .go { background: #ffffff; }
:root[data-theme="light"] .panel { background: #f5f6f8; }
:root[data-theme="light"] .card { background: #ffffff; }
:root[data-theme="light"] header.top, :root[data-theme="light"] .announce-bar, :root[data-theme="light"] .ann { background: #ffffff; }
@media (max-width: 760px) {
  :root[data-theme="light"] body::after {
    background: linear-gradient(to top,
      #ffffff 0,
      #ffffff calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px) - 4px),
      rgba(255, 255, 255, .55) calc(var(--tabbar-gap) + var(--tabbar-h) / 2 + env(safe-area-inset-bottom, 0px)),
      rgba(255, 255, 255, 0) 100%);
  }
}

/* light theme: grey chips sitting on white, no strip behind them */
:root[data-theme="light"] .band .scroller { background: transparent; padding-block: 0; }
:root[data-theme="light"] .band .chip { background: #f5f6f8; color: #060607; box-shadow: none; }
:root[data-theme="light"] .band .chip:hover { background: #eceef2; }
:root[data-theme="light"] .band .chip.on { background: #060607; color: #ffffff; }

/* a little more air between the top blocks */
:root { --top-gap: 16px; }
.stories { padding-top: 20px; }

/* dark theme too: no strip behind the chips; chips a step lighter than the page (like the tiles) */
.band .scroller { background: transparent; padding-block: 0; }
.band .chip { background: #1b1714; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.band .chip:hover { background: #241e1a; }
.band .chip.on { background: #c99b6a; color: #060607; }

/* compact category tiles: title only (no counts), arrow in the top-right corner */
.cats .tile { width: 120px; height: 84px; padding: 12px 12px 11px; border-radius: 18px; }
.cats .meta { margin: 0; padding: 0; box-shadow: none; }
.cats .meta > span:first-child { display: none; }
.cats .go { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; }
.cats .ttl { font-size: 17px; min-height: 0; }
@media (min-width: 900px) { .cats .tile { width: auto; height: 92px; } .cats .ttl { font-size: 18px; } }

/* tile arrow: bottom-right corner */
.cats .go { top: auto; bottom: 10px; right: 10px; }
.cats .ttl { padding-right: 26px; }

/* TEMPORARILY OFF: "Добавить к заказу" (product page + cart). Delete this rule to bring it back. */
.panel:has(> .upsell-head), .section:has(> .panel > .upsell-head), .upsell-mini { display: none !important; }

/* product tabs (Описание / Состав / Уход): full width, equal segments */
.tabs { display: flex; width: 100%; }
.tabs button { flex: 1 1 0; text-align: center; justify-content: center; }

/* no empty band above the footer: last block → footer = the usual 16px */
footer { margin-top: var(--top-gap); }
#view .section:last-child, #view > .wrap:last-child, #view > section:last-of-type { padding-bottom: 0; }
#view .pdp ~ .section:last-of-type, #view > .wrap > .section:last-child { padding-bottom: 0; }
#view > section[style*="padding-block"]:last-child { padding-bottom: 0 !important; }
#view .section:has(+ .sticky-buy), #view section:has(+ .sticky-buy) { padding-bottom: 0; }

/* checkout: day + time chips instead of the native select */
.co1-whenbox { display: grid; gap: 10px; }
.co1-sub { color: var(--mute); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.co1-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
.co1-days::-webkit-scrollbar { display: none; }
.co1-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co1-chip {
  height: 44px; padding: 0 14px; border-radius: 14px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--band); color: var(--ink); border: 1px solid var(--line); transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.co1-chip.day { flex: none; min-width: 84px; }
.co1-chip.asap { grid-column: 1 / -1; }
.co1-chip:hover:not(:disabled) { border-color: #c99b6a; }
.co1-chip:active:not(:disabled) { transform: scale(.97); }
.co1-chip.on { background: #c99b6a; border-color: #c99b6a; color: #060607; }
.co1-chip:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
:root[data-theme="light"] .co1-chip { background: #ffffff; border-color: #e6e8ec; }
:root[data-theme="light"] .co1-chip.on { background: #060607; border-color: #060607; color: #ffffff; }

/* no floating Telegram button over the checkout form */
body[data-view="checkout"] .tg-fab { display: none; }

/* ═════ checkout step 1 "Куда доставить" (design: checkout-step.html), theme-aware ═════ */
.ck { max-width: 480px; display: grid; gap: 12px; padding-block: 18px 150px; }
.ck { --ck-card: var(--panel); --ck-soft: var(--band); --ck-line: var(--line); --ck-mute: var(--mute); --ck-ink: var(--ink); --ck-strong: #efe9e1; --ck-strong-ink: #060607; }
:root[data-theme="light"] .ck { --ck-card: #ffffff; --ck-soft: #f5f6f8; --ck-line: #eceef2; --ck-strong: #060607; --ck-strong-ink: #ffffff; }
:root[data-theme="light"] body[data-view="checkout"] { background: #f5f6f8; }
.ck-card { background: var(--ck-card); border-radius: 22px; padding: 18px; }
.ck-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ck-total span { color: var(--ck-mute); font-size: 14px; }
.ck-total small { display: block; color: var(--ck-mute); font-size: 12px; font-weight: 300; margin-top: 2px; }
.ck-total b { font-weight: 600; font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.ck-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ck-step-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ck-num { width: 26px; height: 26px; border-radius: 50%; background: #c99b6a; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.ck-label { font-size: 12px; font-weight: 500; color: var(--ck-mute); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.ck-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ck-m { background: var(--ck-soft); border-radius: 16px; padding: 12px 8px 11px; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: var(--ck-ink); transition: background .25s, color .25s, transform .15s; }
.ck-m svg, .ck-locate svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ck-m svg { color: #c99b6a; }
.ck-m:active { transform: scale(.97); }
.ck-m.on { background: var(--ck-strong); color: var(--ck-strong-ink); }
.ck-m.on svg { color: #c99b6a; }
.ck-pane { margin-top: 12px; display: grid; gap: 10px; animation: ck-drop .35s var(--ease); }
@keyframes ck-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ck-geo { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: var(--ck-soft); border-radius: 16px; padding: 10px; animation: ck-drop .35s var(--ease); }
.ck-geo b { display: block; font-weight: 600; font-size: 14px; }
.ck-geo small { color: var(--ck-mute); font-size: 12.5px; }
.ck-map { width: 56px; height: 56px; border-radius: 12px; position: relative;
  background: linear-gradient(90deg, transparent 47%, rgba(201, 155, 106, .28) 47% 53%, transparent 53%), linear-gradient(0deg, transparent 35%, rgba(201, 155, 106, .28) 35% 41%, transparent 41%), linear-gradient(20deg, transparent 62%, rgba(201, 155, 106, .2) 62% 66%, transparent 66%), var(--ck-card); }
.ck-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #9a4b4e; box-shadow: 0 0 0 5px rgba(154, 75, 78, .22); }
.ck-spin { width: 22px; height: 22px; margin: 0 auto; border-radius: 50%; border: 2px solid #c99b6a; border-right-color: transparent; animation: ck-rot .7s linear infinite; }
@keyframes ck-rot { to { transform: rotate(360deg); } }
.ck-locate { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 16px; background: #c99b6a; color: #060607; font-weight: 600; font-size: 15px; }
.ck-link { color: #c99b6a; font-weight: 500; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; background: none; padding: 0; justify-self: start; }
:root[data-theme="light"] .ck-link { color: #5b4432; text-decoration-color: #c99b6a; }
.ck-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck-f { display: grid; gap: 4px; }
.ck-f.full { grid-column: 1 / -1; }
.ck-f label { font-size: 12px; color: var(--ck-mute); font-weight: 500; }
.ck-f input { height: 46px; border: 0; border-radius: 14px; background: var(--ck-soft); color: var(--ck-ink); padding: 0 14px; width: 100%; font-size: 15px; transition: box-shadow .2s, background .2s; }
.ck-f input:focus { outline: none; box-shadow: 0 0 0 2px #c99b6a; }
#ck-phone { height: 54px; font-size: 18px; letter-spacing: .02em; }
.ck-hint { font-size: 12.5px; color: var(--ck-mute); font-weight: 300; }
.ck-sep { height: 1px; background: var(--ck-line); margin: 18px 0 16px; }
.ck-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--ck-soft); border-radius: 14px; padding: 4px; gap: 4px; }
.ck-seg button { height: 46px; border-radius: 11px; font-size: 14px; font-weight: 500; color: var(--ck-mute); display: grid; align-content: center; line-height: 1.15; transition: background .25s, color .25s, box-shadow .25s; }
.ck-seg button small { display: block; font-size: 11px; font-weight: 300; color: var(--ck-mute); margin-top: 1px; }
.ck-seg button.on { background: var(--ck-card); color: var(--ck-ink); box-shadow: 0 2px 10px -4px rgba(6, 6, 7, .35); }
:root:not([data-theme="light"]) .ck-seg button.on { background: #2a2421; }
.ck-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.ck-days::-webkit-scrollbar { display: none; }
.ck-d { flex: none; width: 62px; height: 56px; border-radius: 14px; background: var(--ck-soft); display: grid; align-content: center; justify-items: center; font-size: 12px; color: var(--ck-mute); transition: background .2s, color .2s; }
.ck-d b { font-size: 15px; font-weight: 600; color: var(--ck-ink); }
.ck-d.on { background: var(--ck-strong); color: color-mix(in srgb, var(--ck-strong-ink) 70%, transparent); }
.ck-d.on b { color: var(--ck-strong-ink); }
.ck-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.ck-s { height: 42px; border-radius: 12px; background: var(--ck-soft); color: var(--ck-ink); font-size: 13.5px; font-weight: 500; transition: background .2s, color .2s; }
.ck-s.on { background: #c99b6a; color: #fff; }
.ck-s:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.ck-cta { height: 54px; border-radius: 999px; background: var(--ck-strong); color: var(--ck-strong-ink); font-weight: 600; font-size: 15px; width: 100%; margin-top: 18px; transition: transform .15s, opacity .2s; }
.ck-cta span { color: #c99b6a; font-weight: 400; }
.ck-cta:active:not(:disabled) { transform: scale(.98); }
.ck-cta:disabled { opacity: .45; cursor: not-allowed; }
.ck-next { display: flex; align-items: center; gap: 10px; }
/* inactive look from colour, not opacity — opacity dropped the title below AA contrast */
.ck-next .ck-step-h h2 { color: var(--ck-mute); font-weight: 500; }
.ck-next .ck-step-h { margin: 0; }
.ck-next .ck-num { background: var(--ck-line); color: var(--ck-mute); }
.ck-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ck-paybtn { height: 56px; border-radius: 16px; font-weight: 700; font-size: 16px; background: var(--ck-soft); color: var(--ck-ink); border: 1px solid var(--ck-line); transition: border-color .2s, transform .15s; }
.ck-paybtn:hover { border-color: #c99b6a; }
.ck-paybtn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .ck-pane, .ck-geo { animation: none; } .ck-spin { animation-duration: 2s; } }

/* cart button next to "Купить в 1 клик": grey until the bouquet is in the cart, then gold */
.cart-btn, :root[data-theme="light"] .cart-btn { background: var(--band); color: var(--ink); filter: none; }
:root[data-theme="light"] .cart-btn { background: #f5f6f8; color: #060607; }
.cart-btn:hover { background: var(--band); color: var(--ink); filter: none; box-shadow: inset 0 0 0 1px #c99b6a; }
.cart-btn.in, .cart-btn.done, :root[data-theme="light"] .cart-btn.in, :root[data-theme="light"] .cart-btn.done { background: #c99b6a; color: #060607; box-shadow: none; }

/* occasion chips: normal letter spacing (no stretched text) */
.band .chip { letter-spacing: .02em; }

/* stories a bit closer to the header */
.stories { padding-top: 12px; }

/* selected category tile looks "pressed", like the active occasion chip */
.cats .tile.on, .cats .tile.on:hover { background: #c99b6a; --txt: #060607; --acc: #3a2a1c; --sub: #3a2a1c; box-shadow: none; transform: none; }
.cats .tile.on .go { background: rgba(6, 6, 7, .14); color: #060607; }
:root[data-theme="light"] .cats .tile.on, :root[data-theme="light"] .cats .tile.on:hover { background: #060607; --txt: #ffffff; --acc: #c99b6a; --sub: #c9c9cf; box-shadow: none; }
:root[data-theme="light"] .cats .tile.on .go { background: rgba(255, 255, 255, .14); color: #c99b6a; }

/* dark theme checkout: selected method tile is dark with a gold edge; primary actions are gold */
:root:not([data-theme="light"]) .ck { --ck-strong: #c99b6a; --ck-strong-ink: #060607; }
:root:not([data-theme="light"]) .ck-m.on { background: #241e1a; color: #efe9e1; box-shadow: inset 0 0 0 1.5px #c99b6a; }
:root:not([data-theme="light"]) .ck-cta span { color: #3a2a1c; }

/* light theme checkout: no black — gold accents only */
:root[data-theme="light"] .ck { --ck-strong: #c99b6a; --ck-strong-ink: #060607; }
:root[data-theme="light"] .ck-m.on { background: rgba(201, 155, 106, .14); color: #060607; box-shadow: inset 0 0 0 1.5px #c99b6a; }
:root[data-theme="light"] .ck-cta span { color: #3a2a1c; }
:root[data-theme="light"] .ck-d.on { color: rgba(6, 6, 7, .7); }

/* ═════ brand dropdowns (replace native <select> UI) ═════ */
.dd { position: relative; display: inline-flex; max-width: 100%; }
.dd > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; width: 100%; }
.dd-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px 0 16px;
  border-radius: 999px; background: var(--band); color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap;
  border: 1px solid var(--line); transition: border-color .2s, background .2s; max-width: 100%;
}
.dd-btn .dd-val { overflow: hidden; text-overflow: ellipsis; }
.dd-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #c99b6a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.dd-btn:hover, .dd-btn.open { border-color: #c99b6a; }
.dd-btn.open svg { transform: rotate(180deg); }
:root[data-theme="light"] .dd-btn { background: #f5f6f8; border-color: #eceef2; }
.dd-pop {
  position: absolute; z-index: 130; padding: 6px; border-radius: 18px; display: grid; gap: 2px; max-height: 60vh; overflow: auto;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 45%), rgba(24, 21, 19, .9);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(201, 155, 106, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -20px rgba(0, 0, 0, .85);
  transform-origin: top center; animation: dd-in .18s var(--ease);
}
.dd-pop.up { transform-origin: bottom center; }
.dd-pop.out { animation: dd-out .14s ease forwards; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
@keyframes dd-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; padding: 0 12px 0 14px; border-radius: 12px;
  color: #efe9e1; font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; background: none;
  animation: dd-opt .22s var(--ease) both; animation-delay: calc(var(--i) * 18ms);
}
@keyframes dd-opt { from { opacity: 0; transform: translateY(-3px); } }
.dd-opt svg { width: 16px; height: 16px; fill: none; stroke: #c99b6a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dd-opt:hover, .dd-opt:focus-visible { background: rgba(201, 155, 106, .12); outline: none; }
.dd-opt.on { color: #c99b6a; }
.dd-opt.on svg { opacity: 1; }
.dd-opt:disabled { opacity: .35; }
:root[data-theme="light"] .dd-pop { background: rgba(255, 255, 255, .92); border-color: #eceef2; box-shadow: 0 24px 50px -22px rgba(16, 24, 40, .35); }
:root[data-theme="light"] .dd-opt { color: #060607; }
:root[data-theme="light"] .dd-opt:hover, :root[data-theme="light"] .dd-opt:focus-visible { background: #f5f6f8; }
:root[data-theme="light"] .dd-opt.on { color: #8a6238; }
@media (prefers-reduced-motion: reduce) { .dd-pop, .dd-opt { animation: none; } }

/* category / occasion chips inside the catalog filters */
.fpick .fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--band); color: var(--ink); border: 1px solid var(--line); transition: background .2s, border-color .2s, color .2s; }
.fchip:hover { border-color: #c99b6a; }
.fchip.on { background: #c99b6a; border-color: #c99b6a; color: #060607; }
:root[data-theme="light"] .fchip { background: #f5f6f8; border-color: #eceef2; }

/* filter checkboxes in brand style */
.fgroup label { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.fgroup input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; border-radius: 7px; margin: 0;
  background: var(--band); border: 1.5px solid var(--line); display: grid; place-items: center; transition: background .2s, border-color .2s;
}
.fgroup input[type="checkbox"]::after { content: ""; width: 10px; height: 6px; border: 2.2px solid #060607; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .18s var(--ease); }
.fgroup input[type="checkbox"]:checked { background: #c99b6a; border-color: #c99b6a; }
.fgroup input[type="checkbox"]:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.fgroup input[type="checkbox"]:focus-visible { outline: 2px solid #c99b6a; outline-offset: 2px; }
:root[data-theme="light"] .fgroup input[type="checkbox"] { background: #f5f6f8; border-color: #dfe2e7; }

/* selected states must win over the light-theme base styles */
.fchip.on, :root[data-theme="light"] .fchip.on { background: #c99b6a; border-color: #c99b6a; color: #060607; }
.fgroup input[type="checkbox"]:checked, :root[data-theme="light"] .fgroup input[type="checkbox"]:checked { background: #c99b6a; border-color: #c99b6a; }

/* ═════ light theme: no black fills/outlines — gold accents instead ═════ */
:root[data-theme="light"] .cats .tile.on, :root[data-theme="light"] .cats .tile.on:hover {
  background: rgba(201, 155, 106, .14); --txt: #060607; --acc: #8a6236; --sub: #6f6f78; box-shadow: inset 0 0 0 1.5px #c99b6a;
}
:root[data-theme="light"] .cats .tile.on .go { background: #ffffff; color: #8a6236; }
:root[data-theme="light"] .band .chip.on, :root[data-theme="light"] .chip.on, :root[data-theme="light"] .chip.g.on {
  background: rgba(201, 155, 106, .16); color: #060607; box-shadow: inset 0 0 0 1.5px #c99b6a;
}
:root[data-theme="light"] .btn-dark, :root[data-theme="light"] #sheetApply { background: #c99b6a; color: #060607; }
:root[data-theme="light"] .btn-dark:hover, :root[data-theme="light"] #sheetApply:hover { background: #c99b6a; filter: brightness(1.06); box-shadow: 0 10px 24px -14px rgba(201, 155, 106, .9); }
:root[data-theme="light"] .tabbar .tb.on { color: #8a6236; background: rgba(201, 155, 106, .14); }

/* ═════ stories: Instagram-like loading ring + zoom from the ring ═════ */
.st-img { position: relative; }
.st-ring.loading .st-img { background: none; }
.st-ring.loading .st-img::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 0deg, #c99b6a 0 12%, transparent 12% 20%, #f0d7b2 20% 32%, transparent 32% 40%, #9a4b4e 40% 52%, transparent 52% 60%, #c99b6a 60% 72%, transparent 72% 80%, #f0d7b2 80% 92%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: st-spin .9s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-ring.loading .st-img img { transform: scale(.94); transition: transform .3s var(--ease); }

.st-view { --ox: 50%; --oy: 50%; --os: .9; transform-origin: var(--ox) var(--oy); }
.st-view.on { animation: st-zoom-in .32s cubic-bezier(.2, .8, .2, 1) both; }
.st-view.on.closing { animation: st-zoom-out .26s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes st-zoom-in { from { opacity: .4; transform: scale(var(--os)); border-radius: 50%; } to { opacity: 1; transform: none; border-radius: 0; } }
@keyframes st-zoom-out { from { opacity: 1; transform: none; border-radius: 0; } to { opacity: 0; transform: scale(var(--os)); border-radius: 50%; } }
.st-view.on, .st-view.on.closing { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .st-ring.loading .st-img::before { animation-duration: 2.5s; }
  .st-view.on, .st-view.on.closing { animation: none; }
}

/* stories loading ring: slower, smoother spin */
.st-ring.loading .st-img::before { animation: st-spin 1.6s cubic-bezier(.45, .05, .55, .95) infinite; }

/* product gallery: frame matches the channel photos (3:4) and shows the whole bouquet — never cropped.
   Odd-ratio photos are contained over a blurred copy of themselves (no empty bars). */
.slides .ph.photo, .thumbs .ph.photo { aspect-ratio: 3 / 4; }
.slides .ph.photo img { object-fit: contain; position: relative; z-index: 1; }
.slides .ph.photo::before {
  content: ""; position: absolute; inset: -20px; z-index: 0;
  background: var(--ph-bg, none) center / cover; filter: blur(24px) brightness(.7); opacity: .9;
}
.thumbs .ph.photo img { object-fit: cover; }

/* Touch targets ≥ 40px on phones without moving anything: padding grows the hit area,
   an equal negative margin keeps the layout where it was. */
.logo { padding-block: 12px; margin-block: -12px; }
.sec-head .link-u { display: inline-block; padding-block: 10px; margin-block: -10px; }
.card-body > a { display: block; padding-block: 12px; margin-block: -12px; position: relative; }
.crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ── company pages (#info?p=…) ── */
.info-panel { max-width: 860px; }
.info-panel h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 10px; }
.info-panel h2 { font-size: 20px; margin: 30px 0 10px; }
.info-panel p, .info-panel li { color: var(--mute); line-height: 1.6; }
.info-panel .info-lead { font-size: 18px; color: var(--ink); margin-bottom: 20px; }
.info-panel ul { padding-left: 1.2em; display: grid; gap: 6px; }
.info-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.info-facts > * { display: grid; gap: 6px; padding: 18px; border-radius: 18px; background: var(--band); color: inherit; text-decoration: none; }
.info-facts b { color: var(--accent); font-weight: 600; }
.info-facts span { color: var(--mute); line-height: 1.5; font-size: 14.5px; }
.info-facts > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.info-steps { list-style: none; counter-reset: st; padding: 0; display: grid; gap: 12px; margin: 16px 0; }
.info-steps li { counter-increment: st; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: start; }
.info-steps li::before { content: counter(st); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--band); color: var(--accent); font-weight: 600; }
.info-steps b { color: var(--ink); font-weight: 600; }
.info-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.info-slots span { padding: 9px 14px; border-radius: 999px; background: var(--band); font-variant-numeric: tabular-nums; }
.info-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.info .faq { margin-top: 10px; }
:root[data-theme="light"] .info-facts > *, :root[data-theme="light"] .info-slots span, :root[data-theme="light"] .info-steps li::before { background: #ffffff; box-shadow: 0 1px 0 #e6e8ec; }
.socials a { width: 44px; height: 44px; background: var(--bg); border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; }
.socials { display: flex; gap: 8px; }
.socials a svg { width: 20px; height: 20px; fill: currentColor; }

/* Reel products: the video fills a 9:16 frame — no letterbox, no blurred backdrop */
.slides.reel .ph, .thumbs.reel .ph { aspect-ratio: 9 / 16; }
.slides.reel .ph::before { content: none; }
.slides.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .slides.reel { width: min(100%, calc(80vh * 9 / 16)); justify-self: center; margin-inline: auto; } .slides.reel .ph { flex: 0 0 100%; } }

/* iOS 26 Safari tints the area behind its floating bottom toolbar from a real fixed element touching
   the bottom edge (pseudo-elements are ignored) and does not paint fixed content under that toolbar.
   This strip (added by brand.js) sits just below the edge, invisible, so Safari fills its toolbar
   area with the page colour and the fade behind the tab bar runs to the very bottom of the screen. */
.edge-tint {
  position: fixed; left: 0; right: 0; bottom: -8px; height: 12px; z-index: 1;
  background-color: #060607; pointer-events: none;
}
:root[data-theme="light"] .edge-tint { background-color: #ffffff; }
@media (min-width: 761px) { .edge-tint { display: none; } }
/* in a browser the fade must not hang below the viewport: Safari drops fixed content under its toolbar */
@media (max-width: 760px) { :root:not(.in-tg) body::after { bottom: 0; padding-bottom: 0; } }

/* phone browsers: the page scrolls inside body (see brand.js), the document stays put under Safari's toolbar */
html.inner-scroll { height: 100%; overflow: hidden; }
html.inner-scroll body { height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth; }
/* Safari colours its own bars from the root: give html the theme colour, never transparent
   (transparent fell back to black on a dark-mode phone and showed as a dark strip in the light theme) */
html { background-color: #060607; }
:root[data-theme="light"] { background-color: #ffffff; }

/* phone browsers: Safari cuts everything below the viewport edge, 20px under the capsule.
   The capsule's haze is kept but made compact (reaches ~18px down) so it fades out before that edge, never cut. */
@media (max-width: 760px) {
  html.inner-scroll .tabbar, html.inner-scroll .tabbar .tb.center {
    box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 0 0 18px -6px var(--glass-rim-soft),
      0 8px 18px -8px rgba(0, 0, 0, 0.85), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  }
  :root[data-theme="light"].inner-scroll .tabbar, :root[data-theme="light"].inner-scroll .tabbar .tb.center {
    box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 0 0 18px -6px var(--glass-rim-soft),
      0 8px 18px -8px rgba(91, 68, 50, 0.45), 0 2px 8px -3px rgba(91, 68, 50, 0.2);
  }
}

/* light theme: a softer, longer bottom fade (eased stops instead of a straight ramp) */
@media (max-width: 760px) {
  :root[data-theme="light"] body::after {
    height: calc(var(--tabbar-gap) + var(--tabbar-h) + 72px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top,
      #ffffff 0,
      #ffffff calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px) - 4px),
      rgba(255, 255, 255, .8) calc(var(--tabbar-gap) + var(--tabbar-h) / 2 + env(safe-area-inset-bottom, 0px)),
      rgba(255, 255, 255, .5) calc(var(--tabbar-gap) + var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)),
      rgba(255, 255, 255, .22) calc(var(--tabbar-gap) + var(--tabbar-h) + 36px + env(safe-area-inset-bottom, 0px)),
      rgba(255, 255, 255, .06) calc(var(--tabbar-gap) + var(--tabbar-h) + 58px + env(safe-area-inset-bottom, 0px)),
      rgba(255, 255, 255, 0) 100%);
  }
}

/* ═════ home: promo banners (banners.js; design: Downloads/banner-reference.zip) ═════ */
.banners { padding-top: 14px; }
.bn { position: relative; border-radius: 28px; overflow: hidden; background: #2a2320; isolation: isolate; }
.bn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.bn-track::-webkit-scrollbar { display: none; }
.bn-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 400px; color: #fff; overflow: hidden; text-decoration: none; }
.bn-bg { position: absolute; inset: 0; }
.bn-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; transform: scale(1.05); transition: transform 7s ease; }
.bn-slide.on .bn-bg img { transform: scale(1); }
.bn-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.32) 38%, rgba(6,6,7,.06) 70%, rgba(6,6,7,0) 100%); }
.bn-txt { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 0 30px 56px; max-width: 560px; text-shadow: 0 1px 18px rgba(6,6,7,.25); }
.bn-lbl { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #efe9e1; opacity: .9; }
.bn-big { font-weight: 300; letter-spacing: -.05em; line-height: .85; margin: 6px 0 2px; font-size: clamp(72px, 8vw, 112px); }
.bn-big.long { font-size: clamp(48px, 5vw, 72px); letter-spacing: -.04em; white-space: nowrap; }
.bn-big span { color: #c99b6a; }
.bn-txt h2 { margin: 0; color: #fff; font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.bn-txt p { margin: 0; color: #efe9e1; opacity: .85; font-size: 15px; font-weight: 300; max-width: 34ch; }
.bn-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 7px 0 22px; margin-top: 16px;
  border-radius: 999px; background: #fff; color: #060607; font: 600 15px var(--font); text-shadow: none; transition: transform .15s, background .25s; }
.bn-slide:hover .bn-btn { background: #efe9e1; }
.bn-slide:active .bn-btn { transform: scale(.97); }
.bn-btn i { width: 36px; height: 36px; border-radius: 50%; background: #060607; color: #c99b6a; display: grid; place-items: center; transition: transform .3s var(--ease); }
.bn-slide:hover .bn-btn i { transform: translateX(3px); }
.bn-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-dots { position: absolute; left: 56px; bottom: 28px; z-index: 2; display: flex; gap: 6px; }
.bn-dot { width: 26px; height: 3px; border-radius: 2px; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; position: relative; overflow: hidden; }
.bn-dot::before { content: ""; position: absolute; inset: -10px -2px; }
.bn-dot.on::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: bn-fill var(--dur, 6s) linear forwards; }
.bn.paused .bn-dot.on::after { animation-play-state: paused; }
@keyframes bn-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bn-arrows { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; gap: 8px; }
.bn-arr { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: background .25s, transform .15s; }
.bn-arr:hover { background: rgba(255,255,255,.3); }
.bn-arr:active { transform: scale(.94); }
.bn-arr svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bn-one .bn-dots, .bn-one .bn-arrows { display: none; }
@media (max-width: 760px) {
  .bn { border-radius: 20px; }
  .bn-slide { height: auto; aspect-ratio: 16 / 9; min-height: 190px; }
  .bn-shade { background: linear-gradient(90deg, rgba(6,6,7,.6) 0%, rgba(6,6,7,.3) 55%, rgba(6,6,7,.05) 100%); }
  .bn-txt { padding: 0 0 0 18px; gap: 3px; max-width: 76%; }
  .bn-lbl { font-size: 10px; letter-spacing: .12em; }
  .bn-big { font-size: 46px; margin: 2px 0 0; }
  .bn-big.long { font-size: 34px; }
  .bn-txt h2 { font-size: 15px; }
  .bn-txt p { display: none; }
  .bn-btn { height: 34px; padding: 0 4px 0 13px; margin-top: 9px; font-size: 12.5px; gap: 8px; }
  .bn-btn i { width: 26px; height: 26px; }
  .bn-btn svg { width: 12px; height: 12px; }
  .bn-dots { left: auto; right: 14px; bottom: 14px; }
  .bn-dot { width: 16px; }
  .bn-arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-bg img { transition: none; transform: none; }
  .bn-dot.on::after { animation: none; transform: none; }
}
/* dark theme: a light gold rim around the banner (on top of the photos) */
.bn::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(201, 155, 106, .28), inset 0 1px 0 rgba(255, 255, 255, .06); }
:root[data-theme="light"] .bn::after { content: none; }

/* footer: payment logos on neutral chips — brand colours untouched (pay/SOURCES.md); Click is made for dark */
/* one size for every chip (owner 2026-11-09: «размеры визуально унифицируй»): same box, logo fitted inside */
.payicons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.payicons .pay { display: grid; place-items: center; width: 72px; height: 36px; padding: 8px 10px; border-radius: 8px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(6, 6, 7, .08); }
.payicons .pay img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
/* 2026-11-10 «логотипы съехали»: the chip row was sized by the image (HUMO 52×31, Mastercard 52×40, out of the chip);
   a fixed track makes height: 100% real — every logo fits the same 52×20 box */
.payicons .pay { grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; }
/* the floating Telegram button sits over the bottom-right corner — keep the last chip clear of it */
@media (min-width: 901px) { .f-bottom { padding-right: 88px; } }
.payicons .pay-click { background: #060607; box-shadow: inset 0 0 0 1px rgba(239, 233, 225, .16); }

/* header: currency button «UZS / USD» (currency.js) — a .circle like the theme and search buttons, text instead of an icon */
.cur-btn { font-size: 15px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cur-btn[hidden] { display: none !important; }

/* checkout → "Ввести адрес": Yandex map (address-map.js) */
.ck-mapbox { position: relative; height: 240px; margin-top: 12px; border-radius: 16px; overflow: hidden;
  background: var(--ck-soft); border: 1px solid var(--ck-line); }
.ck-mapbox:not(.ready)::before { content: "Загружаем карту…"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--ck-mute); font-size: 13px; }
.ck-mapbox.failed::before { content: "Карта недоступна — введите адрес текстом"; }
.ck-ymap { position: absolute; inset: 0; }
@media (max-width: 760px) { .ck-mapbox { height: 220px; } }
/* phones: the currency button joined the header (2026-11-10) — logo, «сум/$», theme, search and «Войти» must fit 360–390px */
@media (max-width: 420px) {
  .hdr .logo .wm { width: 124px; }
  .hdr .icons { gap: 0; }
  .hdr .icons .circle { width: 40px; }
}
/* «Привезём на Mercedes Vito» block: a landscape car photo in a square-ish frame — keep the front with the star in view */
.pband .ph img[src*="vito-card"] { object-position: 82% 62%; }
/* product page, tab «Состав»: what the photo shows (product-seo.js) */
.feat { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0 0 12px; }
.feat dt { color: var(--mute); }
.feat dd { margin: 0; }
.photo-desc { margin-top: 8px; }