@charset "UTF-8";
/* ============================================
   КОЖА — Phase 3 Iter-1
   LIGHT EDITORIAL CATALOG.
   Ported from mockups/phase-3-iter-1-catalog-light{,-mobile,-mobile-drawer}.html
   plus phase-3-iter-1-card-states.html and phase-3-iter-1-empty-collection.html.

   Pivot rationale: Phase 2 dark surface (#0a0a0a) was rejected as
   "industrial dashboard" — Phase 3 rebuilds the catalog on a clean
   white editorial sheet. Sans-serif Inter, no card chrome, red reserved
   exclusively for sale and status badges.
   ============================================ */
/* Inter — primary brand typeface (Phase 3 swap from Golos Text) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* ============================================
   DESIGN TOKENS — Phase 3 Iter-1 light-editorial palette
   InSales settings still drive 4 named colors so the legacy theme
   settings panel keeps working; the light tokens below them are
   the source of truth for the catalog rebuild.
   ============================================ */
/* line 23, theme.scss */
:root {
  /* Legacy InSales-driven settings (kept for backward compat) */
  --color-black: {{ settings.color-black }};
  --color-red: {{ settings.color-red }};
  --color-graphite: {{ settings.color-graphite }};
  --color-white: {{ settings.color-white }};
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-size: {{ settings.font-size }}px;
  --btn-radius: {{ settings.btn-border-radius }};
  --heading-weight: {{ settings.heading-weight }};
  /* === Phase 9 warm-editorial palette (v2 — split surfaces) ===
     Original Phase 9 put the entire site on warm cream (#f7f5ef). Reviewer
     feedback: cutout product photos on cream read as "white holes on
     yellow paper". Fix is split-surface: body + commerce zones stay
     white, cream is reserved for editorial-only blocks (hero, manifest,
     announcement strip). Drawer also becomes white — Leform-style clean
     layer rather than warm wash. */
  --color-bg: #ffffff;
  /* primary surface — body, commerce */
  --color-cream: #f7f5ef;
  /* editorial-only — hero / manifest / strip */
  --color-paper: #ffffff;
  /* photo wells (kept as alias for clarity) */
  --color-bg-card: transparent;
  --color-text: #111111;
  --color-text-secondary: #77736b;
  --color-text-tertiary: #b5b1a8;
  --color-text-quiet: #555149;
  --color-hairline: #e8e6e1;
  /* hairline on white (slightly warmer than #e5e5e5) */
  --color-hairline-strong: #c8c2b3;
  --color-placeholder: #ede9dd;
  --color-card-sheet: rgba(17, 17, 17, 0.08);
  /* product-card gallery border */
  --color-pumpkin: #d86f21;
  /* single brand accent */
  --color-pumpkin-soft: #f0c7a4;
  --color-green-deep: #0f3b2e;
  /* secondary accent for special posters */
  --color-accent-red: #e20000;
  /* sale badge + size-strip focus only */
  --color-soldout: #8a8a8a;
  /* sold-out badge — gray, NOT red */
  /* === Type scale === */
  --font-size-base: 14px;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 18px;
  --font-size-h3: 22px;
  --font-size-h2: 24px;
  --font-size-h1: 40px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.5;
  --line-height-heading: 1.15;
  --letter-spacing-body: 0;
  --letter-spacing-heading: 0.02em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-strong: 0.10em;
  /* === Spacing === */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 72px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  /* === Phase 8 tokens — V2.1 card / H1 hero / P2 PDP === */
  /* V2.1 card — aspect bumped 4/5 → 3/4 in Phase 9 v2 so the white
     gallery-sheet treatment frames cutout product shots without
     vertical crop. Tracked together with .product-card__image-wrapper
     bg/border below. */
  --card-photo-aspect: 3 / 4;
  --card-info-pad-top: 14px;
  --card-brand-fz: 10px;
  --card-brand-weight: 600;
  --card-brand-tracking: 0.16em;
  --card-brand-color: #7a7a7a;
  --card-brand-mb: 8px;
  --card-title-fz: 14px;
  --card-title-weight: 600;
  --card-title-line: 1.3;
  --card-title-tracking: -0.005em;
  --card-title-color: #111;
  --card-price-fz: 14px;
  --card-price-weight: 600;
  --card-price-color: #111;
  --card-price-mt: 6px;
  --card-price-sale-color: #e20000;
  --card-price-old-fz: 13px;
  --card-price-old-color: #7a7a7a;
  --card-hover-duration: 200ms;
  /* H1 lookbook hero */
  --hero-aspect-desktop: 16 / 9;
  --hero-aspect-mobile: 5 / 6;
  --hero-overlay: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.32) 100%);
  --hero-pad-desktop: 32px;
  --hero-pad-mobile: 20px;
  --hero-wordmark-desktop: 56px;
  --hero-wordmark-mobile: 38px;
  --hero-wordmark-tracking: 0.04em;
  /* P2 PDP */
  --pdp-thumbs-w-desktop: 80px;
  --pdp-thumbs-w-tablet: 64px;
  --pdp-info-w-desktop: 380px;
  --pdp-sticky-top: 92px;
  --pdp-section-gap-desktop: 64px;
  --pdp-section-gap-mobile: 40px;
  /* Section rhythm */
  --section-gap-desktop: 80px;
  --section-gap-mobile: 48px;
  --section-heading-fz: 13px;
  --section-heading-tracking: 0.18em;
  --section-link-fz: 11px;
  --section-link-color: #7a7a7a;
  /* === Layout === */
  --container-max: 1440px;
  --container-pad: 40px;
  --rail-width: 240px;
  --rail-gap: 56px;
  /* === Motion === */
  --transition: all 0.3s ease;
  /* legacy */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  /* === Phase 9: editorial hero + manifest poster typography ===
     Big-type system layered on top of the existing h1..h4 scale. Used
     by .ed-hero and .manifest-poster only — does not affect existing
     section headings, card titles, or PDP info. */
  --ed-hero-fz: clamp(48px, 11vw, 132px);
  --ed-hero-line: 0.88;
  --ed-hero-track: -0.045em;
  /* Manifest scale bumped — designer flagged 168px ceiling as undersized
     for the "wall of type" composition. 240px max + tighter 0.85 line
     gives the closing poster the weight it needs on 1440+ displays. */
  --manifest-fz: clamp(64px, 16vw, 240px);
  --manifest-line: 0.85;
  --manifest-track: -0.06em;
  --ed-eyebrow-fz: 11px;
  --ed-eyebrow-track: 0.18em;
  /* === Phase 9: mobile header + overlays ===
     Mobile chrome shell — 56px sticky bar, blurred translucent surface,
     and z-index ladder for the 3 overlays (drawer / search / contact). */
  --mhead-h: 56px;
  --mhead-bg: rgba(255, 255, 255, 0.94);
  /* white blur — was cream */
  --mhead-bg-solid: #ffffff;
  /* drawer + sheet — was cream */
  --mhead-border: rgba(17, 17, 17, 0.08);
  --mhead-icon: 28px;
  --mhead-hit: 44px;
  --z-header-sticky: 900;
  --z-overlay-search: 1000;
  --z-overlay-contact: 1010;
  --z-overlay-drawer: 1020;
  --z-overlay-modal: 1100; }

/* ============================================
   GLOBAL RESET / BASE
   ============================================ */
/* line 196, theme.scss */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

/* line 197, theme.scss */
*, *::before, *::after {
  box-sizing: border-box; }

/* line 199, theme.scss */
html, body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kill horizontal scroll from any rogue element. `clip` is the modern
     safe default — unlike `hidden` it doesn't create a scroll container
     for sticky/sticky-position children. */
  overflow-x: clip; }

/* line 214, theme.scss */
img {
  max-width: 100%;
  display: block; }

/* ============================================
   TYPOGRAPHY — Inter, light editorial
   ============================================ */
/* line 219, theme.scss */
h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm); }

/* line 229, theme.scss */
h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-body);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm); }

/* line 238, theme.scss */
h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-body);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm); }

/* line 247, theme.scss */
h4, .h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text);
  margin-bottom: var(--spacing-xs); }

/* line 255, theme.scss */
p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-text); }

/* line 260, theme.scss */
a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast); }

/* line 266, theme.scss */
a:hover {
  color: var(--color-accent-red); }

/* Phase 6: visible focus rings (keyboard-only via :focus-visible). */
/* line 269, theme.scss */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.chip:focus-visible,
.facet-link:focus-visible,
.collection-toolbar__sort-trigger:focus-visible,
.product-card__link:focus-visible,
.header__hamburger:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
  border-radius: 2px; }

/* ============================================
   BUTTONS — light editorial
   Primary = filled black; outline = inverse.
   ============================================ */
/* line 289, theme.scss */
.btn,
button,
input[type="submit"],
input[type="button"],
.button {
  background-color: var(--color-text);
  color: var(--color-bg);
  border: 1px solid var(--color-text);
  border-radius: 4px;
  padding: 12px 22px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  display: inline-block; }

/* line 309, theme.scss */
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text); }

/* line 319, theme.scss */
.btn-outline {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text); }

/* line 325, theme.scss */
.btn-outline:hover {
  background-color: var(--color-text);
  color: var(--color-bg); }

/* ============================================
   LAYOUT — container
   ============================================ */
/* line 333, theme.scss */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad); }

/* ============================================
   HEADER — Phase 9 warm-editorial chrome
   Mobile (≤767):  56px sticky bar, translucent cream + blur,
                   5 icons split 2-wordmark-2, no text labels.
   Desktop (≥768): same 3-col grid (nav | wordmark | icons).
                   Icons replace the legacy «Поиск / Войти / Корзина (N)»
                   text links — chrome is quieter and aligns with mobile.
   ============================================ */
/* line 347, theme.scss */
.header {
  background-color: var(--mhead-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mhead-border);
  position: sticky;
  top: 0;
  z-index: var(--z-header-sticky); }

/* Desktop: 3-col grid (nav | wordmark | icons), generous breathing room.
   Padding-block kept tall on desktop so wordmark sits in a roomy bar.
   minmax(0,1fr) instead of bare 1fr — prevents the outer tracks from
   blowing out to their intrinsic min-content size when nav labels or
   icon-cluster width get unexpectedly large. Safety net suggested by
   the designer pass; cheap insurance. */
/* line 363, theme.scss */
.header__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-6);
  min-height: 72px;
  padding-top: 12px;
  padding-bottom: 12px; }

/* line 373, theme.scss */
.header__logo {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-align: center;
  white-space: nowrap; }

/* line 382, theme.scss */
.header__logo a {
  color: var(--color-text); }

/* line 383, theme.scss */
.header__logo a:hover {
  color: var(--color-pumpkin); }

/* Left cluster wraps the hamburger + contact (mobile-only) and the
   desktop navigation as a single grid child — keeps the .header__container
   3-col grid stable across breakpoints. The 3 children take their turns:
   on mobile only the icons render; on desktop only the nav renders. */
/* line 389, theme.scss */
.header__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0; }

/* line 396, theme.scss */
.navigation {
  display: flex;
  gap: clamp(10px, 1vw, 14px);
  /* tightened to fit 7 items on 1280–1440 desktop */
  flex-wrap: nowrap;
  min-width: 0;
  /* allow shrink rather than overflow column */ }

/* line 403, theme.scss */
.navigation__item {
  font-size: 12px;
  /* down from --font-size-sm so 7 items fit
     alongside the wider "TYKVA STORE" wordmark */
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* tightened from 0.08em — nav is only ever
     shown ≥1280px, so we lean into compact set */
  color: var(--color-text);
  transition: color var(--transition-fast);
  white-space: nowrap; }

/* line 415, theme.scss */
.navigation__item:hover,
.navigation__item--active {
  color: var(--color-pumpkin); }

/* line 418, theme.scss */
.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0; }

/* Mobile-icon button: 28px glyph in a 44px tap target, no chrome.
   Used by hamburger, contact, search, account, bag. The hamburger
   and contact icons hide on desktop; search/account/bag stay on
   both — they are the desktop tool group as well. */
/* line 430, theme.scss */
.mhead-icon {
  display: inline-grid;
  place-items: center;
  width: var(--mhead-hit);
  height: var(--mhead-hit);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast); }

/* line 444, theme.scss */
.mhead-icon:hover,
.mhead-icon:focus-visible {
  color: var(--color-pumpkin); }

/* line 446, theme.scss */
.mhead-icon svg {
  display: block; }

/* Cart count badge — small pumpkin dot+number top-right of bag icon. */
/* line 449, theme.scss */
.mhead-icon__count {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums; }

/* Global a11y helper — was previously scoped to .brand-rail only. */
/* line 469, theme.scss */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/* Hamburger + contact icons are mobile-only. */
/* line 480, theme.scss */
.header__hamburger,
.mhead-icon--contact {
  display: none; }

/* Legacy fallback selectors — kept as no-ops in case other snippets
   still reference them. New chrome uses .mhead-icon exclusively. */
/* line 485, theme.scss */
.header__cart a,
.header__account a,
.header__search a {
  color: var(--color-text); }

/* line 488, theme.scss */
.header__cart a:hover,
.header__account a:hover,
.header__search a:hover {
  color: var(--color-pumpkin); }

