/* redesign 06.11 (branch redesign-1106): dark slate, cream type, sausage-red accent, condensed old-style serif. Older device notes (C1-C7) below describe the structure, not the colours */
/* fonts (speed 05.11, display face swapped 06.11): self-hosted, no Google Fonts request (19-TECH T-PERF-04/05). Golos Text = ONE variable woff2 (weights 400-700),
   Roboto Serif = ONE static instance (wdth 60, opsz 96, wght 640: a condensed old-style serif, ref #1 Croghan); both subset to the characters the site uses (Latin, Cyrillic incl. UA, Turkish letters, ₺ №).
   Source: google/fonts ofl/ (OFL 1.1, licence files next to the fonts); rebuilt by prospects/ukr-product-alanya/tools/prerender/build-fonts.sh (outside this public repo) */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/golos-text-var.woff2") format("woff2"); }
@font-face { font-family: "Roboto Serif Cond"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-serif-cond-640.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  /* redesign 06.11 (refs #10 Rustic Ridge, #7 King River, #1 Croghan, #8 Hozon): dark slate + warm cream type + ONE accent.
     CEO TG 1849: the accent is CARAMEL sampled from her own photos (grilled sardelki skin, img/sardelky-hryl.jpg) - matte, flat, never a
     gradient or a metallic sheen (the old gold was a desaturated tan #c9a86a; this is a saturated food caramel). Sausage red is kept as the
     override file assets/accents/accent-red.css. --acc = caramel as ink on the slate (8.1 / 7.4 / 6.5 on bg / card / card-2);
     --acc-fill = caramel as a fill with DARK ink on it (5.3; cream on caramel fails at 3.0, so text on it is always dark) */
  --bg: #161615;
  --card: #1f1f1d;
  --card-2: #292927;
  --line: #34342f;
  --hair: rgba(240, 232, 216, 0.14);
  --acc: #e2a05f;
  --acc-2: #ebb47c;
  --acc-fill: #c47a2c;
  --acc-fill-2: #d08a3e;
  --on-acc: #161615;
  --ink: #f0e8d8;
  --ink-2: #c4bcad;
  --ink-3: #9a9285;
  --danger: #f0a090;
  --ok: #9cc28a;
  --r: 10px;       /* radius scale (W-LOOK-04; CEO 06.11: slightly rounded, never pills): --r controls, --r-md inner panels, --r-lg cards, --r-xl sheets */
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 10px;  /* kept as a name for old rules; it is NOT a pill any more. Round dots use 50 % explicitly */
  --font: "Golos Text", "Helvetica Neue", Arial, sans-serif;
  --display: "Roboto Serif Cond", Georgia, "Times New Roman", serif;
  --header: 60px;
}
/* The variant IS black (device C1). Light mode keeps the same tokens on purpose; every pair is >= 4.5:1. */
@media (prefers-color-scheme: light) { :root { color-scheme: dark; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--header) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  font-variant-numeric: lining-nums tabular-nums;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--acc); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--acc-2); }
::selection { background: var(--acc); color: var(--on-acc); }
:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
input, textarea, select { font: inherit; color: var(--ink); }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.ico { width: 14px; height: 14px; stroke: var(--acc); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--r); border: 1px solid var(--acc);
  background: transparent; color: var(--acc); font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.3s var(--spring); white-space: nowrap;
}
.btn:hover { background: rgba(240, 232, 216, 0.12); color: var(--acc-2); }
.btn:active { transform: scale(0.95); }
.btn.fill { background: var(--acc); color: var(--on-acc); }
.btn.fill:hover { background: var(--acc-2); color: var(--on-acc); }
.btn.wide { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.55; cursor: not-allowed; border-color: var(--ink-3); color: var(--ink-2); background: transparent; transform: none; }

/* header (device C7: small gold mark left, cart right) */
.hdr {
  position: sticky; top: 0; z-index: 30; height: var(--header);
  background: rgba(22, 22, 21, 0.94); border-bottom: 1px solid var(--line);
}
.hdr .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.mark { width: 34px; height: 34px; flex: 0 0 auto; color: var(--acc-fill); } /* «Вузлик» 08.11: caramel mark on graphite, as in the brand book */
.brand b { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.brand small { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small em { color: var(--acc); font-style: normal; }
.cartbtn { min-height: 44px; padding: 0 12px; gap: 8px; }
.cartbtn .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-md); background: var(--acc); color: var(--on-acc); font-size: 12px; font-weight: 700; }
.cartbtn .n:empty { display: none; }
.cartbtn .sum:empty { display: none; }

/* hero (device C2: full-width top-view flat-lay, headline on the dark cloth left) */
.hero { position: relative; background: var(--bg); overflow: hidden; }
.hero-photo { position: relative; height: clamp(280px, 44vh, 400px); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 22, 21, 0) 55%, rgba(22, 22, 21, 0.6) 82%, var(--bg) 100%); }
.hero-text {
  position: relative; padding: 8px 0 36px;
  background: var(--bg);   /* W-LOOK-03 06.11: the diagonal line pattern is gone, flat black */
}
.hero h1 {
  font-family: var(--display); font-weight: 700; color: var(--acc);
  font-size: clamp(32px, 8.5vw, 46px); line-height: 1.08; letter-spacing: -0.005em; margin: 0 0 14px; text-wrap: balance;
}
.hero p { margin: 0 0 22px; color: var(--ink-2); font-size: 17px; max-width: 34ch; }
.hero p b { color: var(--ink); font-weight: 400; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 42% 58%; grid-template-rows: minmax(0, 1fr); min-height: 560px; max-height: 720px; height: 76vh; }
  .hero-photo { order: 2; height: auto; min-height: 0; }
  /* absolute so the portrait photo's intrinsic height never stretches the grid row */
  .hero-photo img { position: absolute; inset: 0; object-position: 50% 45%; }
  .hero-photo::after { background: linear-gradient(90deg, var(--bg) 0, rgba(22, 22, 21, 0.55) 10%, rgba(22, 22, 21, 0) 32%); }
  .hero-text { order: 1; display: flex; align-items: center; padding: 48px 0 48px 0; }
  .hero-text .wrap { width: auto; margin: 0; padding-left: max(16px, calc((100vw - 1180px) / 2)); padding-right: 32px; }
  .hero h1 { font-size: clamp(44px, 4.2vw, 60px); }
}

/* section title + hairline (device C4) */
.sec { padding: 44px 0 10px; }
.sec h2 {
  font-family: var(--display); font-weight: 700; color: var(--acc); font-size: clamp(26px, 5.5vw, 34px);
  line-height: 1.15; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--hair); letter-spacing: 0.005em;
}
.sec h2 small { display: block; font-family: var(--font); font-weight: 400; font-size: 14px; color: var(--ink-2); margin-top: 4px; letter-spacing: 0; }

/* how to order: three sentences in one row, hairline-separated */
.how { display: grid; gap: 14px; padding: 18px 0 6px; }
.how div { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15px; }
.how .ico { width: 22px; height: 22px; margin-top: 2px; }
.how b { color: var(--ink); font-weight: 700; }
@media (min-width: 720px) {
  .how { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .how div { flex-direction: column; gap: 10px; }
  .how div + div { border-left: 1px solid var(--line); padding-left: 24px; }
}

/* category chips */
.chips-wrap { position: sticky; top: var(--header); z-index: 20; background: var(--bg); padding: 10px 0; margin-top: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2); font-weight: 400; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { border-color: var(--hair); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); font-weight: 700; }

/* catalog cards (device C5: dark rectangular photo cards; C6: tiny gold line icon in the price row) */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 8px 0 24px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; }
.card figure { margin: 0; aspect-ratio: 4 / 3; background: var(--card-2); position: relative; }
.card figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card.off figure img { filter: saturate(0.5) brightness(0.75); }
.card .body { padding: 10px 10px 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h3 { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.card .desc { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .price { display: flex; align-items: center; gap: 6px; color: var(--acc); font-weight: 700; font-size: 14.5px; margin-top: 2px; }
.card .off-note { color: var(--ink-2); font-size: 12px; margin: 0; }
.card .off-note b { color: var(--acc); font-weight: 400; }
.wchips { display: flex; gap: 4px; margin-top: auto; }
.wchip {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 2px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--card-2); color: var(--ink-2); font-size: 12.5px; font-weight: 400; cursor: pointer; white-space: nowrap;
}
.wchip[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); background: rgba(240, 232, 216, 0.1); }
.counter { display: flex; align-items: stretch; gap: 4px; margin-top: auto; }
.counter button { width: 44px; min-height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card-2); color: var(--acc); font-size: 20px; cursor: pointer; }
.counter output { flex: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); font-weight: 700; }
.card .add { margin-top: 2px; min-height: 44px; padding: 0 8px; font-size: 14px; }
.card .add.done { background: var(--acc); color: var(--on-acc); }
@media (min-width: 640px) { .card .body { padding: 12px 12px 12px; gap: 7px; } .card h3 { font-size: 15.5px; } .card .desc { font-size: 13px; } .wchip { font-size: 13px; } }


/* delivery: split photo + list (used once) */
.split { display: grid; gap: 20px; padding: 22px 0 10px; }
.split figure { margin: 0; aspect-ratio: 4 / 3; position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.split figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 15.5px; }
.steps .ico { width: 22px; height: 22px; margin-top: 2px; }
.steps b { display: block; color: var(--ink); font-weight: 700; }
@media (min-width: 820px) { .split { grid-template-columns: 5fr 6fr; align-items: center; gap: 44px; } }

/* FAQ */
.faq { padding: 8px 0 10px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0; font-weight: 700; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acc); font-size: 22px; font-weight: 400; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 14px; color: var(--ink-2); max-width: 70ch; }

/* footer */
.ftr { margin-top: 36px; border-top: 1px solid var(--hair); padding: 30px 0 110px; }
.ftr .top { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; justify-content: space-between; }
.ftr .brand b { font-size: 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr li { color: var(--ink-2); font-size: 15px; }
.ftr a { font-weight: 400; }
.ftr .note { margin: 24px 0 0; color: var(--ink-3); font-size: 13px; max-width: 80ch; line-height: 1.5; }
.ftr .legal { margin-top: 10px; color: var(--ink-3); font-size: 13px; }
.ftr .owner { margin-top: 22px; }
.ftr .owner a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
@media (min-width: 720px) { .ftr { padding-bottom: 60px; } }

/* sticky cart bar (mobile; hidden when the sheet is open) */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(22, 22, 21, 0.96); border-top: 1px solid var(--hair); transform: translateY(110%); transition: transform 0.35s var(--spring);
}
.bar.on { transform: none; }
.bar .btn { width: 100%; justify-content: space-between; min-height: 50px; padding: 0 16px; }
.bar .btn span:last-child { font-weight: 700; }
@media (min-width: 720px) { .bar { display: none; } }

