/* ---- Фирменные шрифты бренд-бука (Akrobat + Vela Sans) ---- */
@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 100;
  src: url("/assets/fonts/Akrobat/Akrobat-Thin.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/Akrobat/Akrobat-ExtraLight.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/Akrobat/Akrobat-Light.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/Akrobat/Akrobat-Regular.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/Akrobat/Akrobat-SemiBold.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/Akrobat/Akrobat-Bold.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 800;
  src: url("/assets/fonts/Akrobat/Akrobat-ExtraBold.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 900;
  src: url("/assets/fonts/Akrobat/Akrobat-Black.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 200;
  src: url("/assets/fonts/VelaSans/VelaSans-ExtraLight.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 300;
  src: url("/assets/fonts/VelaSans/VelaSans-Light.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/VelaSans/VelaSans-Regular.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 500;
  src: url("/assets/fonts/VelaSans/VelaSans-Medium.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 600;
  src: url("/assets/fonts/VelaSans/VelaSans-SemiBold.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 700;
  src: url("/assets/fonts/VelaSans/VelaSans-Bold.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Vela Sans';
  font-style: normal;
  font-weight: 800;
  src: url("/assets/fonts/VelaSans/VelaSans-ExtraBold.otf") format('opentype');
  font-display: swap;
}

:root {

  --vch-green-900: #0B2820;
  /* deepest, near-black green   */
  --vch-green-800: #113931;
  /* PRIMARY brand bottle green  */
  --vch-green-700: #1B4D42;
  /* hover, sunken cards         */
  --vch-green-600: #2C6657;
  /* dusty accent green          */
  --vch-green-300: #8FAA9E;
  /* muted leaf, disabled        */
  --vch-green-100: #D9E3DD;
  /* tinted off-white            */

  /* Paper / neutrals — calm, near-white. No vintage yellowing. */
  --vch-paper-50: #FFFFFF;
  /* page bg                     */
  --vch-paper-100: #F1F0EC;
  /* sunken / photo placeholder  */
  --vch-paper-200: #E4E2DC;
  /* divider                     */
  --vch-paper-300: #C7C5BE;
  /* faded label                 */
  --vch-paper-400: #8B8A83;
  /* secondary text on light     */

  /* Ink — calm near-black, no sepia tint */
  --vch-ink-900: #15150F;
  /* primary text                */
  --vch-ink-700: #38372F;
  /* body text                   */
  --vch-ink-500: #6C6A60;
  /* secondary, captions         */
  --vch-ink-300: #9D9B90;
  /* tertiary, placeholder       */

  /* Accent — vintage americana */
  --vch-rust-600: #A8412E;
  /* sold-out tag, alerts        */
  --vch-rust-500: #C25A3E;
  /* sale price                  */
  --vch-mustard-500: #C9A24B;
  /* "New In" pin, highlights    */
  --vch-mustard-300: #E2C57E;
  /* soft mustard fill           */
  --vch-denim-500: #5C7A8E;
  /* dusty blue, men's tag       */
  --vch-clay-400: #C99B7C;
  /* dusty pink-clay             */

  /* Functional */
  --vch-success: #4A7A4E;
  --vch-warning: #C9883B;
  --vch-danger: #A8412E;

  /* ────────────────────────────────────────────────────────
     Color: semantic
     ──────────────────────────────────────────────────────── */
  --bg: var(--vch-paper-50);
  --bg-elevated: #FFFFFF;
  --bg-sunken: var(--vch-paper-100);
  --bg-inverse: var(--vch-green-800);

  --fg: var(--vch-ink-900);
  --fg-2: var(--vch-ink-700);
  /* body                    */
  --fg-3: var(--vch-ink-500);
  /* secondary / caption     */
  --fg-4: var(--vch-ink-300);
  /* placeholder / disabled  */
  --fg-on-dark: var(--vch-paper-50);
  --fg-on-dark-2: var(--vch-paper-300);

  --line: var(--vch-paper-200);
  --line-strong: var(--vch-ink-300);
  --line-on-dark: rgba(244, 236, 216, 0.18);

  --accent: var(--vch-green-800);
  --accent-hover: var(--vch-green-700);
  --accent-fg: var(--vch-paper-50);

  --tag-new: var(--vch-mustard-500);
  --tag-sold: var(--vch-rust-600);
  --price-sale: var(--vch-rust-500);

  /* ────────────────────────────────────────────────────────
     Type: families — brand fonts (Akrobat + Vela Sans)
     ──────────────────────────────────────────────────────── */
  --font-display: 'Akrobat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Akrobat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Vela Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Consolas, monospace;

  /* Type: scale (modular, 1.25 ratio) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-44: 44px;
  --fs-60: 60px;
  --fs-80: 80px;

  /* Tracking — Akrobat is condensed, so caps need less extra tracking */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.09em;
  /* uppercase nav labels                */
  --tracking-widest: 0.14em;
  /* display headings                    */

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.45;
  --leading-loose: 1.7;

  /* ────────────────────────────────────────────────────────
     Space + radius + shadow
     ──────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Vintage prefers crisp corners. Radii are minimal. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Shadows — neutral, quiet, no warm tint */
  --shadow-1: 0 1px 0 rgba(20, 20, 18, 0.05);
  --shadow-2: 0 2px 8px rgba(20, 20, 18, 0.06);
  --shadow-3: 0 8px 24px rgba(20, 20, 18, 0.08);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* No decorative texture in the minimal system — kept flat, unused by default */
  --texture-paper: none;
  /* @kind other */
}

/* ============================================================
   Semantic element styles — use these as classes on real elements
   ============================================================ */

.vch-display,
.vch-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  font-feature-settings: "ss01";
}

.vch-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-60);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.vch-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-44);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.vch-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-32);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.vch-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--leading-snug);
  color: var(--fg);
}

/* Eyebrow / section label — small caps, wide track, used everywhere */
.vch-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-3);
}

.vch-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-15);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.vch-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.vch-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-13);
  line-height: var(--leading-snug);
  color: var(--fg-3);
}

.vch-mono,
.vch-spec {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-2);
}

/* Price — tabular, slight serif */
.vch-price {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-20);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  letter-spacing: 0;
}

/* Navigation labels — always uppercase, generously tracked */
.vch-nav {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg);
}

/* Body element defaults (apply when you set body{font-family} etc) */
html,
body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 14px 22px;
  border: 1px solid transparent;
  transition: 180ms ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
}

.btn-primary:hover {
  background: var(--vch-green-700);
}

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.btn-ghost:hover {
  background: var(--fg);
  color: var(--bg);
}

.btn-link {
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-weight: 500;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
}

.btn-icon:hover {
  color: var(--vch-green-800);
}

/* ---------- Tags / pins ---------- */
.pin {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: 5px 9px;
  color: var(--fg-on-dark);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pin-new {
  background: var(--vch-green-800);
}

.pin-sold {
  background: var(--fg);
}

.pin-sale {
  background: var(--fg);
}

.pin-one {
  background: var(--vch-green-800);
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-3);
}

/* ---------- Layout ---------- */
.page {
  max-width: 1440px;
  margin: 0 auto;
}

.section {
  padding: 64px 40px;
}

/* SVG icons inherit color and size */
.icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.icon-lg {
  width: 22px;
  height: 22px;
}

/* ---------- Dev screen tabs removed — replaced by the green site-header ---------- */
.screen-tabs {
  display: none;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--bg);
}

/* Top utility strip — always green, always visible, sticky */
.top-bar {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  position: sticky;
  top: 0;
  z-index: 50;
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 40px;
  max-width: 1600px;
  margin: 0 auto;
}

.top-bar-info {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(251, 247, 236, .85);
  white-space: nowrap;
}

.top-bar-item svg {
  flex-shrink: 0;
  opacity: .85;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.top-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-on-dark);
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.top-bar-link:hover {
  opacity: .7;
}

.top-bar-link.icon-only {
  padding: 2px 4px;
}

.top-bar-sep {
  color: rgba(251, 247, 236, .3);
  font-size: 11px;
}

.basket-wrap {
  position: relative;
}

/* Brand block — big centered logo + tagline + feature row (home only) */
.brand-block {
  background: var(--bg);
  text-align: center;
  padding: 12px 40px 12px;
  border-bottom: 1px solid var(--line);
}

.brand-logo {
  display: inline-block;
  text-decoration: none;
}

.brand-logo img {
  height: 300px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.brand-tagline {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 20px 0 0;
}

/* Compact brand strip — non-home screens */
.brand-block-compact {
  padding: 6px 40px;
  text-align: left;
}

.brand-logo-compact img {
  height: 100px;
  margin: 0;
}

.btn-icon {
  color: var(--fg);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  transition: color 180ms ease;
}

.btn-icon:hover {
  color: var(--vch-green-800);
}

.btn-icon svg {
  stroke: currentColor;
}

.basket-badge {
  position: absolute;
  top: -2px;
  right: -6px;
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}

/* Sub-nav (small cream strip) — kept for category page */
.sub-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 12px 40px;
  display: flex;
  gap: 22px;
  overflow-x: auto;
}

.sub-nav a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--fg-2);
  padding: 4px 0;
  white-space: nowrap;
}

.sub-nav a.on {
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
}

.sub-nav a:hover {
  color: var(--fg);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  padding: 88px 40px 96px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(251, 247, 236, .04) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251, 247, 236, .55);
  margin-bottom: 24px;
}

.hero-wordmark {
  font-family: 'Forum', serif;
  font-size: clamp(64px, 9vw, 132px);
  letter-spacing: .22em;
  line-height: 1;
  margin: 0 0 24px;
  text-transform: uppercase;
  text-indent: .22em;
}

.hero-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: rgba(251, 247, 236, .85);
  margin: 0 0 36px;
}

.hero-rule {
  width: 60px;
  height: 1px;
  background: rgba(251, 247, 236, .4);
  margin: 0 auto 36px;
}