/* Phase 6.1: filter buttons (replace placeholder <li>s).
   Reset native button chrome so they match the prior visual. */
/* line 494, theme.scss */
.filter-rail__option,
.filter-toggle-link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 6px 0;
  cursor: pointer; }

/* line 507, theme.scss */
.filter-rail__option .filter-option__indicator {
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 3px;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--transition-fast), border-color var(--transition-fast); }

/* line 517, theme.scss */
.filter-rail__option[aria-pressed="true"] .filter-option__indicator,
.filter-rail__option.is-active .filter-option__indicator {
  background-color: var(--color-text);
  border-color: var(--color-text); }

/* line 522, theme.scss */
.filter-rail__option[aria-pressed="true"] .filter-option__indicator::after,
.filter-rail__option.is-active .filter-option__indicator::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); }

/* line 532, theme.scss */
.filter-rail__option .filter-option__label {
  flex: 1;
  font-size: 13px; }

/* line 536, theme.scss */
.filter-rail__option .filter-option__count {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-left: 8px;
  font-variant-numeric: tabular-nums; }

/* line 542, theme.scss */
.filter-rail__option:hover .filter-option__label {
  color: var(--color-text); }

/* line 543, theme.scss */
.filter-rail__option:hover .filter-option__indicator {
  border-color: var(--color-text); }

/* line 545, theme.scss */
.filter-toggle-link[aria-pressed="true"] .filter-toggle__switch {
  background-color: var(--color-text); }

/* line 548, theme.scss */
.filter-toggle-link[aria-pressed="true"] .filter-toggle__switch::after {
  transform: translateX(16px); }

/* Filtered-out card: hidden but kept in DOM so JS can re-show on toggle. */
/* line 553, theme.scss */
.product-card--filtered-out {
  display: none !important; }

/* Hide the inline filter-rail header inside the drawer — drawer has its own. */
/* line 556, theme.scss */
.filter-drawer .filter-rail__header,
.filter-drawer .filter-rail__clear-row {
  display: none; }

/* Empty-state banner from JS when 0 cards match */
/* line 560, theme.scss */
.empty-state--filter {
  padding: 56px 0;
  text-align: center; }

/* Active chip — make it visually a pressed button + remove × */
/* line 566, theme.scss */
.chip[data-chip-filter] {
  cursor: pointer; }

/* line 569, theme.scss */
.chip--clear {
  border-style: dashed; }

/* Hamburger — hidden on desktop, shown on mobile */
/* Phase 9 v2 — burger is back to three real <span> bars (was an SVG
   path that depended on currentColor inheritance which could fail in
   some cascade orders, leaving an "empty" tap target). 44×44 button,
   3 horizontal lines centered, no chrome. Hidden on desktop; the
   `display: none → inline-grid` toggle is in the (max-width: 1099px)
   block below. */
/* line 580, theme.scss */
.header__hamburger {
  width: var(--mhead-hit);
  height: var(--mhead-hit);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  display: none;
  /* default hidden; mobile/tablet block flips to grid */
  align-content: center;
  justify-content: center;
  gap: 5px; }

/* line 593, theme.scss */
.header__hamburger span {
  display: block;
  width: 22px;
  height: 1.6px;
  background: currentColor;
  border-radius: 999px; }

/* line 600, theme.scss */
.header__hamburger:hover {
  color: var(--color-pumpkin); }

/* ============================================
   MAIN CONTENT
   ============================================ */
/* line 605, theme.scss */
.main-content {
  min-height: calc(100vh - 200px);
  padding: var(--spacing-md) 0 80px; }

/* line 610, theme.scss */
.page-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin: 0 0 var(--spacing-md); }

/* ============================================
   COLLECTION PAGE — light catalog
   ============================================ */
/* line 623, theme.scss */
.collection-page,
body.template-collection {
  background-color: var(--color-bg); }

/* line 628, theme.scss */
.collection-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px var(--container-pad) 80px; }

/* Breadcrumbs */
/* line 635, theme.scss */
.collection-breadcrumb,
.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  margin: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 0; }

/* line 646, theme.scss */
.collection-breadcrumb a,
.breadcrumbs a {
  color: var(--color-text-secondary); }

/* line 648, theme.scss */
.collection-breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--color-text); }

/* line 651, theme.scss */
.collection-breadcrumb__sep,
.breadcrumbs .sep {
  margin: 0 10px;
  color: var(--color-text-tertiary); }

/* line 657, theme.scss */
.collection-breadcrumb__current {
  color: var(--color-text);
  font-weight: var(--font-weight-medium); }

/* line 662, theme.scss */
.collection-description {
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-md);
  background-color: #fafafa;
  border-left: 3px solid var(--color-accent-red);
  color: var(--color-text-quiet); }

/* ============================================
   BRAND CONTEXT HERO — light
   Microlabel + black accent dash + 40px H1 + tagline + count
   ============================================ */
/* line 674, theme.scss */
.brand-context-hero {
  margin: 0 0 64px;
  /* directive 10: 64px between hero and toolbar */
  position: relative; }

/* line 679, theme.scss */
.brand-context-hero__microlabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  margin: 0 0 14px; }

/* Phase 3 directive: red dash before "БРЕНД" — accent only */
/* line 692, theme.scss */
.brand-context-hero__microlabel::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background-color: var(--color-accent-red);
  transform: translateY(-1px); }

/* line 701, theme.scss */
.brand-context-hero__title {
  font-family: var(--font-main);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  margin: 0 0 14px; }

/* line 712, theme.scss */
.brand-context-hero__tagline {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 4px;
  max-width: 560px; }

/* line 721, theme.scss */
.brand-context-hero__meta {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-tertiary);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  margin: 0; }

/* ============================================
   TOOLBAR (count + sort)
   ============================================ */
/* line 733, theme.scss */
.toolbar,
.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  margin: 0 0 48px;
  /* directive 10: 48px between toolbar and grid */ }

/* line 744, theme.scss */
.toolbar__count,
.collection-toolbar__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text); }

/* line 753, theme.scss */
.toolbar__sort,
.collection-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text); }

/* line 766, theme.scss */
.collection-toolbar__sort-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  margin-right: 4px; }

/* line 775, theme.scss */
.collection-toolbar__sort-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--transition-fast);
  white-space: nowrap; }

/* line 785, theme.scss */
.collection-toolbar__sort-link:hover {
  color: var(--color-text); }

/* line 787, theme.scss */
.collection-toolbar__sort-link--active {
  color: var(--color-text);
  font-weight: var(--font-weight-medium); }

/* ============================================
   2-COL LAYOUT (rail + grid)
   ============================================ */
/* line 795, theme.scss */
.catalog-layout {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  gap: var(--rail-gap);
  align-items: flex-start; }

/* ============================================
   FILTER RAIL — light editorial:
   no card background, no border — just a column of facets
   separated by hairline #e5e5e5. Reads as a quiet table of contents.
   ============================================ */
/* line 807, theme.scss */
.filter-rail {
  position: sticky;
  top: 24px;
  background-color: transparent;
  padding: 0;
  border: none; }

/* line 815, theme.scss */
.filter-rail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 14px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--color-text); }

/* line 824, theme.scss */
.filter-rail__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text); }

/* line 832, theme.scss */
.filter-rail__count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; }

/* line 844, theme.scss */
.filter-rail__count strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold); }

/* line 849, theme.scss */
.filter-rail__clear-row {
  padding-top: 12px;
  margin-bottom: 4px; }

/* line 854, theme.scss */
.filter-rail__clear {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-fast); }

/* line 867, theme.scss */
.filter-rail__clear:hover {
  color: var(--color-accent-red); }

/* Filter group */
/* line 870, theme.scss */
.filter-rail__group,
.filter-group {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-hairline); }

/* line 876, theme.scss */
.filter-rail__group:last-child,
.filter-group:last-child {
  border-bottom: none;
  padding-bottom: 0; }

/* line 882, theme.scss */
.filter-group__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between; }

/* line 894, theme.scss */
.filter-group__title .chevron-mini {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  opacity: 0.5; }

/* line 903, theme.scss */
.filter-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px; }

/* Filter option (checkbox row) */
/* line 913, theme.scss */
.filter-rail__option,
.filter-option {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  transition: color var(--transition-fast); }

/* line 927, theme.scss */
.filter-rail__option:hover,
.filter-option:hover {
  color: var(--color-accent-red); }

/* line 930, theme.scss */
.filter-option__indicator {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-bg); }

/* line 937, theme.scss */
.filter-option--active .filter-option__indicator {
  background-color: var(--color-text);
  border-color: var(--color-text);
  position: relative; }

/* line 943, theme.scss */
.filter-option--active .filter-option__indicator::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 4px;
  height: 7px;
  border-bottom: 1.5px solid var(--color-bg);
  border-right: 1.5px solid var(--color-bg);
  transform: rotate(40deg); }

/* line 955, theme.scss */
.filter-option--active .filter-option__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text); }

/* line 960, theme.scss */
.filter-option__count {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 28px; }

/* line 968, theme.scss */
.filter-group__more {
  margin-top: 12px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0; }

/* line 981, theme.scss */
.filter-group__more:hover {
  color: var(--color-accent-red); }

/* ============================================
   PRICE RANGE SLIDER — light visual stub
   ============================================ */
/* line 986, theme.scss */
.price-range,
.price-slider {
  padding-top: 4px; }

/* line 991, theme.scss */
.price-slider__track {
  position: relative;
  height: 3px;
  background-color: var(--color-hairline);
  margin: 12px 8px 0;
  border-radius: 2px; }

/* line 999, theme.scss */
.price-slider__range {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 80.4%;
  background-color: var(--color-text);
  border-radius: 2px; }

/* line 1009, theme.scss */
.price-slider__knob {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-bg);
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--color-text); }

/* line 1020, theme.scss */
.price-slider__knob--min {
  left: 0%; }

/* line 1021, theme.scss */
.price-slider__knob--max {
  left: 19.6%; }

/* line 1023, theme.scss */
.price-slider__ticks {
  position: relative;
  height: 6px;
  margin: 6px 8px 4px; }

/* line 1029, theme.scss */
.price-slider__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 4px;
  background-color: var(--color-hairline-strong);
  transform: translateX(-50%); }

/* line 1038, theme.scss */
.price-slider__tick--strong {
  background-color: var(--color-text-secondary);
  height: 5px; }

/* line 1043, theme.scss */
.price-slider__tick[data-pos="5k"] {
  left: 9.55%; }

/* line 1044, theme.scss */
.price-slider__tick[data-pos="10k"] {
  left: 19.60%; }

/* line 1045, theme.scss */
.price-slider__tick[data-pos="20k"] {
  left: 39.70%; }

/* line 1046, theme.scss */
.price-slider__tick[data-pos="50k"] {
  left: 100%; }

/* line 1048, theme.scss */
.price-slider__tick-labels {
  position: relative;
  height: 14px;
  margin: 0 8px 12px;
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  font-variant-numeric: tabular-nums; }

/* line 1060, theme.scss */
.price-slider__tick-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  line-height: 1; }

/* line 1067, theme.scss */
.price-slider__tick-label[data-pos="5k"] {
  left: 9.55%; }

/* line 1068, theme.scss */
.price-slider__tick-label[data-pos="10k"] {
  left: 19.60%; }

/* line 1069, theme.scss */
.price-slider__tick-label[data-pos="20k"] {
  left: 39.70%; }

/* line 1070, theme.scss */
.price-slider__tick-label[data-pos="50k"] {
  left: 100%;
  transform: translateX(-100%); }

/* line 1072, theme.scss */
.price-slider__values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  margin: 0 4px; }

/* line 1084, theme.scss */
.price-slider__values .lbl {
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-tertiary);
  margin-right: 4px; }

/* ============================================
   iOS-STYLE TOGGLE — light
   28×16 track, 14×14 thumb
   ============================================ */
/* line 1097, theme.scss */
.toggle-switch,
.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--color-text);
  font-size: var(--font-size-sm); }

/* line 1108, theme.scss */
.filter-toggle__switch {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background-color: var(--color-hairline-strong);
  transition: background-color var(--transition-fast);
  flex-shrink: 0; }

/* line 1118, theme.scss */
.filter-toggle__switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-fast); }

/* line 1131, theme.scss */
.filter-toggle--on .filter-toggle__switch {
  background-color: var(--color-text); }

/* line 1135, theme.scss */
.filter-toggle--on .filter-toggle__switch::after {
  transform: translateX(12px);
  background-color: var(--color-bg); }

/* ============================================
   ACTIVE-FILTER CHIP ROW — light
   Value-only, single-line, hairline pills.
   ============================================ */
/* line 1144, theme.scss */
.active-filter-chips,
.active-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
  overflow: hidden; }

/* line 1154, theme.scss */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition-fast), background-color var(--transition-fast); }

/* line 1171, theme.scss */
.chip:hover {
  border-color: var(--color-text);
  background-color: #fafafa; }

/* line 1176, theme.scss */
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--font-weight-regular);
  transition: color var(--transition-fast); }

/* line 1190, theme.scss */
.chip:hover .chip__remove,
.chip__remove:hover {
  color: var(--color-accent-red); }