/* cart popup (CEO 11.10): centred on every screen, a calm card over a dim page; one step at a time */
[hidden] { display: none !important; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.74); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 41; inset: 0; margin: auto; display: flex; flex-direction: column;
  width: min(460px, calc(100% - 24px)); height: fit-content; max-height: calc(100dvh - 24px);
  background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98);
  transition: opacity 0.2s ease-out, transform 0.35s var(--spring), visibility 0s linear 0.35s; overflow: hidden;
}
.sheet.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease-out, transform 0.35s var(--spring), visibility 0s; }
.sheet .head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 16px 12px 20px; }
.sheet .head .ttl { min-width: 0; padding-top: 2px; }
.sheet .head h2 { margin: 0; font-family: var(--display); color: var(--acc); font-size: 24px; font-weight: 700; outline: none; }
.wz-meta { margin: 0 0 4px; font-size: 13px; color: var(--ink-3); letter-spacing: 0.02em; }
.wz-prog { height: 2px; margin: 0 20px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.wz-prog i { display: block; height: 100%; width: 0; background: var(--acc); transition: width 0.25s ease; }
.xbtn { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.sheet .xbtn { border-color: transparent; color: var(--ink-2); margin: -6px -8px 0 0; }
.sheet .xbtn:hover { color: var(--ink); border-color: var(--line); }
.sheet .scroll { overflow-y: auto; padding: 8px 20px 20px; flex: 1; }
.sheet .foot:empty { display: none; }
.sheet .foot { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.sheet .foot .tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sheet .foot .tot b { font-size: 20px; color: var(--acc); }
.sheet .foot .err { color: var(--danger); font-size: 14px; margin: 8px 0 0; min-height: 1em; }
.sheet .foot .err:empty { margin: 0; min-height: 0; }
/* the order steps keep one height, so the button never jumps between steps */
.sheet.wz-on { height: min(680px, calc(100dvh - 24px)); }
@media (min-width: 720px) {
  .sheet { max-height: calc(100dvh - 48px); }
  /* desktop: no thumb to keep in place - the card hugs its step, with a floor so short steps do not shrink to a strip */
  .sheet.wz-on { height: fit-content; min-height: min(520px, calc(100dvh - 48px)); }
}
/* wizard: the footer row = "Назад" (quiet text) + one primary button */
.wz-foot { display: flex; align-items: center; gap: 8px; }
.wz-foot .btn { flex: 1 1 auto; min-height: 52px; font-size: 16px; justify-content: space-between; gap: 10px; padding: 0 16px; white-space: normal; text-align: left; line-height: 1.2; }
.wz-foot .btn .sum { font-weight: 700; white-space: nowrap; }
.wz-foot .btn[disabled] { justify-content: center; text-align: center; }
.wz-back { display: inline-flex; align-items: center; gap: 6px; min-height: 50px; min-width: 48px; padding: 0 14px 0 4px; background: none; border: 0; color: var(--ink-2); cursor: pointer; font-size: 15px; }
.wz-back span:first-child { font-size: 22px; line-height: 1; color: var(--acc); }
.wz-back:hover { color: var(--ink); }
.wz { animation: wz-in 0.3s var(--spring) both; }
.wz.wz-still { animation: none; }   /* CEO 07.11 TG 2110: a redraw of the same step never replays the slide-in (it read as a blink) */
@keyframes wz-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz { animation: none; } .sheet, .sheet.on { transition: none; } }
/* big options (delivery, payment): one row = one tap target */
.opts { display: grid; gap: 10px; padding-top: 6px; }
.opt { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; width: 100%; min-height: 72px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.opt:hover { border-color: var(--hair); }
.opt[aria-checked="true"] { border-color: var(--acc); background: rgba(240, 232, 216, 0.08); }
.opt-ico .ico { width: 24px; height: 24px; stroke: var(--ink-3); }
.opt[aria-checked="true"] .opt-ico .ico { stroke: var(--acc); }
.opt-txt { display: grid; gap: 3px; min-width: 0; }
.opt-txt b { font-weight: 700; font-size: 16px; line-height: 1.3; }
.opt-txt small { color: var(--ink-2); font-size: 13.5px; line-height: 1.35; }
.opt-txt small.opt-note { color: var(--ink-3); }
.opt-pr { color: var(--acc); font-weight: 700; font-size: 15px; white-space: nowrap; }
.opt-pr.free { color: var(--ok); }
/* check screen: plain blocks split by hairlines, each with its own "Изменить" */
.rv-blk { padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv-blk:first-child { padding-top: 4px; }
.rv-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-h h3 { margin: 0; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.rv-edit { min-height: 44px; padding: 0 2px 0 12px; margin: -10px 0; background: none; border: 0; color: var(--acc); cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rv-rows { display: grid; gap: 4px; margin-top: 6px; }
.rv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; margin-top: 6px; }
.rv-rows .rv-row { margin-top: 0; }
.rv-row span:last-child { white-space: nowrap; flex: 0 0 auto; color: var(--ink-2); }
.rv-row span.free { color: var(--ok); }
.rv-p { margin: 6px 0 0; font-size: 15px; }
.rv-p.sub { margin-top: 2px; color: var(--ink-2); font-size: 13.5px; }
.wz-where .hint { margin: 10px 0 0; font-size: 13.5px; }
.wz-when .f.when { margin-top: 6px; }
.wz-when .row.days .chip.day { min-height: 60px; }
.wz-when .row.wins .chip.win { min-height: 52px; }
.wz-contact .f:first-child { margin-top: 4px; }
.f input[aria-invalid="true"] { border-color: var(--danger); }
.line { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line .nm { font-weight: 700; font-size: 15px; }
.line .sum { color: var(--acc); font-weight: 700; text-align: right; }
.line .step { justify-self: start; display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.line .step button { width: 44px; min-height: 44px; border: 0; background: var(--card-2); color: var(--acc); font-size: 18px; cursor: pointer; }
.line .step output { display: grid; place-items: center; min-width: 72px; padding: 0 6px; font-size: 14px; font-weight: 400; }
.line .rm { grid-column: 2; justify-self: end; background: none; border: 0; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; padding: 0 4px; font-size: 13px; }
.line .rm:hover { color: var(--ink); }
.empty { color: var(--ink-2); padding: 28px 0; text-align: center; }
.tots { padding: 12px 0 4px; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.tots div { display: flex; justify-content: space-between; }
.tots .grand { color: var(--ink); font-weight: 700; font-size: 17px; padding-top: 6px; border-top: 1px solid var(--line); }
.tots .free { color: var(--ok); }
.minnote { color: var(--danger); font-size: 14px; margin: 6px 0 0; }

/* checkout form */
.form h3 { font-family: var(--display); color: var(--acc); font-weight: 700; font-size: 22px; margin: 22px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.f { display: grid; gap: 6px; margin-top: 14px; }
.f label, .f .lbl { font-size: 13.5px; color: var(--ink-2); font-weight: 400; }
.f input[type="text"], .f input[type="tel"], .f textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.f input:focus, .f textarea:focus { border-color: var(--acc); outline: none; }
.f textarea { min-height: 72px; resize: vertical; }
.f .row { display: flex; gap: 8px; flex-wrap: wrap; }
.f .chip { flex: 1 1 auto; text-align: center; }
/* v5 time windows: day chips (name + date) and window chips */
.f.when .row + .row { margin-top: 8px; }
.f .chip.day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 12px; flex: 1 1 0; }
.f .chip.day b { font-weight: inherit; }
.f .chip.day small { font-size: 12px; opacity: 0.8; }
.f .chip.win { flex: 1 1 0; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 4px; font-size: 15px; letter-spacing: -0.01em; }
.f .chip:disabled { opacity: 0.45; cursor: not-allowed; }
.f .chip:disabled:hover { border-color: var(--line); color: var(--ink-2); }
.radios { display: grid; gap: 8px; }
.radio { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); cursor: pointer; min-height: 52px; }
.radio:has(input:checked) { border-color: var(--acc); background: rgba(240, 232, 216, 0.08); }
.radio input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--ink-3); border-radius: var(--r-pill); display: grid; place-items: center; }
.radio input:checked { border-color: var(--acc); }
.radio input:checked::after { content: ""; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--acc); }
.radio b { display: block; font-weight: 700; font-size: 14.5px; }
.radio small { display: flex; gap: 5px; align-items: center; color: var(--ink-2); font-size: 12.5px; }
.radio .pr { color: var(--acc); font-weight: 700; font-size: 14px; white-space: nowrap; }
.radio .pr.free { color: var(--ok); }
.radio .note { grid-column: 2 / 4; color: var(--ink-2); font-size: 12.5px; }

/* calendar picker (never typed) */
.datebtn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; text-align: left; }
.datebtn .ph { color: var(--ink-3); }
.cal { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); padding: 10px; margin-top: 6px; }
.cal[hidden] { display: none; }
.cal .nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal .nav b { font-weight: 700; text-transform: capitalize; }
.cal .nav button { width: 44px; height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--acc); font-size: 18px; cursor: pointer; }
.cal .dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.cal .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal .days button { aspect-ratio: 1; min-height: 40px; border: 1px solid transparent; border-radius: var(--r); background: var(--card); color: var(--ink); cursor: pointer; font-size: 14px; }
.cal .days button:hover { border-color: var(--hair); }
.cal .days button[disabled] { color: var(--ink-3); opacity: 0.45; cursor: not-allowed; background: transparent; }
.cal .days button.sel { background: var(--acc); color: var(--on-acc); font-weight: 700; }
.cal .days .pad { background: transparent; }
.cal .clr { margin-top: 8px; background: none; border: 0; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 40px; font-size: 13px; }

/* confirmation */
.done { padding: 10px 0 0; }
.done h2 { font-family: var(--display); color: var(--acc); font-size: 30px; line-height: 1.1; margin: 10px 0 6px; }
.done .no { font-size: 15px; color: var(--ink-2); margin: 0 0 16px; }
.done.short { text-align: center; padding: 18px 0 8px; }
.done.short .okdraw { margin: 0 auto 14px; }
.done.short .no { font-size: 24px; color: var(--ink); margin: 0 0 10px; }
.done.short .no b { color: var(--acc); }
.done.short .promise { font-size: 17px; margin: 0 0 28px; }
.done.short .after { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.done.short .cta { display: grid; }
.done .lines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; margin-bottom: 12px; display: grid; gap: 6px; font-size: 15px; }
.done .lines div { display: flex; justify-content: space-between; gap: 12px; }
.done .lines .t { font-weight: 700; color: var(--ink); }
.done .lines .t span:last-child { color: var(--acc); }
.done .promise { font-size: 17px; margin: 14px 0; }
.done .promise.tgnext { margin-top: -4px; font-weight: 700; }
.done ol { margin: 0 0 18px; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }
.done .cta { display: grid; gap: 10px; }

/* overlays (bot + legal): iframe inside a frame; nothing navigates by href */
.ovl { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.86); display: none; align-items: center; justify-content: center; }
.ovl.on { display: flex; }
.ovl .frame { position: relative; width: 100%; height: 100%; background: var(--bg); }
.ovl iframe { width: 100%; height: 100%; border: 0; display: block; }
.ovl .close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--hair); background: rgba(22, 22, 21, 0.85); color: var(--acc); font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.ovl .cap { display: none; }
@media (min-width: 720px) {
  .ovl .frame { width: 420px; height: min(860px, 94vh); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: visible; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
  .ovl iframe { border-radius: var(--r-lg); }
  .ovl .close { top: -2px; right: -58px; }
  .ovl .cap { display: block; position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; color: var(--ink-2); font-size: 14px; }
}
.ovl.doc .frame { width: min(760px, 100%); height: min(86vh, 100%); border-radius: 0; overflow: hidden; }
.ovl.doc .close { top: 10px; right: 10px; }
.doc-body { padding: 56px 20px 30px; max-width: 70ch; margin: 0 auto; overflow-y: auto; height: 100%; }
.doc-body h2 { font-family: var(--display); color: var(--acc); font-size: 28px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.doc-body h3 { font-size: 16px; margin: 20px 0 4px; }
.doc-body p { color: var(--ink-2); margin: 0 0 10px; }
.doc-body p.ph { color: var(--acc); font-style: italic; }
.sheet .foot .tgnote { margin: 0 0 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; text-align: center; }
.sheet .foot .consent { margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.4; text-align: center; }
.sheet .foot .consent a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ===== round 2 additions ===== */
.hdr .wrap { gap: 8px; }
.brand b { white-space: normal; }
.brand small { display: none; }
.hdr-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lang button { min-width: 38px; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--ink-2); font-weight: 700; font-size: 13px; cursor: pointer; letter-spacing: 0.04em; }
.lang button + button { border-left: 1px solid var(--line); }
.lang button[aria-pressed="true"] { background: var(--acc); color: var(--on-acc); }
.cartbtn .sum { display: none; }
@media (min-width: 520px) { .cartbtn .sum { display: inline; } .brand small { display: block; } }
@media (max-width: 420px) { .brand b { font-size: 13.5px; max-width: 92px; } }

/* cards: baked 4:5 photo cards (their photos on one background) + state stamps */
.card figure { aspect-ratio: 4 / 5; }
.card figure img { object-fit: cover; }
.card.st-sold_out figure img, .card.st-not_now figure img { filter: saturate(0.55) brightness(0.7); }
.card.st-not_now { opacity: 0.8; }
.stamp { position: absolute; z-index: 2; pointer-events: none; width: 78%; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); }
.stamp.corner { left: 5%; top: 5%; transform-origin: left top; }
.stamp.diag { left: 50%; top: 50%; width: 94%; transform: translate(-50%, -50%) rotate(-12deg); }
.stamp.base { left: 50%; bottom: 4%; transform: translateX(-50%); width: 88%; }
.lbl-notnow { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 4px 9px; border: 1px solid var(--ink-3); border-radius: var(--r); background: rgba(11,11,11,0.85); color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.card .stline { margin: 0; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.card .stline.in { color: var(--ok); }
.card .stline b { color: var(--acc); font-weight: 700; }
.card .stline .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; flex: 0 0 auto; transform: translateY(-1px); }
.card .stline.day { color: var(--acc); }
.card .add.ghost { border-color: var(--ink-3); color: var(--ink-2); }
.card .add.ghost:hover { border-color: var(--acc); color: var(--acc); background: transparent; }
.card .usd { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.card .price { flex-wrap: wrap; }

/* about + reviews */
.about { padding: 22px 0 6px; display: grid; gap: 14px; max-width: 70ch; }
.about p { margin: 0; font-size: 18px; line-height: 1.5; }
.about .muted { color: var(--ink-3); font-size: 14px; }
.about .tag { color: var(--ink-3); font-size: 12.5px; }

/* notify form / small helpers */
.hint { color: var(--ink-2); font-size: 14px; margin: 10px 0 0; }
.chipline { display: flex; flex-wrap: wrap; gap: 8px; }
.okmark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--acc); margin: 6px 0 4px; }
.okmark .ico { width: 22px; height: 22px; }
.card figure img.stamp { position: absolute; inset: auto; height: auto; max-width: none; object-fit: contain; }
.card figure img.stamp.corner { left: 4%; top: 4%; width: 74%; }
.card figure img.stamp.diag { left: 50%; top: 50%; width: 96%; transform: translate(-50%, -50%) rotate(-11deg); }