.hero-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 247, 236, .65);
  display: flex;
  gap: 32px;
  justify-content: center;
}

/* ---------- Section header ---------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 38px;
  color: var(--fg);
  margin: 0;
  letter-spacing: -.01em;
}

.section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Product grid + card ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.product-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.product-card {
  position: relative;
  padding: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: 220ms ease;
}

.product-card:hover {
  background: #fff;
}

.product-image {
  background: var(--vch-paper-100);
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.product-image .placeholder {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-4);
  text-align: center;
  line-height: 1.5;
  padding: 24px;
}

/* No-photo fallback — flat neutral grey, no gradients/texture */
.ph-warm,
.ph-cool,
.ph-rust,
.ph-denim,
.ph-cream,
.ph-olive,
.ph-brown,
.ph-ink {
  background: var(--vch-paper-100);
  color: var(--fg-3);
}

.product-pin {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.product-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-2);
  background: #fff;
  border-radius: 999px;
  z-index: 2;
}

.product-fav:hover {
  color: var(--vch-green-800);
}

/* Back-of-item photo — hidden by default, fades in over the front photo on
   card hover. Falls back to a quiet placeholder where no back photo exists
   yet (see js/data.js `imgBack`). */
.product-photo-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.product-card:not(.sold):hover .product-photo-back {
  opacity: 1;
}

.product-photo-back-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vch-paper-100);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-4);
  text-align: center;
  padding: 16px;
}

.product-body {
  padding: 14px 16px 18px;
}

/* Visual hierarchy: photo → title (heaviest) → description (lightest) → size/price
   (price stays legible/bold, but one notch lighter than the title so not every
   line competes at the same weight). */
.product-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}

.product-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-3);
  margin: 4px 0 0;
  line-height: 1.35;
}

.product-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.product-size {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
}

.product-price {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product-card.sold .product-image {
  opacity: .5;
}

.product-card.sold .product-price {
  color: var(--fg-3);
  text-decoration: line-through;
}

.product-card.sold {
  cursor: default;
}

/* ---------- Category page layout ---------- */
.cat-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  padding: 32px 40px 96px;
}

/* Filter rail */
.filter-rail {
  position: sticky;
  top: 140px;
  align-self: start;
}

.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 4px;
}

.filter-head .title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.filter-head .clear {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-3);
  text-decoration: underline;
  cursor: pointer;
}

.filter-group {
  border-bottom: 1px solid var(--line);
}

.filter-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  cursor: pointer;
}

.filter-group-head .name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.filter-group-head .selected {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group-body {
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.filter-option input {
  accent-color: var(--vch-green-800);
  width: 14px;
  height: 14px;
}

.filter-option .lbl {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
}

.filter-option .n {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
}

.filter-option input:checked+.lbl {
  color: var(--fg);
  font-weight: 500;
}

.filter-option.disabled .lbl,
.filter-option.disabled .n {
  color: var(--fg-4);
}

/* Size chip grid in rail */
.size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.size-chip {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
  border: 1px solid var(--line-strong);
  color: var(--fg);
  cursor: pointer;
  border-radius: 999px;
  text-align: center;
}

.size-chip .n {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-3);
  display: block;
}

.size-chip.on {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  border-color: var(--vch-green-800);
}

.size-chip.on .n {
  color: rgba(251, 247, 236, .7);
}

.size-chip:disabled {
  color: var(--fg-4);
  border-color: var(--line);
  cursor: not-allowed;
}

/* Sort bar */
.sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 0;
}

.sort-bar .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.sort-bar .sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
}

/* Page title block */
.cat-title-block {
  padding: 56px 40px 24px;
  border-bottom: 1px solid var(--line);
}

.cat-title-block .eyebrow {
  margin-bottom: 8px;
  display: block;
}

.cat-title-block h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 48px;
  color: var(--fg);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}

.cat-title-block .desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-3);
  max-width: 60ch;
  margin: 0;
}

/* ---------- Auth (вход / регистрация) ---------- */
/* Компактнее, чем обычный .cat-title-block — на этой странице задача
   человека почти всегда одна (войти/зарегистрироваться), поэтому сама
   форма должна попадать в поле зрения сразу, без лишнего воздуха сверху. */
.auth-title-block {
  padding-top: 20px;
  padding-bottom: 12px;
}

.auth-title-block h1 {
  font-size: 28px;
  margin-bottom: 4px;
}

.auth-title-block .desc {
  font-size: 13px;
}

.auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 40px 64px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--line);
  padding: 24px;
  background: var(--bg);
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.auth-tab.on {
  color: var(--fg);
  border-bottom-color: var(--vch-green-800);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-3);
}

.auth-field input {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.auth-field input:focus {
  outline: none;
  border-color: var(--vch-green-800);
}

.auth-field input::placeholder {
  color: var(--fg-4);
}

.auth-forgot {
  align-self: flex-end;
  margin-top: -8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-forgot:hover {
  color: var(--fg);
}

.auth-consent {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0 0 4px;
}

.auth-consent a {
  color: var(--fg-2);
}

.auth-consent a:hover {
  color: var(--fg);
}

.auth-submit {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
}

.auth-switch {
  text-align: center;
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
}

.auth-switch button {
  color: var(--vch-green-800);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-back {
  align-self: center;
}

/* ---------- Product detail ---------- */
.pd-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  padding: 48px 40px 96px;
}

.pd-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-self: start;
}

.pd-gallery .thumb {
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pd-gallery .thumb.big {
  grid-column: 1 / -1;
  aspect-ratio: 3/4;
}

.pd-measure-thumb {
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}

.pd-measure-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fullscreen photo viewer — opened from the main product photo. Click
   toggles the image between "fit to screen" and 2x its pixel size (see
   PhotoLightbox in product-detail.js); .pd-lightbox-frame scrolls when the
   zoomed image no longer fits. */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(21, 21, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.pd-lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--fg-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
}

.pd-lightbox-close:hover { background: rgba(255, 255, 255, .2); }

.pd-lightbox-frame {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-lightbox-frame.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
  cursor: grab;
}

.pd-lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain;
  cursor: zoom-in;
  display: block;
}

.pd-lightbox-frame.is-zoomed .pd-lightbox-img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.pd-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--fg-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
}

.pd-lightbox-nav:hover { background: rgba(255, 255, 255, .2); }
.pd-lightbox-prev { left: 20px; }
.pd-lightbox-next { right: 20px; }

.pd-lightbox-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-on-dark-2);
  z-index: 1001;
}

@media (max-width: 640px) {
  .pd-lightbox { padding: 16px; }
  .pd-lightbox-close { top: 12px; right: 12px; }
  .pd-lightbox-nav { width: 40px; height: 40px; }
  .pd-lightbox-prev { left: 8px; }
  .pd-lightbox-next { right: 8px; }
}

.pd-info .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.pd-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 42px;
  color: var(--fg);
  margin: 0 0 4px;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.pd-brand {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-2);
  margin: 0 0 24px;
}

.pd-rule {
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
}

.pd-price {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pd-stock {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vch-green-800);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pd-stock .dot {
  width: 7px;
  height: 7px;
  background: var(--vch-green-800);
  border-radius: 999px;
}

.pd-section-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-3);
  margin: 0 0 12px;
}

.pd-buy {
  display: flex;
  gap: 10px;
  margin: 28px 0;
}

.pd-buy .btn-primary {
  flex: 1;
  padding: 18px;
  font-size: 13px;
}

.pd-buy .btn-ghost {
  padding: 18px;
}

.pd-spec-table {
  width: 100%;
  border-collapse: collapse;
}

.pd-spec-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
}

.pd-spec-table td:first-child {
  color: var(--fg-3);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 500;
  width: 40%;
}

.pd-spec-table td:last-child {
  color: var(--fg);
  text-align: right;
}

.pd-measure-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}

.pd-measure-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

.pd-measure-table td:first-child {
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.pd-measure-table td:last-child {
  text-align: right;
  color: var(--fg);
}

.pd-condition {
  padding: 16px 20px;
  background: var(--vch-paper-100);
  border-left: 2px solid var(--vch-green-800);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
}

.pd-condition strong {
  font-weight: 600;
  color: var(--fg);
}

/* Condition tooltip — click/tap toggled info popover, same on desktop and mobile. */
.pd-condition-tip {
  position: relative;
  display: inline-flex;
}

.pd-condition-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
  transition: color 160ms ease, border-color 160ms ease;
}

.pd-condition-tip-btn:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.pd-condition-tip-pop {
  position: absolute;
  z-index: 20;
  top: 24px;
  left: 0;
  width: 260px;
  max-width: 80vw;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 10px 28px rgba(20, 20, 18, 0.14);
  text-transform: none;
  letter-spacing: normal;
}

.pd-condition-tip-pop p {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-2);
}

.pd-condition-tip-pop a {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--vch-green-800);
  text-decoration: none;
}

.pd-condition-tip-pop a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- New In feed ---------- */
.feed {
  padding: 32px 40px 96px;
}

.week-group {
  margin-bottom: 64px;
}

.week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0;
}

.week-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 32px;
  color: var(--fg);
  margin: 0;
  white-space: nowrap;
}

.week-head .date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Category grid (home) ---------- */
.cat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

.cat-cards a {
  background: var(--bg);
  padding: 40px 24px 32px;
  text-align: left;
  transition: 220ms ease;
}

.cat-cards a:hover {
  background: #fff;
}

.cat-cards .name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}

.cat-cards .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}

/* ---------- Checkout ---------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  padding: 32px 40px 96px;
  align-items: start;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.checkout-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.checkout-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checkout-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.checkout-method-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  flex-direction: row-reverse;
}

.checkout-method-tab {
  flex: 1;
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.checkout-method-tab.on {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  border-color: var(--vch-green-800);
}

/* Выбор пункта выдачи СДЭК (js/cdek-map.js) */
.cdek-picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cdek-city-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.cdek-city-field {
  flex: 1;
  min-width: 0;
}