/* line 1193, theme.scss */
.chip-clear-all {
  margin-left: 8px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
  transition: color var(--transition-fast); }

/* line 1208, theme.scss */
.chip-clear-all:hover {
  color: var(--color-accent-red); }

/* ============================================
   PRODUCTS GRID — 3 cols on desktop, 32px row × 24px col gap
   ============================================ */
/* line 1213, theme.scss */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
  background-color: transparent;
  margin-bottom: var(--spacing-lg); }

/* ============================================
   PRODUCT CARD — minimalist light editorial
   No border, no shadow. Image wrapper has #ececec
   light-gray placeholder when no photo.
   ============================================ */
/* line 1226, theme.scss */
.product-card {
  position: relative;
  background-color: transparent;
  border: none;
  transition: none; }

/* line 1233, theme.scss */
.product-card:hover {
  border-color: transparent;
  box-shadow: none; }

/* line 1238, theme.scss */
.product-card__link {
  display: block;
  color: var(--color-text); }

/* Phase 9 v3 — white gallery sheet + native scroll-snap carousel.
   The wrapper IS the sheet (white, hairline, 3:4 aspect). Up to 4
   photos sit in a horizontal scroll-snap track inside the anchor.
   Dots sit absolute over the well as sibling of the anchor — dot
   clicks switch slides without firing product navigation. */
/* line 1248, theme.scss */
.product-card__image-wrapper {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-card-sheet);
  overflow: hidden;
  isolation: isolate; }

/* line 1255, theme.scss */
.product-card__image-wrapper::before {
  content: "";
  display: block;
  padding-top: 133.333%;
  /* 3:4 fallback */ }

@supports (aspect-ratio: 3/4) {
  /* line 1257, theme.scss */
  .product-card__image-wrapper::before {
    display: none; }

  /* line 1258, theme.scss */
  .product-card__image-wrapper {
    aspect-ratio: var(--card-photo-aspect); } }
/* Anchor fills the well so the whole image area is tap-to-product. */
/* line 1262, theme.scss */
.product-card__image-wrapper > .product-card__link {
  position: absolute;
  inset: 0;
  display: block; }

/* Scroll-snap track — horizontal carousel. overflow-x: auto makes it
   swipeable on touch; scroll-snap-type: x mandatory locks each slide
   to start; scrollbar-width: none hides the native scrollbar so the
   gallery reads as a clean sheet on desktop too. */
/* line 1272, theme.scss */
.product-card__gallery-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* swipe doesn't escape to page scroll */ }

/* line 1286, theme.scss */
.product-card__gallery-track::-webkit-scrollbar {
  display: none; }

/* Each slide is a 100%-wide snap target. object-fit: contain preserves
   cutout silhouettes (modeled lifestyle photos letterbox slightly,
   acceptable). pointer-events: none so taps reach the parent anchor. */
/* line 1291, theme.scss */
.product-card__slide,
.product-card__image,
.product-card__image--primary {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none; }

/* line 1303, theme.scss */
.product-card__image--cover {
  object-fit: cover; }

/* line 1304, theme.scss */
.product-card__image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; }

/* Dots — sibling of the anchor, absolute over the well, clickable
   only on the dot itself (container is pointer-events:none so taps
   between dots reach the anchor underneath). */
/* line 1311, theme.scss */
.product-card__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  /* +4px breathing room from size pills */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  pointer-events: none; }

/* line 1324, theme.scss */
.product-card__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* Resting state bumped 0.28 → 0.45 so dots read on white sheets and
     dark product photos alike. White-ring box-shadow keeps separation
     from dark photos without diluting the ink. */
  background: rgba(17, 17, 17, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--transition-fast); }

/* line 1339, theme.scss */
.product-card__dot:hover {
  background: rgba(17, 17, 17, 0.7); }

/* line 1340, theme.scss */
.product-card__dot.is-active {
  /* Active dot rides the contrast jump alone — the scale(1.15) on a
     6px element was sub-pixel and read as noise. Heavier ink does the
     work. */
  background: rgba(17, 17, 17, 0.95); }

/* line 1346, theme.scss */
.product-card__dot:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px; }

/* Hover-capable devices: dots dimmed at rest, full strength on hover/
   focus. Resting opacity 0.55 (was 0) so first-time visitors still
   SEE that a card has multiple photos without hovering — the carousel
   is the brand differentiator, hiding it under hover loses the
   affordance. Touch devices keep dots at full opacity always. */
@media (hover: hover) {
  /* line 1357, theme.scss */
  .product-card__dots {
    opacity: 0.55;
    transition: opacity var(--transition-fast); }

  /* line 1361, theme.scss */
  .product-card:hover .product-card__dots,
  .product-card:focus-within .product-card__dots {
    opacity: 1; } }
/* V2.1 hover-scale and alt-image crossfade are dropped in Phase 9 v3
   — the scroll-snap carousel replaces hover-alt as the "show more
   photos" affordance, and scaling slides inside a snap track breaks
   the snap alignment. The .product-card__image--alt selector now
   matches nothing in the new markup; left as no-op for forward-compat. */
/* line 1372, theme.scss */
.product-card__image--alt {
  display: none; }

/* Empty placeholder — light gray field with subtle 36px circle outline */
/* line 1375, theme.scss */
.product-card__image-placeholder,
.product-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center; }

/* line 1387, theme.scss */
.product-card__image-placeholder::after,
.product-card__placeholder::after {
  content: "";
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: 50%;
  opacity: 0.7; }

/* Sold-out: dim image to 60% so the gray badge reads loud */
/* line 1398, theme.scss */
.product-card.is-soldout .product-card__image,
.product-card.is-soldout .product-card__image--primary {
  opacity: 0.60; }

/* ============================================
   BADGES — top-left.
   Sale = red #e20000, sold-out = gray #8a8a8a.
   Directive 9: red ONLY for sale state.
   ============================================ */
/* line 1408, theme.scss */
.product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none; }

/* line 1424, theme.scss */
.product-card__badge--sale {
  background-color: var(--color-accent-red);
  color: var(--color-bg);
  border: none; }

/* line 1430, theme.scss */
.product-card__badge--sold-out,
.product-card__badge--soldout {
  background-color: var(--color-soldout);
  color: var(--color-bg);
  border: none; }

/* ============================================
   CARD TEXT — Phase 3 four-line block:
   ТИП (regular secondary) → БРЕНД (uppercase 600 primary)
   → название (regular primary, larger)
   → цена (regular primary, no red, no bold)
   ============================================ */
/* line 1443, theme.scss */
.product-card__info {
  padding-top: var(--card-info-pad-top); }

/* line 1445, theme.scss */
.product-card__type {
  /* legacy line — leave dormant; brand microlabel takes its role in V2.1 */
  display: none; }

/* line 1450, theme.scss */
.product-card__brand {
  display: inline-block;
  font-family: var(--font-main);
  font-size: var(--card-brand-fz);
  font-weight: var(--card-brand-weight);
  letter-spacing: var(--card-brand-tracking);
  text-transform: uppercase;
  color: var(--card-brand-color);
  margin: 0 0 var(--card-brand-mb);
  line-height: 1;
  text-decoration: none; }

/* Brand-as-anchor: same typography, hover pulls to ink. The link sits
   outside the parent `.product-card__link` so it routes to the brand
   collection, not the product. */
/* line 1466, theme.scss */
.product-card__brand--link:hover,
.product-card__brand--link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px; }

/* line 1474, theme.scss */
.product-card__title {
  font-family: var(--font-main);
  font-size: var(--card-title-fz);
  font-weight: var(--card-title-weight);
  line-height: var(--card-title-line);
  letter-spacing: var(--card-title-tracking);
  color: var(--card-title-color);
  text-transform: none;
  /* V2.1: mixed-case, no forced uppercase */
  margin: 0; }

/* Title-as-anchor: inherits sizing from the h3, no underline by default,
   subtle hover. The link lives inside the h3 so the heading semantic
   stays intact. */
/* line 1488, theme.scss */
.product-card__title-link {
  color: inherit;
  text-decoration: none; }

/* line 1492, theme.scss */
.product-card__title-link:hover,
.product-card__title-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px; }

/* 2-line clamp variant for long titles */
/* line 1500, theme.scss */
.product-card__title--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; }

/* line 1508, theme.scss */
.product-card__price {
  font-family: var(--font-main);
  margin-top: var(--card-price-mt); }

/* line 1512, theme.scss */
.product-card__price-regular,
.product-card__price-current {
  font-size: var(--card-price-fz);
  font-weight: var(--card-price-weight);
  color: var(--card-price-color);
  line-height: 1; }

/* line 1519, theme.scss */
.product-card__price-current {
  color: var(--card-price-sale-color); }

/* line 1520, theme.scss */
.product-card__price-old {
  font-size: var(--card-price-old-fz);
  font-weight: 400;
  color: var(--card-price-old-color);
  text-decoration: line-through;
  margin-left: 8px; }

/* ============================================
   SIZE-STRIP HOVER OVERLAY — light editorial
   White-translucent strip slides in on hover.
   M-active is underlined with 1px red micro-bar.
   Pure CSS. No JS.
   ============================================ */
/* line 1534, theme.scss */
.size-strip-overlay,
.product-card__sizes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 14px;
  background-color: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--color-hairline);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none; }

/* line 1556, theme.scss */
.product-card:hover .product-card__sizes,
.product-card.is-hover .product-card__sizes {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; }

/* line 1563, theme.scss */
.product-card__size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  color: var(--color-text);
  cursor: pointer;
  position: relative;
  line-height: 1; }

/* line 1578, theme.scss */
.product-card__size--unavail {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--color-text-tertiary);
  text-decoration-thickness: 1px; }

/* Focused size: 1px red micro-underline 3px below baseline */
/* line 1587, theme.scss */
.product-card__size--focused::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -3px;
  height: 1px;
  background-color: var(--color-accent-red); }

/* ============================================
   LOADING SKELETON — Phase 4 will toggle this server-side.
   Animated shimmer #ececec → #f5f5f5 → #ececec.
   ============================================ */
@keyframes product-card-shimmer {
  0% {
    background-position: 200% 0; }
  100% {
    background-position: -200% 0; } }
/* line 1606, theme.scss */
.product-card--skeleton .product-card__image-wrapper {
  background-color: var(--color-placeholder); }

/* line 1610, theme.scss */
.product-card__skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: product-card-shimmer 1.4s linear infinite; }

/* line 1623, theme.scss */
.product-card__skeleton-row {
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: product-card-shimmer 1.4s linear infinite;
  margin-top: 8px; }

/* line 1637, theme.scss */
.product-card__skeleton-row--type {
  width: 28%;
  margin-top: 12px; }

/* line 1638, theme.scss */
.product-card__skeleton-row--brand {
  width: 22%; }

/* line 1639, theme.scss */
.product-card__skeleton-row--title {
  width: 78%; }

/* line 1640, theme.scss */
.product-card__skeleton-row--price {
  width: 32%; }

/* ============================================
   EMPTY-STATE BLOCK — light editorial.
   Sits where the grid would sit, centered vertically.
   Uses the same #ececec circle glyph as placeholder cards.
   ============================================ */
/* line 1647, theme.scss */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 32px 96px;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  background-color: var(--color-bg); }

/* line 1659, theme.scss */
.empty-state__icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--color-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 28px; }

/* line 1670, theme.scss */
.empty-state__icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-text-secondary);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* line 1680, theme.scss */
.empty-state__eyebrow {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  margin: 0 0 14px; }

/* line 1689, theme.scss */
.empty-state__title {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 12px;
  max-width: 540px; }

/* line 1698, theme.scss */
.empty-state__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 460px; }

/* line 1706, theme.scss */
.empty-state__actions {
  display: flex;
  align-items: center;
  gap: 18px; }

/* line 1712, theme.scss */
.empty-state__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  background-color: var(--color-text);
  color: var(--color-bg);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  border: 1px solid var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast); }

/* line 1731, theme.scss */
.empty-state__btn-primary:hover {
  background-color: var(--color-bg);
  color: var(--color-text); }

/* line 1736, theme.scss */
.empty-state__btn-link {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast); }

/* line 1752, theme.scss */
.empty-state__btn-link:hover {
  color: var(--color-text); }

/* Legacy fallback — keep .empty-collection markup working
   if some pages still emit it instead of .empty-state. */
/* line 1756, theme.scss */
.empty-collection {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  color: var(--color-text-secondary); }

/* line 1762, theme.scss */
.empty-collection__message {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-md);
  color: var(--color-text); }

/* line 1768, theme.scss */
.empty-collection__cta {
  display: inline-block; }

/* ============================================
   PRODUCT PAGE — preserved (light surface)
   ============================================ */
/* line 1773, theme.scss */
.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-lg); }

/* line 1780, theme.scss */
.product-page__brand {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs); }

/* line 1789, theme.scss */
.product-page__title {
  font-size: 2rem;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  color: var(--color-text); }

/* line 1796, theme.scss */
.product-page__price {
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-md);
  color: var(--color-text); }

/* line 1803, theme.scss */
.product-page__description {
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
  color: var(--color-text-quiet); }

