/* China Catalogue — public storefront.
   CASH COIN edition (owner pick 2026-10-16, brand kit brand/identity-logo/
   fortuna/kit/A): the shared monochrome tokens are re-grounded here —
   porcelain paper, warm ink, oxblood + coin gold, hairlines and a double
   ledger-rule instead of shadows, squared corners. Display type is Old
   Standard TT (a 19th-century Russian book face, full Cyrillic, tabular
   figures by default); body/UI text is Onest (Russian grotesk with a working
   tnum — Golos's tnum did nothing, prices jittered). Both self-hosted: buyers
   may be behind the GFW. The token override lives in THIS file only — the
   admin keeps the stock theme. */

/* Old Standard ships Regular, Italic and Bold only. The Regular file answers
   400–600 so the many weight-600 display rules stay Regular (the Bold is far
   heavier than Cormorant's 600 was); only an explicit 700 gets the Bold. */
@font-face {
  font-family: 'Old Standard TT'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/shared/fonts/oldstd-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Old Standard TT'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/shared/fonts/oldstd-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Old Standard TT'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/shared/fonts/oldstd-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Old Standard TT'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/shared/fonts/oldstd-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Old Standard TT'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/shared/fonts/oldstd-400i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Old Standard TT'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/shared/fonts/oldstd-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/shared/fonts/onest-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/shared/fonts/onest-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* WeChat IDs only (JetBrains Mono, OFL, ASCII subset, 12 KB): slashed zero and
   distinct I / l / 1 — the letters buyers mistype. Fetched only by pages that
   actually set an ID in it. */
@font-face {
  font-family: 'GZ Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/shared/fonts/jbmono-ascii.woff2') format('woff2');
}

:root {
  /* light-only design: never let Android dark mode repaint it (see index.html) */
  color-scheme: only light;
  /* porcelain paper (brand kit: ground #f7f6f2, surface #fff, surfaceAlt) */
  --bg: #f7f6f2;
  --surface: #ffffff;
  --surface-2: #edece8;
  /* warm ink (kit text / textMuted); ink-3 is the caption tone */
  --ink: #251817;
  --ink-2: #605150;
  --ink-3: #8a7d7b;
  /* hairlines (kit border, and one step lighter) */
  --line: #e2e0da;
  --line-2: #d7d5ce;
  /* paper colour for type on ink and oxblood panels */
  --on-ink: #f7f6f2;
  /* squared heritage geometry; hairlines carry depth, not shadows */
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 6px;
  --shadow-1: none;
  --shadow-2: 0 10px 36px rgba(37, 24, 23, .16);
  /* display face (headings, prices, numbers) and the body face */
  --font-disp: 'Old Standard TT', Georgia, 'Times New Roman', serif;
  --font: 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* the single heritage accent (owner pick 07-24): oxblood, used ONLY on
     eyebrows, shop numbers, the unlocked badge, the best-value tag and price
     figures — buttons and nav stay ink. --acc-hi is the readable tint of the
     same brand for ink panels: coin gold
     (a lightened oxblood reads pink — ruled out). */
  --acc: #5e2a28;
  --acc-hi: #d3a476;
  --font-mono: 'GZ Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Two-row header below 900px: brand row + always-rendered section row (the
   row exists even on a fresh DB, so --nav-h never depends on content). */
:root { --navbar-h: 60px; --navrow-h: 48px; --nav-h: calc(var(--navbar-h) + var(--navrow-h)); }
@media (min-width: 900px) { :root { --navbar-h: 68px; --nav-h: var(--navbar-h); } }