.cdek-near-btn {
  padding: 12px 16px;
  white-space: nowrap;
}

.cdek-map {
  width: 100%;
  height: 340px;
  border: 1px solid var(--line);
  background: var(--vch-paper-100);
  /* свой контекст наложения: панели Leaflet (z-index 400+) не перекрывают шапку сайта */
  position: relative;
  z-index: 0;
}

.cdek-city-field {
  position: relative;
}

.cdek-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  text-transform: none;
  letter-spacing: 0;
}

.cdek-suggest button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--fg);
}

.cdek-suggest button:hover {
  background: var(--vch-paper-100);
}

.cdek-suggest strong {
  font-size: 14px;
  font-weight: 600;
}

.cdek-suggest span {
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-3);
}

.cdek-quote {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg);
  margin: 10px 0 0;
}

.order-status-text {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}

.order-track {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 14px;
}

.cdek-hint,
.cdek-error {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0;
}

.cdek-error {
  color: var(--vch-rust-600);
}

.cdek-selected {
  background: var(--vch-paper-100);
  border: 1px solid var(--vch-green-800);
  padding: 14px 16px;
}

.cdek-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-3);
}

.cdek-search {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  width: 200px;
  max-width: 50%;
}

.cdek-search:focus {
  outline: none;
  border-color: var(--vch-green-800);
}

.cdek-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.cdek-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--fg);
}

.cdek-item:hover {
  background: var(--vch-paper-100);
}

.cdek-item.on {
  background: var(--vch-green-100);
}

.cdek-item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cdek-item-main strong {
  font-size: 14px;
  font-weight: 600;
}

.cdek-item-main span,
.cdek-item-km {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}

.cdek-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.cdek-item-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vch-green-700);
}

.cdek-more {
  align-self: flex-start;
}

@media (max-width: 600px) {
  .cdek-map {
    height: 280px;
  }

  .cdek-city-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cdek-search {
    width: 100%;
    max-width: none;
  }

  .cdek-list-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.checkout-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 0;
}

.checkout-point {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.checkout-point-service {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .7;
}

.checkout-point-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.checkout-point:hover {
  border-color: var(--fg);
}

.checkout-point.on {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  border-color: var(--vch-green-800);
}

.checkout-submit {
  width: 100%;
  padding: 18px;
}

.checkout-back {
  align-self: center;
}

.checkout-consent {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0 0 12px;
}

.checkout-consent a {
  color: var(--fg-2);
}

.checkout-consent a:hover {
  color: var(--fg);
}

/* Self-pickup ("Самовывоз") tab — address/hours cards + numbered steps,
   adapted from the "Как забрать" page for the narrower checkout column. */
.checkout-pickup {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkout-pickup-card {
  background: var(--vch-paper-100);
  border: 1px solid var(--vch-paper-300);
  padding: 14px 16px;
}

.checkout-pickup-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-3);
  display: block;
  margin-bottom: 8px;
}

.checkout-pickup-value {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
}

.checkout-pickup-hours {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg);
  margin: 0 0 4px;
}

.checkout-pickup-hours span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.checkout-pickup-note {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  margin: 4px 0 0;
}

.checkout-pickup-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-pickup-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.checkout-pickup-step-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-pickup-steps strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: block;
  margin-bottom: 2px;
}

.checkout-pickup-steps p {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
}

.checkout-pickup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.checkout-pickup-links a {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--vch-green-800);
  text-decoration: none;
}

.checkout-pickup-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Cart ---------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  padding: 32px 40px 96px;
}

/* min-width: 0 — without it, a grid item's automatic minimum size is its
   content's max-content width, which can force the `1fr` track (and the
   whole .cart-layout) wider than the viewport instead of actually shrinking
   to fit, producing a horizontal scrollbar on narrow screens. */
.cart-items {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: flex-start;
}

.cart-row:last-of-type {
  border-bottom: 1px solid var(--line);
}

.cart-row-img {
  width: 140px;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cart-row-img .placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-4);
  text-align: center;
  line-height: 1.4;
  padding: 8px;
}

.cart-row-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-row-info .product-brand {
  margin-bottom: 0;
}

.cart-row-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--fg);
  margin: 2px 0 6px;
  line-height: 1.2;
  letter-spacing: -.005em;
}

.cart-row-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vch-green-800);
  margin-top: 8px;
}

.cart-row-stock .dot {
  width: 6px;
  height: 6px;
  background: var(--vch-green-800);
  border-radius: 999px;
}

.cart-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 13px;
}

.cart-row-actions button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  font: inherit;
}

.cart-row-actions button:hover {
  color: var(--fg);
}

.cart-row-actions .sep {
  color: var(--fg-4);
}

.cart-row-price {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  text-align: right;
  white-space: nowrap;
}

.cart-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--vch-paper-100);
  border-left: 2px solid var(--vch-green-800);
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.6;
}

.cart-note strong {
  color: var(--fg);
  font-weight: 600;
}

.cart-note>svg {
  color: var(--vch-green-800);
  margin-top: 2px;
  flex-shrink: 0;
}

/* Summary */
.cart-summary {
  position: sticky;
  top: 140px;
  align-self: start;
  min-width: 0;
  padding: 28px 28px 24px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
}

.cart-summary .pd-section-title {
  margin: 0 0 18px;
}

.cart-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-2);
}

.cart-sum-row .v {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.cart-sum-row.big {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--fg);
  font-weight: 500;
  padding: 14px 0 18px;
  align-items: center;
}

.cart-sum-row.big>span:first-child {
  white-space: nowrap;
}

.cart-sum-row.big .v {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
}

.cart-sum-rule {
  height: 1px;
  background: var(--line-strong);
  margin: 4px 0;
}

.cart-promo {
  display: flex;
  gap: 0;
  margin: 18px 0 14px;
}

.cart-promo input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 2px 0 0 2px;
  color: var(--fg);
  min-width: 0;
}

.cart-promo input:focus {
  outline: none;
  border-color: var(--vch-green-800);
}

.cart-promo input::placeholder {
  color: var(--fg-4);
}

.cart-promo button {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 0 18px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}

.cart-promo button:hover {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.cart-cta {
  width: 100%;
  padding: 18px;
  font-size: 13px;
  margin-top: 6px;
}

.cart-cta-link {
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}

.cart-cta-link:hover {
  color: var(--fg);
}

.cart-fineprint {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-fp-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.5;
}

.cart-fp-row>svg {
  color: var(--fg-2);
  margin-top: 2px;
  flex-shrink: 0;
}

/* ============================================================
   DRESSER hero — animated drawer that opens on scroll
   Lives at the top of the Home screen, replaces the green hero.
   ============================================================ */

.dresser-scroll {
  position: relative;
  height: 220vh;
  /* shortened so user gets to New In faster */
  background: linear-gradient(180deg, #c8c2a8 0%, #b2ac95 100%);
}

.dresser-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* White-painted oak grain — for top + drawer face */
.white-wood {
  background-color: #f4eedd;
  background-image:
    repeating-linear-gradient(91deg,
      rgba(150, 110, 50, 0.05) 0px, rgba(150, 110, 50, 0.05) 1px,
      transparent 1px, transparent 5px),
    repeating-linear-gradient(89deg,
      rgba(170, 130, 60, 0.04) 0px, rgba(170, 130, 60, 0.04) 2px,
      transparent 2px, transparent 38px),
    linear-gradient(180deg, #faf3df 0%, #ede4c8 100%);
  position: relative;
}

.white-wood::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 25% 20%, rgba(255, 245, 215, 0.45), transparent 55%),
    radial-gradient(110% 80% at 80% 90%, rgba(150, 110, 50, 0.12), transparent 60%);
}

.white-wood::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 18px 8px at 14% 38%, rgba(120, 80, 30, 0.18), transparent 70%),
    radial-gradient(ellipse 22px 10px at 62% 62%, rgba(130, 90, 35, 0.14), transparent 70%),
    radial-gradient(ellipse 14px 7px at 88% 22%, rgba(110, 70, 25, 0.13), transparent 70%),
    radial-gradient(ellipse 26px 12px at 38% 78%, rgba(140, 95, 40, 0.12), transparent 70%);
}

/* The dresser TOP — fixed in the stage, hosts the wordmark */
.dresser-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34vh;
  z-index: 30;
  box-shadow:
    0 14px 18px -6px rgba(60, 40, 10, 0.35),
    0 4px 6px -2px rgba(60, 40, 10, 0.18);
}

.dresser-top-inner {
  position: relative;
  z-index: 1;
  height: calc(100% - 16px);
  padding: 18px 56px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.dresser-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(17, 57, 49, 0.55);
}

.dresser-brand {
  text-align: center;
}

.dresser-wordmark {
  font-family: 'Forum', serif;
  font-weight: 400;
  color: var(--vch-green-800);
  text-transform: uppercase;
  font-size: clamp(48px, 8.5vw, 116px);
  letter-spacing: 0.24em;
  text-indent: .24em;
  line-height: 1;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dresser-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 21px);
  color: var(--vch-green-700);
  margin: 14px 0 0;
  text-align: center;
}

/* Notice — now a normal flex item at the bottom of the wooden top */
.dresser-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(17, 57, 49, 0.75);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  padding: 12px 18px;
  border-top: 1px solid rgba(17, 57, 49, 0.12);
  width: 100%;
  max-width: 1200px;
}

.dresser-notice svg {
  width: 15px;
  height: 15px;
  stroke: var(--vch-green-800);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dresser-notice .sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: rgba(17, 57, 49, 0.4);
  border-radius: 50%;
}