/* line 1809, theme.scss */
.product-page__properties {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-hairline); }

/* line 1815, theme.scss */
.product-page__properties-title {
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text); }

/* line 1821, theme.scss */
.product-property {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-hairline); }

/* line 1828, theme.scss */
.product-property__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); }

/* line 1833, theme.scss */
.product-property__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text); }

/* ============================================
   FOOTER — light, hairline-top, 5-col editorial grid
   Spec: docs/superpowers/specs/2026-05-18-footer-design.md
   ============================================ */
/* line 1842, theme.scss */
.footer {
  /* Cream surface — footer reads as a closing editorial block rather
     than continuing the white commerce sheet above. Pairs with the
     manifest-poster which now also sits on cream. */
  background-color: var(--color-cream);
  color: var(--color-text);
  padding: 80px 0 24px;
  margin-top: 96px;
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-main); }

/* line 1854, theme.scss */
.footer__inner {
  /* uses .container max-width / side-pad */ }

/* line 1856, theme.scss */
.footer__body {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(220px, 1.4fr);
  gap: 32px;
  align-items: start; }

/* line 1868, theme.scss */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px; }

/* line 1870, theme.scss */
.footer__wordmark {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none; }

/* line 1878, theme.scss */
.footer__wordmark:hover {
  color: var(--color-text); }

/* line 1880, theme.scss */
.footer__tagline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 22ch; }

/* Group title — applies to <summary> and static <h2> */
/* line 1889, theme.scss */
.footer__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 20px;
  list-style: none; }

/* line 1899, theme.scss */
.footer__title::-webkit-details-marker {
  display: none; }

/* line 1900, theme.scss */
.footer__title::marker {
  display: none;
  content: ""; }

/* line 1902, theme.scss */
.footer__chev {
  display: none;
  /* desktop: hide accordion glyph entirely */ }

/* Disable native disclosure UI on desktop — show content as plain list */
/* line 1907, theme.scss */
.footer__details {
  display: block; }

/* line 1908, theme.scss */
.footer__details > .footer__list {
  display: block; }

/* line 1910, theme.scss */
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0; }

/* line 1915, theme.scss */
.footer__list li {
  margin: 0; }

/* line 1917, theme.scss */
.footer__link {
  display: inline-block;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast); }

/* line 1925, theme.scss */
.footer__link:hover {
  color: var(--color-text); }

/* line 1926, theme.scss */
.footer__link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px; }

/* line 1930, theme.scss */
.footer__link--ink {
  color: var(--color-text); }

/* line 1932, theme.scss */
.footer__contacts-group {
  display: flex;
  flex-direction: column;
  gap: 20px; }

/* line 1934, theme.scss */
.footer__contacts {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.6; }

/* line 1942, theme.scss */
.footer__contacts p {
  margin: 0; }

/* line 1943, theme.scss */
.footer__address {
  color: var(--color-text); }

/* line 1945, theme.scss */
.footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px; }

/* line 1952, theme.scss */
.footer__social a {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: text-decoration-color var(--transition-fast); }

/* line 1962, theme.scss */
.footer__social a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px; }

/* line 1967, theme.scss */
.footer__social a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px; }

/* Utility row — copyright + legal links */
/* line 1973, theme.scss */
.footer__utility {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--color-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap; }

/* line 1984, theme.scss */
.footer__copyright {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 0; }

/* line 1992, theme.scss */
.footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap; }

/* line 2000, theme.scss */
.footer__legal-link {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast); }

/* line 2007, theme.scss */
.footer__legal-link:hover {
  color: var(--color-text); }

/* line 2008, theme.scss */
.footer__legal-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px; }

/* ============================================
   FOOTER — mobile (≤ 768): stack + <details> accordions
   ============================================ */
@media (max-width: 768px) {
  /* line 2017, theme.scss */
  .footer {
    padding: 48px 0 24px;
    margin-top: 64px; }

  /* line 2022, theme.scss */
  .footer__body {
    display: block; }

  /* line 2026, theme.scss */
  .footer__brand {
    margin-bottom: 32px; }

  /* line 2030, theme.scss */
  .footer__group {
    display: block; }

  /* line 2034, theme.scss */
  .footer__group + .footer__group {
    margin-top: 0; }

  /* Re-enable accordion behaviour on mobile */
  /* line 2037, theme.scss */
  .footer__details {
    border-top: 1px solid var(--color-hairline); }

  /* line 2040, theme.scss */
  .footer__details:last-of-type {
    border-bottom: 1px solid var(--color-hairline); }

  /* line 2044, theme.scss */
  .footer__group .footer__details > .footer__title {
    position: relative;
    display: block;
    min-height: 44px;
    padding: 14px 28px 14px 0;
    margin: 0;
    cursor: pointer; }

  /* line 2052, theme.scss */
  .footer__group .footer__details > .footer__title::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-text);
    transition: transform var(--transition-base); }

  /* line 2064, theme.scss */
  .footer__group .footer__details[open] > .footer__title::after {
    transform: translateY(-50%) rotate(45deg); }

  /* line 2068, theme.scss */
  .footer__chev {
    display: none; }

  /* line 2070, theme.scss */
  .footer__details > .footer__list {
    padding: 4px 0 16px; }

  /* line 2073, theme.scss */
  .footer__details > .footer__list .footer__link {
    line-height: 2; }

  /* line 2077, theme.scss */
  .footer__contacts-group {
    margin-top: 32px;
    gap: 24px; }

  /* line 2081, theme.scss */
  .footer__contacts-group .footer__title--static {
    margin-bottom: 12px; }

  /* line 2085, theme.scss */
  .footer__utility {
    margin-top: 32px;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px; }

  /* line 2093, theme.scss */
  .footer__legal {
    gap: 16px; } }
/* ============================================
   MOBILE STICKY FILTER BAR (≤ 768) — hidden on desktop
   ============================================ */
/* line 2099, theme.scss */
.filter-bar {
  display: none; }

/* ============================================
   MOBILE FILTER DRAWER (≤ 768) — hidden on desktop
   ============================================ */
/* line 2106, theme.scss */
.filter-drawer-scrim {
  display: none; }

/* line 2110, theme.scss */
.filter-drawer {
  display: none; }

/* ============================================
   RESPONSIVE — tablet/mobile
   ============================================ */
@media (max-width: 1024px) {
  /* line 2118, theme.scss */
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px; }

  /* line 2122, theme.scss */
  .catalog-layout {
    --rail-width: 220px;
    --rail-gap: 32px; } }
/* ===== HEADER — drawer-trigger viewport (≤1279) =====
   7 nav items + the longer "TYKVA STORE" wordmark do not fit on a single
   row below ~1280px without colliding (we measured: nav natural width is
   ~1100px, the centered wordmark eats ~270px, so the left column needs
   ≥900px — only available on container ≥1280px). Below this width we swap
   inline nav for the hamburger drawer. Bar shrinks to the mobile 56px
   shell so tablets share the phone navigation pattern. */
@media (max-width: 1279px) {
  /* line 2136, theme.scss */
  .header__hamburger {
    display: grid; }

  /* line 2137, theme.scss */
  .navigation {
    display: none; }

  /* line 2138, theme.scss */
  .header__left {
    gap: 0; }

  /* Bar shrinks to mobile shell on tablets too — same 56px height,
     account icon hidden so it's not a duplicate of the drawer trigger. */
  /* line 2142, theme.scss */
  .header__container {
    min-height: var(--mhead-h);
    padding-top: 0;
    padding-bottom: 0; }

  /* line 2147, theme.scss */
  .mhead-icon--account {
    display: none; } }
@media (max-width: 768px) {
  /* ===== HEADER — Phase 9 mobile shell =====
     [☰ ☎]  TYKVA  [⌕ bag]      ← 5-icon strip, 56px tall.
     Wordmark is centered via the 1fr/auto/1fr grid; only the gutters
     tighten and the account icon drops out for a quieter bar. */
  /* line 2155, theme.scss */
  .header__container {
    min-height: var(--mhead-h);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 6px;
    padding-right: 6px;
    gap: 4px; }

  /* Wordmark — slightly smaller on mobile, tracking preserved.
     Two-word "TYKVA STORE" needs nowrap to avoid breaking the 56px
     sticky shell on narrow viewports. */
  /* line 2167, theme.scss */
  .header__logo {
    font-size: 13px;
    letter-spacing: 0.18em;
    justify-self: center;
    line-height: 1;
    white-space: nowrap; }

  /* Right cluster — search + bag only; account hidden for clean shell. */
  /* line 2176, theme.scss */
  .header__actions {
    gap: 0; }

  /* line 2179, theme.scss */
  .mhead-icon--account {
    display: none; }

  /* line 2180, theme.scss */
  .mhead-icon__count {
    top: 4px;
    right: 2px; }

  /* Collection page — drop the filter rail; replace with sticky bar */
  /* line 2183, theme.scss */
  .catalog-layout {
    grid-template-columns: 1fr;
    gap: 0; }

  /* line 2188, theme.scss */
  .filter-rail {
    display: none;
    /* mobile uses drawer instead */ }

  /* Compact brand-context hero (mobile variant) */
  /* line 2193, theme.scss */
  .brand-context-hero {
    margin: 0 0 22px; }

  /* line 2196, theme.scss */
  .brand-context-hero__microlabel {
    font-size: 11px; }

  /* line 2199, theme.scss */
  .brand-context-hero__microlabel::before {
    width: 14px;
    height: 1.5px; }

  /* line 2203, theme.scss */
  .brand-context-hero__title {
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 8px; }

  /* line 2208, theme.scss */
  .brand-context-hero__tagline {
    font-size: 13px;
    margin: 0 0 4px; }

  /* line 2212, theme.scss */
  .brand-context-hero__meta {
    font-size: 12px;
    color: var(--color-text-tertiary); }

  /* Active chip strip — horizontal scroll with right-edge fade */
  /* line 2218, theme.scss */
  .active-filter-chips,
  .active-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    margin: 0 calc(-1 * var(--spacing-sm)) 12px;
    padding: 0 var(--spacing-sm) 4px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
    scrollbar-width: none; }

  /* line 2229, theme.scss */
  .active-filter-chips::-webkit-scrollbar,
  .active-chips::-webkit-scrollbar {
    display: none; }

  /* line 2232, theme.scss */
  .chip {
    padding: 12px 14px 12px 16px;
    min-height: 44px;
    font-size: 12px;
    flex-shrink: 0; }

  /* 2-col grid on mobile — 24px row × 12px col gap */
  /* line 2240, theme.scss */
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px; }

  /* Toolbar — count left / sort right, same row on mobile */
  /* line 2246, theme.scss */
  .toolbar,
  .collection-toolbar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    margin-bottom: 18px; }

  /* line 2257, theme.scss */
  .product-page {
    grid-template-columns: 1fr;
    gap: var(--spacing-md); }

  /* line 2262, theme.scss */
  h1, .h1 {
    font-size: 30px; }

  /* line 2263, theme.scss */
  h2, .h2 {
    font-size: 22px; }

  /* line 2265, theme.scss */
  .collection-page {
    padding: 16px var(--spacing-sm) 96px;
    /* room for sticky bar */ }

  /* Empty state — tighter padding on mobile */
  /* line 2270, theme.scss */
  .empty-state {
    padding: 56px 16px 64px; }

  /* line 2273, theme.scss */
  .empty-state__icon {
    width: 72px;
    height: 72px;
    margin: 0 0 22px; }

  /* line 2278, theme.scss */
  .empty-state__title {
    font-size: 20px; }

  /* line 2281, theme.scss */
  .empty-state__sub {
    font-size: 13px;
    margin-bottom: 24px; }

  /* line 2285, theme.scss */
  .empty-state__actions {
    flex-direction: column;
    gap: 14px; }

  /* === Sticky bottom bar on mobile === */
  /* line 2291, theme.scss */
  .filter-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-hairline);
    display: flex;
    align-items: stretch;
    z-index: 50; }

  /* line 2304, theme.scss */
  .filter-bar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
    text-decoration: none; }

  /* line 2323, theme.scss */
  .filter-bar__btn + .filter-bar__btn {
    border-left: 1px solid var(--color-hairline); }

  /* line 2327, theme.scss */
  .filter-bar__icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round; }

  /* line 2336, theme.scss */
  .filter-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: var(--color-text);
    color: var(--color-bg);
    font-size: 10px;
    letter-spacing: 0;
    font-weight: var(--font-weight-medium); }

  /* line 2351, theme.scss */
  .filter-bar__chevron {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none; }

  /* === Filter drawer (CSS-only via :target — Phase 3 visual) === */
  /* line 2360, theme.scss */
  .filter-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base); }

  /* line 2371, theme.scss */
  .filter-drawer {
    display: grid;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    background-color: var(--color-bg);
    border-top: none;
    border-radius: 16px 16px 0 0;
    z-index: 70;
    transform: translateY(100%);
    transition: transform var(--transition-base);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
    grid-template-rows: 22px 56px 1fr 68px;
    overflow: hidden; }

  /* line 2389, theme.scss */
  .filter-drawer:target,
  .filter-drawer.is-open {
    transform: translateY(0); }

  /* line 2393, theme.scss */
  .filter-drawer:target ~ .filter-drawer-scrim,
  .filter-drawer.is-open ~ .filter-drawer-scrim,
  .filter-drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto; }

  /* line 2400, theme.scss */
  .filter-drawer__handle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px; }

  /* line 2407, theme.scss */
  .filter-drawer__handle {
    width: 36px;
    height: 4px;
    background-color: var(--color-hairline-strong);
    border-radius: 999px; }

  /* line 2414, theme.scss */
  .filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-hairline); }

  /* line 2422, theme.scss */
  .filter-drawer__title-group {
    display: inline-flex;
    align-items: baseline;
    gap: 10px; }

  /* line 2428, theme.scss */
  .filter-drawer__title {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text); }

  /* line 2436, theme.scss */
  .filter-drawer__count-chip {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-hairline-strong);
    border-radius: 999px;
    padding: 3px 8px;
    line-height: 1;
    font-variant-numeric: tabular-nums; }

  /* line 2449, theme.scss */
  .filter-drawer__count-chip strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold); }

  /* line 2454, theme.scss */
  .filter-drawer__close {
    background: none;
    border: none;
    color: var(--color-text);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    text-decoration: none; }

  /* line 2468, theme.scss */
  .filter-drawer__close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round; }

  /* line 2477, theme.scss */
  .filter-drawer__body {
    overflow-y: auto;
    padding: 4px 16px 8px; }

  /* Drawer footer — outlined "Сбросить" + filled black "Применить" */
  /* line 2483, theme.scss */
  .filter-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-hairline);
    background-color: var(--color-bg); }

  /* line 2492, theme.scss */
  .filter-drawer__btn {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    cursor: pointer;
    border: 1px solid var(--color-text);
    border-radius: 4px;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast); }

  /* line 2511, theme.scss */
  .filter-drawer__btn:hover {
    background-color: #fafafa; }

  /* line 2515, theme.scss */
  .filter-drawer__btn--primary {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text); }

  /* line 2521, theme.scss */
  .filter-drawer__btn--primary:hover {
    background-color: var(--color-bg);
    color: var(--color-text); } }