html { height: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
/* lining figures site-wide: Cormorant's default old-style «1» reads as «I»
   (₸110 000, № 112). Rules that add tabular-nums restate lining-nums — the
   property is one value, setting it alone would bring old-style back. */
body { font-variant-numeric: lining-nums; }
a { text-decoration: none; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
.hidden { display: none !important; }

.wrap {
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
main.wrap { min-height: 62vh; padding-bottom: 36px; }

.kicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc);
}

/* ───────────────────────── top nav ───────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}

/* Quiet header (mobile): html[data-hd] is driven by the scroll controller.
   down → the whole chrome slides away; up → the brand row stays hidden and
   only the section tabs return (the fixed .qbar slides in under them on the
   catalogue); at the top everything is back to the full designed layout.
   Transforms only — sticky/fixed boxes never move in layout, so content
   never jumps. Desktop (≥900px) is untouched. */
@media (max-width: 899.98px) {
  .topnav { transition: transform .32s cubic-bezier(.32, .72, .28, 1); will-change: transform; }
  html[data-hd="hide"] .topnav { transform: translateY(-102%); }
  html[data-hd="slim"] .topnav { transform: translateY(calc(-1 * var(--navbar-h))); }
}
/* edge fade on the horizontal scrollers — hints that more tabs/chips exist.
   Only while one actually overflows (.ovf is set from measurement), so a row
   that fits keeps its last item crisp. */
.nav-row.ovf, .chips.ovf {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 26px), transparent);
}
@media (prefers-reduced-motion: reduce) { .topnav, .qbar { transition: none !important; } }
.nav-in {
  max-width: var(--content-w); margin-inline: auto; padding-inline: var(--pad);
  height: var(--navbar-h); display: flex; align-items: center; gap: 20px;
}
/* the lockup: coin + name in widely spaced capitals (kit: tracking +120) */
.wordmark {
  display: inline-flex; align-items: center; gap: .5em; min-width: 0;
  font: 400 19px/44px var(--font-disp); color: var(--ink);   /* 44px line = a full finger target */
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.wordmark span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wordmark .wm-coin { flex: none; width: auto; height: 1.15em; color: var(--acc); }
@media (min-width: 900px) { .wordmark { font-size: 21px; } }
.nav-links { display: none; }
@media (min-width: 900px) {
  .nav-links { display: flex; gap: 2px; margin-left: auto; }
  .nav-links a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border-radius: var(--r-s); font-size: 15px; font-weight: 500; color: var(--ink-2);
    font-variant: all-small-caps; letter-spacing: .07em;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .nav-links a:hover { background: var(--surface-2); color: var(--ink); }
  .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
}
/* mobile section row — chips-style horizontal scroller, hidden scrollbar */
.nav-row {
  display: flex; align-items: center; gap: 4px;
  height: var(--navrow-h);
  max-width: var(--content-w); margin-inline: auto; padding-inline: var(--pad);
  overflow-x: auto; scrollbar-width: none;
}
.nav-row::-webkit-scrollbar { display: none; }
.nav-row a {
  flex: none; display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 13px; border-radius: var(--r-s);
  font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  font-variant: all-small-caps; letter-spacing: .07em;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-row a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
/* the tab pill stays 34px; its touch area is the row's full 44px */
.nav-row a { position: relative; }
.nav-row a:active { background: var(--surface-2); }
.nav-row a::after { content: ''; position: absolute; inset: -5px 0; }
@media (min-width: 900px) { .nav-row { display: none; } }
.lang-toggle {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 44px; padding: 3px; border-radius: 10px;
  background: var(--surface-2);
}
@media (min-width: 900px) { .lang-toggle { margin-left: 0; } }
.lang-toggle b, .lang-toggle span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 32px; border-radius: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
}
.lang-toggle b { background: var(--ink); color: var(--bg); }
.lang-toggle span { color: var(--ink-3); }
.lang-toggle:hover span { color: var(--ink-2); }

/* ───────────────────────── hero ───────────────────────── */
.hero { padding: 20px 0 4px; animation: rise .4s ease both; }
@media (min-width: 720px) { .hero { padding: 44px 0 8px; } }
.hero-t {
  font-family: var(--font-disp); font-size: clamp(34px, 5.4vw, 52px);
  font-weight: 600; letter-spacing: 0;
  line-height: 1.04; margin-top: 10px; max-width: 22ch; text-wrap: balance;
}
.mast-sub {
  color: var(--ink-2); font-size: 15.5px; line-height: 1.5;
  margin-top: 10px; max-width: 56ch;
}
@media (min-width: 720px) { .mast-sub { font-size: 16.5px; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ───────────────────────── toolbar: search + chips ─────────────────────────
   In-flow on mobile (scrolls away with the hero — the fixed .qbar takes over
   mid-page); sticky on desktop, one slim row while the filters fit beside the
   search box and two clean rows when they don't (see .tool-row below). */
.toolbar {
  margin-top: 14px; padding-block: 8px;
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 9px;
  animation: rise .4s .05s ease both;
}
@media (min-width: 900px) {
  .toolbar {
    position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top)); z-index: 30;
    margin-top: 24px; padding-block: 10px;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    /* frosted like the nav (invisible over the flat page bg at the top);
       the hairline appears only once content scrolls behind the band */
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    transition: box-shadow .25s ease;
  }
  html[data-hd="hide"] .toolbar, html[data-hd="slim"] .toolbar { box-shadow: 0 1px 0 var(--line); }
}
.searchwrap { position: relative; flex: 1; max-width: 460px; }
.searchwrap > .ic {
  position: absolute; left: 15px; top: 50%; translate: 0 -50%;
  color: var(--ink-3); pointer-events: none;
}
.search { padding-left: 46px; padding-right: 48px; border-radius: var(--r-m); }
.search::-webkit-search-cancel-button, .search::-webkit-search-decoration { -webkit-appearance: none; }
.search-x {
  position: absolute; right: 3px; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; display: none; align-items: center; justify-content: center;
  border-radius: var(--r-s); color: var(--ink-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.search-x:hover { color: var(--ink); background: var(--surface-2); }
.searchwrap.has-q .search-x { display: inline-flex; }

.chips {
  display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto;
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .chips { margin-inline: 0; padding-inline: 0; }
  /* no edge padding here, so fade the tail only — never the first chip */
  .chips.ovf {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
}
/* category filters — small-caps ledger tags, not pills */
.chip {
  flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--r-s);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip:active:not(.on) { background: var(--surface-2); }
.chip .ic { width: 13px; height: 13px; }
.chip-mine { color: var(--acc); border-color: var(--acc); }
.chip-mine.on { background: var(--acc); border-color: var(--acc); color: var(--on-ink); }

/* quick bar — the slim fixed toolbar that rides in under the tabs when the
   buyer scrolls back up mid-catalogue (mobile, home route only) */
.qbar {
  position: fixed; left: 0; right: 0; z-index: 35;
  top: calc(env(safe-area-inset-top) + var(--navrow-h));
  display: flex; align-items: center; gap: 8px;
  padding: 8px var(--pad) 10px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(calc(-100% - var(--navrow-h) - env(safe-area-inset-top)));
  transition: transform .32s cubic-bezier(.32, .72, .28, 1), opacity .12s ease, visibility 0s;
  will-change: transform;
}
html[data-hd="slim"] .qbar { transform: none; }
/* the real toolbar is on screen — the quick bar yields with a fast fade
   (120ms, no 320ms slide-out) so duplicate search+chips never paint */
html.tb-near .qbar {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .32s cubic-bezier(.32, .72, .28, 1), opacity .12s ease, visibility 0s .12s;
}
@media (min-width: 900px) { .qbar { display: none; } }
.qbar-btn {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.qbar-btn:active { background: var(--surface-2); }
.qbar-btn.has-q::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--bg);
}
.qbar .chips { flex: 1; min-width: 0; margin-inline: 0; padding-inline: 2px; }
.qbar .chip { min-height: 38px; padding: 0 12px; }
.qbar-field, .qbar-close { display: none; }
.qbar.searching .qbar-chips, .qbar.searching .qbar-open, .qbar.searching .qbar-view { display: none; }
.qbar.searching .qbar-field { display: block; flex: 1; }
.qbar.searching .qbar-close { display: inline-flex; }
.qbar-field .search { height: 44px; }

/* search + view switcher share one row; chips run underneath (mobile) or
   continue on the same line (desktop: [search][seg] [chips…]).
   The filter row is ALWAYS one line — a chip set that outgrows the space left
   beside the search box takes its own full-width line (.stack, set from
   measurement in fitToolbar) rather than wrapping one orphan chip under the
   others; if even the full width is short it scrolls, like on mobile.
   Russian labels run ~30% wider than English, so this is measured, not
   guessed at a breakpoint. */
.tool-row { display: flex; align-items: center; gap: 8px; }
.tool-row .searchwrap { max-width: none; }
@media (min-width: 900px) {
  .tool-row { flex: none; gap: 10px; }
  .tool-row .searchwrap { width: 340px; }
  .toolbar > .chips { flex: 1 1 auto; min-width: 0; }
  .toolbar.stack > .tool-row { flex: 1 1 100%; }
  .toolbar.stack .tool-row .searchwrap { width: auto; flex: 1 1 auto; max-width: none; }
  .toolbar.stack .view-seg { margin-left: auto; }
}
.view-seg { flex: none; padding: 3px; border-radius: var(--r-m); background: var(--surface-2); }
.view-seg > button {
  min-height: 40px; min-width: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.view-seg > button.on { color: var(--ink); }

/* ───────────────────────── catalogue grid ───────────────────────── */
.plaza-sec { margin-top: 16px; animation: rise .4s .08s ease both; }
@media (min-width: 900px) { .plaza-sec { margin-top: 22px; } }
/* the plaza head is sticky: deep in the base it stays pinned under the
   chrome, so the buyer always sees which section they are in (its double
   rule is the edge rows slide under). Its top follows the quiet header. */
.plaza-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  border-bottom: 3px double var(--line-2); padding: 10px 0 8px;
  position: sticky; z-index: 3; top: calc(var(--nav-h) + env(safe-area-inset-top));
  background: var(--bg);
}
@media (max-width: 899.98px) {
  .plaza-head { transition: top .32s cubic-bezier(.32, .72, .28, 1); }
  html[data-hd="slim"] .plaza-head { top: calc(var(--navrow-h) + env(safe-area-inset-top) + var(--qb-h, 59px)); }
  html[data-hd="hide"] .plaza-head { top: env(safe-area-inset-top); }
}
@media (min-width: 900px) { .plaza-head { top: calc(var(--nav-h) + env(safe-area-inset-top) + var(--tb-h, 64px)); } }
@media (prefers-reduced-motion: reduce) { .plaza-head { transition: none !important; } }
.plaza-name { font-family: var(--font-disp); font-size: 25px; font-weight: 600; letter-spacing: 0; }
@media (min-width: 720px) { .plaza-name { font-size: 28px; } }
.plaza-count { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.plaza-note { color: var(--ink-2); font-size: 14px; margin-top: 8px; max-width: 64ch; }

.grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

a.card {
  display: block; overflow: hidden; color: var(--ink);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) {
  a.card:hover {
    transform: translateY(-1px);
    border-color: var(--ink-3);
  }
}
a.card:active { transform: scale(.99); }
.cover { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
/* shimmer while a cover loads; the image fades over it, .err flattens it */
.cover::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(252, 250, 244, .75) 50%, transparent 70%) no-repeat;
  background-size: 220% 100%;
  animation: cover-sweep 1.3s linear infinite;
}
.cover:not(:has(img))::before, .cover:has(img.ld)::before, .cover:has(img.err)::before { animation: none; content: none; }
.cover img {
  position: relative; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s ease;
}
.cover img.ld { opacity: 1; }
.cover img.err { opacity: 0; }
@keyframes cover-sweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.cover-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.card-chev { display: none; }

/* swipeable cover strip — «1/N» chip replaces the old locked badge; only
   «Открыт» still earns a badge. Desktop pages with hover arrows. */
.strip-track {
  display: flex; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-cell {
  position: relative; flex: none; width: 100%; height: 100%;
  scroll-snap-align: start; overflow: hidden;
}
.strip-count {
  position: absolute; right: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(37, 24, 23, .72); color: var(--on-ink);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.strip-count b { font-weight: 600; }
.strip-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(252, 250, 244, .92); color: var(--ink);
  border: 1px solid var(--line);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--t-fast), background var(--t-fast);
}
.strip-btn .ic { width: 14px; height: 14px; }
.strip-btn.prev { left: 8px; }
.strip-btn.next { right: 8px; }
@media (hover: hover) and (pointer: fine) {
  .strip-btn { display: inline-flex; }
  .cover:hover .strip-btn { opacity: 1; }
  .strip-btn:hover { background: var(--surface); }
  .strip-btn:disabled { opacity: 0 !important; pointer-events: none; }
}

/* ───────── ledger list view — power-user density, one class flip away.
   Mobile: text line + full-width filmstrip under it. Desktop: one line —
   [text 340px][filmstrip][chevron]. Filmstrip photos open the viewer. ───────── */
.grid.list { display: block; margin-top: 6px; border-top: 1px solid var(--line); }
.list a.card {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 12px; row-gap: 9px;
  padding: 11px 2px; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; box-shadow: none;
}
@media (hover: hover) { .list a.card:hover { transform: none; background: var(--surface); } }
.list a.card:active { transform: none; background: var(--surface); }
.list .card-body { order: 1; flex: 1; min-width: 0; padding: 0; }
.list .card-chev { order: 2; display: block; flex: none; color: var(--ink-3); }
.list .cover {
  order: 3; width: 100%; height: 84px; aspect-ratio: auto;
  background: none; overflow: visible;
}
.list .cover::before { content: none; }
.list .strip-track {
  gap: 6px; scroll-snap-type: none; overscroll-behavior-x: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
}
.list .strip-cell {
  width: 84px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--surface-2);
  cursor: zoom-in;
}
.list .strip-count, .list .strip-btn { display: none; }
.list .cover-empty {
  position: static; width: 84px; height: 84px;
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface-2);
}
.list .card-no { font-size: 18px; }
.list .card-meta { margin-top: 2px; flex-wrap: nowrap; overflow: hidden; }
.list .card-meta > span { white-space: nowrap; }
.list .card-note { margin-top: 3px; -webkit-line-clamp: 1; }
.list .b { left: 4px; top: 4px; padding: 4px; }
.list .b .b-t { display: none; }
@media (min-width: 900px) {
  .list a.card { flex-wrap: nowrap; }
  .list .card-body { order: 0; flex: 0 0 340px; }
  .list .cover { order: 1; flex: 1; min-width: 0; width: auto; height: 96px; }
  .list .strip-cell { width: 96px; }
  .list .card-chev { order: 2; }
}
.b {
  position: absolute; left: 9px; top: 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 3px;
  background: rgba(37, 24, 23, .78); color: var(--on-ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.b .ic { width: 12px; height: 12px; }
.b.unlocked { background: rgba(252, 250, 244, .95); color: var(--acc); }
.card-body { padding: 10px 12px 12px; }
.card-no { font-family: var(--font-disp); font-size: 19px; font-weight: 600; letter-spacing: 0; color: var(--acc); }
.card-no small { font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-left: 7px; letter-spacing: 0; }
.card-meta { display: flex; flex-wrap: wrap; gap: 3px 11px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.card-meta .q { font-weight: 600; color: var(--ink); }
.card-note {
  margin-top: 5px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ───────────────────────── shop page ───────────────────────── */
.pagehead { padding: 10px 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sharebtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 12px; margin-right: -12px; border-radius: var(--r-s);
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.sharebtn:hover { background: var(--surface-2); color: var(--ink); }
.sharebtn:active, .backbtn:active { background: var(--surface-2); }
.backbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 12px; margin-left: -12px; border-radius: var(--r-s);
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.backbtn:hover { background: var(--surface-2); color: var(--ink); }

.shop-layout { margin-top: 4px; }
@media (min-width: 1040px) {
  .shop-layout {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr);
    gap: 36px; align-items: start;
  }
  .shop-media { position: sticky; top: calc(var(--nav-h) + 24px); }
}

.gallery {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
}
@media (min-width: 720px) { .gallery { aspect-ratio: 4 / 3; } }
.gallery-track {
  display: flex; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
/* slides paint the cached thumb behind the loading original — never blank */
.gal-slide {
  position: relative; width: 100%; height: 100%; flex: none;
  scroll-snap-align: start; overflow: hidden;
  background-size: cover; background-position: center;
  cursor: zoom-in;
}
.gal-slide img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .3s ease;
}
.gal-slide img.ld { opacity: 1; }
/* inline video review — letterboxed on espresso, native controls */
.gal-slide.gal-vid { background: #170c0b; cursor: default; }
.gal-vid video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* play badge on card-strip video cells */
.strip-cell .cell-play {
  position: absolute; inset: 0; margin: auto; width: 40px; height: 40px;
  border-radius: 50%; background: rgba(37, 24, 23, .72); color: var(--on-ink);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.strip-cell .cell-play svg { width: 17px; height: 17px; fill: currentColor; margin-left: 2px; }
.gallery-empty { display: grid; place-items: center; color: var(--ink-3); }
.gal-btn {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(252, 250, 244, .94); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  display: none; align-items: center; justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.gal-btn:hover { background: var(--surface); }
.gal-btn:active { transform: translateY(0) scale(.94); }
.gal-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.gal-btn.prev { left: 14px; }
.gal-btn.next { right: 14px; }
@media (min-width: 1040px) { .gal-btn { display: inline-flex; } }
.ic.flip { transform: scaleX(-1); }
.gal-dots {
  position: absolute; bottom: 12px; left: 50%; translate: -50% 0;
  display: flex; gap: 6px; pointer-events: none;
}
.gal-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(23, 24, 26, .12);
  transition: background var(--t-fast);
}
.gal-dots i.on { background: #fff; }
.gal-count {
  position: absolute; top: 12px; right: 12px;
  background: rgba(37, 24, 23, .78); color: var(--on-ink);
  border-radius: 3px; font-variant-numeric: lining-nums tabular-nums;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gal-count b { font-weight: 600; }

.shop-info { margin-top: 16px; }
@media (min-width: 1040px) { .shop-info { margin-top: 0; } }
.shop-title { font-family: var(--font-disp); font-size: 32px; font-weight: 600; letter-spacing: 0; line-height: 1.05; }
@media (min-width: 720px) { .shop-title { font-size: 36px; } }
.shop-title .cat { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.shop-sub { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.shop-sub .ic { color: var(--ink-3); }
.specs { margin: 14px 0 0; border-top: 1px solid var(--line); }
.spec { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.spec dt {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 3px; white-space: nowrap;
}
.spec dd { margin: 0; font-size: 14.5px; font-weight: 500; text-align: right; }
.shop-notes { margin-top: 12px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }

/* sealed contact panel — the one dark moment */
.seal-panel {
  margin-top: 16px; padding: 18px;
  background: var(--ink); color: var(--on-ink); border-radius: var(--r-l);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
}
.seal-qr {
  grid-column: 2; align-self: start; position: relative;
  width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: #fff;
}
@media (min-width: 720px) { .seal-qr { width: 116px; height: 116px; } }
.seal-qr svg { width: 100%; height: 100%; display: block; filter: blur(5px); transform: scale(1.12); opacity: .9; }
.seal-lock {
  position: absolute; inset: 0; margin: auto; width: 38px; height: 38px;
  border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
}
.seal-lock .ic { width: 17px; height: 17px; }
.seal-inner { grid-column: 1; min-width: 0; }
.seal-k { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 246, 242, .55); }
.seal-t { font-family: var(--font-disp); font-size: 23px; font-weight: 600; letter-spacing: 0; margin: 7px 0 5px; }
@media (min-width: 720px) { .seal-t { font-size: 25px; } }
.seal-d { font-size: 13.5px; line-height: 1.5; color: rgba(247, 246, 242, .68); max-width: 46ch; }
.seal-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.seal-cta .btn { white-space: nowrap; }
.btn-invert { background: var(--on-ink); color: var(--ink); }
.btn-invert:hover { background: #ebe9e3; }
.btn-outline-invert { background: transparent; color: var(--on-ink); border-color: rgba(247, 246, 242, .32); }
.btn-outline-invert:hover { border-color: rgba(247, 246, 242, .65); }

/* unlocked contact card */
.contact-card {
  margin-top: 16px; padding: 20px 18px 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  animation: unlock-in .5s cubic-bezier(.3, .7, .4, 1) both;
}
.contact-k {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.contact-qr {
  width: 224px; height: 224px; margin: 14px auto 0; padding: 12px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.contact-qr svg { width: 100%; height: 100%; display: block; }
.contact-link { font-size: 13px; color: var(--ink-2); word-break: break-all; margin: 10px auto 0; max-width: 36ch; }
.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.contact-extra { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }

/* ───────────────────────── pricing ───────────────────────── */
.price-head { margin-top: 8px; text-align: center; }
.price-title { font-family: var(--font-disp); font-size: clamp(32px, 4.4vw, 44px); font-weight: 600; letter-spacing: 0; text-wrap: balance; }
.price-sub { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin: 10px auto 0; max-width: 58ch; }

.tiers { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.tier {
  display: flex; flex-direction: column;
  padding: 18px 16px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-l);
}
.tier.hot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tier-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tier-name { font-size: 15px; font-weight: 600; }
.tier-tag { background: var(--acc); color: var(--on-ink); border-radius: 3px; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; font-weight: 600; }
.tier-price { font-family: var(--font-disp); font-size: 40px; font-weight: 600; letter-spacing: 0; margin-top: 6px; line-height: 1; color: var(--acc); font-variant-numeric: lining-nums; }
.tier.hot .tier-price { color: var(--acc-hi); }
.tier-desc { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.tier.hot .tier-desc { color: rgba(247, 246, 242, .7); }

.pricing-cols { margin-top: 28px; }
@media (min-width: 860px) {
  .pricing-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px; align-items: start; }
}
.paysteps h3 { font-family: var(--font-disp); font-size: 24px; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.step { display: flex; gap: 13px; padding: 10px 0; border-top: 1px solid var(--line); }
.step-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center; font-family: var(--font-disp); font-size: 15px; font-weight: 600;
}
.step-b { font-size: 14.5px; font-weight: 500; padding-top: 3px; }
.step-b small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.paybox {
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l);
  font-size: 14px; line-height: 1.55; white-space: pre-wrap;
}
@media (min-width: 860px) { .paybox { margin-top: 0; } }
.paybox .kicker { display: inline-flex; align-items: center; gap: 6px; }

.pricing-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pricing-ctas .btn { flex: 1 1 auto; }
@media (min-width: 720px) { .pricing-ctas .btn { flex: 0 0 auto; min-width: 240px; } }

/* ───────────────────────── access-code dialog ───────────────────────── */
.code-card h3 { font-family: var(--font-disp); font-size: 26px; font-weight: 600; letter-spacing: 0; }
.code-card .code-input { margin-top: 16px; }
.code-card .m-btns { margin-top: 14px; }
.code-input {
  display: block; width: 100%; max-width: 300px; height: 58px; margin: 18px auto 0;
  text-align: center; font: inherit; font-size: 26px; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m);
  outline: none; transition: border-color var(--t-fast);
}
.code-input:focus { border-color: var(--ink); }
.code-input[aria-invalid="true"] { border-color: var(--err); }
.code-input::placeholder { color: var(--ink-3); font-weight: 500; }
.code-input.shake { animation: shake .3s linear; }
.redeem-err { min-height: 20px; margin-top: 10px; }
.redeem-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); max-width: 40ch; margin-inline: auto; }

/* ───────────────────────── goods («Товары») ───────────────────────── */
.goods-head { padding: 20px 0 0; animation: rise .4s ease both; }
@media (min-width: 720px) { .goods-head { padding: 30px 0 0; } }
.page-sub { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: 8px; max-width: 56ch; }
.goods-count {
  margin-top: 10px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.goods-grid { margin-top: 12px; animation: rise .4s .05s ease both; }
.card-meta .por { color: var(--ink-3); }

.goods-price { font-family: var(--font-disp); font-size: 32px; font-weight: 600; letter-spacing: 0; margin-top: 8px; line-height: 1; color: var(--acc); }
.goods-price.por { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.order-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.order-btn { width: 100%; }
@media (min-width: 720px) { .order-btn { width: auto; min-width: 260px; } }
.wa-fallback {
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
}
.wa-hint { font-size: 12.5px; color: var(--ink-3); }
.wa-num { font-size: 15.5px; font-weight: 600; letter-spacing: .02em; margin-top: 6px; user-select: all; }
.wa-fallback-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ───────────────────────── guide («Как заказать») ───────────────────────── */
.guide { max-width: 720px; margin-top: 4px; padding-bottom: 8px; animation: rise .4s .05s ease both; }
.guide-h { font-family: var(--font-disp); font-size: 25px; font-weight: 600; letter-spacing: 0; margin-top: 24px; }
@media (min-width: 720px) { .guide-h { font-size: 27px; } }
.guide-p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; }
.guide-photo {
  display: block; width: 100%; margin-top: 14px; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface-2);
  cursor: zoom-in; padding: 0;
}
.guide-photo img { width: 100%; display: block; }
.guide-video {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-l);
}
.gv-cover {
  position: relative; flex: none; width: 116px; aspect-ratio: 4 / 3;
  border-radius: var(--r-m); overflow: hidden; background: var(--surface-2);
  display: grid; place-items: center;
}
@media (min-width: 720px) { .gv-cover { width: 148px; } }
.gv-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gv-play {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(37, 24, 23, .78); color: var(--on-ink);
  display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gv-play svg { width: 18px; height: 18px; fill: currentColor; display: block; margin-left: 2px; }
.gv-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gv-t { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.gv-url { font-size: 12.5px; color: var(--ink-3); word-break: break-all; }
.guide-cta { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ───────────────────────── full-screen photo viewer ─────────────────────────
   Deep-espresso room; chrome floats over the photo and hides on tap (.bare).
   All motion is transform/opacity only — the gesture engine drives inline
   transforms, CSS owns the enter/exit fades. */
html.lb-open, html.lb-open body { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 100;
  touch-action: none; overscroll-behavior: contain;
  animation: fade-in .22s ease both;
}
.lb.out { animation: fade-out .22s ease both; pointer-events: none; }
.lb-bg { position: absolute; inset: 0; background: #170c0b; transition: opacity .22s ease; }
.lb-track {
  position: absolute; inset: 0; display: flex;
  will-change: transform;
}
.lb-slide {
  position: relative; flex: none; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lb-fig {
  margin: 0; display: flex; will-change: transform;
  transform-origin: center center;
}
.lb-fig img {
  max-width: 100vw; max-height: 100vh; max-height: 100dvh;
  object-fit: contain; display: block;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.lb-load {
  position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px;
  color: rgba(247, 246, 242, .8);
  opacity: 0; transition: opacity .2s ease .35s;   /* only slow loads show it */
}
.lb-slide:not(.full) .lb-load { opacity: 1; }
.lb-slide.full .lb-load { display: none; }
.lb-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 14px 26px;
  background: linear-gradient(rgba(22, 18, 12, .55), transparent);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.lb-count {
  color: var(--on-ink); font-size: 13.5px; letter-spacing: .06em;
  font-variant-numeric: lining-nums tabular-nums; pointer-events: auto;
}
.lb-count b { font-weight: 650; }
.lb-x {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-ink); background: rgba(37, 24, 23, .5); pointer-events: auto;
  transition: background var(--t-fast);
}
.lb-x:hover { background: rgba(37, 24, 23, .8); }
.lb-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: var(--on-ink); background: rgba(37, 24, 23, .5);
  border: 1px solid rgba(247, 246, 242, .16);
  transition: background var(--t-fast), opacity var(--t-fast);
}
.lb-nav:hover { background: rgba(37, 24, 23, .85); }
.lb-nav:disabled { opacity: .25; pointer-events: none; }
.lb-nav.prev { left: 16px; }
.lb-nav.next { right: 16px; }
/* arrows for mice — and for any wide screen (iPad landscape included) */
@media (hover: hover) and (pointer: fine), (min-width: 1040px) { .lb-nav { display: inline-flex; } }
.lb.bare .lb-top, .lb.bare .lb-nav { opacity: 0; pointer-events: none; }
@keyframes fade-out { to { opacity: 0; } }

/* ───────────────────────── misc ───────────────────────── */
.state.fatal { min-height: 72vh; justify-content: center; }
.state { padding: 40px 24px; }
.skel-card { aspect-ratio: 4 / 5; border-radius: var(--r-l); }

.footer { margin-top: 44px; border-top: 3px double var(--line-2); padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); text-align: center; }
.footer .kicker { display: block; letter-spacing: .22em; }
.footer p { color: var(--ink-3); font-size: 13px; margin-top: 6px; }

/* ───────────────────────── landing («визитка») ─────────────────────────
   Letterhead composition: engraved seal, centred display type, a drawn
   ledger rule, then quiet left-aligned sections. One orchestrated entrance
   (first visit per session), scroll-reveals after — restraint is the point. */
.land { --land-gap: 58px; }
@media (min-width: 720px) { .land { --land-gap: 84px; } }

.land-hero {
  padding: 34px 0 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 720px) { .land-hero { padding: 60px 0 14px; } }
.seal-svg { height: 96px; width: auto; display: block; color: var(--acc); }
@media (min-width: 720px) { .seal-svg { height: 112px; } }
/* The landing mark is the Cash Coin symbol (inline SVG from app.js
   coinSvg(), paths from the brand kit), coloured by the oxblood accent. */
.land-k { margin-top: 22px; }
.land-t {
  font-family: var(--font-disp); font-weight: 600;
  font-size: clamp(36px, 8.6vw, 58px); line-height: 1.04; letter-spacing: 0;
  margin-top: 12px; max-width: 17ch; text-wrap: balance;
}
@media (min-width: 720px) { .land-t { max-width: 23ch; } }
.land-rule {
  width: 148px; height: 7px; margin-top: 20px;
  border-block: 1px solid var(--line-2);
}
.land-sub {
  color: var(--ink-2); font-size: 16px; line-height: 1.55;
  margin-top: 18px; max-width: 46ch;
}
@media (min-width: 720px) { .land-sub { font-size: 17px; } }
.land-cta { justify-content: center; margin-top: 22px; }
.land-cta .btn { min-width: 180px; }

/* the entrance — staggered rise, then stillness. Skipped for return visits
   (no .anim) and by prefers-reduced-motion (global kill switch). */
.land-hero.anim > * { animation: rise .55s cubic-bezier(.3, .7, .4, 1) both; }
.land-hero.anim .land-seal { animation: seal-in .7s cubic-bezier(.3, .7, .4, 1) both; }
.land-hero.anim .land-k { animation-delay: .12s; }
.land-hero.anim .land-t { animation-delay: .2s; }
.land-hero.anim .land-rule { animation: rule-draw .6s .38s cubic-bezier(.3, .7, .4, 1) both; }
.land-hero.anim .land-sub { animation-delay: .46s; }
.land-hero.anim .land-cta { animation-delay: .56s; }
@keyframes seal-in { from { opacity: 0; transform: scale(.94); } }
@keyframes rule-draw { from { opacity: 0; transform: scaleX(0); } }

/* scroll reveals — once, gently, and instantly under reduced motion */
.rvl { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.3, .7, .4, 1); }
.rvl.rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rvl { transform: none; } }

.land-sec { margin-top: var(--land-gap); }
.land-head .land-h {
  font-family: var(--font-disp); font-size: clamp(26px, 5vw, 34px);
  font-weight: 600; letter-spacing: 0; margin-top: 8px;
}
.land-sub2 { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin-top: 8px; max-width: 56ch; }

/* how it works — four engraved plates */
.land-steps { margin-top: 18px; border-top: 3px double var(--line-2); }
.lstep { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lstep-n {
  flex: none; font-family: var(--font-disp); font-size: 30px; font-weight: 600;
  color: var(--acc); line-height: 1; padding-top: 2px; min-width: 44px;
  font-variant-numeric: lining-nums tabular-nums;
}
.lstep-b b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.lstep-b p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
@media (min-width: 900px) {
  .land-steps { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .lstep:nth-last-child(-n+2) { border-bottom: 0; }
}

/* field evidence — the contact-sheet strip. Paper frames, a breath of tilt,
   warm-toned photos; tapping opens the full-screen viewer. */
.proof-strip {
  display: flex; gap: 14px; margin-top: 20px;
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  padding-block: 8px 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent);
}
.proof-strip::-webkit-scrollbar { display: none; }
.proof-ph {
  flex: none; margin: 0; scroll-snap-align: center;
  background: var(--surface); border: 1px solid var(--line-2);
  padding: 8px 8px 7px; box-shadow: 0 6px 22px rgba(37, 24, 23, .1);
  transform: rotate(-1.1deg);
}
.proof-ph:nth-child(2n) { transform: rotate(1deg); }
.proof-ph:nth-child(3n) { transform: rotate(-.4deg); }
.proof-ph button { display: block; cursor: zoom-in; }
.proof-ph img {
  width: min(64vw, 300px); aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--surface-2);
  filter: saturate(.94) sepia(.06);
  opacity: 0; transition: opacity .4s ease;
}
.proof-ph img.ld { opacity: 1; }
.proof-ph figcaption {
  padding-top: 7px; text-align: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 900px) { .proof-strip { margin-inline: 0; padding-inline: 2px; } }

/* ordering terms — engraved plates with the figure as the hero */
.land-terms { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
@media (min-width: 720px) { .land-terms { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.lterm {
  background: var(--surface); border: 1px solid var(--line-2);
  border-top: 3px double var(--line-2);
  padding: 18px 18px 20px;
}
.lterm-city {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc);
}
.lterm-fig {
  font-family: var(--font-disp); font-size: 46px; font-weight: 600;
  line-height: 1; margin-top: 10px; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.lterm-text { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }

/* live figures — set like an engraved colophon line */
.land-nums {
  margin-top: var(--land-gap); padding: 16px 0;
  border-block: 3px double var(--line-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-disp); font-size: 20px; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums; text-align: center;
}
@media (min-width: 720px) {
  .land-nums { flex-direction: row; justify-content: center; column-gap: 18px; font-size: 22px; }
  .land-nums span + span::before {
    content: '·'; color: var(--ink-3); font-family: var(--font); font-weight: 400;
    margin-right: 18px;
  }
}

/* о себе — first person, no name; set as a wide-measure quotation */
.land-about { max-width: 720px; }
.land-quote {
  margin-top: 12px; font-family: var(--font-disp);
  font-size: clamp(20px, 3.4vw, 25px); font-weight: 500; line-height: 1.42;
  letter-spacing: .002em;
}
/* the name's провенанс — a quiet engraved footnote under the quote */
.land-story {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line);
  font-family: var(--font-disp); font-style: italic;
  font-size: 16.5px; font-weight: 500; line-height: 1.5; color: var(--ink-2);
  max-width: 54ch;
}

/* faq — ledger accordion on native <details> */
.land-faq { margin-top: 16px; border-top: 1px solid var(--line); max-width: 780px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 2px; cursor: pointer;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--ink-3); transition: transform .25s cubic-bezier(.3, .7, .4, 1); }
.faq[open] summary .ic { transform: rotate(180deg); }
.faq summary:hover { color: var(--acc); }
.faq > p {
  padding: 0 2px 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 62ch; animation: faq-in .3s ease both;
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* finale — the seal signs off */
.land-fin { margin-top: var(--land-gap); text-align: center; display: flex; flex-direction: column; align-items: center; }
.land-fin .land-h { font-family: var(--font-disp); font-size: clamp(26px, 5vw, 34px); font-weight: 600; }
.land-fin .land-sub2 { margin-top: 8px; }
.land-fin-seal { margin-bottom: 18px; }
.seal-svg.sm { height: 44px; width: auto; }
.land-wholesale {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 26px; min-height: 44px; padding: 0 10px;
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  transition: color var(--t-fast);
}
.land-wholesale:hover { color: var(--acc); }
.land-wholesale .ic { width: 14px; height: 14px; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes unlock-in {
  0% { opacity: 0; transform: scale(.96); }
  60% { transform: scale(1.008); }
  100% { opacity: 1; transform: none; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* ───────────────────────── pricing: the directory package ─────────────────────────
   Four packages on a ladder now (directory → single → five → full). Each card
   carries its own WhatsApp button pinned to the bottom, so a row of cards
   lines its buttons up whatever the copy length. */
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.tier-cta { margin-top: auto; align-self: stretch; }
.tier-desc { margin-bottom: 14px; }
.tier-dirinfo {
  margin: -6px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink); font-variant-numeric: lining-nums tabular-nums;
}
.tier-link {
  display: inline-flex; align-items: center; gap: 2px; align-self: flex-start;
  min-height: 32px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--acc);
}
.tier-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tier-link { position: relative; }
.tier-link::after { content: ''; position: absolute; inset: -6px -6px; }
.tier-link .ic { width: 14px; height: 14px; }
.tier-bonus {
  display: flex; gap: 7px; align-items: flex-start;
  margin: -4px 0 14px; padding-top: 10px; border-top: 1px dashed var(--line-2);
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--acc);
}
.tier-bonus .ic { flex: none; margin-top: 1px; }
.tier.hot .tier-bonus { color: var(--acc-hi); border-top-color: rgba(247, 246, 242, .22); }

/* ───────────────────────── landing: directory card ───────────────────────── */
.ldir {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px 20px; background: var(--surface);
  border: 1px solid var(--line-2); border-top: 3px double var(--line-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
@media (min-width: 720px) { .ldir { padding: 28px 30px 26px; } }
.ldir:hover { border-color: var(--acc); }
.ldir-t {
  font-family: var(--font-disp); font-size: clamp(26px, 5vw, 36px); font-weight: 600;
  line-height: 1.1; letter-spacing: 0; text-wrap: balance; max-width: 26ch;
  font-variant-numeric: lining-nums tabular-nums;
}
.ldir-d { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 58ch; }
.ldir-cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc);
}
.ldir:hover .ldir-cta .ic { transform: translateX(3px); }
.ldir-cta .ic { transition: transform var(--t-fast); }

/* ───────────────────────── «Справочник WeChat» ─────────────────────────
   A supplier ledger. Locked rows show the first two letters and a drawn
   redaction bar where the rest of the ID sits; unlocked rows set the ID in a
   typewriter face (slashed zero, distinct I / l) on a paper chip — one tap
   copies it. Sections skip layout while off-screen (content-visibility), so
   1,100+ rows open instantly on a budget phone. */
.dir-hero { padding: 20px 0 4px; animation: rise .4s ease both; }
@media (min-width: 720px) { .dir-hero { padding: 40px 0 8px; } }
/* lining figures: Cormorant's old-style «1» reads as «I» — «1 091» must read as a number */
.dir-t { max-width: 20ch; font-variant-numeric: lining-nums tabular-nums; }
/* the size of the list, set as three ledger figures: number over label */
.dir-nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0;
  border-block: 3px double var(--line-2);
}
.dir-nums > div { padding: 10px 12px 9px 0; min-width: 0; }
.dir-nums > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.dir-nums dt {
  font-family: var(--font-disp); font-size: clamp(26px, 6.4vw, 34px); font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
}
.dir-nums dd {
  margin: 5px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); line-height: 1.3;
}
@media (min-width: 720px) { .dir-nums { max-width: 560px; } }
.dir-cta { align-items: center; margin-top: 18px; }
.dir-cta .btn { gap: 8px; }
@media (max-width: 559.98px) { .dir-cta .btn { flex: 1 1 100%; } }
.dir-open {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--acc); border-radius: var(--r-s); color: var(--acc);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.dir-incl {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; min-height: 36px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.dir-incl:hover { color: var(--acc); }
.dir-incl .ic { width: 14px; height: 14px; }
.dir-hint { display: flex; gap: 7px; align-items: flex-start; margin-top: 12px; font-size: 13px; color: var(--ink-3); max-width: 56ch; }
.dir-hint .ic { flex: none; margin-top: 2px; }

@media (min-width: 1100px) {
  .dir-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 0 56px; align-items: end; }
  .dir-top .dir-rules { margin-top: 0; margin-bottom: 4px; }
}
/* the WeChat rules — a ruled notice, numbered like ledger entries */
.dir-rules {
  margin-top: 20px; padding: 16px 18px 14px;
  background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--acc);
  max-width: 760px;
}
.dir-rules-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dir-rules-h .ic { color: var(--acc); }
.dir-rules ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: dr; }
.dir-rules li {
  counter-increment: dr; position: relative; padding: 5px 0 5px 28px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.dir-rules li::before {
  content: counter(dr); position: absolute; left: 0; top: 3px;
  font-family: var(--font-disp); font-size: 19px; font-weight: 600; color: var(--acc); line-height: 1.2;
  font-variant-numeric: lining-nums;
}

/* sticky tools: follow the quiet header on phones (data-hd), sit under the
   nav on desktop. Solid paper — a see-through band let the rows ghost under
   the search field. Phones get ONE row (search + a square categories key);
   the second row appears only when something is in play. */
.dir-tools {
  position: sticky; z-index: 30; top: calc(var(--nav-h) + env(safe-area-inset-top));
  margin-top: 18px; margin-inline: calc(-1 * var(--pad)); padding: 10px var(--pad);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 899.98px) {
  .dir-tools { transition: top .32s cubic-bezier(.32, .72, .28, 1); }
  html[data-hd="slim"] .dir-tools { top: calc(var(--navrow-h) + env(safe-area-inset-top)); }
  html[data-hd="hide"] .dir-tools { top: env(safe-area-inset-top); }
}
html[data-hd="slim"] .dir-tools, html[data-hd="hide"] .dir-tools { box-shadow: 0 1px 0 var(--line); }
@media (prefers-reduced-motion: reduce) { .dir-tools { transition: none !important; } }
.dir-tools-main { display: flex; gap: 8px; align-items: center; min-width: 0; }
.dir-tools .searchwrap { max-width: none; flex: 1 1 auto; min-width: 0; }
.dir-tools-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.dir-tools-row .chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.dir-catchip { text-transform: none; letter-spacing: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 900px) {
  .dir-tools { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding-block: 12px; }
  .dir-tools-main { flex: 0 1 560px; }
  .dir-tools-row { flex: 1 1 auto; }
}
.dir-catbtn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: border-color var(--t-fast);
}
.dir-catbtn .dcb-l { display: none; }
.dir-catbtn:hover { border-color: var(--ink-3); }
.dir-catbtn.on { border-color: var(--ink); }
.dir-catbtn.on::after {   /* a category is picked */
  content: ''; position: absolute; top: 8px; right: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--acc);
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  .dir-catbtn { width: auto; padding: 0 14px; }
  .dir-catbtn .dcb-l { display: inline; }
}
@media (min-width: 1024px) { .dir-catbtn { display: none; } }
.dir-shown { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* rail (desktop) + list */
.dir-body { margin-top: 10px; }
.dir-rail { display: none; }
@media (min-width: 1024px) {
  .dir-body { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 30px; align-items: start; }
  .dir-rail {
    display: block; position: sticky; top: calc(var(--nav-h) + 76px);
    max-height: calc(100vh - var(--nav-h) - 96px); overflow: auto; scrollbar-width: thin;
    padding: 4px 6px 12px 0;
  }
}
.dcl {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 34px; padding: 7px 10px; border-radius: var(--r-s); text-align: left;
  font-size: 13.5px; line-height: 1.3; color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.dcl:hover { background: var(--surface-2); color: var(--ink); }
.dcl.on { background: var(--ink); color: var(--bg); }
.dcl .n { flex: none; font-size: 12px; opacity: .75; font-variant-numeric: lining-nums tabular-nums; }
.dcl.dim { opacity: .38; }
.dcl-g {
  padding: 16px 10px 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acc);
}

.dir-gh {
  margin: 26px 0 12px; padding-top: 12px; border-top: 3px double var(--line-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--acc);
}
.dir-list > .dir-gh:first-child { margin-top: 8px; }
.dir-cat { margin-bottom: 14px; content-visibility: auto; contain-intrinsic-size: auto 640px; }
/* the category head is sticky under the tools — 30 screens into the list the
   buyer still sees «Женская обувь · 137»; .stuck adds the edge rows slide under */
.dir-ch {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0;
  position: sticky; z-index: 2; top: calc(var(--nav-h) + env(safe-area-inset-top) + var(--dt-h, 68px));
  background: var(--bg);
}
.dir-ch.stuck { box-shadow: 0 1px 0 var(--line); }
@media (max-width: 899.98px) {
  .dir-ch { transition: top .32s cubic-bezier(.32, .72, .28, 1); }
  html[data-hd="slim"] .dir-ch { top: calc(var(--navrow-h) + env(safe-area-inset-top) + var(--dt-h, 68px)); }
  html[data-hd="hide"] .dir-ch { top: calc(env(safe-area-inset-top) + var(--dt-h, 68px)); }
}
@media (prefers-reduced-motion: reduce) { .dir-ch { transition: none !important; } }
.dir-ch h3 { font-family: var(--font-disp); font-size: clamp(21px, 3.4vw, 25px); font-weight: 600; letter-spacing: 0; line-height: 1.15; }
.dir-cn { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; }
.dir-copyall {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 34px; padding: 0 8px;
  border-radius: var(--r-s); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.dir-copyall:hover { background: var(--surface-2); color: var(--acc); }
.dir-copyall::after { content: ''; position: absolute; inset: -5px 0; }

.dir-rows {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-m);
}
.dr {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px 8px 12px;
  border-top: 1px solid var(--line);
}
.dr:first-child { border-top: 0; }
.dr-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.dr-note { font-size: 14px; line-height: 1.45; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.dr.lk { gap: 12px; }
.dr.lk .dr-note { color: var(--ink-2); }
.dr-note mark { background: color-mix(in srgb, var(--acc) 16%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.dr-also { flex-basis: 100%; font-size: 12px; color: var(--ink-3); }

.dr-id {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  font-variant-ligatures: none; font-feature-settings: 'zero' 1;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-s);
  color: var(--ink); text-align: left; word-break: break-all; line-height: 1.3; cursor: copy;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.dr-id:hover { border-color: var(--acc); }
.dr-id::after { content: ''; position: absolute; inset: -4px -2px; }
.dr-id.lk::after { inset: -9px -4px; }
.dr-id:active { background: var(--surface-2); }
.dr-id.ok, .dr-alt.ok { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* locked: two letters, then the redaction bar where the ID would be */
.dr-id.lk { cursor: pointer; color: var(--ink-2); flex: none; }
.dr-id.lk b { font-weight: 600; }
.dr-id.lk i {
  display: block; width: 64px; height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 9px, transparent 9px 11px);
  opacity: .42;
}
.dr-id.lk .ic { width: 13px; height: 13px; color: var(--ink-3); }
.dr-id.lk:hover { border-color: var(--line-2); background: var(--surface-2); }
.dr-alt {
  position: relative;   /* paints above the ID's widened touch area */
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 9px;
  border: 1px dashed var(--acc); border-radius: 999px; background: color-mix(in srgb, var(--acc) 6%, transparent);
  font-size: 12.5px; color: var(--acc); cursor: copy;
}
.dr-alt code { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; font-feature-settings: 'zero' 1; }
.dr-mark {
  position: relative;
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; align-self: center;
  border: 1.5px solid var(--line-2); color: transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dr-mark:hover { border-color: var(--acc); color: var(--ink-3); }
.dr-mark::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.dr-mark:active { transform: scale(.92); }
.dr.on .dr-mark { background: var(--acc); border-color: var(--acc); color: var(--on-ink); }
.dr.on .dr-id { opacity: .62; }
@media (max-width: 479.98px) {
  .dr { padding: 8px 8px 8px 10px; }
  .dr-id { font-size: 14.5px; }
}

.dir-skel { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.dir-skel .skel { height: 52px; }

/* pinned buy bar — the WeChat directory and every product page, phones and
   desktops alike; steps aside while the page's own button is on screen */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--ink); color: var(--on-ink);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 26px rgba(37, 24, 23, .16);
  transition: transform .3s cubic-bezier(.32, .72, .28, 1);
}
.buybar.away { transform: translateY(110%); }
.buybar-in { max-width: var(--content-w); margin-inline: auto; display: flex; align-items: center; gap: 12px; }
.buybar-t { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font-size: 13.5px; color: rgba(247, 246, 242, .78); }
.buybar-t b { font-family: var(--font-disp); font-size: 24px; font-weight: 600; color: var(--acc-hi); font-variant-numeric: lining-nums tabular-nums; }
.buybar .btn { flex: none; background: var(--on-ink); color: var(--ink); gap: 7px; }
.buybar .btn:hover { background: #ebe9e3; }
body:has(.buybar) .footer { padding-bottom: calc(var(--bb-h, 64px) + 22px); }
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
/* product page: price over a one-line title */
.order-bar .buybar-t { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 1px; }
.order-bar .buybar-t > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.order-bar .buybar-t b { font-size: 22px; line-height: 1.05; }
.order-bar .btn { min-width: 132px; }
.pulse { animation: pulse .9s cubic-bezier(.3, .7, .4, 1); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(94, 42, 40, .55); }
  100% { box-shadow: 0 0 0 16px rgba(94, 42, 40, 0); }
}

/* category sheet — a bottom sheet on phones */
.dir-sheet { align-items: flex-end; padding: 0; }
.dir-sheet-card {
  width: 100%; max-width: 560px; max-height: min(78vh, 720px);
  display: flex; flex-direction: column; text-align: left;
  padding: 0; border-radius: 10px 10px 0 0;
  animation: sheet-up .28s cubic-bezier(.32, .72, .28, 1) both;
}
@media (min-width: 600px) { .dir-sheet { align-items: center; padding: var(--pad); } .dir-sheet-card { border-radius: var(--r-l); } }
.dsh-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 10px 10px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--font-disp); font-size: 22px; font-weight: 600;
}
.dsh-x { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-s); color: var(--ink-2); }
.dsh-x:hover { background: var(--surface-2); color: var(--ink); }
.dsh-list { overflow: auto; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.dsh-list .dcl { min-height: 44px; font-size: 14.5px; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } }

/* toasts ride above a buy bar while it is up */
body:has(.buybar:not(.away)) #toasts { bottom: calc(var(--bb-h, 64px) + 12px); }

/* ───────────────────────── back to top ─────────────────────────
   A paper disc with a hairline ring that fills as the page scrolls. Shown
   only on the way back up (or at the end of the page) — see ttEval. Lifts
   over a buy bar while one is up. */
.totop {
  position: fixed; z-index: 44;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  box-shadow: 0 6px 22px rgba(37, 24, 23, .16), 0 1px 2px rgba(37, 24, 23, .08);
  opacity: 0; visibility: hidden; scale: .82; pointer-events: none;
  transition: opacity .2s ease, scale .26s cubic-bezier(.3, .7, .4, 1), translate .3s cubic-bezier(.32, .72, .28, 1), visibility 0s .26s;
}
.totop.on {
  opacity: 1; visibility: visible; scale: 1; pointer-events: auto;
  transition: opacity .2s ease, scale .26s cubic-bezier(.3, .7, .4, 1), translate .3s cubic-bezier(.32, .72, .28, 1), visibility 0s;
}
.totop:active { scale: .92; }
.totop > .ic { position: relative; width: 19px; height: 19px; stroke-width: 2; }
.tt-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.tt-ring circle { fill: none; stroke-width: 1.5; stroke: var(--line-2); }
.tt-ring .tt-p { stroke: var(--acc); stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
body:has(.buybar:not(.away)) .totop { translate: 0 calc(-1 * (var(--bb-h, 64px) - env(safe-area-inset-bottom) - 4px)); }
html.lb-open .totop { display: none; }
@media (hover: hover) { .totop:hover { color: var(--acc); } }