.dresser-notice a {
  color: var(--vch-green-800);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.top-lip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  background:
    linear-gradient(180deg,
      #c4a673 0%,
      #a68750 35%,
      #846a3c 75%,
      #5e4a2a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}

/* DRAWER CAVITY */
.drawer-cavity {
  position: absolute;
  top: 34vh;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: #2a241c;
}

.drawer-interior {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 56px 30px;
  background: var(--vch-paper-50);
  background-image:
    radial-gradient(rgba(140, 100, 50, .04) 1px, transparent 1px),
    radial-gradient(rgba(80, 60, 30, .03) 1px, transparent 1px),
    linear-gradient(180deg, #f5eed8 0%, #ebe2c3 100%);
  background-size: 3px 3px, 5px 5px, 100% 100%;
  box-shadow:
    inset 0 30px 50px -10px rgba(40, 25, 5, 0.55),
    inset 18px 0 30px -10px rgba(60, 40, 10, 0.4),
    inset -18px 0 30px -10px rgba(60, 40, 10, 0.4);
}

.drawer-back-wall {
  flex: 0 0 auto;
  height: 20px;
  margin: -22px -56px 16px;
  background:
    repeating-linear-gradient(91deg,
      rgba(40, 20, 0, 0.18) 0px, rgba(40, 20, 0, 0.18) 1px,
      transparent 1px, transparent 6px),
    linear-gradient(180deg, #6d4a22 0%, #8d6735 30%, #a68150 60%, #b89464 100%);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .4),
    inset 0 -1px 0 rgba(255, 220, 170, 0.4);
}

.drawer-eyebrow {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.drawer-eyebrow .eyebrow {
  color: var(--vch-ink-500);
}

.drawer-eyebrow strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--vch-ink-900);
}

/* Drawer-grid — 2 rows × 4 cols of compact DrawerCard tiles, full visibility */
.drawer-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
}

.drawer-card {
  position: relative;
  min-height: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--vch-paper-100);
  display: grid;
  grid-template-rows: 1fr auto;
  box-shadow:
    0 3px 8px rgba(40, 25, 5, 0.22),
    0 1px 2px rgba(40, 25, 5, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1), box-shadow 280ms ease;
}

.drawer-card:not(.is-sold):hover {
  transform: translateY(-5px);
  box-shadow:
    0 14px 26px rgba(40, 25, 5, 0.32),
    0 4px 8px rgba(40, 25, 5, 0.24);
}

.drawer-card.is-sold {
  cursor: default;
}

.drawer-card.is-sold .drawer-card-img {
  opacity: .55;
}

.drawer-card.is-sold .dc-price {
  text-decoration: line-through;
  color: var(--vch-ink-500);
}

.drawer-card-img {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.drawer-card-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: rgba(244, 236, 216, 0.55);
  text-align: center;
  padding: 8px;
  line-height: 1.3;
}

.fab-ink .drawer-card-mark {
  color: rgba(244, 236, 216, 0.7);
}

.drawer-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--vch-ink-700);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.drawer-card-fav:hover {
  color: var(--vch-rust-600);
}

.drawer-card-tag {
  background: rgba(251, 247, 236, 0.97);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dc-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dc-brand {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vch-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-name {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--vch-ink-900);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dc-price {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--vch-green-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The old ProductCard-style drawer-grid styles are no longer used */

/* DRAWER FRONT — translates DOWN to reveal interior */
.drawer-front {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 20;
  transform: translate3d(0, var(--drawer-y, 0px), 0);
  will-change: transform;
}

.drawer-front-inner {
  position: relative;
  height: 100%;
  box-shadow:
    0 20px 36px rgba(0, 0, 0, calc(0.18 + var(--drawer-progress, 0) * 0.35)),
    0 6px 12px rgba(0, 0, 0, calc(0.12 + var(--drawer-progress, 0) * 0.2)),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(180, 150, 100, 0.25);
}

.drawer-front-inner::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 20px;
  bottom: 28px;
  border: 1px solid rgba(180, 150, 100, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 215, 0.5),
    inset 0 -1px 0 rgba(140, 100, 50, 0.15);
  pointer-events: none;
}

.drawer-pulls {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: clamp(280px, 38vw, 560px);
  z-index: 2;
}

.dresser-pull {
  width: clamp(36px, 3.5vw, 52px);
  height: clamp(36px, 3.5vw, 52px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #f8e3b0 0%, #d6a85a 40%, #8a6520 75%, #4a3a14 100%);
  box-shadow:
    0 4px 10px rgba(40, 25, 5, 0.4),
    0 1px 3px rgba(40, 25, 5, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25);
  position: relative;
}

.dresser-pull::after {
  content: "";
  position: absolute;
  inset: 28% 30% 25% 30%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, transparent 50%);
  border-radius: 50%;
}

.drawer-plaque {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(60, 45, 15, 0.45);
  text-align: center;
  line-height: 1.8;
  z-index: 2;
}

.drawer-plaque .num {
  font-family: 'Forum', serif;
  font-size: 22px;
  letter-spacing: .15em;
  color: var(--vch-green-800);
  display: block;
  margin-bottom: 6px;
}

.pull-hint {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--vch-green-800);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: calc(1 - var(--drawer-progress, 0) * 2);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.pull-hint .arrow {
  width: 1px;
  height: 26px;
  background: var(--vch-green-800);
  position: relative;
  animation: hint-pull 1.6s ease-in-out infinite;
}

.pull-hint .arrow::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--vch-green-800);
  border-bottom: 1px solid var(--vch-green-800);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes hint-pull {

  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(8px);
    opacity: .35;
  }
}

.scroll-marker {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vch-green-800);
  opacity: .55;
  pointer-events: none;
}

.scroll-marker .track {
  width: 1px;
  height: 110px;
  background: rgba(17, 57, 49, .25);
  position: relative;
}

.scroll-marker .knob {
  position: absolute;
  left: -3px;
  top: calc(var(--drawer-progress, 0) * 100% - 3.5px);
  width: 7px;
  height: 7px;
  background: var(--vch-green-800);
  border-radius: 50%;
  transition: top 60ms linear;
}

/* ---------- Footer ---------- */
/* When inside dresser hero, hide the regular sticky site header */
.hidden-during-dresser-wrap .site-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* ============================================================
   ANIMATIONS — reveal, hover, stamp, wiggle, toast
   ============================================================ */

/* Reveal-on-scroll — generic helper class */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(.2, .6, .2, 1),
    transform 700ms cubic-bezier(.2, .6, .2, 1);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children by setting --i on each child manually OR globally */
.reveal-on-scroll[data-stagger]>* {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms cubic-bezier(.2, .6, .2, 1),
    transform 600ms cubic-bezier(.2, .6, .2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.reveal-on-scroll[data-stagger].is-revealed>* {
  opacity: 1;
  transform: translateY(0);
}

/* Product card hover lift */
.product-card {
  transition: background-color 220ms ease, transform 280ms cubic-bezier(.2, .7, .2, 1), box-shadow 280ms ease;
}

.product-image,
.product-image .placeholder {
  transition: transform 380ms cubic-bezier(.2, .7, .2, 1);
}

.product-card:not(.sold):hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(20, 20, 18, 0.08), 0 2px 6px rgba(20, 20, 18, 0.06);
  z-index: 2;
}

.product-card:not(.sold):hover .product-image>.placeholder {
  transform: scale(1.045);
}

.product-card:not(.sold):hover .product-name {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Stamp-in for tag pins (.pin) */
@keyframes vch-stamp {
  0% {
    opacity: 0;
    transform: scale(1.6) rotate(-12deg);
  }

  55% {
    opacity: 1;
    transform: scale(.92) rotate(3deg);
  }

  78% {
    transform: scale(1.04) rotate(-1deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.pin {
  transform-origin: center;
  animation: vch-stamp 700ms cubic-bezier(.2, .8, .2, 1.05) backwards;
}

.product-pin {
  animation-delay: 120ms;
}

/* small ink "halo" around the pin to feel like a real stamp */
.pin::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px solid currentColor;
  opacity: 0.18;
  pointer-events: none;
}

/* Basket wiggle when cart count increases */
@keyframes vch-wiggle {

  0%,
  100% {
    transform: rotate(0) scale(1);
  }

  15% {
    transform: rotate(-14deg) scale(1.12);
  }

  30% {
    transform: rotate(12deg) scale(1.12);
  }

  45% {
    transform: rotate(-8deg) scale(1.06);
  }

  60% {
    transform: rotate(6deg) scale(1.04);
  }

  80% {
    transform: rotate(-3deg) scale(1.02);
  }
}

.basket-wrap.wiggle>svg {
  animation: vch-wiggle 720ms ease;
}

.basket-wrap {
  transition: color 180ms ease;
}

/* Cart-add TOAST */
.cart-toast {
  position: fixed;
  top: 90px;
  right: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  min-width: 280px;
  max-width: 360px;
  background: var(--vch-paper-50);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 14px 30px rgba(60, 40, 10, 0.18),
    0 4px 10px rgba(60, 40, 10, 0.08);
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2, .7, .2, 1);
}

.cart-toast.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.cart-toast .thumb {
  width: 48px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255, 255, 255, .85);
}

.cart-toast .copy {
  flex: 1;
  min-width: 0;
}

.cart-toast .lab {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vch-green-800);
  margin-bottom: 2px;
}

.cart-toast .name {
  display: block;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-toast .brand {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
}

.cart-toast .price {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--vch-green-800);
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  white-space: nowrap;
}

/* Error toast — replaces native alert() for failed requests (cart, избранное,
   заказы, оплата). Bottom-center so it never collides with the cart-add
   toast above. */
.app-error-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  max-width: calc(100vw - 48px);
  width: 420px;
  background: var(--vch-paper-50);
  border: 1px solid #b00020;
  color: #b00020;
  box-shadow:
    0 14px 30px rgba(60, 40, 10, 0.18),
    0 4px 10px rgba(60, 40, 10, 0.08);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2, .7, .2, 1);
}

.app-error-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.app-error-toast .msg {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}