/* Wordmark squeeze for very narrow phones (≤480px). "TYKVA STORE"
   stays single-line; tracking and size step down so it never collides
   with the icon clusters on the 1fr/auto/1fr grid. */
@media (max-width: 480px) {
  /* line 2531, theme.scss */
  .header__logo {
    font-size: 12px;
    letter-spacing: 0.14em; } }
/* ============================================
   PHASE 4 ITER-1 — FILTER BEHAVIOR STATES
   Live filter wiring, sort popover, pagination,
   drawer body-scroll-lock. Built ON TOP of Phase 3
   light editorial palette — must not regress it.
   ============================================ */
/* ---- Filter-option wrapper <li> — keeps the option-grid on the <a>. ---- */
/* line 2545, theme.scss */
.filter-rail__option-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative; }

/* line 2551, theme.scss */
.filter-rail__option-wrap > a {
  text-decoration: none;
  color: inherit; }

/* ---- In-stock toggle is wrapped in a link to flip the URL param. ---- */
/* line 2557, theme.scss */
.filter-toggle-link {
  display: block;
  text-decoration: none;
  color: inherit; }

/* line 2562, theme.scss */
.filter-toggle-link:hover {
  color: inherit; }

/* ---- Active-row indicator (3px red left bar) ---- */
/* line 2565, theme.scss */
.filter-option {
  /* Phase 3 default; gain 12px gutter to host the red bar when active. */
  padding-left: 12px; }

/* line 2569, theme.scss */
.filter-option--active {
  position: relative; }

/* line 2572, theme.scss */
.filter-option--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background-color: var(--color-accent-red); }

/* line 2581, theme.scss */
.filter-option--active .filter-option__label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text); }

/* Price slider — 3px red left bar wraps slider when ?price= is set. */
/* line 2587, theme.scss */
.price-slider--active {
  position: relative;
  padding-left: 12px; }

/* line 2591, theme.scss */
.price-slider--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-accent-red); }

/* In-stock toggle — 3px red bar when ?available=1. */
/* line 2602, theme.scss */
.filter-toggle {
  padding-left: 12px; }

/* line 2605, theme.scss */
.filter-toggle--on {
  position: relative; }

/* line 2608, theme.scss */
.filter-toggle--on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background-color: var(--color-accent-red); }

/* ---- Active-filter chip row — visible variant ---- */
/* Phase 3 default has no chips; Phase 4 reveals the row when chips exist. */
/* line 2620, theme.scss */
.active-filter-chips:not([hidden]),
.active-chips:not([hidden]) {
  display: flex; }

/* Chip is a link — keep underline-free. */
/* line 2626, theme.scss */
.chip {
  text-decoration: none; }

/* line 2627, theme.scss */
.chip:hover {
  color: var(--color-text); }

/* ---- Sort dropdown popover (replaces sort link row when JS opens) ---- */
/* line 2630, theme.scss */
.toolbar__sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center; }

/* line 2635, theme.scss */
.collection-toolbar__sort-trigger {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-hairline-strong);
  transition: border-color var(--transition-fast); }

/* line 2651, theme.scss */
.collection-toolbar__sort-trigger:hover {
  border-bottom-color: var(--color-text); }

/* line 2652, theme.scss */
.collection-toolbar__sort-trigger[aria-expanded="true"] {
  border-bottom-color: var(--color-text); }

/* line 2655, theme.scss */
.collection-toolbar__sort-trigger .chevron {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  transition: transform var(--transition-fast); }

/* line 2660, theme.scss */
.collection-toolbar__sort-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg); }

/* line 2664, theme.scss */
.sort-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-hairline-strong);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 4px 6px -2px rgba(17, 17, 17, 0.04), 0 12px 24px -8px rgba(17, 17, 17, 0.1);
  z-index: 30;
  list-style: none;
  margin: 0;
  display: none; }

/* line 2681, theme.scss */
.sort-dropdown[aria-hidden="false"] {
  display: block; }

/* line 2683, theme.scss */
.sort-dropdown__item {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  transition: background-color var(--transition-fast);
  text-decoration: none; }

/* line 2700, theme.scss */
.sort-dropdown__item:hover {
  background-color: #f5f5f5; }

/* line 2701, theme.scss */
.sort-dropdown__item--active {
  font-weight: var(--font-weight-semibold); }

/* line 2702, theme.scss */
.sort-dropdown__check {
  width: 14px;
  height: 14px;
  color: var(--color-text);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center; }

/* line 2710, theme.scss */
.sort-dropdown__item--active .sort-dropdown__check {
  opacity: 1; }

/* line 2711, theme.scss */
.sort-dropdown__check svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

/* line 2719, theme.scss */
.sort-dropdown__arrow {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums; }

/* The static sort link row (Phase 3) is hidden once JS upgrades the trigger. */
/* line 2727, theme.scss */
.collection-toolbar__sort-links {
  display: inline-flex;
  gap: 16px; }

/* line 2728, theme.scss */
.js-sort-enhanced .collection-toolbar__sort-links {
  display: none; }

/* line 2729, theme.scss */
.js-sort-enhanced .toolbar__sort-wrap {
  display: inline-flex; }

/* When JS hasn't loaded yet, hide the trigger so users still see the links. */
/* line 2731, theme.scss */
.toolbar__sort-wrap {
  display: none; }

/* ---- Pagination row (Phase 4) ---- */
/* line 2734, theme.scss */
.pagination-row {
  margin-top: 64px;
  padding: 32px 0 24px;
  border-top: 1px solid var(--color-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  list-style: none; }

/* line 2746, theme.scss */
.pagination__edge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
  background-color: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  border-radius: 0;
  text-decoration: none;
  line-height: 1; }

/* line 2765, theme.scss */
.pagination__edge:hover {
  border-color: var(--color-text); }

/* line 2766, theme.scss */
.pagination__edge--ghost {
  border-color: transparent;
  color: var(--color-text-tertiary);
  cursor: not-allowed; }

/* line 2771, theme.scss */
.pagination__edge--ghost:hover {
  border-color: transparent; }

/* line 2773, theme.scss */
.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px; }

/* line 2780, theme.scss */
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  border: 1px solid var(--color-hairline);
  background-color: var(--color-bg);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  line-height: 1; }

/* line 2796, theme.scss */
.pagination__page:hover {
  border-color: var(--color-text); }

/* line 2797, theme.scss */
.pagination__page--active {
  background-color: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
  font-weight: var(--font-weight-semibold); }

/* line 2803, theme.scss */
.pagination__page--active:hover {
  border-color: var(--color-text); }

/* line 2805, theme.scss */
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 36px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  line-height: 1;
  user-select: none; }

/* line 2816, theme.scss */
.pagination__caption {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; }

/* line 2824, theme.scss */
.pagination__caption strong {
  color: var(--color-text);
  font-weight: var(--font-weight-medium); }

/* ---- Drawer body-scroll-lock & scroll-cap (Phase 4) ---- */
/* line 2830, theme.scss */
body.drawer-open {
  overflow: hidden; }

@media (max-width: 768px) {
  /* line 2834, theme.scss */
  body.drawer-open {
    /* iOS body-fixed lock; JS sets top: -<scrollY>px inline. */
    position: fixed;
    width: 100%; }

  /* Open state via JS class fallback (in addition to :target). */
  /* line 2840, theme.scss */
  .filter-drawer.is-open {
    transform: translateY(0); }

  /* line 2841, theme.scss */
  .filter-drawer-scrim.is-open {
    opacity: 1;
    pointer-events: auto; }

  /* Drawer body scroll-cap — fades in once user scrolls past 8px. */
  /* line 2847, theme.scss */
  .filter-drawer__body {
    position: relative;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; }

  /* line 2852, theme.scss */
  .filter-drawer__scroll-cap {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
    border-bottom: 1px solid var(--color-hairline);
    margin: 0 -16px 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 2; }

  /* line 2866, theme.scss */
  .filter-drawer__body.is-scrolled .filter-drawer__scroll-cap {
    opacity: 1; } }
/* ============================================
   PHASE 5 ITER-1 — HOMEPAGE
   Ported from mockups/phase-5-iter-1-homepage-{desktop,mobile}.html.
   Adds: section-strip, brand-tile, editorial-banner.
   No JS — pure CSS responsive layout.
   ============================================ */
/* On the homepage we want the hero to butt against the header — kill the
   default top padding that .main-content adds. Bottom padding stays so the
   editorial-banner has breathing room before the footer. */
/* line 2881, theme.scss */
body.template-index .main-content {
  padding-top: 0;
  padding-bottom: 0; }

/* ===== HERO =====
   All homepage-hero CSS removed 2026-05-17 (hero carousel and lookbook variant
   no longer used; brand-rail CSS lives in the BEGIN/END block at the bottom). */
/* ===== SECTION STRIP (Новинки / Бренды / Хиты) ===== */
/* line 2891, theme.scss */
.section-strip {
  max-width: var(--container-max);
  margin: 0 auto var(--section-gap-desktop);
  padding: 96px var(--container-pad) 0; }

/* line 2897, theme.scss */
.section-strip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0 18px;
  margin: 0 0 32px;
  border-bottom: 1px solid var(--color-hairline); }

/* line 2906, theme.scss */
.section-strip__heading {
  font-size: var(--section-heading-fz);
  font-weight: 600;
  letter-spacing: var(--section-heading-tracking);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
  line-height: 1; }

/* line 2916, theme.scss */
.section-strip__link {
  font-size: var(--section-link-fz);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--section-link-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px; }

/* line 2928, theme.scss */
.section-strip__link::after {
  content: "→";
  font-family: var(--font-main); }

/* line 2933, theme.scss */
.section-strip__link:hover {
  color: var(--color-text); }

/* line 2937, theme.scss */
.section-strip__empty {
  padding: 64px 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
  border: 1px dashed var(--color-hairline);
  background-color: #fafafa; }

/* 4-col strip variant — overrides default 3-col grid for homepage rows. */
/* line 2947, theme.scss */
.products-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ===== BRAND GRID =====
   Legacy `.brand-grid` / `.brand-tile*` rules removed 2026-05-01.
   Replaced by the `.brand-rail` carousel block in the BEGIN/END section
   at the bottom of this file. */
/* ===== EDITORIAL BANNER ===== */
/* line 2957, theme.scss */
.editorial-banner {
  margin-top: 96px;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline); }

/* line 2963, theme.scss */
.editorial-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--container-pad); }

/* line 2969, theme.scss */
.editorial-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-secondary);
  margin: 0 0 28px; }

/* line 2981, theme.scss */
.editorial-banner__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background-color: var(--color-text); }

/* line 2989, theme.scss */
.editorial-banner__text {
  font-family: var(--font-main);
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
  max-width: 1080px; }

/* line 3000, theme.scss */
.editorial-banner__text em {
  font-style: normal;
  color: var(--color-text-secondary); }

/* ===== RESPONSIVE — Phase 5 homepage ===== */
@media (max-width: 1024px) {
  /* line 3007, theme.scss */
  .products-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* line 3010, theme.scss */
  .editorial-banner__inner {
    padding: 96px var(--container-pad); }

  /* line 3013, theme.scss */
  .editorial-banner__text {
    font-size: 28px; }

  /* line 3016, theme.scss */
  .section-strip {
    padding-top: 72px; }

  /* line 3019, theme.scss */
  .editorial-banner {
    margin-top: 72px; } }