/* round 3: sold-out card = notify + order for next delivery */
.card.st-sold_out .add { white-space: normal; line-height: 1.2; padding: 6px 8px; font-size: 13px; }
.card.st-sold_out .add.ghost { margin-top: 2px; }

/* round 3: footer contacts with icons, 44 px tap targets */
.ftr .ct { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 400; }
.ftr .ct b { color: var(--acc); font-weight: 400; }
.ftr .ct:hover b { color: var(--acc-2); }
.ftr .ct .ci { width: 22px; height: 22px; flex: 0 0 22px; stroke: var(--acc); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--acc); }
.ftr .ct .dm { color: var(--ink-3); font-style: normal; font-size: 13px; }
.ftr ul { gap: 2px; }
.ftr li a { display: inline-flex; align-items: center; min-height: 44px; }



/* ===== round 4 (10.10): vyshyvanka ornament + review cards ===== */
:root { --vy-thread: #23211e; --vy-fill: #1c1b19; }
/* tone-on-tone vyshyvanka (CEO ref 10.10): threads a few % lighter than the black, read by a slow sheen.
   Two stacked copies of one vector pattern: the thread layer, and a gold layer seen only through a moving diagonal mask. */
.vy-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.vy-thread { stroke: var(--vy-thread); fill: var(--vy-fill); }
.vy-gold { stroke: var(--acc); fill: var(--acc); }
.vy-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vy-sheen { opacity: 0.15;
  -webkit-mask-image: linear-gradient(120deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(120deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 30% 30%; mask-position: 30% 30%; }
/* redesign 06.11: the endless sheen is gone (W-LOOK-08 loop); the ornament stays as a still tone-on-tone thread above the footer */
.vy-sheen { display: none; }
/* hero: a placket panel (300 px = one tile) on the right of the text column, fading at its ends; text sits above it */
.hero-text .wrap { position: relative; z-index: 1; }
.vy-placket { position: absolute; top: 0; bottom: 0; right: -64px; width: 300px; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
@media (min-width: 900px) { .vy-placket { right: 0; } }
/* divider above the footer: the same motifs in a row */
.vy-div-wrap { margin-top: 44px; }
.vy-div { position: relative; height: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.vy-div-wrap + .ftr { margin-top: 18px; border-top: 0; }

/* reviews: carousel of designed cards */
.rv-wrap { position: relative; margin-top: 22px; }
.reviews { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  padding: 4px 2px 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reviews::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 min(282px, 65vw);   /* W-LAW-01 06.11: the next card peeks ~32 % at 360-390 */
  scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 10px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -18px rgba(0, 0, 0, 0.9); }
.rv-top { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.rv-q { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 0.6; color: var(--acc); transform: translateY(9px); flex: 0 0 auto; }
.rv-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 11px; border: 1px solid var(--hair); border-radius: var(--r-pill);
  color: var(--acc-2); font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; background: rgba(240, 232, 216, 0.07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* chat pane: fixed height, dark "chat" ground. The screenshot is out of flow (absolute) so its intrinsic height never
   stretches the card: short ones sit centred, tall ones (class clip, set by JS) are cropped from the top with a fade */
.rv-pane { position: relative; height: 236px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--bg); }
.rv-pane img { position: absolute; left: 10px; width: calc(100% - 20px); height: auto; top: 50%; transform: translateY(-50%); display: block;
  border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
.rv-pane.clip img { top: 10px; transform: none; }
.rv-pane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; pointer-events: none; opacity: 0;
  background: rgba(14, 14, 14, 0.82); border-top: 1px solid var(--line); height: 40px; }
.rv-pane.clip::after { opacity: 1; }
.rv-pane.txt { background: transparent; border: 0; border-radius: 0; }
.rv-pane.txt p { margin: 0; padding: 2px 2px 0; white-space: pre-line; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink); }
.rv-pane.txt::after { opacity: 1; background: var(--card); border-top: 0; height: 24px; }
.rv-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; margin-top: -6px;
  border: 0; background: none; color: var(--acc); font: 400 14.5px/1 var(--font); cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.rv-more:hover { color: var(--acc-2); text-decoration-color: var(--acc-2); }
.rv-more:focus-visible, .rv-nav:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rv-more-ar { font-size: 13px; }
.rv-nav { display: none; }
.rv-hint { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 2px 0 0; color: var(--ink-3); font-size: 13px; letter-spacing: 0.04em; }
.rv-hint .rv-arrow { color: var(--acc); }
@media (prefers-reduced-motion: no-preference) {
  .rv-hint .rv-arrow { animation: rv-nudge 2.4s ease-in-out 3; }
  @keyframes rv-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(4px); } }
}
@media (min-width: 720px) {
  .rv-card { flex-basis: 318px; }
  .rv-pane { height: 262px; }
  .rv-hint { display: none; }
  .rv-nav { display: grid; place-items: center; position: absolute; top: calc(50% - 22px); z-index: 2; width: 44px; height: 44px; border-radius: var(--r-pill);
    border: 1px solid var(--hair); background: rgba(22, 22, 21, 0.9); color: var(--acc); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
  .rv-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .rv-nav:hover { border-color: var(--acc); background: var(--card-2); }
  .rv-nav.prev { left: -14px; } .rv-nav.next { right: -14px; }
  .rv-nav:disabled { opacity: 0; pointer-events: none; }
}
@media (min-width: 1240px) { .rv-nav.prev { left: -26px; } .rv-nav.next { right: -26px; } }
@media (prefers-reduced-motion: reduce) { .reviews { scroll-behavior: auto; } }

/* review lightbox: same overlay family, a tall scrolling pane */
.ovl.rv-lb .frame { width: min(520px, 100%); height: auto; max-height: 100%; display: flex; flex-direction: column; border: 0; border-block: 1px solid var(--hair); border-radius: 0; overflow: hidden; box-shadow: none; background: var(--bg); }
.ovl.rv-lb .close { top: calc(10px + env(safe-area-inset-top)); right: 10px; }
.rv-lb-body { flex: 1 1 auto; min-height: 0; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 24px; outline: none; }
.rv-lb-body .rv-top { margin: 4px 60px 16px 0; }
.rv-lb-body img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--hair); }
.rv-lb-body p { margin: 0; white-space: pre-line; font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.55; }
@media (min-width: 720px) {
  .ovl.rv-lb .frame { max-height: 92vh; border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: visible; }
  .rv-lb-body { max-height: calc(92vh - 2px); border-radius: var(--r-lg); padding: 18px 22px 24px; }
  .ovl.rv-lb .close { top: -2px; right: -58px; }
}

/* CEO 10.10: no tag/quote/read-more; name under the screenshot, the pane itself opens the lightbox */
button.rv-pane { display: block; width: 100%; cursor: zoom-in; font: inherit; color: inherit; text-align: left; }
button.rv-pane:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rv-name { margin: 12px 2px 0; color: var(--acc); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
#rvLbBody .rv-name { margin-top: 10px; }

/* ===== round 6 (10.10): mobile polish - every rule below answers a measured defect in MOBILE-AUDIT.md (M-ids) ===== */
/* M01 the translucent sticky header let page text ghost through it */
.hdr { background: rgba(22, 22, 21, 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* M02 language buttons were 38 px wide; M03 brand links were 34 px high */
.lang button { min-width: 44px; }
.brand { min-height: 44px; }
/* M04 at 360 the header did not fit once the language buttons are 44 px: tighten the mark, gaps and cart padding instead of hiding anything */
@media (max-width: 400px) {
  .hdr .wrap, .hdr-right { gap: 6px; }
  .mark { width: 30px; height: 30px; }
  .brand { gap: 7px; }
  .brand b { font-size: 13px; max-width: none; }
  .cartbtn { padding: 0 9px; gap: 6px; }
}
/* M05 safe-area: side insets in landscape on notched phones */
.wrap { width: min(1180px, 100% - max(32px, 32px + env(safe-area-inset-left) + env(safe-area-inset-right))); }
/* M06 weight chips were 43 px wide on 360 px phones: 8 px grid gap and 8 px card padding give 44.7 */
@media (max-width: 400px) {
  .grid { gap: 8px; }
  .card .body { padding: 10px 8px; }
}
/* M07 card description is body text: 12.5 -> 14 px; M08 meta text under 12 px (dollar note, weekday row) -> 12 */
.card .desc, .card .body .desc { font-size: 14px; line-height: 1.4; }
.card .usd { font-size: 12px; }
.cal .dow { font-size: 12px; }
/* M09 calendar targets were 40-41 px: 44 px everywhere, the calendar borrows the sheet padding on small phones */
.cal .nav button { height: 44px; }
.cal .clr { min-height: 44px; padding: 0 2px; }
.cal .days button { min-height: 44px; }
@media (max-width: 400px) { .cal { margin-inline: -8px; padding: 8px 5px; } .cal .days { gap: 2px; } }
/* M10 inline links inside sentences (consent, "how the owner sees it") were 15-36 px tall: a 44 px hit box, layout unchanged */
.sheet .foot .consent { margin-top: 14px; }
.sheet .foot .consent a, .sheet .foot > p > a { display: inline-block; padding: 13px 0; margin: -13px 0; white-space: nowrap; }
/* M11 a long sheet title (UA "Повідомити про поставку") squeezed the close button to 42 px */
.sheet .head { gap: 12px; }
.sheet .head h2 { min-width: 0; line-height: 1.15; overflow-wrap: anywhere; }
.xbtn { flex: 0 0 44px; }
/* M12 money split across lines ("350 / ₺") on the confirmation and cart lines */
.done .lines div span:last-child, .line .sum, .tots div span:last-child { white-space: nowrap; flex: 0 0 auto; }
/* M13 the close button sat on top of the screenshot / legal text: both overlays get a 60 px top band for it */
.ovl.rv-lb .frame { padding-top: calc(60px + env(safe-area-inset-top)); }
.rv-lb-body { max-height: calc(100dvh - 60px - env(safe-area-inset-top)); }
.ovl.doc .frame { display: flex; flex-direction: column; padding-top: 60px; height: min(86dvh, 100%); }
.ovl.doc .doc-body { padding-top: 0; height: auto; flex: 1 1 auto; min-height: 0; }
@media (min-width: 720px) {
  .ovl.rv-lb .frame { padding-top: 0; }
  .rv-lb-body { max-height: calc(92vh - 2px); }
}
/* M14 scroll lock also on <html> (iOS Safari ignores overflow on body alone) and no scroll chaining out of sheets/overlays */
html:has(body.locked) { overflow: hidden; }
.sheet .scroll, .doc-body, .rv-lb-body { overscroll-behavior: contain; }
.chips { overscroll-behavior-x: contain; scroll-padding-inline: 2px; }
/* M15 touch: no double-tap zoom delay on controls, no grey tap flash (every control has its own :active/pressed state) */
a, button, summary, label.radio, .chip, .wchip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* M16 keyboard: the focused field is never left under the sheet foot */
.sheet .scroll { scroll-padding-block: 12px 24px; }
/* M04b the compact header left the empty cart button 38 px wide */
.cartbtn { min-width: 44px; }

/* ===== 10.10: "Привезти под заказ" / special order (replaces the hero "Как заказать" button) ===== */
.spbtn { min-height: 44px; padding: 0 14px; gap: 8px; font-size: 14px; white-space: nowrap; margin-left: auto; }
.spbtn .ico { width: 18px; height: 18px; }
.hdr .wrap > .hdr-right { margin-left: 0; }
/* phones and small tablets: the row (brand, language, cart) has no room for a labelled button, so the button gets
   its own strip ABOVE that row inside the header. The header sticks at top: -strip, so after the first scroll only the
   60 px row stays stuck (catalog chip row, anchors and the round-6 measurements keep --header = 60 px) */
@media (max-width: 719px) {
  :root { --hdr-strip: 52px; }
  .hdr { height: auto; top: calc(-1 * var(--hdr-strip)); }
  .hdr .wrap { height: auto; flex-wrap: wrap; row-gap: 0; }
  .hdr .wrap > .brand, .hdr .wrap > .hdr-right { min-height: var(--header); }
  .hdr .wrap > .brand { flex: 1 1 0; min-width: 0; } /* flex-wrap places items by max-content width: let the brand shrink instead of wrapping the row */
  .spbtn { order: -1; flex: 1 0 100%; margin: 4px 0 4px; height: 44px; border-color: var(--hair); color: var(--acc); background: rgba(240, 232, 216, 0.06); }
  .hdr .wrap > .hdr-right { margin-left: auto; }
}
/* the request sheet */
.f label .req, .f .req { color: var(--acc); }
.f [aria-invalid="true"] { border-color: var(--danger); }
.sheet .scroll .hint#spHint { margin: 4px 0 2px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.done .okmark + .promise { margin-top: 10px; }
/* producer (CEO 10.10): first in the card description, a touch darker than the caption; long names wrap, never overflow */
.card .desc.mk { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; -webkit-line-clamp: 3; }
.card .desc.mk + .desc { margin-top: -3px; }

/* boot (perf 10.10): every text on the page is written by the script at the end of index.html; until it runs the
   page would paint empty headings and then jump (CLS 0.10 on a phone). Hidden until the script drops html.boot;
   if the script never runs, the page shows itself after 4 s anyway. The empty grid holds the lower photos (reviews,
   delivery) outside the lazy-load margin until the cards push them down. */
html.boot body { visibility: hidden; animation: boot-show 0s linear 4s forwards; }
@keyframes boot-show { to { visibility: visible; } }
html.boot .grid:empty { min-height: 300vh; }

/* ===== 10.10 card design B (comparison only: "#cards-b" + the A/B switch). Everything below is scoped to .cb /
   .cb-switch / .cb-note, so the default A cards are untouched. Round 2 (CEO 10.10): fewer elements, one hierarchy -
   name, price, one state line, photo, one glass bar (quantity + button). ===== */
.cb-switch { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; color: var(--ink-3); }
.cb-switch[hidden], .cb-note[hidden] { display: none; }
.cb-switch span { margin-right: 6px; font-size: 12px; }
.cb-switch button { min-width: 44px; min-height: 34px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--ink-2); font: 400 13px var(--font); cursor: pointer; }
.cb-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #111; }
.cb-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 13px; color: var(--ink-3); }
.cb-note .ico { width: 15px; height: 15px; stroke: var(--ink-3); }

/* round 3: in B the grid holds the category tiles and one section per category; the chip row is hidden */
#catalog.cb-on .chips-wrap { display: none; }
.grid.cb { display: block; padding-top: 4px; }
.cb-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .cb-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 960px) { .cb-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.cb-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 8px; }
@media (min-width: 640px) { .cb-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 960px) { .cb-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.cb-tile {
  position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: var(--card);
  color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.cb-tile.all { grid-column: span 2; aspect-ratio: 2 / 1; }
@media (min-width: 640px) { .cb-tile.all { aspect-ratio: auto; } }
.cb-tile .cb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.4s ease; }
.cb-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 1; pointer-events: none; height: 100%; background: rgba(0, 0, 0, 0.38); }   /* W-LOOK-03 06.11: flat tint, no gradient */
.cb-tl { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 1px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 12px rgba(0, 0, 0, 0.6); }
.cb-tl b { font-size: 15px; font-weight: 400; line-height: 1.25; color: #fff; }
.cb-tl small { font-size: 12px; color: rgba(255, 255, 255, 0.68); }
.cb-tile.all .cb-tl b { font-size: 17px; }
@media (hover: hover) { .cb-tile:hover .cb-photo { transform: scale(1.03); } }
.cb-tile:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }

.cb-cat { padding-top: 26px; }
.cb-cat-h { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; font-size: 21px; font-weight: 400; line-height: 1.25; color: var(--ink); letter-spacing: -0.005em; }
.cb-cat-h small { font-size: 13px; font-weight: 400; color: var(--ink-3); }

.cb-secbar { position: fixed; z-index: 29; left: 0; right: 0; top: var(--header); height: 44px; background: rgba(22, 22, 21, 0.94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cb-secbar[hidden] { display: none; }
.cb-secbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cb-secbar .wrap > span { min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-secbar b { font-size: 14px; font-weight: 400; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.cb-secbar small { font-size: 12px; color: var(--ink-3); }
.cb-secbar button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 2px 0 10px; border: 0; background: none; color: var(--ink-2); font: 400 13.5px var(--font); cursor: pointer; }
.cb-secbar button .ico { width: 10px; height: 8px; stroke: var(--ink-2); stroke-width: 1.6; }
.cb-secbar button:hover { color: var(--ink); }
.card.cb {
  position: relative; display: block; aspect-ratio: 4 / 5; border: 0; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: var(--card); container-type: inline-size; color: #fff;
}
.card.cb .cb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card.cb.st-sold_out .cb-photo, .card.cb.st-not_now .cb-photo { filter: saturate(0.7) brightness(0.72); }
/* soft scrims: only behind the text block and the bar */
.card.cb::before, .card.cb::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.card.cb::before { content: none; }   /* W-LOOK-03 06.11: no scrim - the photos sit on one dark slate, the name and price keep their text shadow */
.card.cb::after { content: none; }

.cb-top { position: absolute; z-index: 2; left: 16px; top: 16px; right: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.card.cb h3.cb-name {
  margin: 0; max-width: 85%; font-size: 14px; font-weight: 400; line-height: 1.35; letter-spacing: 0; color: rgba(255, 255, 255, 0.86);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cb-price { margin: 6px 0 0; display: flex; align-items: baseline; gap: 5px; line-height: 1.1; }
.cb-price b { font-size: clamp(26px, 7.8cqi, 30px); font-weight: 400; letter-spacing: -0.01em; color: #fff; }
.cb-price span { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.62); }
.cb-state { margin: 7px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 7px; font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.cb-state .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: rgba(168, 201, 154, 0.9); flex: 0 0 auto; }
.cb-state.s-few_left .dot { background: #e0b27a; }
.cb-state.s-preorder .dot { background: var(--acc-2); }
.cb-state.s-sold_out .dot, .cb-state.s-not_now .dot { background: rgba(255, 255, 255, 0.45); }
.cb-state .em { color: #fff; font-weight: 700; }
.cb-notify {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0; margin: -14.5px 0; border: 0; background: none; cursor: pointer;   /* speed 05.11: 44 px hit box (was 39), same line height in the layout */
  color: rgba(255, 255, 255, 0.85); font: 400 12px var(--font); text-shadow: inherit;
}
.cb-notify span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.cb-notify .ico { width: 13px; height: 13px; stroke: currentColor; }
.cb-notify:hover { color: #fff; }

/* top-right: shows only when the item is in the cart; tap opens the cart */
.cb-incart {
  position: absolute; z-index: 3; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(20, 20, 20, 0.4); color: #fff; font: 400 12.5px var(--font); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cb-incart[hidden] { display: none; }
.cb-incart .ico { width: 17px; height: 17px; stroke: #fff; stroke-width: 1.6; }

/* the glass bar: inset 10px, 6px inner padding, so its controls start on the same 16px edge as the name */
.cb-bar {
  position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px; border-radius: var(--r-lg); background: rgba(22, 22, 22, 0.42); border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.cb-qty { height: 44px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); color: #fff; font: 400 16px var(--font); }
.cb-sel {
  -webkit-appearance: none; appearance: none; padding: 0 34px 0 16px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 8px;
}
.cb-sel option { color: #111; background: #fff; }
.cb-count { display: inline-flex; align-items: stretch; }
.cb-count button { width: 44px; min-height: 44px; margin: -1px 0; border: 0;   /* speed 05.11: 44 x 44 hit box (was 38 x 42); the 1 px pill border is overlapped, the look is the same */
  background: none; color: #fff; font: 400 20px var(--font); line-height: 1; cursor: pointer; border-radius: var(--r-pill); }
.cb-count output { display: grid; place-items: center; min-width: 40px; font-size: 15px; font-weight: 400; }
.cb-add {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--card-2); color: var(--acc-2); box-shadow: inset 0 0 0 1px var(--acc); font: 400 14.5px var(--font); white-space: nowrap; cursor: pointer; transition: background-color 0.15s, transform 0.1s;
}
.cb-add .ico { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; }
.cb-add:hover { background: #33332f; }
.cb-add:active { transform: scale(0.95); }
.cb-add.done { background: var(--acc); color: var(--on-acc); }
.cb-sel:focus-visible, .cb-count button:focus-visible, .cb-add:focus-visible, .cb-notify:focus-visible, .cb-incart:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }
/* narrow B cards (two columns on a tablet): the pre-order label may wrap inside the pill */
@container (max-width: 340px) {
  .cb-add { padding: 0 14px; white-space: normal; line-height: 1.15; text-align: left; }
  .cb-sel { padding-left: 13px; padding-right: 30px; }
}

/* 10.10 quick sections: floating pill bottom-left + list (bottom sheet on phones, popover on desktop) */
.qn-btn {
  position: fixed; z-index: 24; left: max(16px, env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(20, 20, 20, 0.72); color: var(--ink); font: 400 14px var(--font); cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.8);
}
.qn-btn[hidden] { display: none; }
.qn-btn .ico { width: 17px; height: 17px; stroke: var(--acc-2); stroke-width: 1.6; }
.qn-btn:hover { border-color: rgba(255, 255, 255, 0.32); }
.qn-btn:focus-visible, .qn-item:focus-visible { outline: 2px solid var(--acc-2); outline-offset: 2px; }
@media (max-width: 719px) { body:has(#bar.on) .qn-btn { bottom: calc(82px + env(safe-area-inset-bottom)); } }
.qn { position: fixed; inset: 0; z-index: 45; }
.qn[hidden] { display: none; }
.qn-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.qn-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82dvh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
}
.qn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 6px 20px; }
.qn-head h2 { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.qn-head .xbtn { border: 0; color: var(--ink-2); }
.qn-list { list-style: none; margin: 0; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; }
.qn-item {
  width: 100%; min-height: 48px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--ink); font: 400 16px var(--font); text-align: left; cursor: pointer;
}
.qn-list li + li .qn-item { border-top: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0 0 var(--r-md) var(--r-md); }
.qn-item small { flex: 0 0 auto; font-size: 13px; color: var(--ink-3); }
.qn-item:hover { background: rgba(255, 255, 255, 0.05); }
@media (min-width: 720px) {
  .qn-back { background: rgba(0, 0, 0, 0.25); }
  .qn-panel { left: max(16px, env(safe-area-inset-left)); right: auto; bottom: 72px; width: 340px; border: 1px solid var(--line); border-radius: var(--r-lg); padding-bottom: 8px; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9); }
  .qn-item { font-size: 15px; min-height: 44px; padding: 10px 12px; }
  .qn.from-top .qn-panel { top: calc(var(--header) + 52px); bottom: auto; left: auto; right: max(16px, calc((100vw - 1180px) / 2)); max-height: calc(100dvh - var(--header) - 70px); }
}

/* 10.10 in-cart stepper (CEO): after the first tap the white pill becomes a gold stepper; the left side says "в корзине" */
.cb-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cb-bar.in { background: rgba(22, 22, 21, 0.5); border-color: rgba(240, 232, 216, 0.32); }
.cb-incap { display: inline-flex; align-items: center; gap: 7px; padding-left: 10px; min-width: 0; font-size: 13.5px; font-weight: 400; color: var(--acc-2); white-space: nowrap; }
.cb-incap .ico { width: 17px; height: 17px; stroke: var(--acc-2); stroke-width: 2; }
.cb-step {
  flex: 0 0 auto; display: inline-flex; align-items: stretch; height: 44px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--acc); color: var(--on-acc); transition: transform 0.12s ease;
}
.cb-step button { width: 44px; border: 0; background: none; color: var(--on-acc); font: 400 21px var(--font); line-height: 1; cursor: pointer; }
.cb-step button:hover { background: rgba(0, 0, 0, 0.08); }
.cb-step button:disabled { opacity: 0.35; cursor: default; background: none; }
.cb-step button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; border-radius: var(--r-pill); }
.cb-step output { display: grid; place-items: center; min-width: 62px; padding: 0 2px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.cb-step.tick, .cb-add.tick { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { .cb-step, .cb-add { transition: none; } .cb-step.tick, .cb-add.tick { transform: none; } }

/* ===== 10.10: site search (CEO) - magnifier in the header, results layer under the header ===== */
.srchbtn { min-height: 44px; min-width: 44px; width: 44px; padding: 0; flex: 0 0 auto; }
.srchbtn .ico { width: 18px; height: 18px; }
.srchbtn[aria-expanded="true"] { background: var(--acc); border-color: var(--acc); }
.srchbtn[aria-expanded="true"] .ico { stroke: var(--on-acc); }
.srch { position: fixed; left: 0; right: 0; bottom: 0; top: var(--header); z-index: 29; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.srch-bar { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 0; }
.srch-bar .wrap { display: flex; align-items: center; gap: 8px; position: relative; }
.srch-bar .wrap > .ico { position: absolute; left: 14px; width: 18px; height: 18px; pointer-events: none; }
.srch-bar input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px 0 42px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); color: var(--ink); font-size: 16px; -webkit-appearance: none; appearance: none; }
.srch-bar input::placeholder { color: var(--ink-3); }
.srch-bar input:focus { border-color: var(--acc); outline: none; }
.srch-bar input::-webkit-search-cancel-button { display: none; }
.srch-bar .xbtn { flex: 0 0 48px; width: 48px; height: 48px; }
.srch-body { padding: 14px 0 calc(96px + env(safe-area-inset-bottom)); }
.srch-meta { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; }
.srch-meta:empty { display: none; }
.srch-none .btn { min-height: 46px; }
.srch-none .btn .ico { width: 18px; height: 18px; }
body.srch-on { overflow: hidden; }
html:has(body.srch-on) { overflow: hidden; }
body.srch-on .cb-secbar, body.srch-on .qn-btn { display: none; }
body.srch-on .bar { z-index: 31; }   /* the cart bar stays on top of the results on phones */
/* the header strip for the special-order button is gone (button moved to the hero 10.10), but the header still stuck at
   top: -52px on phones, so after any scroll only 8 px of it stayed on screen and the magnifier and cart were unreachable */
@media (max-width: 719px) { :root { --hdr-strip: 0px; } }
/* phones: with the magnifier in the row, a cart count widened the cart button and cut the brand name ("Украински|"):
   the count becomes a corner badge on a fixed 44 px cart button (the sum is hidden below 520 px anyway) */
@media (max-width: 519px) {
  .cartbtn { position: relative; width: 44px; padding: 0; }
  .cartbtn .n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--bg); }
}
/* below 380 px the row (brand, RU/UA/EN, magnifier, cart = 4 x 44 px targets) leaves the brand ~53 px: the name goes first,
   the gold mark is dropped there so "Украинские / Українські" is not cut */
/* CEO 11.10: the mark must not disappear on iPhone SE/mini and many Androids (341-386 px) - there the mark stays and the name is
   visually hidden (screen readers keep it); the shop name is in the hero right below */
@media (max-width: 386px) { .hdr .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* 340 px and below (iPhone SE 1st gen) even the bare name does not fit: the mark alone, the name stays visually hidden for screen readers */
@media (max-width: 340px) { .hdr .brand .mark { display: block; } .hdr .brand > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* CEO 11.10: goods added in Margo's cabinet come from the live catalog without a photo - a quiet framed placeholder */
.ph-new {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px;
  background: var(--card-2); text-align: center;
}
.ph-new::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hair); border-radius: var(--r-md); pointer-events: none; }
.ph-tag { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--acc); }
.ph-nm { font-family: var(--display); font-size: 19px; line-height: 1.2; color: var(--ink); max-width: 92%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ph-nm:empty { display: none; }
.card.cb.no-photo { aspect-ratio: 4 / 3; }
.card.cb .ph-new { padding-top: 22%; }
.cb-tile .ph-new { z-index: 0; }
.cb-tile .ph-tag { display: none; }
.cb-price.tbd b { font-size: 18px; color: rgba(255, 255, 255, 0.86); }
.minnote.tbd { color: var(--ink-2); }

/* 11.10 search results: the item's section as a small tag above the name (CEO) */
.sec-tag { display: inline-block; align-self: flex-start; margin: 0 0 6px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 0; background: var(--card); color: var(--ink-2); border: 1px solid var(--hair); }
.card.cb .sec-tag { background: rgba(0, 0, 0, 0.38); color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.28); text-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.card .body .sec-tag { margin: 0; }
/* CEO 11.10: courier address - wraps on the done screen (the other right-hand values stay on one line) */
.done .lines #doneAddr span:last-child { white-space: normal; flex: 1 1 auto; text-align: right; overflow-wrap: anywhere; }
.rv-p#rvAddr { overflow-wrap: anywhere; }
/* 22.10: on a phone the legal text page (86dvh, centred) left a strip at the bottom where the shop page and the cart bar
   showed through; below 720 px it now fills the whole screen. The cart bar is hidden while it is open (index.html openOverlay). */
@media (max-width: 719px) {
  .ovl.doc { background: var(--bg); }
  .ovl.doc .frame { height: 100%; padding-top: calc(60px + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
}

/* CEO 24.10: an open tab follows the owner's Cabinet - a price of something already in the cart changed: a short note (cart + toast) */
.minnote.live-upd { color: var(--acc-2); margin: 0 0 10px; }
.live-note { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; width: max-content; max-width: min(420px, calc(100vw - 32px));
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  background: var(--card-2); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r); padding: 10px 14px; font-size: 14px; line-height: 1.35; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.live-note.on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 720px) { .live-note { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .live-note { transition: none; } }
/* CEO 29.10 (delivery v5): the owner's delivery options in the courier «Когда» step (index.html renderPlan); only drawn when the bot sends a plan */
.wz-when .f.when.dp { margin-top: 2px; gap: 0; }
.f.when.dp .dp-hours { margin: 0 0 8px; font-size: 14px; }
.f.when.dp .dp-modes { padding-top: 0; }
.f.when.dp .dp-modes .opt { min-height: 64px; }
.dp-pick { margin-top: 6px; }
.dp-pick .lbl { display: block; margin: 14px 0 6px; font-size: 13.5px; color: var(--ink-2); font-weight: 400; }
.f .row.dp-days, .f .row.dp-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.f .row.dp-days .chip.day, .f .row.dp-places .chip.day { min-height: 60px; min-width: 0; }
.f .row.dp-places .chip.day b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.f .row.dp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.f .row.dp-grid .chip.win { min-height: 48px; }
.wz-addr .f.dp-place { margin-top: 2px; }
.btn.dp-pickup { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 10px 0 14px; }
.btn.dp-pickup .ico { width: 20px; height: 20px; }

/* CEO 02.11 preview only (?bar=mix, assets/channel.js): every second card gets a solid plaque with a gold line instead of the glass bar; the default page is unchanged */
.bar-mix .card.cb:nth-child(even) .cb-bar {
  left: 0; right: 0; bottom: 0; padding: 8px 10px; border: 0; border-top: 1px solid var(--acc); border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---------- CEO TG 1479 (05.11): «Проверьте заказ» candidates ?v=a | b | c (W-LOOK-12). Dark only; gold stays on the send button ---------- */
.sheet.rvx .head h2 { color: var(--ink); }
.sheet.rvx .wz-prog i { background: var(--ink-3); }
.sheet.rvx .wz-back span:first-child { color: var(--ink-2); }
.sheet.rvx #sendBtn { justify-content: center; }
.rvx-total { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 12px; }
.rvx-total .cap { font-size: 13px; color: var(--ink-3); }
.rvx-total .num { font: 700 32px/1.1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rvx-goods { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.rvx-goods li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 15px; line-height: 1.3; color: var(--ink); }
.rvx-goods .k { min-width: 0; }
.rvx-goods .v { flex: 0 0 auto; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rvx-goods li.sub, .rvx-goods li.dlv { font-size: 14px; color: var(--ink-2); }
.rvx-goods li.sub .v, .rvx-goods li.dlv .v { color: var(--ink-3); }
/* rows: label + one small «Изменить» on the first line, the value under it at full width */
.rvx-rows { display: grid; }
.rvx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 0 10px; border-bottom: 1px solid var(--line); }
.rvx-row:last-child { border-bottom: 0; }
.rvx-row .lb { grid-column: 1; grid-row: 1; align-self: center; font-size: 13px; color: var(--ink-3); }
.rvx-row .rvx-edit { grid-column: 2; grid-row: 1; }
.rvx-row .vl { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: grid; gap: 1px; }
.rvx-row .v1 { font-size: 15px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.rvx-row .v1:empty { display: none; }
.rvx-row .v2 { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvx-edit { min-height: 44px; min-width: 44px; margin: -13px 0; padding: 0 0 0 8px; border: 0; background: none; cursor: pointer; font: 400 13px var(--font); color: var(--ink-2); }
.rvx-edit:hover { color: var(--ink); }
.rvx-clip { display: block; width: 100%; min-height: 44px; margin: -11px 0 -12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 13px/1.4 var(--font); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvx-clip[aria-expanded="true"] { white-space: normal; overflow: visible; color: var(--ink-2); margin: 0; min-height: 0; padding: 2px 0; }
.rvx-edit:focus-visible, .rvx-clip:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.sheet.rvx .foot .tgnote { margin: 0 0 8px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); text-align: left; }
.sheet.rvx .foot .consent { font-size: 11.5px; color: var(--ink-3); text-align: left; margin-top: 10px; }
.sheet.rvx .foot .consent a { color: var(--ink-2); padding: 14px 0; margin: -14px 0; }
/* B: the total sits in the pinned foot, caption left / number right, right above the button */
.sheet.rvx-b .foot .rvx-total { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 2px 0 8px; }
.sheet.rvx-b .foot .rvx-total .cap { font-size: 14px; color: var(--ink-2); }
.sheet.rvx-b .foot .rvx-total .num { font-size: 28px; }
/* C: total centred on top, goods on one quiet dark panel, each block ONE line «label · value» (a long value opens on tap) */
.rvx-c .rvx-total { align-items: center; }
.rvx-c .rvx-total .num { font-size: 34px; }
.rvx-panel { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px 0; margin-bottom: 4px; }
.rvx-c .rvx-goods { border-bottom: 0; }
.rvx-c .rvx-row { grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; padding: 6px 0; min-height: 48px; }
.rvx-c .rvx-row .lb { grid-column: 1; grid-row: 1; }
.rvx-c .rvx-row .lb::after { content: " \00b7"; }
.rvx-c .rvx-row .vl { grid-column: 2; grid-row: 1; }
.rvx-c .rvx-row .rvx-edit { grid-column: 3; grid-row: 1; margin: 0; }
.rvx-c .rvx-row .v1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- CEO TG 1492: b2 / c2 ---------- */
.rvx-gblock { padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.rvx-ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 6px; }
.rvx-ghead .lb { font-size: 13px; color: var(--ink-3); }
.rvx-gblock .rvx-goods { border-bottom: 0; padding-bottom: 12px; }
.rvx-c2 .rvx-gblock { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 14px 0; margin-bottom: 4px; }
.rvx-c2 .rvx-row .v1, .rvx-c2 .rvx-row .v2 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.rvx-c2 .rvx-row { display: block; position: relative; padding: 11px 76px 11px 0; min-height: 48px; }
.rvx-c2 .rvx-row .lb { display: inline; font-size: 13px; }
.rvx-c2 .rvx-row .lb::after { content: " \00b7  "; white-space: pre; }
.rvx-c2 .rvx-row .vl { display: inline; }
.rvx-c2 .rvx-row .v1 { display: inline; line-height: 1.4; }
.rvx-c2 .rvx-row .v2 { display: block; margin-top: 2px; }
.rvx-c2 .rvx-row .rvx-edit { position: absolute; right: 0; top: 0; margin: 0; }
.rvx-c2 .rvx-row .v2.full { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
/* Telegram hint: a quiet line with the Telegram mark under the button */
.sheet.rvx2 .foot .tgnote.rvx-tg2 { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); text-align: left; }
.rvx-tgi { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; stroke: var(--ink-2); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* consent: one quiet line at the S-MOB-02 floor (12 px), letter-spacing 0, full width */
.sheet.rvx2 .foot .consent { margin: 8px 0 0; font-size: 12px; line-height: 1.35; letter-spacing: 0; color: var(--ink-3); text-align: left; }

/* CEO TG 1502: the consent is ONE quiet footnote line at the very bottom (CEO lifts the 12 px floor for this legal line only): the size
   follows the popup width (container units) so the whole sentence fits; measured at 12 px: RU 421 px, UA / EN 450 px of text. It sits
   well apart from the Telegram hint, which stays the readable line */
.sheet.rvx2 .foot { container-type: inline-size; }
.sheet.rvx2 .foot .consent { white-space: nowrap; margin: 20px -8px 0; letter-spacing: 0; line-height: 1.3; color: var(--ink-3);
  font-size: min(10.5px, calc((100cqi + 16px) / 35.6)); }
.sheet.rvx2 .foot .consent:is(:lang(uk), :lang(en)) { font-size: min(10.5px, calc((100cqi + 16px) / 38)); }
.sheet.rvx2 .foot .consent a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.sheet.rvx2 .foot .consent a { padding: 17px 0; margin: -17px 0; }   /* the footnote link keeps a 44 px hit box */

/* ---------- CEO TG 1515: d1 / d2 - one quiet info block, the button names what happens next (DRAFT labels) ---------- */
.rvx-info { position: relative; padding: 4px 0 2px; }
.rvx-ihead { position: absolute; top: 0; right: 0; }
.rvx-line { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 10px 84px 10px 0; margin: 0; border: 0; background: none;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.rvx-line + .rvx-line { padding-right: 0; }
div.rvx-line { cursor: default; }
.rvx-li { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; stroke: var(--ink-3); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rvx-lt { min-width: 0; display: grid; gap: 2px; }
.rvx-lt .m { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.rvx-lt .s { font-size: 13px; line-height: 1.4; color: var(--ink-3); overflow-wrap: anywhere; }
.rvx-line:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: var(--r); }
@media (hover: hover) { button.rvx-line:hover .m { color: #fff; } }
.sheet.rvx-d .rvx-send { justify-content: center; gap: 8px; text-align: center; line-height: 1.2; }
.rvx-bti { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rvx-ihead .rvx-edit { margin: 0; }
.rvx-d .rvx-info { margin-top: 4px; }
.sheet.rvx-d .rvx-send { white-space: nowrap; padding: 0 14px; }
.sheet.rvx-d .rvx-send.d2 { white-space: normal; }
/* d1 at 360 px: «Подтвердить в Telegram» stays one line - «Назад» keeps its arrow (48 px target, label for screen readers) and the
   button text goes to 15 px; at 390 nothing changes */
.sheet.rvx-d .rvx-send { min-width: 0; flex: 1 1 auto; }
@container (max-width: 310px) {
  .sheet.rvx-d:has(.rvx-send.d1) .wz-back span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sheet.rvx-d .rvx-send.d1 { font-size: 15px; padding: 0 10px; gap: 6px; }
}
.rvx-lt .s { white-space: pre-line; }   /* a comment under the recipient keeps its own line */
/* CEO TG 1541: a quiet grey bullet before each item line of the goods block; wrapped names hang under the text, not the dot */
.rvx-d .rvx-goods li:not(.sub):not(.dlv) .k { position: relative; padding-left: 14px; }
.rvx-d .rvx-goods li:not(.sub):not(.dlv) .k::before { content: "\2022"; position: absolute; left: 0; top: 0; color: var(--ink-3); }

/* ===== canon pass 06.11 (20-WEB-CANON W-MOT / W-LAW / W-A11Y; apply-pass/margo-site/FIXES.md) ===== */
/* W-MOT-03: one settle spring for UI moves - damping 0.8, overshoot 1.5 % (<= 2 %), no bounce */
:root { --spring: linear(0, 0.044, 0.148, 0.279, 0.415, 0.544, 0.657, 0.753, 0.83, 0.889, 0.934, 0.966, 0.988, 1.002, 1.01, 1.014, 1.015, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1); }
/* CEO TG 2152 (07.11: the new line came in too fast, the fly was abrupt): a softer settle spring for the add-on moves. A real damped spring
   started from rest (damping 0.79, overshoot 1.8 % <= 2 %): it starts gently, travels, passes the target by 1.8 % and eases back */
:root { --spring-soft: linear(0, 0.027, 0.095, 0.187, 0.291, 0.397, 0.5, 0.595, 0.679, 0.753, 0.815, 0.867, 0.908, 0.941, 0.966, 0.985, 0.998, 1.008, 1.013, 1.017, 1.018, 1.018, 1.017, 1.015, 1.014, 1.012, 1.01, 1.008, 1.006, 1.005, 1.004, 1.003, 1); }
/* W-MOT-01 + 02: every control shows it is pressed the moment the finger lands (sink to 95 %), the release springs back */
.chip, .wchip, .lang button, .counter button, .line .step button, .line .rm, .xbtn, .wz-back, .opt, .rv-edit, .rvx-edit, .rvx-line, .rvx-clip,
.cal .nav button, .cal .days button, .cal .clr, .datebtn, .radio, .cb-tile, .cb-sel, .cb-count button, .cb-step button, .cb-notify, .cb-incart,
.cb-secbar button, .qn-btn, .qn-item, .rv-pane, .rv-more, .rv-nav, .ovl .close, .faq summary, .ftr .ct, .ftr li a, .cb-switch button, .skip {
  transition: transform 0.3s var(--spring), background-color 0.15s, border-color 0.15s, color 0.15s;
}
.chip:active, .wchip:active, .lang button:active, .counter button:active, .line .step button:active, .line .rm:active, .xbtn:active, .wz-back:active,
.opt:active, .rv-edit:active, .rvx-edit:active, .rvx-clip:active, .cal .nav button:active, .cal .days button:active:not(:disabled), .cal .clr:active,
.datebtn:active, .radio:active, .cb-tile:active, .cb-sel:active, .cb-count button:active, .cb-step button:active:not(:disabled), .cb-notify:active, .cb-incart:active,
.cb-secbar button:active, .qn-btn:active, .qn-item:active, .rv-pane:active, .rv-more:active, .rv-nav:active, .ovl .close:active, .ftr .ct:active, .ftr li a:active,
.cb-switch button:active, a.btn:active, .rvx-line:active:is(button), .faq summary:active {
  transform: scale(0.95); transition-duration: 0.08s;
}
/* wide rows sink less (a 95 % full-width row jumps 9 px at each side); same feedback, proportional */
.opt:active, .rvx-line:active:is(button), .qn-item:active, .faq summary:active, .radio:active, .datebtn:active, .cb-tile.all:active, .rv-pane:active { transform: scale(0.98); }
.cb-step { transition: transform 0.3s var(--spring); }
.btn[disabled]:active, .chip:disabled:active { transform: none; }

/* W-MOT-10: continuous corners where the browser can draw them; others keep the normal radius */
@supports (corner-shape: squircle) {
  .card, .cb-tile, .sheet, .btn, .chip, .wchip, .opt, .rv-card, .rv-pane, .cb-bar, .qn-panel, .rvx-panel, .rvx-c2 .rvx-gblock, .live-note { corner-shape: squircle; }
}

/* W-A11Y-03: skip link, first in the body, visible on keyboard focus only */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--r); background: var(--acc); color: var(--on-acc); font-weight: 700; text-decoration: none; }
.skip:focus, .skip:focus-visible { top: 8px; outline: 2px solid var(--ink); outline-offset: 2px; color: var(--on-acc); }

/* W-LAW-05: the checkout steps are ONE connected path (dots joined by a line), the current dot is gold, the next step is named */
.wz-prog { height: auto; margin: 0 20px 2px; background: none; border-radius: 0; overflow: visible; }
.wz-path { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.wz-path li { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.wz-path li:last-child { flex: 0 0 auto; }
.wz-path .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--r-pill); border: 1.5px solid var(--ink-3); background: var(--card); transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--spring); }
.wz-path .seg { flex: 1 1 auto; height: 2px; margin: 0 4px; background: var(--line); border-radius: var(--r); overflow: hidden; }
.wz-path .seg i { display: block; height: 100%; width: 0; background: var(--acc); transition: width 0.35s var(--spring); }
.wz-path li.done .dot { background: var(--acc); border-color: var(--acc); }
.wz-path li.done .seg i { width: 100%; }
.wz-path li.cur .dot { border-color: var(--acc); background: var(--acc); transform: scale(1.3); box-shadow: 0 0 0 3px rgba(240, 232, 216, 0.22); }
.wz-meta .wz-nx { color: var(--ink-2); }
.sheet.rvx .wz-path li.done .dot, .sheet.rvx .wz-path li.cur .dot { background: var(--ink-3); border-color: var(--ink-3); box-shadow: none; }
.sheet.rvx .wz-path .seg i { background: var(--ink-3); }

/* W-MOT-09: order confirmed - the circle draws, then the tick */
.okdraw { display: block; width: 56px; height: 56px; margin: 6px 0 4px; }
.okdraw circle, .okdraw path { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.okdraw circle { stroke-dasharray: 151; stroke-dashoffset: 151; transform: rotate(-90deg); transform-origin: 50% 50%; animation: ok-draw 0.5s ease-out 0.1s forwards; }
.okdraw path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ok-draw 0.3s ease-out 0.6s forwards; }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }

/* W-MOT-06: a changing total rolls digit by digit (~100 ms apart); each digit is a column of 0-9 that slides */
.roll { display: inline-flex; white-space: nowrap; font-variant-numeric: tabular-nums; }
.roll .rd { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; }
.roll .rd > span { display: block; transition: transform 0.45s var(--spring); }
.roll .rd > span::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; display: block; line-height: 1.2em; text-align: center; }
.roll .rc { white-space: pre; display: inline-block; line-height: 1.2em; }
.roll .rc::before { content: attr(data-c); }
.roll .rv { display: inline-flex; align-items: flex-end; }

/* W-LAW-06: 6 sections up front, the rest behind «Ещё» (same tile size, a quiet dark surface); W-HAND-05: phone tiles 4:3 so the
   first price is inside the first two screens */
.cb-tile.more { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1px; padding: 0 14px 12px; width: 100%;
  background: var(--card); border: 1px solid var(--line); color: var(--acc); font: 400 15px var(--font); text-align: left; cursor: pointer; }
.cb-tile.more span { font-size: 15px; line-height: 1.25; }
.cb-tile.more small { color: var(--ink-3); font-size: 12px; }
.cb-tile.more::after { content: none; }
.cb-tile.cb-extra[hidden] { display: none; }
@media (max-width: 639px) { .cb-tile { aspect-ratio: 4 / 3; } .cb-tile.all { aspect-ratio: 2 / 1; } }

@media (prefers-reduced-motion: reduce) {
  .okdraw circle, .okdraw path { animation: none; stroke-dashoffset: 0; }
  .roll .rd > span, .wz-path .seg i, .wz-path .dot { transition: none; }
  button:active, a:active, summary:active, label.radio:active, select:active { transform: none !important; opacity: 0.8; }   /* pressed still shows, without motion */
}
.done .okdraw + .promise, .done .okdraw + .no { margin-top: 10px; }

/* =====================================================================================================================
   REDESIGN 06.11 (branch redesign-1106). References picked by the CEO (board research/margo-design-refs-2026-11-06):
   #10 Rustic Ridge (lead): the product big on dark slate, warm photos at its side, a badge-like mark, small clear facts as square tags;
   #7 King River: quiet header with text links, editorial serif, documentary photo; #1 Croghan: condensed old-style serif, sausage red;
   #8 Hozon: one huge confident headline. Not taken: gold (CEO: «псевдо-дороговизна»), pills (CEO: slightly rounded, 10-12 px).
   One theme per screen (W-LOOK-10): every surface is a lighter step of the slate, never a light card. Accent = sausage red, rare.
   ===================================================================================================================== */
body { background: var(--bg); letter-spacing: 0; }
::selection { background: var(--acc-fill); color: var(--on-acc); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
a { color: var(--acc); }
a:hover { color: var(--acc-2); }
.ico { stroke: var(--ink-2); }
h1, h2, .sec h2, .sheet .head h2, .done h2, .doc-body h2 { text-wrap: balance; }

/* buttons: primary = sausage red, secondary = cream outline; 10 px corners, never pills */
.btn { border-radius: var(--r); border-color: var(--hair); color: var(--ink); font-weight: 600; min-height: 48px; padding: 0 20px; }
.btn .ico { stroke: currentColor; }
.btn:hover { background: rgba(240, 232, 216, 0.06); color: var(--ink); border-color: rgba(240, 232, 216, 0.4); }
.btn.fill { background: var(--acc-fill); border-color: var(--acc-fill); color: var(--on-acc); }
.btn.fill:hover { background: var(--acc-fill-2); border-color: var(--acc-fill-2); color: var(--on-acc); }
.btn[disabled], .btn.disabled { background: var(--card-2); border-color: var(--line); color: var(--ink-3); opacity: 1; }
.skip { background: var(--acc-fill); color: var(--on-acc); }
.skip:focus, .skip:focus-visible { color: var(--on-acc); }

/* header: brand = the Zorya mark + the name set in the condensed serif (a badge, ref #10); desktop: text links left, brand centred,
   language / search / cart right (ref #10 layout, ref #7 quiet links) */
.hdr { background: rgba(22, 22, 21, 0.97); border-bottom: 1px solid var(--line); }
.brand b { font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.05; letter-spacing: 0.005em; }
.brand small { color: var(--ink-3); }
.hdr-nav { display: none; }
.lang { border-color: var(--line); border-radius: var(--r); }
.lang button { color: var(--ink-3); font-weight: 600; letter-spacing: 0; }
.lang button[aria-pressed="true"] { background: var(--card-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--acc-fill); }
.srchbtn, .cartbtn { border-color: var(--line); color: var(--ink); }
.srchbtn .ico, .cartbtn .ico { stroke: var(--ink); }
.srchbtn[aria-expanded="true"] { background: var(--card-2); border-color: var(--ink-3); }
.srchbtn[aria-expanded="true"] .ico { stroke: var(--ink); }
.cartbtn .n { background: var(--acc-fill); color: var(--on-acc); border-radius: 10px; }
@media (max-width: 400px) { .brand b { font-size: 16px; } }
@media (min-width: 960px) {
  .hdr { height: 68px; }
  :root { --header: 68px; }
  .hdr .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .hdr .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .hdr .brand b { font-size: 24px; }
  .hdr .brand small { font-size: 13px; }
  .hdr .mark { width: 38px; height: 38px; }
  .hdr-nav { grid-column: 1; grid-row: 1; display: flex; gap: 28px; justify-self: start; }
  .hdr-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
  .hdr-nav a:hover { color: var(--acc-2); }
  .hdr .hdr-right { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* hero: kept exactly as on live main 60682d4 (CEO 06.11 TG 1812: «hero was the part he really liked") - same structure, photo, placket
   ornament and layout; only the tokens change: the gold headline becomes cream, the gold button the accent (via .btn.fill above) */
.hero h1 { color: var(--ink); font-weight: 600; letter-spacing: 0; }
.hero p b { color: var(--ink); font-weight: 500; }

/* section titles: condensed serif in cream, a hairline, and the one signature detail - a short 3 px red rule under the title start */
.sec { padding: 56px 0 8px; }
.sec h2 { position: relative; color: var(--ink); font-weight: 600; font-size: clamp(36px, 9vw, 52px); line-height: 1; letter-spacing: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.sec h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 3px; background: var(--acc-fill); }
.sec h2 small { font-size: 15px; color: var(--ink-2); margin-top: 10px; line-height: 1.4; }

/* catalog: section tiles + one block per section */
.cb-note { color: var(--ink-3); font-size: 14px; margin: 14px 0 8px; }
.cb-note .ico { stroke: var(--ink-3); }
.cb-tile { border-radius: var(--r-lg); background: var(--card); }
.cb-tile::after { background: rgba(10, 10, 9, 0.34); }
.cb-tl b { font-size: 17px; font-weight: 500; color: var(--ink); }
.cb-tile.all .cb-tl b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; }
.cb-tl small { color: rgba(240, 232, 216, 0.78); font-size: 13px; }
.cb-tile.more { background: var(--card); border-color: var(--line); color: var(--ink); }
.cb-tile.more span { font-family: var(--display); font-size: 26px; font-weight: 600; }
.cb-tile.more small { color: var(--ink-3); font-size: 13px; }
.cb-cat { padding-top: 40px; }
.cb-cat-h { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); margin-bottom: 16px; letter-spacing: 0; }
.cb-cat-h small { font-family: var(--font); font-size: 14px; color: var(--ink-3); }
.cb-secbar { background: rgba(22, 22, 21, 0.97); border-bottom-color: var(--line); }

/* product card (ref #10 spec sheet): name, the price set big in the condensed serif, one state line; the weight is a square tag,
   the add button a quiet cream outline (red is kept for the buttons that move the order on) */
.card.cb { border-radius: var(--r-lg); background: var(--card); }
.cb-top { left: 18px; top: 18px; right: 18px; }
.card.cb h3.cb-name { font-size: 15px; font-weight: 500; color: var(--ink); max-width: 80%; }
.cb-price { margin-top: 8px; gap: 6px; }
.cb-price b { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 11cqi, 44px); line-height: 0.95; color: var(--ink); letter-spacing: 0; }
.cb-price span { font-size: 14px; color: rgba(240, 232, 216, 0.72); }
.cb-price.tbd b { font-family: var(--font); font-size: 18px; font-weight: 500; }
.cb-state { font-size: 13px; color: rgba(240, 232, 216, 0.8); margin-top: 10px; }
.cb-state .dot, .card .stline .dot, .wz-path .dot, .radio input, .radio input:checked::after { border-radius: 50%; }
.cb-bar { left: 12px; right: 12px; bottom: 12px; padding: 8px; border-radius: var(--r-md); background: rgba(22, 22, 21, 0.86); border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cb-bar.in { background: rgba(22, 22, 21, 0.9); border-color: var(--hair); }
.cb-qty { border-radius: var(--r); border-color: rgba(240, 232, 216, 0.34); background-color: transparent; color: var(--ink); font-weight: 500; }
.cb-count button { border-radius: var(--r); color: var(--ink); }
.cb-add { border-radius: var(--r); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(240, 232, 216, 0.5); font-weight: 500; font-size: 15px; }
.cb-add .ico { stroke: currentColor; }
.cb-add:hover { background: rgba(240, 232, 216, 0.08); }
.cb-add.done { background: var(--acc-fill); color: var(--on-acc); box-shadow: none; }
.cb-step { border-radius: var(--r); background: var(--acc-fill); color: var(--on-acc); }
.cb-step button { color: var(--on-acc); }
.cb-step button:hover { background: rgba(0, 0, 0, 0.14); }
.cb-step button:focus-visible { border-radius: var(--r); outline-color: var(--on-acc); }
.cb-incap { color: var(--ink); }
.cb-incap .ico { stroke: var(--acc); }
.cb-incart { border-radius: var(--r); background: rgba(22, 22, 21, 0.7); }
.cb-sel:focus-visible, .cb-count button:focus-visible, .cb-add:focus-visible, .cb-notify:focus-visible, .cb-incart:focus-visible, .cb-tile:focus-visible { outline-color: var(--ink); }
.sec-tag, .card.cb .sec-tag { border-radius: 6px; }
.ph-new { background: var(--card-2); }
.ph-tag { color: var(--acc); }
.qn-btn { border-radius: var(--r); background: rgba(31, 31, 29, 0.92); border-color: var(--hair); }
.qn-btn .ico { stroke: var(--ink-2); }
.qn-panel { background: var(--card); }

/* about, reviews, delivery, FAQ */
.about p { font-size: 20px; line-height: 1.5; color: var(--ink); }
.about .muted { color: var(--ink-3); font-size: 15px; }
.rv-card { background: var(--card); border-color: var(--line); border-radius: var(--r-lg); box-shadow: none; }
.rv-pane { background: var(--bg); border-color: var(--line); }
.rv-pane.txt p, .rv-lb-body p { font-family: var(--font); font-style: normal; font-size: 17px; line-height: 1.55; color: var(--ink); }
.rv-pane.txt::after { background: var(--card); }
.rv-name { color: var(--ink-2); font-weight: 500; }
.rv-hint .rv-arrow { width: 16px; height: 16px; stroke: var(--ink-3); }
.rv-nav { border-radius: var(--r); border-color: var(--line); background: rgba(31, 31, 29, 0.95); color: var(--ink); box-shadow: none; }
.rv-nav:hover { border-color: var(--ink-3); background: var(--card-2); }
.split figure { border-radius: var(--r-lg); border-color: var(--line); }
.steps .ico { stroke: var(--ink-2); }
.steps b { font-weight: 600; }
.steps li { font-size: 16px; }
.faq summary { font-weight: 500; font-size: 17px; }
.faq summary::after { color: var(--acc); }
.faq details { border-bottom-color: var(--line); }

/* footer */
.vy-thread { stroke: #26261f; fill: #1d1d1a; }
.ftr .brand b { font-size: 24px; }
.ftr .ct b { color: var(--acc); }
.ftr .ct .ci { stroke: var(--ink-2); color: var(--ink-2); }
.ftr li a { color: var(--acc); }

/* sticky cart bar (phones) */
.bar { background: rgba(22, 22, 21, 0.97); border-top-color: var(--line); }
.bar .btn { min-height: 52px; }

/* cart and checkout sheet */
.scrim { background: rgba(8, 8, 7, 0.74); }
.sheet { background: var(--card); border-color: var(--line); border-radius: var(--r-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.sheet .foot { background: var(--card); border-top-color: var(--line); }
.sheet .head { padding: 18px 16px 12px 20px; }
.sheet .head h2, .sheet.rvx .head h2 { color: var(--ink); font-weight: 600; font-size: 32px; line-height: 1; }
.wz-meta { color: var(--ink-3); font-size: 13px; letter-spacing: 0; margin-bottom: 8px; }
.wz-meta .wz-nx { color: var(--ink-2); }
.wz-path .seg i { background: var(--ink-2); }
.wz-path li.done .dot { background: var(--ink-2); border-color: var(--ink-2); }
.wz-path li.cur .dot { background: var(--acc-fill); border-color: var(--acc-fill); box-shadow: 0 0 0 3px rgba(196, 122, 44, 0.28); }
.sheet.rvx .wz-path li.done .dot { background: var(--ink-2); border-color: var(--ink-2); }
.sheet.rvx .wz-path li.cur .dot { background: var(--acc-fill); border-color: var(--acc-fill); }
.sheet.rvx .wz-path .seg i { background: var(--ink-2); }
.wz-back span:first-child, .sheet.rvx .wz-back span:first-child { color: var(--ink-2); }
.wz-foot .btn { min-height: 56px; font-size: 17px; }
.line { padding: 14px 0; }
.line .nm { font-weight: 500; font-size: 16px; }
.line .sum { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--ink); }
.line .step { border-color: var(--line); border-radius: var(--r); }
.line .step button { background: var(--card-2); color: var(--ink); }
.line .rm { color: var(--ink-3); }
.tots .grand { font-weight: 600; color: var(--ink); }
.tots .grand span:last-child { font-family: var(--display); font-size: 26px; }
.minnote.tbd { color: var(--ink-3); }
.opt { border-radius: var(--r-md); border-color: var(--line); background: var(--bg); }
.opt[aria-checked="true"] { border-color: var(--ink-2); background: var(--card-2); box-shadow: inset 3px 0 0 var(--acc-fill); }
.opt-ico .ico { stroke: var(--ink-3); }
.opt[aria-checked="true"] .opt-ico .ico { stroke: var(--ink); }
.opt-txt b { font-weight: 600; }
.opt-pr { color: var(--ink); font-weight: 600; }
.chip { border-radius: var(--r); }
.chip[aria-pressed="true"], .f .chip[aria-checked="true"] { background: var(--card-2); border-color: var(--ink-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--acc-fill); }
.cal .days button.sel { background: var(--acc-fill); color: var(--on-acc); }
.rvx-total .num { font-family: var(--display); font-weight: 600; font-size: 40px; }
.okdraw circle, .okdraw path { stroke: var(--ink); }
.okdraw path { stroke: var(--acc); stroke-width: 2.5; }

/* W-HAND-10 forms: floating labels. The field is 60 px tall, 10 px corners; the label rests inside like a placeholder and moves up
   (smaller, 12.5 px) on focus or once there is a value; the example text shows only in a focused, empty field */
.f.fl { position: relative; display: block; margin-top: 12px; }
.wz-contact .f.fl:first-child { margin-top: 6px; }
.f.fl input[type="text"], .f.fl input[type="tel"], .f.fl textarea {
  display: block; width: 100%; min-height: 60px; padding: 26px 16px 8px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.4; transition: border-color 0.15s, background-color 0.15s;
}
.f.fl textarea { min-height: 88px; padding-top: 30px; resize: vertical; }
.f.fl label {
  position: absolute; left: 17px; top: 19px; max-width: calc(100% - 34px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 17px; line-height: 1.3; color: var(--ink-3); pointer-events: none; transform-origin: left top;
  transition: transform 0.22s var(--spring), color 0.15s;
}
.f.fl input:focus + label, .f.fl textarea:focus + label,
.f.fl input:not(:placeholder-shown) + label, .f.fl textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(0.74); color: var(--ink-2); }
.f.fl input::placeholder, .f.fl textarea::placeholder { color: transparent; }
.f.fl input:focus::placeholder, .f.fl textarea:focus::placeholder { color: var(--ink-3); }
.f.fl input:focus, .f.fl textarea:focus { border-color: var(--ink-2); background: #1b1b1a; outline: none; }
.f.fl [aria-invalid="true"] { border-color: var(--danger); }
.f.addr textarea, .f textarea#fAddr { min-height: 88px; padding: 14px 16px; border-radius: var(--r); font-size: 17px; }
.srch-bar input { border-radius: var(--r); border-color: var(--line); }
.srch-bar input:focus { border-color: var(--ink-2); }

/* the «Заказ принят» window */
.done.short .no { font-size: 20px; color: var(--ink-2); }
.done.short .no b { display: block; margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: 56px; line-height: 1; color: var(--ink); }
.done.short .promise.tgnext { font-size: 18px; font-weight: 500; color: var(--ink); }
.done.short .after { color: var(--ink-3); }
.done.short .cta .btn { min-height: 56px; font-size: 17px; }

/* overlays */
.ovl .close { border-radius: var(--r); border-color: var(--line); background: rgba(22, 22, 21, 0.9); color: var(--ink); }
.doc-body h2 { color: var(--ink); border-bottom-color: var(--line); }
.doc-body p.ph { color: var(--acc); font-style: normal; }
.live-note { border-color: var(--line); }

@media (prefers-reduced-motion: reduce) { .f.fl label, .f.fl input, .f.fl textarea { transition: none; } }

/* W-LAW-07 reviews (CEO TG 1823): one verbatim takeaway set big, the name + channel under it, the whole message behind «Читать полностью» */
.rv-card.hl { gap: 14px; padding: 20px 20px 10px; min-height: 280px; }
.rv-hl { margin: 0; flex: 1 1 auto; }
.rv-hl p { margin: 0; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.rv-who { display: grid; gap: 2px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.rv-who .rv-name { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.rv-src { font-size: 13px; color: var(--ink-3); }
.rv-card.hl .rv-more { margin: 0 0 2px; color: var(--acc); text-decoration-color: currentColor; font-size: 15px; }
.rv-card.hl .rv-more:hover { color: var(--acc-2); }
@media (min-width: 720px) { .rv-card.hl { min-height: 300px; } .rv-hl p { font-size: 30px; } }

/* review avatars (CEO TG 1831, for later): only a real profile picture given with permission; none = no circle at all */
.rv-who.has-ava { grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.rv-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--card-2); }
.rv-whot { display: grid; gap: 2px; min-width: 0; }

/* =====================================================================================================================
   ACCENT DEVICES (CEO TG 1831): one reusable element each, applied in 2-3 places, switched by ONE class on <html>; default none.
   Colour stays the one accent (sausage red). Drawn as SVG by us (no clip-art, no unicode glyphs). assets/devices.js wraps the H1 key word.
   ===================================================================================================================== */
:root {
  --stitch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 1.5l5 5M7 1.5l-5 5' stroke='%23c47a2c' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C38 4.6 90 3.2 196 5.4c1.6.1 1.6 2.6-.1 2.8C134 9.4 70 10.4 6 12.6c-2.3.1-3.3-3.6-3-4.1z' fill='%23c47a2c'/%3E%3C/svg%3E");
  --zstar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .75l2.53 4.59L12 9.94 9.47 5.34zM23.25 12l-4.59 2.53L14.06 12l4.6-2.53zM12 23.25l-2.53-4.59L12 14.06l2.53 4.6zM.75 12l4.59-2.53L9.94 12l-4.6 2.53zM12 10.4l1.6 1.6-1.6 1.6-1.6-1.6z'/%3E%3C/svg%3E");
  --kraft: #a8845a;   /* butcher-paper tag, a material neutral (L 51 %, no light surface); dark ink on it 5.1:1 */
}

/* (a) dev-stitch: a red cross-stitch line (vyshyvanka) = the title underline, the card divider, the review divider, under the H1.
   CEO TG 1836: its SPACING is now the default for every variant (block «SPACING» below); the class only draws the crosses into that space */
.dev-stitch .sec h2::after { width: 132px; height: 8px; bottom: -5px; background: var(--stitch) repeat-x 0 0 / 12px 8px; }
.dev-stitch .hero h1::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 144px; height: 8px; background: var(--stitch) repeat-x 0 0 / 12px 8px; }
.dev-stitch .cb-top::after { content: ""; position: absolute; left: 0; bottom: 0; width: 84px; height: 8px; background: var(--stitch) repeat-x 0 0 / 12px 8px; }
.dev-stitch .rv-who { border-top: 0; background: var(--stitch) repeat-x 0 0 / 12px 8px; }

/* (b) dev-tag: the butcher-paper price tag (ref #10 size tags, market price tickets) = the card price, the weight, the review channel;
   the hero button takes the same ticket cut in red */
.dev-tag .cb-price b { display: inline-block; padding: 6px 12px 4px 22px; background: var(--kraft); color: #1d1813; text-shadow: none;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); -webkit-mask: radial-gradient(circle 3px at 11px 50%, transparent 98%, #000 100%); mask: radial-gradient(circle 3px at 11px 50%, transparent 98%, #000 100%); }
.dev-tag .cb-price span { color: rgba(240, 232, 216, 0.85); }
.dev-tag .cb-sel { background-color: var(--kraft); border-color: var(--kraft); color: #1d1813; padding-left: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d1813' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); border-radius: 0 var(--r) var(--r) 0; }
.dev-tag .rv-src { justify-self: start; padding: 2px 10px 2px 16px; background: var(--kraft); color: #1d1813; font-size: 13px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.dev-tag .hero .cta .btn.fill { padding-left: 24px; border-radius: 0 var(--r) var(--r) 0; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }

/* (d) dev-word: a red brush stroke under ONE key word - the place in the H1, the section title, the card price */
.dev-word .hero h1 .kw, .dev-word .sec h2 > span:first-child, .dev-word .cb-price b { background: var(--brush) no-repeat 0 100% / 100% 0.32em; padding-bottom: 0.08em; }
.dev-word .sec h2::after { content: none; }

/* (e) dev-star: the «Заря» star (her logo mark, simplified to its four rhombi) as the marker - before each section title, before the
   card name, before the reviewer's name, before the hero's market line */
.dev-star .sec h2::after { content: none; }
.dev-star .sec h2 > span:first-child::before, .dev-star .sec h2:not(:has(> span))::before,
.dev-star .card.cb h3.cb-name::before, .dev-star .rv-name::before, .dev-star .hero p b::before {
  content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.3em; vertical-align: 0.06em;
  background: var(--acc-fill); -webkit-mask: var(--zstar) center / contain no-repeat; mask: var(--zstar) center / contain no-repeat; }
.dev-star .card.cb h3.cb-name::before, .dev-star .rv-name::before, .dev-star .hero p b::before { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--acc); }

/* SPACING (CEO TG 1836: variant (a) «breathes better» - its room is now the default; the crosses stay behind dev-stitch) */
.hero h1 { position: relative; padding-bottom: 22px; margin-bottom: 4px; }
.sec h2 { padding-bottom: 20px; }
.sec h2 small { margin-top: 12px; }
.cb-top { padding-bottom: 20px; }
.cb-state { margin-top: 12px; }
.rv-who { padding-top: 18px; }

/* hero facts (CEO TG 1836): the same words as one lead line + four short fact lines with a line icon each, no paragraph */
.hero p { display: grid; gap: 8px; max-width: none; }
.hero p .hf-lead { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; font-size: 18px; line-height: 1.35; max-width: 30ch; }
.hero p .hf { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: center; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.hero p .hf .ico { width: 20px; height: 20px; stroke: var(--ink-2); }

/* W-LOOK-01: one sentence per short line (about line, delivery notes, FAQ answers) - same words, no paragraph over 3 lines at 390 */
.sl { display: block; }
.sl + .sl { margin-top: 6px; }
.steps .sls { display: block; }

/* cart add-ons «К этому часто берут» (CEO TG 1782 / 1864 / 1876-1878): one quiet row under the cart subtotal (cart step only, never in checkout).
   The photo is fully visible (fixed 64 px band, object-fit cover, nothing on it); the add control sits under it. CEO TG 1885 picked the plain caramel circle at
   the end of the price line (the other four looks are dropped). Visible mark ~30 px, tap area
   44 x 44 (the button box); after a tap the «+» turns into a tick for ~1.2 s, then the tile is replaced by the next suggestion */
.ups { margin: 18px 0 4px; }
.ups-h { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.ups-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ups-it { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px 6px 4px; min-width: 0;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ups-it .ups-img, .ups-it picture { display: block; width: 100%; height: 64px; max-width: none; object-fit: cover; object-position: 50% 50%; border-radius: 9px; background: var(--card); }
.ups-it .ups-noimg { display: block; }
.ups-n { padding: 0 2px; font-size: 13px; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.ups-foot { display: flex; align-items: center; justify-content: space-between; gap: 2px; margin-top: auto; }
.ups-p { display: flex; flex-wrap: wrap; gap: 0 6px; padding-left: 2px; min-width: 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ups-p b { font-weight: 500; color: var(--ink); white-space: nowrap; }
.ups-p .ups-w { white-space: nowrap; }
.ups-add { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px;
  margin: -4px -4px -4px 0; padding: 0; border: 0; background: none; color: var(--ink); font: 500 13px/1.2 var(--font); cursor: pointer; transition: transform 0.3s var(--spring); }
.ups-add:active { transform: scale(0.95); transition-duration: 0.08s; }
.ups-add:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--r); }
.ups-mk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc-fill); color: var(--on-acc); transition: background-color 0.15s; }
.ups-add:hover .ups-mk { background: var(--acc-fill-2); }
.ups-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ups-it.is-added { border-color: rgba(226, 160, 95, 0.55); }
.ups-it.is-added .ups-mk { background: transparent; color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
.ups-it.is-added .ups-add { cursor: default; }
@media (prefers-reduced-motion: reduce) { .ups-add, .ups-mk { transition: none; } }

/* PRODUCT CARD PRICE (CEO TG 1885): the price stays on the photo (the original). The caramel tag is kept for a REAL promo only -
   a card gets it when its item carries «promo: true» (no item does today), so it never reads as a sale on ordinary goods */
.card.cb.is-promo .cb-price b { display: inline-block; padding: 4px 12px 2px; border-radius: var(--r); background: var(--acc-fill); color: var(--on-acc); text-shadow: none; }
.card.cb.is-promo .cb-price span { display: inline-block; padding: 3px 8px; border-radius: 8px; background: #1b1b1a; color: var(--ink-2); text-shadow: none; }
.ups-it.is-added .ups-mk { background: var(--acc-fill); color: var(--on-acc); box-shadow: none; }
.ups-n { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
/* CEO 06.11 TG 1894: the sheet footer covered the add-on row on a phone: a lower row (photo 52 px, the 44 px tap area kept but drawn inside the row) */
.ups { margin: 10px 0 2px; }
.ups-h { margin: 0 0 8px; }
.ups-it { gap: 4px; }
.ups-it .ups-img, .ups-it picture { height: 52px; }
.ups-add { margin: -7px -4px -7px 0; }

/* CEO 07.11 TG 2110: the add-on tap moves instead of redrawing (app.js upsAdd). The row clips the tile that slides in from its right edge
   (and no transformed tile ever widens the scroll area: MEM obs 0251); the ghost is the tapped tile flying onto its new cart line */
.ups-row { overflow: hidden; overflow: clip; overflow-clip-margin: 4px; }
/* CEO TG 2152: the fly is two layers - the carrier moves sideways, the ghost inside it lifts, rises and shrinks: two curves = an arc */
.ups-fly { position: fixed; z-index: 60; margin: 0; pointer-events: none; will-change: transform; }
.ups-ghost { position: absolute; left: 0; top: 0; margin: 0; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.7); }
/* 07.11 Telegram audit: with the page locked (cart, search, text pages) <html> AND <body> both had overflow set, so <body> became a scroll
   box of its own (body keeps overflow-x: hidden) and the sticky header jumped to the top of the document: behind the search a strip of the
   page showed where the header was, behind the cart the section titles doubled. The lock stays on <html> (iOS needs it there); <body> no
   longer turns into a scroller. Browsers without :has keep the old body lock. */
html:has(body.locked) body, html:has(body.srch-on) body { overflow: visible; }
/* 07.11 audit: a scrolled checkout step ran its text right up against the step dots (the current dot and its ring hang 4-5 px below the
   path), so cut letters showed between the dots. The 8 px gap moves from inside the scroll area to under the path: the same layout at rest,
   and scrolled content now ends 10 px below the dots */
.sheet.wz-on .wz-prog:not([hidden]) { margin-bottom: 10px; }
.sheet.wz-on .wz-prog:not([hidden]) + .scroll { padding-top: 0; }