.app-error-toast .close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: #b00020;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .app-error-toast {
    width: calc(100vw - 32px);
    bottom: 16px;
  }
}

/* Folded items inside the dresser drawer — lift on hover */
.drawer-grid .product-card {
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1), box-shadow 280ms ease, background-color 220ms ease;
}

.drawer-grid .product-card:not(.sold):hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 26px rgba(40, 25, 5, 0.28), 0 4px 8px rgba(40, 25, 5, 0.22);
}

/* Brass-pull hover on the closed drawer */
.dresser-pull {
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1), box-shadow 320ms ease;
  cursor: pointer;
}

.drawer-front-inner:hover .dresser-pull {
  transform: rotate(4deg) translateY(1px);
  box-shadow: 0 6px 14px rgba(40, 25, 5, .5), 0 2px 4px rgba(40, 25, 5, .4), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .25);
}

/* Subtle pulse hint on the closed drawer plaque */
@keyframes vch-plaque-breathe {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 0.7;
  }
}

.drawer-plaque {
  animation: vch-plaque-breathe 3.4s ease-in-out infinite;
}

/* ============================================================
   END animations
   ============================================================ */

.all-categories {
  padding: 96px 40px 88px;
  border-top: 1px solid var(--line);
  background: var(--vch-paper-50);
}

.ac-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.ac-head .eyebrow {
  display: block;
  margin-bottom: 14px;
}

.ac-head h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 64px);
  margin: 0 0 18px;
  letter-spacing: -.015em;
  line-height: 1.05;
}

.ac-intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
}

.ac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ac-group {
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--vch-paper-50);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .6, .2, 1);
}

.ac-group.revealed {
  opacity: 1;
  transform: translateY(0);
}

.ac-group:hover {
  background: #fff;
}

.ac-group-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.ac-num {
  font-family: 'Forum', serif;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--vch-green-800);
  text-transform: uppercase;
}

.ac-group-head h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  letter-spacing: -.005em;
}

.ac-group-head .ru {
  color: var(--fg);
}

.ac-group-head .en {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--fg-3);
}

.ac-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ac-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed transparent;
  cursor: pointer;
  position: relative;
  transition: padding-left 180ms ease, border-color 180ms ease;
}

.ac-row+.ac-row {
  border-top: 1px dashed var(--line);
}

.ac-row:hover {
  padding-left: 10px;
  border-color: var(--line-strong);
}

.ac-row::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 12px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  font-family: var(--font-mono);
  color: var(--vch-green-800);
}

.ac-row:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.ac-row-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  letter-spacing: .06em;
}

.ac-row-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg);
  grid-column: 2;
}

.ac-row-ru {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--fg-3);
  grid-column: 2;
  margin-top: 2px;
}

.ac-row-count {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  padding-right: 18px;
}

.ac-row:hover .ac-row-count {
  color: var(--vch-green-800);
  padding-right: 28px;
}

.ac-foot {
  max-width: 1440px;
  margin: 32px auto 0;
  padding: 24px 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-3);
}

.ac-foot a {
  font-weight: 600;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ac-foot a:hover {
  color: var(--vch-green-800);
}

/* ============================================================
   CATALOG SHOWCASE — sticky navigation hub
   ============================================================ */
.catalog-showcase {
  padding: 24px 40px 80px;
  background: var(--bg);
}

/* HUB — the sticky navigation bar */
.cs-hub {
  margin: 0 auto 24px;
  max-width: 1440px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cs-hub-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 14px 8px;
}

/* Sections — the primary nav (New In / Каталог / Sold) */
.cs-sections {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.cs-section {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 10px 14px;
  background: transparent;
  color: var(--fg-2);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 180ms ease, color 180ms ease;
}

.cs-section-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  font-weight: 500;
  letter-spacing: 0;
}

.cs-section:hover {
  background: var(--vch-paper-100);
  color: var(--fg);
}

.cs-section.on {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
}

.cs-section.on .cs-section-count {
  color: rgba(251, 247, 236, 0.7);
}

.cs-hub-divider {
  width: 1px;
  height: 28px;
  background: var(--vch-paper-200);
  flex-shrink: 0;
}

/* "Категории" trigger — same dropdown button at every screen size. */
.cs-cat-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.cs-chip {
  position: relative;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 9px 14px;
  background: transparent;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cs-chip:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.cs-chip.on {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  border-color: var(--vch-green-800);
}

/* Filters button (right side) */
.cs-filters-btn {
  position: relative;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 11px 18px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cs-filters-btn:hover {
  border-color: var(--fg);
}

.cs-filters-btn.has-active,
.cs-filters-btn.open {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Right-side cluster: Пол / Фильтры / Сортировка */
.cs-hub-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cs-dropdown-wrap {
  position: relative;
}

.cs-dropdown-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 11px 14px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cs-dropdown-btn:hover {
  border-color: var(--fg);
}

.cs-dropdown-btn.has-active {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  border-color: var(--vch-green-800);
}

/* Small dropdown menu — used by "Категории", "Пол", "Сортировка" */
.cs-more-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 28px rgba(20, 20, 18, 0.12), 0 4px 8px rgba(20, 20, 18, 0.06);
  z-index: 40;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: vch-pop-in 180ms cubic-bezier(.2, .7, .2, 1);
}

.cs-more-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--fg-2);
  padding: 9px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.cs-more-item:hover {
  background: var(--vch-paper-100);
  color: var(--fg);
}

.cs-more-item.on {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
}

.cs-more-item svg {
  flex-shrink: 0;
}

/* Back row at the top of the "Категории" subcategory list — returns to the
   top-level category list without closing the dropdown. */
.cs-more-back {
  justify-content: flex-start;
  color: var(--fg-3);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 4px;
  padding-bottom: 12px;
}

.cs-more-back:hover {
  background: transparent;
  color: var(--fg);
}

/* "Категории" and "Сортировка" stay small anchored dropdowns hanging off
   their own trigger button at every screen size — unlike Filters (whole
   facets panel) they never need the ≤1024px bottom-sheet treatment below,
   so this re-declares position/size with higher specificity (two classes
   beats the bottom-sheet rule's one) to opt back out of it regardless of
   viewport width. "Категории" opens toward the right (button sits at the
   left edge of the hub); "Сортировка" opens toward the left (button sits
   at the right edge, among the Filters/Sort icons). */
.cs-cat-wrap .cs-more-pop,
.cs-sort-wrap .cs-more-pop {
  position: absolute;
  top: calc(100% + 8px);
  bottom: auto;
  width: max-content;
  max-width: 80vw;
}

.cs-cat-wrap .cs-more-pop {
  left: 0;
  right: auto;
  min-width: 220px;
}

.cs-sort-wrap .cs-more-pop {
  left: auto;
  right: 0;
  min-width: 170px;
}

.cs-show-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.cs-show-more .btn {
  padding: 14px 32px;
}

.cs-filters-badge {
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0;
}

/* Filters popover */
.cs-filters-pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 8px;
  width: 380px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 18px 40px rgba(20, 20, 18, 0.14),
    0 6px 12px rgba(20, 20, 18, 0.06);
  z-index: 40;
  animation: vch-pop-in 220ms cubic-bezier(.2, .7, .2, 1);
  transform-origin: top right;
}

@keyframes vch-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cs-filters-pop::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: var(--vch-paper-50);
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  transform: rotate(45deg);
}

.cs-pop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.cs-pop-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.cs-pop-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg-3);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-pop-close:hover {
  color: var(--fg);
}

.cs-pop-body {
  padding: 18px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cs-pop-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-pop-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-3);
}

.cs-pop-label strong {
  color: var(--fg);
  font-weight: 600;
}

.cs-size-row,
.cs-pill-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cs-size-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 8px 0;
  width: 40px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cs-size-chip:hover {
  border-color: var(--fg);
}

.cs-size-chip.on {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  border-color: var(--vch-green-800);
}

.cs-pill {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.cs-pill:hover {
  border-color: var(--fg);
}

.cs-pill.on {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  border-color: var(--vch-green-800);
}

/* ──────────────────────────────────────────────
   Color swatches — circle of color + tiny label below.
   Selected state: green ring + checkmark glow.
   ────────────────────────────────────────────── */
.cs-color-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
}

.cs-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 180ms ease, background 180ms ease;
}

.cs-color-swatch:hover {
  border-color: var(--line);
  background: var(--vch-paper-100);
}

.cs-color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(40, 25, 5, 0.18);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.cs-color-swatch.is-light .cs-color-dot {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(40, 25, 5, 0.18);
}

.cs-color-name {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-color-swatch.on {
  border-color: var(--vch-green-800);
  background: var(--vch-paper-100);
}

.cs-color-swatch.on .cs-color-dot {
  box-shadow:
    inset 0 0 0 2px var(--vch-paper-50),
    0 0 0 2px var(--vch-green-800),
    0 1px 2px rgba(40, 25, 5, 0.24);
  transform: scale(1.04);
}

.cs-color-swatch.on .cs-color-name {
  color: var(--fg);
  font-weight: 600;
}

.cs-pop-select {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 10px 32px 10px 14px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E1A14' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--fg);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

.cs-range {
  width: 100%;
  accent-color: var(--vch-green-800);
}

.cs-range-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
}

.cs-pop-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--vch-paper-100);
}

.cs-pop-reset {
  font-size: 12px;
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}

.cs-pop-reset:hover {
  color: var(--fg);
}

.cs-pop-apply {
  padding: 12px 22px;
  font-size: 12px;
}

/* Result strip */
.cs-results-strip {
  max-width: 1440px;
  margin: 0 auto 18px;
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cs-results-strip strong {
  color: var(--fg);
  font-weight: 600;
}

.cs-active-marker {
  color: var(--vch-green-800);
  margin-left: 2px;
}

.cs-sort-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cs-sort-inline select {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  background: transparent;
  border: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}

/* Grid */
.catalog-showcase .product-grid {
  max-width: 1440px;
  margin: 0 auto;
}

/* Empty state */
.cs-empty {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  background: var(--vch-paper-100);
}

.cs-empty-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-3);
  display: block;
  margin-bottom: 12px;
}