@media (max-width: 768px) {
  /* Container padding tightens on mobile to match the catalog page. */
  /* line 3026, theme.scss */
  .section-strip {
    padding: 56px var(--spacing-sm) 0;
    margin-bottom: var(--section-gap-mobile); }

  /* line 3030, theme.scss */
  .section-strip__head {
    padding-bottom: 12px;
    margin-bottom: 16px; }

  /* line 3034, theme.scss */
  .section-strip__heading {
    font-size: 12px; }

  /* line 3037, theme.scss */
  .section-strip__link {
    font-size: 10px; }

  /* Mobile product strip: 2-col grid (the .products-grid mobile rule
     above already overrides --4 to repeat(2, ...) because the more
     specific .products-grid--4 rule lives at desktop scope). Force it
     here too so a future selector rewrite doesn't regress. */
  /* line 3045, theme.scss */
  .products-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px; }

  /* Editorial banner — tighter padding, smaller hero type */
  /* line 3051, theme.scss */
  .editorial-banner {
    margin-top: 56px; }

  /* line 3054, theme.scss */
  .editorial-banner__inner {
    padding: 64px var(--spacing-sm); }

  /* line 3057, theme.scss */
  .editorial-banner__eyebrow {
    margin-bottom: 18px; }

  /* line 3060, theme.scss */
  .editorial-banner__text {
    font-size: 22px;
    line-height: 1.35; } }
/* ============================================
   UTILITY
   ============================================ */
/* line 3069, theme.scss */
.text-center {
  text-align: center; }

/* line 3070, theme.scss */
.text-left {
  text-align: left; }

/* line 3071, theme.scss */
.text-right {
  text-align: right; }

/* line 3073, theme.scss */
.mb-xs {
  margin-bottom: var(--spacing-xs); }

/* line 3074, theme.scss */
.mb-sm {
  margin-bottom: var(--spacing-sm); }

/* line 3075, theme.scss */
.mb-md {
  margin-bottom: var(--spacing-md); }

/* line 3076, theme.scss */
.mb-lg {
  margin-bottom: var(--spacing-lg); }

/* line 3077, theme.scss */
.mb-xl {
  margin-bottom: var(--spacing-xl); }

/* line 3079, theme.scss */
.mt-xs {
  margin-top: var(--spacing-xs); }

/* line 3080, theme.scss */
.mt-sm {
  margin-top: var(--spacing-sm); }

/* line 3081, theme.scss */
.mt-md {
  margin-top: var(--spacing-md); }

/* line 3082, theme.scss */
.mt-lg {
  margin-top: var(--spacing-lg); }

/* line 3083, theme.scss */
.mt-xl {
  margin-top: var(--spacing-xl); }

/* ============================================
   PHASE 8 — PDP P2
   ============================================ */
/* line 3088, theme.scss */
.pdp-page {
  padding-top: 16px;
  padding-bottom: 64px; }

/* Breadcrumbs */
/* line 3094, theme.scss */
.pdp-breadcrumb {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin: 0 0 24px;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px; }

/* line 3104, theme.scss */
.pdp-breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none; }

/* line 3105, theme.scss */
.pdp-breadcrumb a:hover {
  color: var(--color-text); }

/* line 3106, theme.scss */
.pdp-breadcrumb__sep {
  color: var(--color-text-tertiary);
  margin: 0 4px; }

/* line 3107, theme.scss */
.pdp-breadcrumb__current {
  color: var(--color-text);
  font-weight: 500; }

/* Three-column top row */
/* line 3110, theme.scss */
.pdp-top {
  display: grid;
  grid-template-columns: var(--pdp-thumbs-w-desktop) 1fr var(--pdp-info-w-desktop);
  gap: 32px;
  margin: 0 0 var(--pdp-section-gap-desktop);
  align-items: start; }

/* line 3118, theme.scss */
.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: var(--pdp-sticky-top);
  align-self: start; }

/* line 3126, theme.scss */
.pdp-thumbs__btn {
  width: 80px;
  aspect-ratio: 4/5;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden; }

/* line 3135, theme.scss */
.pdp-thumbs__btn.is-active {
  border-color: var(--color-text); }

/* line 3136, theme.scss */
.pdp-thumbs__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

/* line 3138, theme.scss */
.pdp-main {
  position: relative;
  background: var(--color-bone, #f7f5f0); }

/* line 3142, theme.scss */
.pdp-main__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  cursor: zoom-in;
  display: block; }

/* line 3150, theme.scss */
.pdp-main__mobile-strip {
  display: none; }

/* line 3151, theme.scss */
.pdp-main__dots {
  display: none; }

/* line 3152, theme.scss */
.pdp-main__placeholder {
  aspect-ratio: 4/5;
  background: var(--color-placeholder); }

/* line 3157, theme.scss */
.pdp-info {
  position: sticky;
  top: var(--pdp-sticky-top);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 14px; }

/* line 3165, theme.scss */
.pdp-info__brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transition-fast), border-color var(--transition-fast); }

/* line 3177, theme.scss */
.pdp-info__brand:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-text); }

/* line 3178, theme.scss */
.pdp-info__title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text); }

/* line 3186, theme.scss */
.pdp-info__price {
  display: flex;
  align-items: baseline;
  gap: 10px; }

/* line 3187, theme.scss */
.pdp-info__price-regular,
.pdp-info__price-current {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text); }

/* line 3189, theme.scss */
.pdp-info__price-current {
  color: var(--color-accent-red); }

/* line 3190, theme.scss */
.pdp-info__price-old {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: line-through; }

/* Cart form: button row */
/* line 3193, theme.scss */
.pdp-info__cart-form {
  display: flex;
  gap: 8px;
  margin-top: 8px; }

/* line 3194, theme.scss */
.pdp-info__add {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--color-text);
  color: #fff;
  border: 1px solid var(--color-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 0;
  cursor: pointer; }

/* line 3208, theme.scss */
.pdp-info__add:hover {
  background: var(--color-accent-red);
  border-color: var(--color-accent-red); }

/* Shipping callout */
/* line 3211, theme.scss */
.pdp-info__shipping {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-bone, #f7f5f0);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  border-top: 1px solid var(--color-hairline); }

/* line 3222, theme.scss */
.pdp-info__shipping-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0; }

/* Tablet (768-1279): drop the sticky info, keep thumbs */
@media (max-width: 1279px) and (min-width: 768px) {
  /* line 3226, theme.scss */
  .pdp-top {
    grid-template-columns: var(--pdp-thumbs-w-tablet) 1fr;
    gap: 24px; }

  /* line 3227, theme.scss */
  .pdp-info {
    position: static;
    grid-column: 1 / -1;
    margin-top: 24px; }

  /* line 3228, theme.scss */
  .pdp-thumbs__btn {
    width: var(--pdp-thumbs-w-tablet); } }
/* Mobile (≤767): single column with carousel */
@media (max-width: 767px) {
  /* line 3233, theme.scss */
  .pdp-top {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: var(--pdp-section-gap-mobile); }

  /* line 3234, theme.scss */
  .pdp-thumbs {
    display: none; }

  /* line 3235, theme.scss */
  .pdp-info {
    position: static; }

  /* line 3236, theme.scss */
  .pdp-info__title {
    font-size: 22px; }

  /* line 3237, theme.scss */
  .pdp-main__image {
    display: none; }

  /* line 3238, theme.scss */
  .pdp-main__mobile-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0; }

  /* line 3245, theme.scss */
  .pdp-main__mobile-strip img {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    scroll-snap-align: start; }

  /* line 3252, theme.scss */
  .pdp-main__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 0; }

  /* line 3258, theme.scss */
  .pdp-main__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-tertiary);
    border: none;
    padding: 0;
    cursor: pointer; }

  /* line 3264, theme.scss */
  .pdp-main__dot.is-active {
    background: var(--color-text); } }
/* line 3267, theme.scss */
.pdp-info__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 8px; }

/* line 3276, theme.scss */
.pdp-info__swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }

/* line 3281, theme.scss */
.pdp-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-hairline);
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: outline-offset var(--transition-fast); }

/* line 3290, theme.scss */
.pdp-swatch.is-active {
  outline: 1.5px solid var(--color-text);
  outline-offset: 2px; }

/* line 3294, theme.scss */
.pdp-swatch:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px; }

@media (max-width: 767px) {
  /* line 3299, theme.scss */
  .pdp-swatch {
    width: 32px;
    height: 32px; } }
/* line 3301, theme.scss */
.pdp-info__sizes-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px; }

/* line 3307, theme.scss */
.pdp-info__size-guide-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  border-bottom: 1px solid currentColor; }

/* line 3319, theme.scss */
.pdp-info__size-guide-link:hover {
  color: var(--color-text); }

/* line 3320, theme.scss */
.pdp-info__size-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px; }

@media (max-width: 767px) {
  /* line 3326, theme.scss */
  .pdp-info__size-grid {
    grid-template-columns: repeat(4, 1fr); } }
/* line 3328, theme.scss */
.pdp-size {
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), background-color var(--transition-fast); }

/* line 3340, theme.scss */
.pdp-size:hover:not(:disabled):not(.is-active) {
  border-color: var(--color-text); }

/* line 3341, theme.scss */
.pdp-size.is-active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text); }

/* line 3346, theme.scss */
.pdp-size.is-soldout {
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  cursor: not-allowed; }

/* PDP modal (sizing + zoom share scrim pattern) */
/* line 3353, theme.scss */
.pdp-modal[hidden] {
  display: none; }

/* line 3354, theme.scss */
.pdp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px; }

/* line 3359, theme.scss */
.pdp-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.6); }

/* line 3363, theme.scss */
.pdp-modal__panel {
  position: relative;
  background: var(--color-bg);
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--color-hairline);
  max-height: 80vh;
  overflow: auto; }

/* line 3372, theme.scss */
.pdp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-hairline); }

/* line 3377, theme.scss */
.pdp-modal__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0; }

/* line 3384, theme.scss */
.pdp-modal__close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text); }

/* line 3389, theme.scss */
.pdp-modal__body {
  padding: 18px 22px; }

/* line 3391, theme.scss */
.sizing-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px; }

/* line 3392, theme.scss */
.sizing-modal__table th, .sizing-modal__table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--color-hairline); }

/* line 3395, theme.scss */
.sizing-modal__table thead th {
  font-weight: 500;
  color: var(--color-text-secondary); }

/* line 3396, theme.scss */
.sizing-modal__table tbody th {
  text-align: left;
  font-weight: 500; }

@media (max-width: 767px) {
  /* line 3399, theme.scss */
  .pdp-modal {
    padding: 0;
    align-items: flex-end; }

  /* line 3400, theme.scss */
  .pdp-modal__panel {
    max-width: 100%;
    max-height: 78vh;
    border: none;
    border-top: 1px solid var(--color-hairline); } }
/* ============================================================
   PDP wishlist heart (Task 10 / B.5)
   ============================================================ */
/* line 3411, theme.scss */
.pdp-wishlist {
  width: 48px;
  height: 48px;
  padding: 0;
  flex-shrink: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-hairline);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: background-color var(--transition-fast), color var(--transition-fast); }

/* line 3425, theme.scss */
.pdp-wishlist:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-text); }

/* line 3430, theme.scss */
.pdp-wishlist svg {
  width: 22px;
  height: 22px; }

/* line 3431, theme.scss */
.pdp-wishlist.is-active {
  background: var(--color-text);
  color: #fff; }

/* line 3435, theme.scss */
.pdp-wishlist.is-active svg path {
  fill: #fff;
  stroke: #fff; }

@media (max-width: 767px) {
  /* line 3440, theme.scss */
  .pdp-wishlist {
    width: 44px;
    height: 44px; } }
/* ============================================================
   PDP zoom overlay (Phase 8 / Task 11 / B.1)
   ============================================================ */
/* line 3446, theme.scss */
.pdp-zoom[hidden] {
  display: none; }

/* line 3447, theme.scss */
.pdp-zoom {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(11, 11, 11, 0.92);
  display: flex;
  align-items: center;
  justify-content: center; }

/* line 3452, theme.scss */
.pdp-zoom__image {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  cursor: zoom-out; }

/* line 3457, theme.scss */
.pdp-zoom__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer; }

/* PDP accordion */
/* line 3465, theme.scss */
.pdp-accordion {
  margin: 0 0 var(--pdp-section-gap-desktop); }

/* line 3468, theme.scss */
.pdp-accordion__section {
  border-top: 1px solid var(--color-hairline); }

/* line 3471, theme.scss */
.pdp-accordion__section:last-of-type {
  border-bottom: 1px solid var(--color-hairline); }

/* line 3472, theme.scss */
.pdp-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  list-style: none;
  min-height: 44px; }

/* line 3486, theme.scss */
.pdp-accordion__summary::-webkit-details-marker {
  display: none; }

/* line 3487, theme.scss */
.pdp-accordion__icon {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  width: 16px;
  text-align: center;
  transition: transform 0.18s ease; }