.cs-empty p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-2);
  margin: 0;
}

/* Sold inline CTA */
.cs-sold-cta {
  max-width: 720px;
  margin: 64px auto 0;
  padding: 40px 32px;
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  text-align: center;
}

.cs-sold-cta .eyebrow {
  color: rgba(244, 236, 216, 0.55) !important;
  display: block;
  margin-bottom: 12px;
}

.cs-sold-cta p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(244, 236, 216, 0.85);
  margin: 0 0 24px;
}

.cs-sold-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.cs-sold-form input {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 14px 16px;
  background: rgba(244, 236, 216, 0.08);
  border: 1px solid rgba(244, 236, 216, 0.25);
  color: var(--vch-paper-50);
  border-radius: 0;
}

.cs-sold-form input::placeholder {
  color: rgba(244, 236, 216, 0.4);
}

.cs-sold-form input:focus {
  outline: none;
  border-color: var(--vch-paper-50);
}

.cs-sold-form .btn-primary {
  width: 100%;
  justify-content: center;
  background: var(--vch-paper-50);
  color: var(--vch-green-800);
  padding: 14px 22px;
}

.cs-sold-form .btn-primary:hover {
  background: var(--vch-paper-200);
}

.cs-foot {
  max-width: 1440px;
  margin: 32px auto 0;
  padding: 24px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   SOLD — архив проданных вещей
   ============================================================ */
.sold-title-block {
  background: #2A2620;
  color: var(--vch-paper-50);
  border-bottom: 0;
  padding: 72px 40px 56px;
}

.sold-title-block .eyebrow {
  color: var(--vch-paper-300) !important;
  margin-bottom: 14px;
  display: block;
}

.sold-title-block h1 {
  font-family: 'Forum', serif;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-indent: .18em;
  text-align: center;
  color: var(--vch-paper-50);
  margin: 0 0 16px;
  line-height: 1;
}

.sold-title-block .desc {
  color: rgba(244, 236, 216, 0.75);
  text-align: center;
  margin: 0 auto;
  max-width: 60ch;
}

.sold-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(244, 236, 216, 0.14);
}

.sold-stats>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sold-stat-num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 40px;
  color: var(--vch-mustard-500);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sold-stat-lab {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(244, 236, 216, 0.55);
  text-align: center;
  max-width: 16ch;
  line-height: 1.4;
}

.sold-grid-wrap {
  padding: 40px;
  background: var(--vch-paper-100);
}

.sold-grid-wrap .product-grid {
  max-width: 1440px;
  margin: 0 auto;
  filter: saturate(0.6) brightness(0.96);
}

.sold-grid-wrap .product-card .product-image {
  opacity: 0.7;
}

.sold-cta {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  padding: 96px 40px;
}

.sold-cta-inner {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
}

.sold-cta-inner .eyebrow {
  color: rgba(244, 236, 216, 0.55) !important;
  margin-bottom: 14px;
  display: block;
}

.sold-cta-inner h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--vch-paper-50);
  margin: 0 0 14px;
  letter-spacing: -.01em;
}

.sold-cta-inner p {
  color: rgba(244, 236, 216, 0.8);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 32px;
}

.sold-cta-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin-bottom: 20px;
}

.sold-cta-form input {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 16px 18px;
  background: rgba(244, 236, 216, 0.08);
  border: 1px solid rgba(244, 236, 216, 0.25);
  border-right: 0;
  color: var(--vch-paper-50);
  border-radius: 0;
}

.sold-cta-form input::placeholder {
  color: rgba(244, 236, 216, 0.45);
}

.sold-cta-form input:focus {
  outline: none;
  border-color: var(--vch-mustard-500);
  background: rgba(244, 236, 216, 0.12);
}

.sold-cta-form .btn-primary {
  background: var(--vch-mustard-500);
  color: var(--vch-ink-900);
  padding: 16px 24px;
  border-radius: 0;
}

.sold-cta-form .btn-primary:hover {
  background: #E2C57E;
}

.sold-cta-back {
  color: rgba(244, 236, 216, 0.75) !important;
  font-size: 12px;
}

.sold-cta-back:hover {
  color: var(--vch-paper-50) !important;
}

/* ---------- Site Footer ---------- */
/* Catalog CTA — quiet strip on the same green as the footer so the bottom of the page
   reads as one continuous block (no contrasting lighter banner).
   Top padding is generous so there's clear breathing room between the catalog grid
   above and the footer block below. */
.site-footer-cta {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  padding: 72px 40px 36px;
  text-align: center;
  border-bottom: 1px solid rgba(244, 236, 216, 0.14);
}

.site-footer-cta h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--vch-paper-50);
  margin: 6px 0 18px;
  letter-spacing: -.005em;
}

.site-footer-cta .eyebrow {
  font-size: 10px;
}

.site-footer-cta-btn {
  background: transparent;
  color: var(--vch-paper-50);
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .12em;
  border: 1px solid rgba(244, 236, 216, 0.35);
}

.site-footer-cta-btn:hover {
  background: rgba(244, 236, 216, 0.08);
  border-color: rgba(244, 236, 216, 0.6);
}

.site-footer {
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  padding: 72px 40px 36px;
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(251, 247, 236, .55);
  margin: 0 0 16px;
}

.site-footer a,
.site-footer p {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--vch-paper-50);
  margin: 0 0 8px;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer .legal {
  border-top: 1px solid rgba(244, 236, 216, .14);
  margin-top: 48px;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(251, 247, 236, .55);
  display: flex;
  justify-content: space-between;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.site-footer .legal a {
  display: inline;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(251, 247, 236, .55);
}

.site-footer .legal a:hover {
  color: var(--vch-paper-50);
}

.footer-logo {
  height: 128px;
  width: auto;
  margin: 0 auto;
}

/* ──────────────────────────────────────────────
   "Новые" — explainer card shown above the grid.
   Quiet paper-toned info block so users grok what
   lives in this tab (1–7 day arrivals).
   ────────────────────────────────────────────── */
.cs-new-explainer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  margin: 0 0 18px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
}

.cs-new-explainer-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vch-green-800);
}

.cs-new-explainer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-new-explainer-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vch-ink-500);
}

.cs-new-explainer p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--vch-ink-900);
}

.cs-new-explainer p strong {
  font-weight: 700;
  color: var(--vch-green-800);
}

@media (max-width: 600px) {
  .cs-new-explainer {
    padding: 12px 14px;
    gap: 10px;
  }

  .cs-new-explainer p {
    font-size: 13px;
  }
}

/* ──────────────────────────────────────────────
   "Новые" shelf — drawer-style grid inside the catalog showcase.
   Visually echoes the home-page dresser interior so users get the
   same compact list without scrolling the dresser scene.
   ────────────────────────────────────────────── */
.cs-new-shelf {
  position: relative;
  margin: 24px 0 8px;
  padding: 28px 32px 32px;
  background: var(--vch-paper-50);
  background-image:
    radial-gradient(rgba(140, 100, 50, .04) 1px, transparent 1px),
    radial-gradient(rgba(80, 60, 30, .03) 1px, transparent 1px),
    linear-gradient(180deg, #f5eed8 0%, #ebe2c3 100%);
  background-size: 3px 3px, 5px 5px, 100% 100%;
  box-shadow:
    inset 0 30px 50px -10px rgba(40, 25, 5, 0.40),
    inset 14px 0 24px -10px rgba(60, 40, 10, 0.32),
    inset -14px 0 24px -10px rgba(60, 40, 10, 0.32),
    inset 0 -10px 20px -10px rgba(40, 25, 5, 0.35);
  border-top: 2px solid #6b4f2a;
  border-bottom: 2px solid #3e2c14;
}

.cs-new-shelf-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.cs-new-shelf-eyebrow .eyebrow {
  color: var(--vch-ink-500);
}

.cs-new-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cs-new-grid .drawer-card {
  /* Inside the catalog the cards have a fixed height — no flex-stretching. */
  height: 280px;
}

@media (max-width: 900px) {
  .cs-new-shelf {
    padding: 20px 16px 24px;
  }

  .cs-new-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .cs-new-grid .drawer-card {
    height: 260px;
  }

  .cs-new-shelf-eyebrow {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ──────────────────────────────────────────────
   PRODUCT PHOTOS — real imagery fills the card image area.
   Cover-crop so any aspect ratio sits cleanly in the tile.
   ────────────────────────────────────────────── */
.product-photo,
.cart-row-photo,
.fav-row-photo,
.search-result-photo,
.pd-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dresser drawer photos show the WHOLE garment (contain), not a crop. */
.drawer-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 6px;
}

/* Neutral studio backdrop behind the contained photo so letterboxing reads as intentional. */
.drawer-card-img:has(.drawer-card-photo) {
  background: #e7e0cf;
}

.product-card:not(.sold):hover .product-photo {
  transform: scale(1.045);
}

.product-photo {
  transition: transform 380ms cubic-bezier(.2, .7, .2, 1);
}

/* The product detail's big tile is not absolutely-positioned context by default */
.pd-gallery .thumb.big {
  position: relative;
  overflow: hidden;
}

.pd-gallery .thumb.is-active {
  outline: 2px solid var(--vch-green-800);
  outline-offset: -2px;
}

.pd-gallery .thumb img.pd-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 480px) {
  .cs-new-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cs-new-grid .drawer-card {
    height: 220px;
  }
}

/* ──────────────────────────────────────────────
   FAVORITES — heart "on" states across all cards + the Избранное screen.
   Filled red heart = favorited.
   ────────────────────────────────────────────── */
.product-fav.on,
.drawer-card-fav.on {
  color: var(--vch-rust-600);
  background: rgba(255, 255, 255, 0.95);
}

.product-fav.on:hover,
.drawer-card-fav.on:hover {
  color: var(--vch-rust-700, #9a3a23);
}

/* Product-detail page heart button — same toggle behaviour as cards */
.pd-fav.on {
  color: var(--vch-rust-600);
  border-color: var(--vch-rust-600);
}

/* Header heart icon — count badge + "on" highlight when /favorites is active */
.fav-wrap {
  position: relative;
}

.fav-badge {
  /* Reuses .basket-badge styles by class; this rule re-positions for the heart icon */
  background: var(--vch-rust-600);
  color: var(--vch-paper-50);
}

.fav-wrap.on {
  color: var(--vch-rust-600);
}

/* ── Favorites screen ────────────────────────────────────── */
.fav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 40px 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.fav-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: stretch;
  padding: 14px;
  background: var(--vch-paper-100);
  border: 1px solid var(--vch-paper-300);
}

.fav-row-img {
  position: relative;
  width: 120px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}

.fav-row-img .placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: rgba(244, 236, 216, 0.6);
  text-align: center;
  line-height: 1.3;
  padding: 8px;
}

.fav-row-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}

.fav-row-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  line-height: 1.25;
}

.fav-row-name:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.fav-row-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
}

.fav-row-add {
  font-size: 12px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fav-row-remove {
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fav-row-remove:hover {
  color: var(--vch-rust-600);
}

.fav-row-price {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--vch-green-800);
  align-self: center;
  padding-right: 14px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .fav-list {
    padding: 0 16px 40px;
    gap: 10px;
  }

  .fav-row {
    grid-template-columns: 88px 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    padding: 10px;
  }

  .fav-row-img {
    width: 88px;
    height: 110px;
  }

  .fav-row-price {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 18px;
    padding-right: 0;
  }

  .fav-row-name {
    font-size: 16px;
  }

  .fav-row-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ──────────────────────────────────────────────
   SEARCH OVERLAY — drops from the top, dims the page behind it.
   Above the sticky header (z 50) and toast (z 1000).
   ────────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}

.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 23, 18, 0.55);
  backdrop-filter: blur(2px);
  animation: vch-fade-in 200ms ease;
}

.search-panel {
  position: relative;
  background: var(--bg);
  box-shadow: 0 18px 50px rgba(20, 14, 4, 0.4);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  animation: vch-search-drop 260ms cubic-bezier(.2, .7, .2, 1);
  transform-origin: top center;
}

@keyframes vch-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes vch-search-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
}

.search-bar-icon {
  color: rgba(244, 236, 216, 0.65);
  display: flex;
  flex: 0 0 auto;
}

.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--vch-paper-50);
  padding: 4px 0;
}

.search-input::placeholder {
  color: rgba(244, 236, 216, 0.45);
  font-style: italic;
}

.search-clear {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(244, 236, 216, 0.12);
  color: var(--vch-paper-50);
  border: 0;
  cursor: pointer;
  transition: background 160ms ease;
}

.search-clear:hover {
  background: rgba(244, 236, 216, 0.22);
}

.search-close {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(244, 236, 216, 0.3);
  color: var(--vch-paper-50);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms ease, border-color 160ms ease;
}

.search-close:hover {
  background: rgba(244, 236, 216, 0.1);
  border-color: rgba(244, 236, 216, 0.55);
}

.search-close-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(244, 236, 216, 0.16);
  padding: 1px 5px;
  border-radius: 3px;
}

.search-body {
  overflow-y: auto;
  padding: 24px 40px 36px;
}

/* Empty state — suggestions */
.search-empty .eyebrow,
.search-noresults .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-suggestion {
  font-family: var(--font-sans);
  font-size: 13px;
  background: var(--vch-paper-100);
  border: 1px solid var(--vch-paper-300);
  color: var(--fg);
  padding: 8px 16px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.search-suggestion:hover {
  background: var(--vch-green-800);
  border-color: var(--vch-green-800);
  color: var(--fg-on-dark);
}

.search-noresults p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-3);
  margin: 0;
  max-width: 46ch;
}

.search-count {
  font-family: var(--font-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
  margin-bottom: 16px;
}

.search-count strong {
  color: var(--vch-green-800);
}

/* Brand shortcut chip(s) — shown above everything else when the query
   matches a real brand, so jumping to that brand's full catalog doesn't
   require scanning the free-text results below. */
.search-brand-matches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.search-brand-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease;
}

.search-brand-chip:hover {
  background: var(--vch-green-700);
}

.search-brand-chip-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.search-brand-chip-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(244, 236, 216, 0.65);
}

.search-brand-chip-name {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--vch-paper-50);
}

.search-brand-chip-count {
  font-family: var(--font-sans);
  font-size: 12px;
  color: rgba(244, 236, 216, 0.75);
  white-space: nowrap;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 10px;
}

.search-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px;
  background: var(--vch-paper-100);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.search-result:hover {
  background: #fff;
  border-color: var(--vch-paper-300);
  transform: translateX(2px);
}

.search-result.is-sold {
  cursor: default;
  opacity: 0.6;
}

.search-result.is-sold:hover {
  transform: none;
  background: var(--vch-paper-100);
  border-color: transparent;
}

.search-result-img {
  position: relative;
  width: 56px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.search-result-img .pin {
  font-size: 8px;
  padding: 2px 5px;
}

.search-result-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-result-brand {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-3);
}

.search-result-name {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--fg);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
}

.search-result-price {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--vch-green-800);
  white-space: nowrap;
  padding-right: 8px;
}

@media (max-width: 600px) {
  .search-bar {
    padding: 14px 16px;
    gap: 10px;
  }

  .search-close {
    display: none;
  }

  .search-body {
    padding: 18px 16px 28px;
  }

  .search-result {
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
  }

  .search-result-img {
    width: 48px;
    height: 56px;
  }

  .search-result-name {
    font-size: 15px;
  }
}

/* ──────────────────────────────────────────────
   NAV MENU — site-wide navigation drawer, opened from the burger
   button in TopBar. Slides in from the left (search drops from the
   top — different gesture keeps the two overlays from reading the same).
   Same z-index as the search overlay: only one of the two is ever open.
   ────────────────────────────────────────────── */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
}

.nav-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 23, 18, 0.55);
  backdrop-filter: blur(2px);
  animation: vch-fade-in 200ms ease;
}

.nav-menu-panel {
  position: relative;
  width: min(360px, 86vw);
  height: 100%;
  background: var(--bg);
  box-shadow: 0 0 40px rgba(20, 14, 4, 0.35);
  display: flex;
  flex-direction: column;
  animation: vch-menu-slide 240ms cubic-bezier(.2, .7, .2, 1);
  transform-origin: left center;
}

@keyframes vch-menu-slide {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  background: var(--vch-green-800);
}

.nav-menu-logo {
  height: 100px;
  width: auto;
  display: block;
}

.nav-menu-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(244, 236, 216, 0.12);
  color: var(--vch-paper-50);
  border: 0;
  cursor: pointer;
  transition: background 160ms ease;
}

.nav-menu-close:hover {
  background: rgba(244, 236, 216, 0.22);
}

.nav-menu-body {
  overflow-y: auto;
  padding: 8px 0 24px;
}

.nav-menu-section {
  padding: 16px 24px 4px;
  border-bottom: 1px solid var(--line);
}

.nav-menu-section:last-child {
  border-bottom: 0;
}

.nav-menu-section-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.nav-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--fg);
  padding: 10px 0;
  border-bottom: 1px solid transparent;
}

.nav-menu-link:hover {
  color: var(--vch-green-800);
}

.nav-menu-link.on {
  color: var(--vch-green-800);
  font-weight: 600;
}

.nav-menu-link.is-soon {
  color: var(--fg-4);
  cursor: default;
}

.nav-menu-soon-pin {
  font-size: 9px;
  padding: 3px 6px;
}

/* ──────────────────────────────────────────────
   PICKUP — «Как забрать»: showroom map + info + steps.
   ────────────────────────────────────────────── */
.pickup {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 40px 72px;
}

.pickup-back {
  display: inline-flex;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-bottom: 24px;
  color: var(--fg-3);
}

.pickup-back:hover {
  color: var(--fg);
}

.pickup-head {
  max-width: 64ch;
  margin-bottom: 32px;
}

.pickup-head h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--fg);
  margin: 8px 0 16px;
  letter-spacing: -.01em;
}

.pickup-lead {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0;
}

.pickup-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 48px;
}

.pickup-map {
  position: relative;
  min-height: 380px;
  background: var(--vch-paper-100);
  border: 1px solid var(--vch-paper-300);
  overflow: hidden;
}

.pickup-map iframe {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border: 0;
  display: block;
}

.pickup-map-link {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: var(--vch-green-800);
  color: var(--vch-paper-50);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 9px 14px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(20, 14, 4, 0.25);
}

.pickup-map-link:hover {
  background: var(--vch-green-700);
}

.pickup-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pickup-card {
  background: var(--vch-paper-100);
  border: 1px solid var(--vch-paper-300);
  padding: 18px 20px;
}

.pickup-card-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-3);
  display: block;
  margin-bottom: 10px;
}

.pickup-address {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
}

.pickup-floor {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
}

.pickup-hours {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg);
  margin: 0 0 6px;
}

.pickup-hours span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pickup-note {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  margin: 0;
}

.pickup-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pickup-contacts a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--vch-green-800);
  text-decoration: none;
}

/* "Размеры и замеры" — horizontal scrollable category tabs (unlike
   .auth-tabs, there are too many items to stretch evenly across the row). */