/* line 3492, theme.scss */
.pdp-accordion__section[open] .pdp-accordion__icon {
  transform: rotate(45deg); }

/* line 3493, theme.scss */
.pdp-accordion__body {
  padding: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text); }

/* line 3499, theme.scss */
.pdp-accordion__open-modal {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  cursor: pointer;
  padding: 0 0 2px;
  margin-top: 8px; }

/* line 3508, theme.scss */
.pdp-care-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 14px; }

/* line 3512, theme.scss */
.care-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-text);
  color: var(--color-text); }

/* line 3518, theme.scss */
.care-icon svg {
  width: 26px;
  height: 26px; }

@media (max-width: 767px) {
  /* line 3521, theme.scss */
  .pdp-accordion {
    margin-bottom: var(--pdp-section-gap-mobile); }

  /* line 3522, theme.scss */
  .pdp-accordion__body {
    font-size: 13px; } }
/* line 3525, theme.scss */
.pdp-also-like {
  margin: 0 0 var(--pdp-section-gap-desktop); }

/* line 3528, theme.scss */
.pdp-also-like .section-strip__heading {
  margin-bottom: 18px; }

@media (max-width: 767px) {
  /* line 3532, theme.scss */
  .pdp-also-like {
    margin-bottom: var(--pdp-section-gap-mobile); }

  /* line 3533, theme.scss */
  .pdp-also-like .products-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* line 3542, theme.scss */
.pdp-recent {
  margin: 0 0 var(--pdp-section-gap-desktop); }

/* line 3545, theme.scss */
.pdp-recent[hidden] {
  display: none; }

/* line 3546, theme.scss */
.pdp-recent .section-strip__heading {
  margin-bottom: 14px; }

/* line 3547, theme.scss */
.pdp-recent__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px; }

/* line 3555, theme.scss */
.pdp-recent__row::-webkit-scrollbar {
  display: none; }

/* line 3556, theme.scss */
.pdp-recent__item {
  flex-shrink: 0;
  width: 96px;
  text-decoration: none;
  color: var(--color-text); }

/* line 3562, theme.scss */
.pdp-recent__thumb {
  width: 96px;
  height: 96px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-placeholder); }

/* line 3567, theme.scss */
.pdp-recent__brand {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary); }

@media (max-width: 767px) {
  /* line 3577, theme.scss */
  .pdp-recent {
    margin-bottom: var(--pdp-section-gap-mobile); }

  /* line 3578, theme.scss */
  .pdp-recent__item, .pdp-recent__thumb {
    width: 80px;
    height: 80px; } }
/* === BEGIN: brand-rail (2026-05-01) === */
/* tokens */
/* line 3583, theme.scss */
.brand-rail {
  --hr-bg: #faf8f4;
  --hr-fg: #1a1a1a;
  --hr-fg-dim: #6b6b6b;
  --hr-accent: #d92121;
  --hr-card-bg: #ffffff;
  --hr-border: #e6e2d9;
  --hr-radius: 4px;
  --hr-pad: clamp(16px, 3vw, 32px); }

/* visually-hidden helper (used for ARIA-only labels) */
/* line 3595, theme.scss */
.brand-rail .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/* ----- BRAND RAIL ----- */
/* line 3609, theme.scss */
.brand-rail {
  background: var(--hr-bg);
  padding: clamp(40px, 6vh, 88px) 0; }

/* line 3614, theme.scss */
.brand-rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--hr-pad);
  margin-bottom: clamp(16px, 3vh, 32px); }

/* line 3622, theme.scss */
.brand-rail__heading {
  font-family: "Helvetica Neue", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--hr-fg); }

/* line 3632, theme.scss */
.brand-rail__controls {
  display: flex;
  align-items: center;
  gap: 12px; }

/* line 3638, theme.scss */
.brand-rail__counter {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--hr-fg-dim);
  font-feature-settings: "tnum"; }

/* line 3646, theme.scss */
.brand-rail__arrow {
  background: transparent;
  border: 1px solid var(--hr-border);
  color: var(--hr-fg);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease; }

/* line 3660, theme.scss */
.brand-rail__arrow:hover {
  background: var(--hr-fg);
  color: #fff;
  border-color: var(--hr-fg); }

/* line 3661, theme.scss */
.brand-rail__arrow:focus-visible {
  outline: 2px solid var(--hr-fg);
  outline-offset: 2px; }

@media (max-width: 640px) {
  /* line 3662, theme.scss */
  .brand-rail__arrow {
    display: none; } }
/* line 3664, theme.scss */
.brand-rail__all {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hr-fg);
  text-decoration: none;
  border-bottom: 1px solid currentColor; }

/* line 3673, theme.scss */
.brand-rail__all:hover {
  color: var(--hr-accent); }

/* line 3675, theme.scss */
.brand-rail__viewport {
  display: grid;
  grid-auto-flow: column;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px var(--hr-pad);
  scroll-padding-left: var(--hr-pad); }

/* line 3686, theme.scss */
.brand-rail__viewport::-webkit-scrollbar {
  display: none; }

@media (max-width: 640px) {
  /* line 3689, theme.scss */
  .brand-rail__viewport {
    grid-auto-columns: 82vw;
    gap: 12px; } }
@media (min-width: 641px) and (max-width: 1024px) {
  /* line 3692, theme.scss */
  .brand-rail__viewport {
    grid-auto-columns: 40vw;
    gap: 16px; } }
@media (min-width: 1025px) {
  /* line 3695, theme.scss */
  .brand-rail__viewport {
    grid-auto-columns: min(520px, 32vw);
    gap: 24px; } }
/* line 3698, theme.scss */
.brand-rail__card {
  position: relative;
  display: block;
  scroll-snap-align: start;
  background: var(--hr-card-bg);
  border-radius: var(--hr-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--hr-fg);
  aspect-ratio: 4 / 5;
  transition: transform 0.2s ease; }

/* line 3710, theme.scss */
.brand-rail__card:hover {
  transform: translateY(-2px); }

/* line 3711, theme.scss */
.brand-rail__card:focus-visible {
  outline: 2px solid var(--hr-fg);
  outline-offset: 2px; }

/* line 3712, theme.scss */
.brand-rail__card--coming-soon {
  cursor: default; }

/* line 3713, theme.scss */
.brand-rail__card--coming-soon:hover {
  transform: none; }

/* line 3715, theme.scss */
.brand-rail__index {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  font-feature-settings: "tnum"; }

/* line 3728, theme.scss */
.brand-rail__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: var(--hr-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px; }

/* line 3743, theme.scss */
.brand-rail__media {
  position: absolute;
  inset: 0;
  z-index: 1; }

/* line 3748, theme.scss */
.brand-rail__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* `is-active` is the static fallback when prefers-reduced-motion is on */ }

/* line 3758, theme.scss */
.brand-rail__frame.is-active {
  opacity: 1; }

@keyframes brand-rail-slideshow-3 {
  0%, 30% {
    opacity: 1; }
  33%, 100% {
    opacity: 0; } }
@keyframes brand-rail-slideshow-4 {
  0%, 22% {
    opacity: 1; }
  25%, 100% {
    opacity: 0; } }
@keyframes brand-rail-slideshow-5 {
  0%, 17% {
    opacity: 1; }
  20%, 100% {
    opacity: 0; } }
@keyframes brand-rail-slideshow-6 {
  0%, 14% {
    opacity: 1; }
  17%, 100% {
    opacity: 0; } }
@keyframes brand-rail-slideshow-7 {
  0%, 11% {
    opacity: 1; }
  14%, 100% {
    opacity: 0; } }
/* Hover-only slideshow: paused by default, runs only when the card is hovered.
   On touch devices (no :hover) the card stays static — first frame visible. */
/* line 3783, theme.scss */
.brand-rail__media[data-frames="3"] .brand-rail__frame {
  animation: brand-rail-slideshow-3 9s linear infinite;
  animation-delay: calc(var(--frame-index, 0) * 3s);
  animation-play-state: paused; }

/* line 3788, theme.scss */
.brand-rail__media[data-frames="4"] .brand-rail__frame {
  animation: brand-rail-slideshow-4 11s linear infinite;
  animation-delay: calc(var(--frame-index, 0) * 2.75s);
  animation-play-state: paused; }

/* line 3793, theme.scss */
.brand-rail__media[data-frames="5"] .brand-rail__frame {
  animation: brand-rail-slideshow-5 12s linear infinite;
  animation-delay: calc(var(--frame-index, 0) * 2.4s);
  animation-play-state: paused; }

/* line 3798, theme.scss */
.brand-rail__media[data-frames="6"] .brand-rail__frame {
  animation: brand-rail-slideshow-6 13s linear infinite;
  animation-delay: calc(var(--frame-index, 0) * 2.16s);
  animation-play-state: paused; }

/* line 3803, theme.scss */
.brand-rail__media[data-frames="7"] .brand-rail__frame {
  animation: brand-rail-slideshow-7 14s linear infinite;
  animation-delay: calc(var(--frame-index, 0) * 2s);
  animation-play-state: paused; }

/* line 3809, theme.scss */
.brand-rail__card:hover .brand-rail__frame {
  animation-play-state: running; }

/* static or placeholder modes: don't animate */
/* line 3814, theme.scss */
.brand-rail__media[data-mode="static"] .brand-rail__frame,
.brand-rail__media[data-mode="placeholder"] .brand-rail__frame {
  animation: none; }

@media (prefers-reduced-motion: reduce) {
  /* line 3820, theme.scss */
  .brand-rail__frame {
    animation: none !important;
    opacity: 0; }

  /* line 3821, theme.scss */
  .brand-rail__frame.is-active {
    opacity: 1; } }
/* line 3824, theme.scss */
.brand-rail__meta {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 25%, rgba(0, 0, 0, 0.88) 60%, rgba(0, 0, 0, 0.95) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px; }

/* line 3838, theme.scss */
.brand-rail__name {
  font-family: "Helvetica Neue", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: #fff; }

/* .brand-rail__tagline removed — card no longer renders a tagline element */
/* line 3849, theme.scss */
.brand-rail__cta {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 6px;
  align-items: center; }

/* Reduced motion: kill card transitions */
@media (prefers-reduced-motion: reduce) {
  /* line 3862, theme.scss */
  .brand-rail__card {
    transition: none !important; } }
/* === END: brand-rail === */
/* ============================================
   PHASE 9 — OVERLAYS (drawer / search / contact)
   Three full-bleed dialogs share the .overlay shell; .overlay--drawer
   and .overlay--search are full-screen, .overlay--contact is a centered
   modal on desktop and a bottom-sheet on mobile. Visibility is toggled
   by JS adding/removing the .is-open class; main.js handles body-scroll
   lock via the .overlay-open body class.
   ============================================ */
/* Shared shell ---------------------------------------------------- */
/* line 3879, theme.scss */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--mhead-bg-solid);
  color: var(--color-text);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out, visibility 0s linear 0.22s;
  overflow: hidden;
  display: flex;
  flex-direction: column; }

/* line 3892, theme.scss */
.overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease-out, visibility 0s linear 0s; }

/* Z-index ladder */
/* line 3900, theme.scss */
.overlay--search {
  z-index: var(--z-overlay-search); }

/* line 3901, theme.scss */
.overlay--contact {
  z-index: var(--z-overlay-contact);
  background: rgba(0, 0, 0, 0.36); }

/* line 3902, theme.scss */
.overlay--drawer {
  z-index: var(--z-overlay-drawer); }

/* Drawer slides from the left; respects reduced-motion. */
/* line 3905, theme.scss */
.overlay--drawer {
  transform: translateX(-100%);
  transition: transform 0.28s ease, opacity 0.22s ease-out, visibility 0s linear 0.28s; }

/* line 3909, theme.scss */
.overlay--drawer.is-open {
  transform: translateX(0);
  transition: transform 0.28s ease, opacity 0.22s ease-out, visibility 0s linear 0s; }

/* Body lock — host page can no longer scroll when an overlay is open. */
/* line 3915, theme.scss */
body.overlay-open {
  overflow: hidden;
  /* iOS Safari fallback */
  position: relative;
  touch-action: none; }

/* Top bar inside an overlay (wordmark / label + close X) */
/* line 3923, theme.scss */
.overlay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--mhead-h);
  padding: 0 12px 0 18px;
  border-bottom: 1px solid var(--color-hairline);
  flex-shrink: 0; }

/* line 3932, theme.scss */
.overlay__bar--sheet {
  border-bottom: 1px solid var(--color-hairline); }

/* line 3934, theme.scss */
.overlay__wordmark {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none; }

/* line 3942, theme.scss */
.overlay__bar-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary); }

/* line 3950, theme.scss */
.overlay__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px 56px; }

/* Drawer nav ----------------------------------------------------- */
/* line 3958, theme.scss */
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 20px;
  padding: 0; }