.size-guide-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.size-guide-tab {
  flex: 0 0 auto;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.size-guide-tab.on {
  color: var(--fg);
  border-bottom-color: var(--vch-green-800);
}

.size-guide-image {
  max-width: 480px;
  margin: 0 auto;
}

.size-guide-image img {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
}

.pickup-contacts a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pickup-steps {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.pickup-steps>.eyebrow {
  display: block;
  margin-bottom: 20px;
}

.pickup-steps ol {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
}

.pickup-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pickup-step-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--vch-green-800);
  padding-top: 3px;
  flex: 0 0 auto;
}

.pickup-steps li strong {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--fg);
  display: block;
  margin-bottom: 4px;
}

.pickup-steps li p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0;
}

.pickup-cta {
  display: inline-flex;
}

/* Condition guide — "Состояние вещей" classification page. */
.condition-guide-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.condition-guide-item h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 8px;
}

.condition-guide-item p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

@media (max-width: 820px) {
  .condition-guide-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Plain info sections — "Доставка и возврат" and similar practical-info pages. */
.info-section {
  max-width: 64ch;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  margin-top: 28px;
}

.info-section h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 10px;
}

.info-section p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 12px;
}

.info-section p:last-child {
  margin-bottom: 0;
}

.info-section strong {
  color: var(--fg);
  font-weight: 600;
}

.info-section a {
  color: var(--vch-green-800);
}

.info-section a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 820px) {
  .pickup-body {
    grid-template-columns: 1fr;
  }

  .pickup-map {
    min-height: 300px;
  }

  .pickup-map iframe {
    min-height: 300px;
  }
}

@media (max-width: 600px) {
  .pickup {
    padding: 24px 16px 48px;
  }

  .pickup-steps ol {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ============================================================
   RESPONSIVE — tablet (≤1024px) and mobile (≤640px)
   Kept together in one place rather than scattered, since this was
   retrofitted onto a desktop-first stylesheet. Two breakpoints only;
   everything above 1024px is the original desktop layout untouched.
   ============================================================ */

/* ---------- Tablet: ≤1024px ---------- */
@media (max-width: 1024px) {

  /* Header */
  .brand-logo img {
    height: 160px;
  }

  .brand-block {
    padding: 28px 24px 16px;
  }

  /* Catalog nav — no separate gender dropdown (still in Filters); the
     right cluster drops to its own row so it doesn't run into the pills. */
  .catalog-showcase {
    padding: 20px 24px 64px;
  }

  .cs-gender-wrap {
    display: none;
  }

  .cs-hub-right {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 12px;
  }

  /* Product grid: 5/4 → 3 columns */
  .product-grid,
  .product-grid.cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Two-column layouts stack; summary/aside drops its sticky offset */
  .pd-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px 64px;
  }

  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
    padding: 24px 24px 64px;
  }

  .cart-summary {
    position: static;
  }

  .section,
  .feed,
  .cat-title-block {
    padding-left: 24px;
    padding-right: 24px;
  }

  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
}

/* ---------- Tablet only: 641–1024px ---------- */
@media (min-width: 641px) and (max-width: 1024px) {

  /* Filters reads as a tiny stub next to the longer Sort pill — give it
     more breathing room. Sort already sits to its right (flex, DOM order). */
  .cs-filters-btn {
    padding: 11px 36px;
  }
}

/* Filters / "Ещё" / other dropdown popovers — bottom sheet on tablet AND
   mobile (≤1024px), not just phones. Both are button-anchored via
   left/right offsets that assume the button sits at a predictable edge of
   its container; once the nav row wraps (which it does starting at
   tablet), the button can end up anywhere, so anchored positioning can no
   longer be trusted to stay on-screen. A fixed bottom sheet sidesteps the
   problem entirely regardless of where the trigger button ends up. */
@media (max-width: 1024px) {
  .cs-filters-pop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 82vh;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid var(--line-strong);
    animation: none;
  }

  .cs-more-pop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid var(--line-strong);
    animation: none;
    padding: 10px;
  }
}

/* ---------- Mobile: ≤640px ---------- */
@media (max-width: 640px) {

  /* Utility bar — let it wrap instead of overflowing horizontally */
  .top-bar-inner {
    padding: 10px 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .top-bar-actions {
    gap: 10px;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .top-bar-link {
    font-size: 10px;
    gap: 4px;
  }

  /* Brand block */
  .brand-logo img {
    height: 150px;
  }

  .brand-block {
    padding: 20px 16px 12px;
  }

  /* Home only (not .brand-block-compact, used on every other screen) — taller
     hero block on mobile, logo centered both ways within it. */
  .brand-block:not(.brand-block-compact) {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .brand-tagline {
    font-size: 11px;
  }

  .brand-block-compact {
    padding: 6px 16px;
  }

  .brand-logo-compact img {
    height: 100px;
  }

  /* Catalog nav — Filters/Sort drop their labels down to bare icon
     buttons, so the whole hub stays a single tidy row: "Категории" (see
     .cs-cat-wrap, unchanged from desktop) on the left, icons on the right. */
  .catalog-showcase {
    padding: 16px 16px 48px;
  }

  .cs-hub-inner {
    padding: 10px 4px;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .cs-hub-right {
    width: auto;
    margin-top: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 6px;
  }

  .cs-dropdown-label,
  .cs-dropdown-chevron {
    display: none;
  }

  .cs-dropdown-btn,
  .cs-filters-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
  }

  .cs-filters-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 1px 5px;
  }

  .cs-results-strip {
    padding: 0 4px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Product grid: 2 columns on phones */
  .product-grid,
  .product-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-body {
    padding: 10px 12px 14px;
  }

  .product-title {
    font-size: 13px;
  }

  .product-desc {
    font-size: 12px;
  }

  /* Product detail */
  .pd-layout {
    padding: 24px 16px 48px;
    gap: 24px;
  }

  .pd-title {
    font-size: 28px;
  }

  .pd-price {
    font-size: 24px;
  }

  .pd-buy {
    flex-direction: column;
  }

  /* Cart */
  .cart-layout {
    padding: 24px 16px 48px;
    gap: 24px;
  }

  .cart-row {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
  }

  .cart-row-img {
    width: 100px;
  }

  .cart-row-price {
    grid-column: 1 / -1;
    text-align: right;
  }

  .cart-row-name {
    font-size: 18px;
  }

  /* Checkout */
  .checkout-layout {
    padding: 24px 16px 48px;
    gap: 24px;
  }

  .checkout-grid-2,
  .checkout-grid-3 {
    grid-template-columns: 1fr;
  }

  .checkout-method-tabs {
    flex-wrap: wrap;
    flex-direction: row-reverse;
  }

  .checkout-method-tab {
    flex: 1 1 auto;
    min-width: 100px;
    font-size: 11px;
    padding: 10px 6px;
  }

  /* Auth */
  .auth-wrap {
    padding: 12px 16px 40px;
  }

  .auth-card {
    padding: 20px;
  }

  /* Generic page paddings */
  .section,
  .feed,
  .cat-title-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cat-title-block h1 {
    font-size: 32px;
  }

  /* .auth-title-block overrides the generic mobile h1 size above — needs to
     come after it to win (same specificity, later wins). */
  .auth-title-block {
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .auth-title-block h1 {
    font-size: 24px;
  }

  /* Footer */
  .site-footer {
    padding: 40px 16px 20px;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Shrink the copyright bar text on small phones; now that it also carries
     the legal-doc links, let it wrap onto multiple lines instead of forcing
     one line (that used to overflow horizontally once links were added). */
  .site-footer .legal {
    gap: 6px 12px;
    font-size: 8.5px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .site-footer .legal>span:not(.footer-legal-links) {
    white-space: nowrap;
  }

  .footer-legal-links {
    justify-content: center;
    gap: 4px 10px;
  }

  .site-footer .legal a {
    font-size: 8.5px;
  }
}

/* ---------- Contact bubble — floating Telegram/VK shortcut ---------- */
.contact-bubble {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--cookie-consent-h, 0px));
  transition: bottom 180ms ease;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.contact-bubble-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vch-green-800);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-dark);
  box-shadow: 0 6px 18px rgba(11, 40, 32, 0.35);
  transition: transform 160ms ease, background 160ms ease;
}

.contact-bubble-btn:hover {
  background: var(--vch-green-700);
  transform: scale(1.06);
}

.contact-bubble-mark {
  width: 36px;
  height: 36px;
  display: block;
}

.contact-bubble-tip {
  position: absolute;
  right: 62px;
  bottom: 14px;
  white-space: nowrap;
  background: var(--vch-green-800);
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.contact-bubble:hover .contact-bubble-tip {
  opacity: 1;
  transform: translateX(0);
}

.contact-bubble-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  animation: contact-bubble-in 160ms ease;
}

@keyframes contact-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-bubble-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(20, 20, 18, 0.12);
  transition: border-color 160ms ease;
}

.contact-bubble-link:hover {
  border-color: var(--vch-green-800);
}

.contact-bubble-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--fg-on-dark);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
}

.contact-bubble-icon-tg {
  background: #2AABEE;
}

.contact-bubble-icon-vk {
  background: #0077FF;
}

@media (max-width: 640px) {
  .contact-bubble {
    right: 14px;
    bottom: calc(14px + var(--cookie-consent-h, 0px));
  }

  .contact-bubble-btn {
    width: 46px;
    height: 46px;
  }

  .contact-bubble-mark {
    width: 30px;
    height: 30px;
  }

  .contact-bubble-tip {
    display: none;
  }
}

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--bg-inverse);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
}

.cookie-consent-text {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-on-dark-2);
  text-align: center;
  white-space: nowrap;
}

.cookie-consent-text a {
  color: var(--fg-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-consent-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 18px;
  font-size: 11px;
}

@media (max-width: 640px) {
  .cookie-consent {
    padding: 8px 14px;
    gap: 8px;
  }

  .cookie-consent-text {
    flex-basis: 100%;
    white-space: normal;
    font-size: 11px;
  }

  .cookie-consent-btn {
    padding: 7px 16px;
  }
}