/* line 3965, theme.scss */
.drawer-nav--primary .drawer-nav__link {
  /* Leform-style display nav — taller scale (11vw), tighter tracking
     (-0.06em) so each line reads as a poster headline rather than a
     menu row. */
  font-size: clamp(34px, 11vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  padding: 4px 0;
  transition: color var(--transition-fast); }

/* line 3979, theme.scss */
.drawer-nav--primary .drawer-nav__link:hover {
  color: var(--color-pumpkin); }

/* «Обувь» standalone block — same poster-scale title as primary nav,
   then a tight inline row of shoe-brand quick-jumps underneath. The
   block sits between primary nav and the wider brand strip so users
   have two entry points: the catalog page and the brand pages. */
/* line 3985, theme.scss */
.drawer-nav--shoes .drawer-nav__link {
  font-size: clamp(34px, 11vw, 58px);
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  padding: 4px 0;
  transition: color var(--transition-fast); }

/* line 3996, theme.scss */
.drawer-nav--shoes .drawer-nav__link:hover {
  color: var(--color-pumpkin); }

/* line 3997, theme.scss */
.drawer-nav__sub-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px; }

/* line 4003, theme.scss */
.drawer-nav--shoes .drawer-nav__sub {
  display: inline-block;
  width: auto;
  padding: 4px 0;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text); }

/* line 4014, theme.scss */
.drawer-nav--shoes .drawer-nav__sub:hover {
  color: var(--color-pumpkin); }

/* line 4016, theme.scss */
.drawer-nav--brands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px; }

/* line 4021, theme.scss */
.drawer-nav__brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: 6px 0; }

/* line 4030, theme.scss */
.drawer-nav__brand:hover {
  color: var(--color-pumpkin); }

/* line 4032, theme.scss */
.drawer-nav--secondary {
  margin-top: 4px; }

/* line 4035, theme.scss */
.drawer-nav__sub {
  display: block;
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-hairline); }

/* line 4045, theme.scss */
.drawer-nav__sub:hover {
  color: var(--color-text); }

/* line 4046, theme.scss */
.drawer-nav__sub:last-child {
  border-bottom: 0; }

/* «Связаться» is a <button> (so href="#" can't intercept scroll-to-top
   before the contact-overlay JS triggers). Strip native button chrome
   so it visually matches the sibling <a> links. */
/* line 4051, theme.scss */
.drawer-nav__sub--button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-transform: none; }

/* line 4061, theme.scss */
.drawer-rule {
  border: 0;
  border-top: 1px solid var(--color-hairline);
  margin: 24px 0; }

/* line 4067, theme.scss */
.drawer-manifest {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary); }

/* Search overlay ------------------------------------------------- */
/* line 4075, theme.scss */
.search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 10px;
  margin-bottom: 28px; }

/* line 4084, theme.scss */
.search-form__input {
  font-family: var(--font-main);
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 8px 0;
  width: 100%; }

/* line 4096, theme.scss */
.search-form__input::placeholder {
  color: var(--color-text-tertiary); }

/* line 4097, theme.scss */
.search-form__submit {
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 0; }

/* line 4109, theme.scss */
.search-form__submit:hover {
  color: var(--color-pumpkin); }

/* line 4111, theme.scss */
.search-popular__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 16px; }

/* line 4119, theme.scss */
.search-popular__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }

/* line 4127, theme.scss */
.search-popular__chip {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--color-hairline);
  background: var(--color-bg);
  border-radius: 999px;
  transition: border-color var(--transition-fast), color var(--transition-fast); }

/* line 4139, theme.scss */
.search-popular__chip:hover {
  border-color: var(--color-text);
  color: var(--color-text); }

/* Contact overlay ------------------------------------------------ */
/* line 4145, theme.scss */
.overlay--contact {
  /* Centered modal on desktop; bottom-sheet on mobile (media query below). */
  align-items: center;
  justify-content: center; }

/* line 4150, theme.scss */
.overlay__sheet {
  background: var(--mhead-bg-solid);
  color: var(--color-text);
  width: min(440px, calc(100% - 32px));
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px); }

/* line 4160, theme.scss */
.overlay__sheet .overlay__body {
  padding: 16px 18px 22px; }

/* line 4161, theme.scss */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 16px;
  display: flex;
  flex-direction: column; }

/* line 4168, theme.scss */
.contact-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 16px 18px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-hairline); }

/* line 4178, theme.scss */
.contact-list__item:last-child {
  border-bottom: 0; }

/* line 4179, theme.scss */
.contact-list__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase; }

/* line 4185, theme.scss */
.contact-list__value {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums; }

/* line 4190, theme.scss */
.contact-list__item:hover .contact-list__value {
  color: var(--color-text); }

/* line 4191, theme.scss */
.contact-foot {
  padding: 0 18px 6px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0; }

@media (max-width: 540px) {
  /* line 4199, theme.scss */
  .overlay--contact {
    align-items: flex-end; }

  /* line 4200, theme.scss */
  .overlay__sheet {
    width: 100%;
    max-width: none;
    max-height: 86vh;
    border-radius: 16px 16px 0 0; } }
/* Drawer-specific mobile tightening ------------------------------ */
@media (max-width: 480px) {
  /* line 4210, theme.scss */
  .drawer-nav--brands {
    grid-template-columns: 1fr;
    gap: 10px; } }
/* Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* line 4215, theme.scss */
  .overlay,
  .overlay--drawer {
    transition: opacity 0.12s linear, visibility 0s;
    transform: none; } }
/* === END: Phase 9 overlays === */
/* ============================================
   PHASE 9 — Homepage editorial sections
   .ed-hero        — split editorial hero (text + brand image)
   .marquee-strip  — slim announcement strip under hero
   .manifest-poster — bigger replacement for .editorial-banner
   ============================================ */
/* ---- Editorial hero ---- */
/* line 4229, theme.scss */
.ed-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 78vh;
  max-height: 920px;
  background: var(--color-cream);
  /* warm cream — editorial surface */
  border-bottom: 1px solid var(--color-hairline);
  overflow: hidden;
  /* clip any over-width descendant */ }

/* line 4240, theme.scss */
.ed-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Left pad was max(var(--container-pad), 7vw) — InSales' SASS compiler
     can't see through CSS custom properties inside CSS function args, so
     the var() inside max() trips compile. Inline a literal that matches
     --container-pad (40px) on the lower bound. */
  padding: 72px var(--container-pad) 72px clamp(40px, 7vw, 112px); }

/* line 4250, theme.scss */
.ed-hero__eyebrow {
  font-size: var(--ed-eyebrow-fz);
  font-weight: 600;
  letter-spacing: var(--ed-eyebrow-track);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px; }

/* line 4261, theme.scss */
.ed-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background-color: var(--color-text); }

/* line 4268, theme.scss */
.ed-hero__title {
  font-family: var(--font-main);
  font-size: var(--ed-hero-fz);
  line-height: var(--ed-hero-line);
  letter-spacing: var(--ed-hero-track);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 28px;
  font-weight: 600; }

/* line 4278, theme.scss */
.ed-hero__lede {
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  max-width: 36ch;
  margin: 0 0 36px; }

/* line 4285, theme.scss */
.ed-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; }

/* line 4290, theme.scss */
.ed-hero__btn {
  display: inline-block;
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-text);
  border-radius: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  min-width: 144px;
  text-align: center; }

/* line 4304, theme.scss */
.ed-hero__btn--solid {
  background: var(--color-text);
  color: var(--color-bg); }

/* line 4308, theme.scss */
.ed-hero__btn--solid:hover {
  background: var(--color-pumpkin);
  border-color: var(--color-pumpkin);
  color: var(--color-bg); }

/* line 4313, theme.scss */
.ed-hero__btn--ghost {
  background: transparent;
  color: var(--color-text); }

/* line 4317, theme.scss */
.ed-hero__btn--ghost:hover {
  background: var(--color-text);
  color: var(--color-bg); }

/* line 4322, theme.scss */
.ed-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--color-paper);
  min-width: 0;
  /* never push wider than grid track */
  max-width: 100%; }

/* line 4329, theme.scss */
.ed-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* defensive — never wider than the well */
  object-fit: cover;
  display: block; }

/* Hero responsive */
@media (max-width: 1024px) {
  /* line 4341, theme.scss */
  .ed-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: auto;
    max-height: none; }

  /* line 4347, theme.scss */
  .ed-hero__copy {
    padding: 56px var(--container-pad) 40px;
    order: 2; }

  /* line 4351, theme.scss */
  .ed-hero__media {
    order: 1;
    aspect-ratio: 5 / 6;
    min-height: 64vw; } }
@media (max-width: 540px) {
  /* line 4358, theme.scss */
  .ed-hero__copy {
    padding: 40px 16px 32px; }

  /* line 4359, theme.scss */
  .ed-hero__btn {
    flex: 1 1 0;
    min-width: 0; } }
/* ---- Marquee announcement strip ----
   Switched to warm cream + black text per the split-surface palette —
   the slim line sits between hero (cream) and the first product strip
   (white) and reads as a continuation of the editorial section above
   rather than a hard black bar. */
/* line 4367, theme.scss */
.marquee-strip {
  background: var(--color-cream);
  color: var(--color-text);
  overflow: hidden;
  padding: 0;
  position: relative;
  border-bottom: 1px solid var(--color-hairline); }

/* line 4375, theme.scss */
.marquee-strip__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center; }

/* line 4386, theme.scss */
.marquee-strip__track::-webkit-scrollbar {
  display: none; }

/* line 4387, theme.scss */
.marquee-strip__item {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase; }

/* line 4393, theme.scss */
.marquee-strip__sep {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1; }

@media (max-width: 540px) {
  /* line 4399, theme.scss */
  .marquee-strip__track {
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px; } }
/* ---- Manifest poster (supersedes .editorial-banner) ---- */
/* line 4403, theme.scss */
.manifest-poster {
  margin-top: 96px;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  background: var(--color-cream);
  /* warm cream — editorial surface */
  position: relative;
  overflow: hidden; }

/* line 4411, theme.scss */
.manifest-poster::after {
  /* Soft pumpkin glow in the bottom corner — adds depth without color noise. */
  content: "";
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  /* Inline color instead of var(--color-pumpkin-soft) — InSales' SASS
     compiler can't see through CSS custom properties inside gradient
     syntax and counts the var() as a non-color stop, producing
     "At least two color stops are required for a radial-gradient". */
  background: radial-gradient(circle at center, #f0c7a4 0%, rgba(240, 199, 164, 0) 60%);
  opacity: 0.55;
  pointer-events: none; }

/* line 4428, theme.scss */
.manifest-poster__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 140px var(--container-pad);
  position: relative;
  z-index: 1; }

/* line 4435, theme.scss */
.manifest-poster__eyebrow {
  font-size: var(--ed-eyebrow-fz);
  font-weight: 600;
  letter-spacing: var(--ed-eyebrow-track);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px; }

/* line 4446, theme.scss */
.manifest-poster__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background-color: var(--color-text); }

/* line 4453, theme.scss */
.manifest-poster__title {
  font-family: var(--font-main);
  font-size: var(--manifest-fz);
  line-height: var(--manifest-line);
  letter-spacing: var(--manifest-track);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 40px;
  font-weight: 600; }

/* line 4463, theme.scss */
.manifest-poster__sig {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 18px; }

/* line 4471, theme.scss */
.manifest-poster__sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
  max-width: 56ch; }

/* line 4478, theme.scss */
.manifest-poster__link {
  color: var(--color-pumpkin);
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
  border-bottom: 1px solid currentColor; }

/* line 4485, theme.scss */
.manifest-poster__link:hover {
  color: var(--color-text); }

@media (max-width: 1024px) {
  /* line 4490, theme.scss */
  .manifest-poster__inner {
    padding: 112px var(--container-pad); }

  /* line 4491, theme.scss */
  .manifest-poster {
    margin-top: 72px; } }
@media (max-width: 540px) {
  /* line 4494, theme.scss */
  .manifest-poster__inner {
    padding: 84px 16px; }

  /* line 4495, theme.scss */
  .manifest-poster__sub {
    font-size: 14px; } }
/* Hide the legacy .editorial-banner if any other page still includes it
   (homepage migrated to .manifest-poster). Cheap insurance. */
/* line 4500, theme.scss */
.editorial-banner {
  /* no override — left intact for non-homepage usage */ }

/* === END: Phase 9 homepage sections === */
/* ============================================
   PHASE 9 v2 — DEFENSIVE FILTER CONTRAST
   Reviewer reported "filter text white on white" on the catalog.
   These explicit rules clamp every visible piece of the filter UI
   to readable dark-on-light contrast regardless of any inherited
   white from token shifts or legacy v1 rules.
   ============================================ */
/* line 4512, theme.scss */
.filter-rail,
.filter-rail__head,
.filter-rail__title,
.filter-group,
.filter-group__head,
.filter-group__title,
.filter-option,
.filter-option__label,
.filter-drawer__title,
.filter-sheet__title,
.filter-sheet__count {
  color: #111111; }

/* line 4526, theme.scss */
.filter-rail__reset,
.filter-option__count,
.filter-sheet__close {
  color: #6f6f6a; }

/* Surface — keep filter rail/drawer/sheet on white regardless of body bg. */
/* line 4533, theme.scss */
.filter-rail,
.filter-drawer,
.filter-sheet__panel,
.filter-sheet__body {
  background-color: #ffffff;
  color: #111111; }

/* === END: Phase 9 v2 defensive filter contrast === */