:root {
  --ink-900: #16181A;
  --ink-800: #24262A;
  --ink-700: #33363A;
  --ink-600: #4B4E52;
  --steel-500: #6B6E71;
  --steel-400: #86898C;
  --steel-300: #9EA0A2;
  --concrete-100: #F5F3EF;
  --concrete-200: #ECE9E3;
  --concrete-300: #DDD9D0;
  --concrete-line: #D4CFC4;
  --paper: #FFFFFF;
  --signal-500: #C4291B;
  --signal-600: #A32116;
  --signal-700: #7E1911;
  --signal-tint: #F7E4E1;
  --amber-500: #B07E2E;
  --amber-600: #8F6423;
  --amber-tint: #F1E5CE;
  --success-600: #3F6C4C;
  --success-tint: #E3EBE4;
  --error-600: var(--signal-600);
  --error-tint: var(--signal-tint);
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 27px;
  --fs-2xl: 34px;
  --fs-3xl: 46px;
  --fs-4xl: 60px;
  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --ls-caps: 0.06em;
  --ls-display: -0.01em;
  --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;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --border-hairline: 1px solid var(--concrete-line);
  --border-hairline-dark: 1px solid rgba(255, 255, 255, 0.14);
  --border-strong: 1.5px solid var(--ink-900);
  --shadow-dropdown: 0 8px 24px rgba(22, 24, 26, 0.16);
  --shadow-modal: 0 16px 48px rgba(22, 24, 26, 0.28);
  --container-max: 1360px;
  --container-pad: 24px;
  --container-pad-mobile: 16px;
  /* One height for every header control: icon squares, mode switch, CTA plate. */
  --control-size: 44px;
  --grid-gap: 24px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
  --mode-accent-surface: #16181A;
  --mode-accent-surface-strong: #0E0F10;
}

:root {
  --ink-900: #16181A;
  --ink-800: #24262A;
  --ink-700: #33363A;
  --ink-600: #4B4E52;
  --steel-500: #6B6E71;
  --steel-400: #86898C;
  --steel-300: #9EA0A2;
  --concrete-100: #F5F3EF;
  --concrete-200: #ECE9E3;
  --concrete-300: #DDD9D0;
  --concrete-line: #D4CFC4;
  --paper: #FFFFFF;
  --signal-500: #C4291B;
  --signal-600: #A32116;
  --signal-700: #7E1911;
  --signal-tint: #F7E4E1;
  --amber-500: #B07E2E;
  --amber-600: #8F6423;
  --amber-tint: #F1E5CE;
  --success-600: #3F6C4C;
  --success-tint: #E3EBE4;
  --error-600: var(--signal-600);
  --error-tint: var(--signal-tint);
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 27px;
  --fs-2xl: 34px;
  --fs-3xl: 46px;
  --fs-4xl: 60px;
  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --ls-caps: 0.06em;
  --ls-display: -0.01em;
  --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;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --border-hairline: 1px solid var(--concrete-line);
  --border-hairline-dark: 1px solid rgba(255, 255, 255, 0.14);
  --border-strong: 1.5px solid var(--ink-900);
  --shadow-dropdown: 0 8px 24px rgba(22, 24, 26, 0.16);
  --shadow-modal: 0 16px 48px rgba(22, 24, 26, 0.28);
  --container-max: 1360px;
  --container-pad: 24px;
  --container-pad-mobile: 16px;
  /* One height for every header control: icon squares, mode switch, CTA plate. */
  --control-size: 44px;
  --grid-gap: 24px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
  --mode-accent-surface: #16181A;
  --mode-accent-surface-strong: #0E0F10;
}

/* -----------------------------------------------------------------------
   Dark theme (toggle) — see js/state/theme.js / js/components/chrome.js.
   Everything in this codebase already reads colors through the tokens
   above, so the dark variant is expressed as a token override under
   [data-theme="dark"] rather than a parallel set of dark component rules.
   --ink-900/800/700/600 and --steel-500/400/300 are used throughout BOTH
   as body-copy text AND, in a handful of specific components, as a
   permanently-dark fill (header, footer, hero image stage, trust strip,
   b2b band, category/brand photo tiles, cart toast) that must stay dark
   in both themes to keep the Steel Ledger identity — those are pinned
   back to the fixed --ink-900 hex explicitly below, and the few of them
   that pair that fill with hardcoded white text get a matching text-color
   fix so the pairing still reads correctly once the token itself flips.
   --signal-500/600/700 (brand red) and --amber-600/--success-600 are left
   untouched in both themes on purpose — only their pale --*-tint washes
   get a translucent dark-mode equivalent, so brand color stays exactly
   as recognizable in dark mode as in light mode.
   ----------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --concrete-100: #242526;
  --concrete-200: #303133;
  --concrete-300: #424345;
  --concrete-line: #3D3E40;
  --paper: #2A2B2C;
  /* pinned-dark surfaces (header/hero stage/footer…): deep graphite, not black */
  --mode-accent-surface: #1D1E1F;
  --mode-accent-surface-strong: #161718;
  --ink-900: #EDEBE6;
  --ink-800: #D6D3CC;
  --ink-700: #BEBBB3;
  --ink-600: #97948C;
  --steel-500: #A9A6A0;
  --steel-400: #8B8880;
  --steel-300: #6B685F;
  --signal-tint: rgba(196, 41, 27, 0.18);
  --amber-tint: rgba(176, 126, 46, 0.2);
  --success-tint: rgba(63, 108, 76, 0.22);
  --error-tint: var(--signal-tint);
}

/* -----------------------------------------------------------------------
   Retail/wholesale identity — REVERTED. Retail and wholesale used to carry
   two separate colour palettes (a warm cream/blush surface + dark-taupe
   accent for retail, a neutral-grey surface + graphite accent for
   wholesale), each with its own dark-theme variant, overriding --paper/
   --concrete-* / --mode-accent-surface per [data-customer-mode="…"]. Product
   direction reversed that: the whole site goes back to ONE Industrial
   Premium palette — white/graphite in light theme, black/graphite in dark
   theme, red as the one brand accent — regardless of customer mode. Mode
   now differentiates through motion language, density and spatial
   composition instead (see js/motion/page-transitions.js, the mode-switch
   transition in app.js, and the density tokens further down this file).
   --mode-accent-surface/-strong are therefore fixed, theme-independent
   tokens again (defined once, above) — the pinned-dark fill for header,
   footer, hero stage, trust strip, b2b band, category/brand tiles and cart
   toast — not a per-mode lever. document.documentElement still carries
   data-customer-mode (js/state/mode.js) for JS/motion to read; nothing in
   CSS branches on it for colour any more. */

/* These pair a (now-inverted-to-light) --ink-900 fill with text that was
   hardcoded white for the light theme — give them dark text to match. */
[data-theme="dark"] .badge--new,
[data-theme="dark"] .pagination-node--current,
[data-theme="dark"] .product-card__add,
[data-theme="dark"] .product-card .shop-product-btn,
[data-theme="dark"] .hero__audience a.is-active {
  color: #16181A;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--concrete-100);
  -webkit-font-smoothing: antialiased;
  /* --concrete-100 now carries customer-mode identity (cream/blush vs
     graphite-neutral, see the mode block above), not just light/dark
     theme — without this, the page canvas would snap instantly to the
     new mode's color while the header/footer/hero cross-fade smoothly
     over their own 380ms transition, reading as broken rather than as
     one coherent scene change (brief: "цвет должен участвовать в самой
     анимации переключения"). */
  transition: background-color 380ms var(--ease-standard);
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink-900);
}

h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}

h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-md);
  font-weight: 600;
}

p {
  margin: 0 0 var(--sp-4);
  max-width: 64ch;
}

.label-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--steel-500);
}

.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--container-pad);
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

.rule {
  border: 0;
  border-top: var(--border-hairline);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--signal-500);
  outline-offset: 2px;
}

.no-scroll {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled, .btn[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
}

.btn--primary {
  background: var(--ink-900);
  color: var(--concrete-100);
  border-color: var(--ink-900);
}
.btn--primary:hover:not(:disabled) {
  background: var(--ink-700);
  border-color: var(--ink-700);
}
.btn--primary:focus-visible {
  outline-offset: 3px;
}

/* Primary CTA — back to the brand-red signal color (reverted from a
   mode-accent fill: retail/wholesale no longer carry separate palettes,
   so there is no mode accent left to borrow — red is the one deliberate
   brand accent across the whole site, logo included). */
.btn--signal {
  background: var(--signal-500);
  color: #fff;
  border-color: var(--signal-500);
}
.btn--signal:hover:not(:disabled) {
  background: var(--signal-600);
  border-color: var(--signal-600);
}

.btn--secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--ink-900);
  color: var(--concrete-100);
}

.btn--ghost {
  background: transparent;
  color: var(--concrete-100);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover:not(:disabled) {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.btn--sm {
  height: 38px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-xs);
}

.btn--lg {
  height: 56px;
  padding: 0 var(--sp-8);
  font-size: var(--fs-base);
}

.btn--full {
  width: 100%;
}

.btn-icon, .product-card__quick-view, .product-card .gr-compare-plus,
.product-card .gr-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  border-radius: var(--radius-sm);
  border: var(--border-hairline);
  background: transparent;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.btn-icon:hover, .product-card__quick-view:hover, .product-card .gr-compare-plus:hover,
.product-card .gr-favorite-btn:hover {
  border-color: var(--ink-900);
  background: var(--concrete-200);
}
.btn-icon.is-active, .is-active.product-card__quick-view, .product-card .is-active.gr-compare-plus,
.product-card .is-active.gr-favorite-btn {
  border-color: var(--signal-500);
  color: var(--signal-500);
}

.link {
  position: relative;
  display: inline-block;
  color: var(--ink-900);
  font-weight: 500;
  background-image: linear-gradient(var(--ink-900), var(--ink-900));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-base) var(--ease-standard);
  padding-bottom: 1px;
}
.link:hover {
  background-size: 100% 1px;
}

.link--signal {
  color: var(--signal-500);
  background-image: linear-gradient(var(--signal-500), var(--signal-500));
}

.link--muted {
  color: var(--steel-500);
  background-image: linear-gradient(var(--steel-500), var(--steel-500));
  font-weight: 400;
}

/* .link is also used on a few <button> elements (cart/compare "clear"
   actions), not just <a> — without this, the browser's native button
   chrome (border, background, padding) shows through underneath the
   intended plain text-link look, rendering as an oversized, unstyled box
   instead of a compact secondary link. */
button.link {
  background: transparent;
  border: 0;
  padding: 0 0 1px;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--steel-500);
}
.breadcrumbs a {
  color: var(--steel-500);
}
.breadcrumbs a:hover {
  color: var(--ink-900);
}
.breadcrumbs span[aria-hidden] {
  color: var(--concrete-300);
}
.breadcrumbs .is-current {
  color: var(--ink-900);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-900);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--steel-500);
}

.field__error {
  font-size: var(--fs-xs);
  color: var(--signal-600);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  background: var(--paper);
  border: 1.5px solid var(--concrete-300);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-standard);
  appearance: none;
}
.input::placeholder,
.select::placeholder,
.textarea::placeholder {
  color: var(--steel-300);
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--steel-400);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ink-900);
}
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--signal-500);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--concrete-200);
  color: var(--steel-300);
  cursor: not-allowed;
}

.textarea {
  height: auto;
  min-height: 120px;
  padding-top: var(--sp-3);
  resize: vertical;
}

.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-900) 50%), linear-gradient(135deg, var(--ink-900) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.checkbox input,
.radio input {
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--concrete-300);
  accent-color: var(--ink-900);
  cursor: pointer;
}

.checkbox input {
  border-radius: var(--radius-sm);
}

.radio input {
  border-radius: 50%;
}

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1.5px solid var(--concrete-300);
  border-radius: var(--radius-sm);
}
.qty-stepper button {
  width: 36px;
  border: 0;
  background: transparent;
  color: var(--ink-900);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.qty-stepper button:hover {
  background: var(--concrete-200);
}
.qty-stepper button:disabled {
  color: var(--steel-300);
  cursor: not-allowed;
}
.qty-stepper input {
  width: 40px;
  border: 0;
  border-left: 1px solid var(--concrete-300);
  border-right: 1px solid var(--concrete-300);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: transparent;
}
.qty-stepper input:focus {
  outline: none;
}
.qty-stepper__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  border-left: 1px solid var(--concrete-300);
  border-right: 1px solid var(--concrete-300);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.search-field .input {
  flex: 1;
  min-width: 0;
  padding-left: var(--sp-10);
}
.search-field .search-field__icon {
  position: absolute;
  left: var(--sp-3);
  width: 18px;
  height: 18px;
  color: var(--steel-500);
  pointer-events: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
}

.badge--in-stock {
  background: var(--success-tint);
  color: var(--success-600);
}

.badge--low-stock {
  background: var(--amber-tint);
  color: var(--amber-600);
}

.badge--out {
  background: var(--concrete-200);
  color: var(--steel-500);
}

.badge--sale {
  background: var(--signal-500);
  color: #fff;
}

.badge--new {
  background: var(--ink-900);
  color: #fff;
}

.badge--dealer {
  background: transparent;
  border: 1px solid var(--amber-600);
  color: var(--amber-600);
  height: 24px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background-color 380ms var(--ease-standard);
}
.product-card:hover, .product-card:focus-within {
  border-color: var(--ink-900);
  box-shadow: var(--shadow-dropdown);
}
.product-card:hover .product-card__media img, .product-card:focus-within .product-card__media img {
  transform: scale(1.04);
}
.product-card:hover .product-card__actions, .product-card:focus-within .product-card__actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.product-card__media {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--concrete-100);
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-6);
  transition: transform var(--dur-slow) var(--ease-out);
}

.product-card__badges {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  z-index: 1;
}

.product-card__actions {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  z-index: 1;
}
.product-card__actions .btn-icon, .product-card__actions .product-card__quick-view, .product-card__actions .gr-compare-plus, .product-card__actions .gr-favorite-btn {
  width: 34px;
  height: 34px;
  background: var(--paper);
}
.product-card__actions .btn-icon svg, .product-card__actions .product-card__quick-view svg, .product-card__actions .gr-compare-plus svg, .product-card__actions .gr-favorite-btn svg {
  width: 15px;
  height: 15px;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border-top: var(--border-hairline);
  flex: 1;
}

.product-card__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--steel-500);
}

.product-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__specs {
  display: flex;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--steel-500);
}
.product-card__specs span {
  white-space: nowrap;
}

.product-card__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-4);
}

.product-card__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.product-card__cart-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
}

.product-card__confirm.is-confirmed {
  background: var(--success-600);
  border-color: var(--success-600);
  color: #fff;
}

.product-card__price {
  display: flex;
  flex-direction: column;
}

.product-card__price-value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product-card__price-old {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--steel-400);
  text-decoration: line-through;
}

.product-card__add {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-900);
  background: var(--ink-900);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), width var(--dur-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-card__add--oos {
  width: auto;
  padding: 0 var(--sp-3);
  border-color: var(--concrete-300);
  background: var(--concrete-200);
  color: var(--steel-500);
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: not-allowed;
}
.product-card__add:hover {
  background: var(--mode-accent-surface);
  border-color: var(--mode-accent-surface);
}
/* Same specificity as .product-card__add:hover above — must come after it
   in source order to win for the (also disabled) out-of-stock variant. */
.product-card__add--oos:hover {
  background: var(--concrete-200);
  border-color: var(--concrete-300);
}

@media (max-width: 767px), (hover: none) {
  .product-card__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
.product-card .product-amount {
  display: inline-flex;
  height: 40px;
  border: 1.5px solid var(--concrete-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.product-card .product-amount .amount-minus, .product-card .product-amount .amount-plus {
  width: 32px;
  border: 0;
  background: transparent;
  color: var(--ink-900);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-card .product-amount .amount-minus:hover, .product-card .product-amount .amount-plus:hover {
  background: var(--concrete-200);
}
.product-card .product-amount input[name=amount] {
  width: 36px;
  border: 0;
  border-left: 1px solid var(--concrete-300);
  border-right: 1px solid var(--concrete-300);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: transparent;
}
.product-card .product-amount input[name=amount]:focus {
  outline: none;
}

.product-card .shop-product-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-900);
  background: var(--ink-900);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
.product-card .shop-product-btn::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  font-family: var(--font-body);
}
.product-card .shop-product-btn:hover {
  background: var(--signal-500);
  border-color: var(--signal-500);
}
.product-card .shop-product-btn[disabled] {
  background: var(--concrete-300);
  border-color: var(--concrete-300);
  cursor: not-allowed;
}

.product-card .gr-compare-plus,
.product-card .gr-favorite-btn {
  cursor: pointer;
}
.product-card .gr-compare-plus input[type=checkbox],
.product-card .gr-favorite-btn input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.product-card .gr-compare-plus .gr-favorite-btn__text,
.product-card .gr-favorite-btn .gr-favorite-btn__text {
  display: none;
}

.product-card .gr-favorite-btn__icon {
  display: inline-flex;
}

.product-card .gr-favorite-btn__added {
  display: none;
}

.product-card .gr-favorite-btn.is-added .gr-favorite-btn__add {
  display: none;
}

.product-card .gr-favorite-btn.is-added .gr-favorite-btn__added {
  display: inline-flex;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .product-grid__feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}
.product-grid__feature .product-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
  }
}

/* Mode density (replaces the old mode COLOUR split — brief section 8/10:
   retail/wholesale now differ through density/grid/spacing, never hue).
   Wholesale's grids sit one spacing step tighter than retail's default
   above — a real, persistent (not just mid-transition) structural
   difference; product/category card content itself is unaffected. */
:root[data-customer-mode="wholesale"] .product-grid { gap: var(--sp-3); }
@media (min-width: 1024px) {
  :root[data-customer-mode="wholesale"] .product-grid { gap: var(--sp-4); }
}
:root[data-customer-mode="wholesale"] .category-grid { gap: var(--sp-2); }
@media (min-width: 768px) {
  :root[data-customer-mode="wholesale"] .category-grid { gap: var(--sp-3); }
}

.category-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  padding: var(--sp-5);
  background: var(--mode-accent-surface);
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: background-color 380ms var(--ease-standard);
}
@media (min-width: 768px) {
  .category-card.category-card--lg {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 460px;
    padding: var(--sp-8);
  }
}
.category-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-standard);
  opacity: 0.72;
}
.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 24, 26, 0) 0%, rgba(22, 24, 26, 0.08) 40%, rgba(22, 24, 26, 0.72) 68%, rgba(22, 24, 26, 0.94) 88%, rgba(22, 24, 26, 0.96) 100%);
}
.category-card:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}
.category-card.category-card--no-image {
  background: var(--mode-accent-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.category-card.category-card--no-image::after {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), transparent 60%);
}
.category-card.category-card--no-image:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.category-card.category-card--no-image:hover img {
  transform: none;
}

.category-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: #fff;
}

.category-card__index {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: var(--ls-caps);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.category-card__count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.category-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
.category-card--lg .category-card__title {
  font-size: var(--fs-2xl);
}

.category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.category-card:hover .category-card__cta, .category-card:focus-visible .category-card__cta {
  max-height: 32px;
  opacity: 1;
  margin-top: var(--sp-1);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.spec-table tr {
  border-bottom: var(--border-hairline);
}
.spec-table tr:first-child {
  border-top: var(--border-hairline);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-2);
  vertical-align: top;
}
.spec-table th {
  width: 42%;
  font-weight: 400;
  color: var(--steel-500);
}
.spec-table td {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink-900);
}
@media (min-width: 768px) {
  .spec-table th, .spec-table td {
    padding: var(--sp-3) var(--sp-4);
  }
}

.spec-table--zebra tr:nth-child(even) {
  background: var(--concrete-100);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--mode-accent-surface);
  color: var(--concrete-100);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--dur-base) var(--ease-standard), background-color 380ms var(--ease-standard);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 76px;
  transition: height var(--dur-base) var(--ease-standard);
}
.is-scrolled .site-header__row {
  height: 60px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.main-nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  flex: 1;
}
@media (min-width: 1024px) {
  .main-nav {
    display: flex;
  }
}
.main-nav a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur-fast) var(--ease-standard);
  padding: var(--sp-1) 0;
  border-bottom: 1.5px solid transparent;
}
.main-nav a:hover, .main-nav a.is-active {
  color: #fff;
  border-color: var(--signal-500);
}

.dropdown__link {
  display: inline-block;
}

.dropdown__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: var(--sp-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
  vertical-align: -2px;
}
.dropdown__caret svg {
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.dropdown__caret:hover {
  color: #fff;
}
.dropdown__caret[aria-expanded=true] {
  color: #fff;
}
.dropdown__caret[aria-expanded=true] svg {
  transform: rotate(270deg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.site-header .btn-icon, .site-header .product-card .gr-compare-plus, .product-card .site-header .gr-compare-plus,
.site-header .product-card .gr-favorite-btn,
.product-card .site-header .gr-favorite-btn, .site-header .product-card__quick-view {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}
.site-header .btn-icon:hover, .site-header .product-card .gr-compare-plus:hover, .product-card .site-header .gr-compare-plus:hover,
.site-header .product-card .gr-favorite-btn:hover,
.product-card .site-header .gr-favorite-btn:hover, .site-header .product-card__quick-view:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.site-header .btn-icon.is-active, .site-header .product-card .is-active.gr-compare-plus, .product-card .site-header .is-active.gr-compare-plus,
.site-header .product-card .is-active.gr-favorite-btn,
.product-card .site-header .is-active.gr-favorite-btn, .site-header .is-active.product-card__quick-view {
  border-color: var(--signal-500);
  color: var(--signal-500);
}

/* Theme toggle: frameless sun/moon glyphs — see frontend-extra.css. */

/* Measured overflow fix (real getBoundingClientRect check, not a guess):
   at <480px the header row needs ~430px (logo + 6 action icons) but only
   has ~358px available, a ~72px overflow that would push icons off-screen
   or force horizontal scroll. Compare/favorites are the two icons here
   that are NOT unique to the header — both are already reachable from the
   mobile nav drawer's own footer buttons (see chrome.js's mobileNavHtml) —
   so hiding just these two on the narrowest screens removes the overflow
   without shrinking any touch target or touching the logo. */
@media (max-width: 479px) {
  .site-header__actions [data-badge-slot="compare"],
  .site-header__actions [data-badge-slot="favorites"] {
    display: none;
  }
}

.cart-trigger {
  position: relative;
}
.cart-trigger .cart-trigger__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--signal-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-burger {
  display: inline-flex;
}
@media (min-width: 1024px) {
  .nav-burger {
    display: none;
  }
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
}

.mobile-nav__list a {
  padding: var(--sp-3) 0;
  border-bottom: var(--border-hairline);
  font-weight: 600;
}

.mobile-nav__list a.is-sub {
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--steel-500);
}

.mobile-nav__list a.is-cta {
  color: var(--signal-600);
}

.mobile-nav__foot {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.mobile-nav__foot .btn {
  flex: 1;
}

.category-rail {
  background: var(--concrete-100);
  border-bottom: var(--border-hairline);
}
.category-rail__list {
  display: flex;
  gap: var(--sp-6);
  overflow-x: auto;
  padding: var(--sp-3) 0;
}
.category-rail__list a {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--steel-500);
}
.category-rail__list a:hover, .category-rail__list a.is-active {
  color: var(--ink-900);
}

.dropdown {
  position: relative;
}

.dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--paper);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
  padding: var(--sp-2);
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.dropdown__panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown__panel .dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.dropdown__panel .dropdown__item:hover, .dropdown__panel .dropdown__item:focus-visible {
  background: var(--concrete-100);
  color: var(--ink-900);
}
.dropdown__panel .dropdown__item:active {
  background: var(--concrete-200);
}

.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: var(--border-hairline);
  box-shadow: var(--shadow-dropdown);
  padding: var(--sp-6) 0;
  z-index: var(--z-dropdown);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height var(--dur-slow) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.search-panel.is-open {
  max-height: 520px;
  opacity: 1;
  pointer-events: auto;
}

.search-panel__results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 768px) {
  .search-panel__results {
    grid-template-columns: repeat(4, 1fr);
  }
}

.search-panel__facets {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.search-panel__facets button, .search-panel__facets a {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: var(--sp-1) var(--sp-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--steel-500);
  cursor: pointer;
}
.search-panel__facets button:hover, .search-panel__facets a:hover {
  border-color: var(--ink-900);
  color: var(--ink-900);
}
.search-panel__facets button.is-active, .search-panel__facets a.is-active {
  border-color: var(--ink-900);
  color: var(--ink-900);
}

.filter-group {
  padding: var(--sp-4) 0;
  border-bottom: var(--border-hairline);
}
.filter-group:first-child {
  padding-top: 0;
}

.filter-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.filter-drawer {
  display: none;
}
@media (max-width: 1023px) {
  .filter-drawer {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    background: var(--paper);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-modal);
    padding: var(--sp-5) var(--sp-4) var(--sp-8);
    overflow-y: auto;
    z-index: var(--z-modal);
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .filter-drawer.is-open {
    transform: translateY(0);
  }
}

.filter-drawer__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--concrete-300);
  margin: 0 auto var(--sp-4);
  display: none;
}
@media (max-width: 1023px) {
  .filter-drawer__handle {
    display: block;
  }
}

.popover-dim {
  background: rgba(22, 24, 26, 0.6) !important;
}

.card-product-preview {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-6);
  max-width: 480px;
}

.card-product-preview__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink-900);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: var(--border-hairline);
}
.card-product-preview__title::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

.card-product-preview__item {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.card-product-preview__left {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: var(--concrete-100);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-product-preview__image {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card-product-preview__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.card-product-preview__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.35;
}

.tpl-rating-block {
  font-size: var(--fs-xs);
  color: var(--steel-400);
}

.card-product-preview__price {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink-900);
  margin-top: var(--sp-1);
}

.card-product-preview__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.gr-cart-btn.gr_cart_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 160px;
  height: 48px;
  padding: 0 var(--sp-6);
  background: var(--signal-500);
  color: #fff;
  border: 1.5px solid var(--signal-500);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.gr-cart-btn.gr_cart_btn:hover {
  background: var(--signal-600);
  border-color: var(--signal-600);
}
.gr-cart-btn.gr_cart_btn:focus-visible {
  outline: 2px solid var(--signal-500);
  outline-offset: 3px;
}

.card-popup-close.card_popup_close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--sp-6);
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.card-popup-close.card_popup_close:hover {
  background: var(--ink-900);
  color: var(--concrete-100);
}

.cart-toast {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: min(340px, 100vw - 32px);
  padding: var(--sp-3);
  background: var(--mode-accent-surface);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: background-color 380ms var(--ease-standard);
}
.cart-toast.is-open {
  /* opacity/transform are now owned entirely by Motion (see toast.js) —
     a spring entrance instead of a linear fade, with no CSS transition on
     the same properties fighting it. This rule only flips pointer-events
     so the toast (no interactive content) doesn't intercept clicks while
     hidden. */
  pointer-events: auto;
}
.cart-toast img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-sm);
}

.cart-toast__title {
  font-size: var(--fs-xs);
  font-weight: 600;
}

.cart-toast__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.65);
}

.hero {
  background: var(--concrete-100);
  border-bottom: var(--border-hairline);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding: var(--sp-10) 0 var(--sp-12);
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
    gap: var(--sp-10);
    padding: var(--sp-16) 0 var(--sp-16);
  }
}

.hero__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  max-width: 14ch;
}
@media (min-width: 1024px) {
  .hero__title {
    font-size: var(--fs-4xl);
  }
}

.hero__lede {
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--ink-700);
  line-height: var(--lh-body);
}

.hero__lede b {
  color: var(--ink-900);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero__audience {
  display: inline-flex;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  width: fit-content;
  overflow: hidden;
}

.hero__audience a {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--steel-500);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.hero__audience a + a {
  border-left: var(--border-hairline);
}

.hero__audience a.is-active {
  background: var(--ink-900);
  color: #fff;
}

.hero__tabs {
  display: flex;
  flex-direction: column;
  border-top: var(--border-hairline);
}

.hero__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: var(--border-hairline);
  background: none;
  border-left: none;
  border-right: none;
  text-align: left;
  cursor: pointer;
  color: var(--steel-500);
  transition: color var(--dur-fast) var(--ease-standard);
}
.hero__tab:hover {
  color: var(--ink-900);
}
.hero__tab .hero__tab-name {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.hero__tab .hero__tab-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--concrete-300);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-standard);
}
.hero__tab.is-active {
  color: var(--ink-900);
}
.hero__tab.is-active .hero__tab-mark {
  background: var(--signal-500);
}

.hero__stage {
  position: relative;
  min-height: 320px;
  background: var(--mode-accent-surface);
  overflow: hidden;
  transition: background-color 380ms var(--ease-standard);
}
@media (min-width: 1024px) {
  .hero__stage {
    min-height: 100%;
  }
}

.hero__stage-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
}
.hero__stage-frame.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero__stage-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hero__stage-frame.is-active img {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

.hero__stage-caption {
  position: absolute;
  left: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 2;
  color: #fff;
  max-width: 60%;
}

.hero__stage-caption-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--sp-1);
}

.hero__stage-caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
}

.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__stage-frame {
    transition: none;
  }
}

.section-shell {
  padding: var(--sp-12) 0;
}
@media (min-width: 1024px) {
  .section-shell {
    padding: var(--sp-16) 0;
  }
}

.section-shell__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.section-shell__head h2 {
  font-size: var(--fs-2xl);
  max-width: 18ch;
}

.section-shell__link {
  flex-shrink: 0;
}

.trust-strip {
  background: var(--mode-accent-surface);
  color: rgba(255, 255, 255, 0.86);
  transition: background-color 380ms var(--ease-standard);
}

.trust-strip__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.trust-strip__item:first-child {
  padding-left: 0;
}
.trust-strip__item strong {
  color: #fff;
  font-weight: 600;
}

.trust-strip__item--wrap {
  white-space: normal;
  max-width: 100%;
}

.b2b {
  background: var(--mode-accent-surface);
  color: #fff;
  transition: background-color 380ms var(--ease-standard);
}

.b2b__content {
  max-width: 640px;
}

.b2b__title {
  /* HOTFIX 4 — root cause of the "invisible text" bug: h1,h2,h3,h4 all get
     color: var(--ink-900) from the global heading rule, which directly
     targets this h2 and so overrides the white it would otherwise inherit
     from .b2b's dark background — rendering it in the SAME near-black as
     the section behind it. Selecting the text revealed it only because the
     browser's selection highlight sits behind the (still dark) glyphs,
     giving them contrast they otherwise had none of. */
  color: #fff;
  font-size: var(--fs-2xl);
  max-width: 16ch;
  margin-bottom: var(--sp-4);
}

.b2b__lede {
  color: rgba(255, 255, 255, 0.72);
  max-width: 42ch;
  margin-bottom: var(--sp-6);
}

.b2b__segments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}
.b2b__segments span {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}

.brands__featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
@media (min-width: 768px) {
  .brands__featured {
    grid-template-columns: 1fr 1fr;
  }
}

.brand-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: var(--sp-6);
  background: var(--mode-accent-surface);
  overflow: hidden;
  transition: background-color 380ms var(--ease-standard);
}
.brand-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.brand-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 24, 26, 0.1), rgba(22, 24, 26, 0.92));
}

.brand-feature__body {
  position: relative;
  z-index: 1;
  color: #fff;
}

.brand-feature__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
}

.brand-feature__badge {
  display: inline-flex;
  margin-top: var(--sp-2);
}

.brands__row-label {
  margin-bottom: var(--sp-3);
}

.brands__row {
  display: flex;
  flex-wrap: wrap;
  border-top: var(--border-hairline);
}

.brands__row a {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  border-right: var(--border-hairline);
  border-bottom: var(--border-hairline);
  color: var(--steel-500);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.brands__row a:hover {
  color: var(--ink-900);
  background: var(--concrete-100);
}

.site-footer {
  background: var(--mode-accent-surface);
  color: rgba(255, 255, 255, 0.72);
  transition: background-color 380ms var(--ease-standard);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding: var(--sp-12) 0 var(--sp-10);
}
@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--sp-6);
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.site-footer__logo img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
}

.site-footer__tagline {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  max-width: 30ch;
  /* HOTFIX 4: .site-footer__brand lays these out with flex `gap`, and the
     base `p { margin: 0 0 var(--sp-4) }` rule would stack its own bottom
     margin on top of that gap now that there are two of these in a row. */
  margin: 0;
}

.site-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--sp-3);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.site-footer__col a {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__col a:hover {
  color: #fff;
}

.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.site-footer__contacts a {
  color: #fff;
  font-weight: 600;
}

.site-footer__hours {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--sp-5) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.site-footer__legal {
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.4);
}

.site-footer__pay {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.site-footer__pay img {
  height: 20px;
  width: auto;
  opacity: 0.85;
}

.filter-panel {
  display: flex;
  flex-direction: column;
}

.filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: var(--border-strong);
}
.filter-panel__header h2 {
  font-size: var(--fs-base);
  font-weight: 700;
}

.filter-panel__reset {
  font-size: var(--fs-xs);
  color: var(--steel-500);
}
.filter-panel__reset:hover {
  color: var(--signal-600);
}

.filter-section {
  border-bottom: var(--border-hairline);
}

.filter-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  text-align: left;
}
.filter-section__title svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.filter-section__title[aria-expanded=false] svg {
  transform: rotate(-90deg);
}

.filter-section__mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-500);
  margin-right: var(--sp-2);
}

.filter-section__body {
  padding-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 320px;
  overflow-y: auto;
}
.filter-section__body[hidden] {
  display: none;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  cursor: pointer;
}
.filter-option input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--ink-900);
  border-radius: var(--radius-sm);
}
.filter-option span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-option .filter-option__count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--steel-400);
}
.filter-option.is-zero {
  color: var(--steel-300);
  cursor: default;
}

.filter-price {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-4);
}
.filter-price .input {
  height: 40px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 0 var(--sp-2);
  text-align: center;
}
.filter-price span {
  color: var(--steel-400);
  font-size: var(--fs-xs);
}

.filter-panel__apply {
  margin-top: var(--sp-2);
}

.filter-drawer .filter-panel__header {
  display: none;
}

.listing-head {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: var(--border-hairline);
}

.listing-head__breadcrumbs {
  margin-bottom: var(--sp-4);
}

.listing-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.listing-head__title {
  font-size: var(--fs-2xl);
  max-width: 32ch;
}
@media (min-width: 1024px) {
  .listing-head__title {
    font-size: var(--fs-3xl);
  }
}

.listing-head__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--steel-500);
  white-space: nowrap;
}

.listing-head__description {
  margin-top: var(--sp-4);
  max-width: 72ch;
  color: var(--ink-700);
  font-size: var(--fs-sm);
}

.listing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding: var(--sp-8) 0 var(--sp-16);
}
@media (min-width: 1024px) {
  .listing-layout {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

.listing-layout__filters {
  display: none;
}
@media (min-width: 1024px) {
  .listing-layout__filters {
    display: block;
    position: sticky;
    top: 96px;
  }
}

.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.listing-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

@media (min-width: 1024px) {
  .listing-toolbar__filter-trigger {
    display: none;
  }
}

.listing-toolbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
}

.listing-toolbar__sort,
.listing-toolbar__pagesize {
  height: 40px;
  padding: 0 var(--sp-8) 0 var(--sp-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--fs-xs);
  color: var(--ink-900);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel-500) 50%), linear-gradient(135deg, var(--steel-500) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--ink-900);
  background: var(--concrete-100);
}
.active-filter-chip button {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--steel-500);
  cursor: pointer;
}
.active-filter-chip button:hover {
  color: var(--signal-500);
}

.active-filters__clear {
  font-size: var(--fs-xs);
  color: var(--signal-600);
  font-weight: 600;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-10);
  list-style: none;
  padding: 0;
}

.pagination-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  color: var(--steel-500);
}
.pagination-node:hover {
  background: var(--concrete-200);
  color: var(--ink-900);
}

.pagination-node--current {
  background: var(--ink-900);
  color: #fff;
}

.pagination-hint {
  text-align: center;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--steel-500);
}

.listing-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-16) 0;
  border-top: var(--border-hairline);
  max-width: 52ch;
}

.listing-empty__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
}

.listing-empty__body {
  color: var(--steel-500);
  font-size: var(--fs-sm);
}

.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--concrete-300);
}
.no-image svg {
  width: 40%;
  height: 40%;
}

@keyframes cart-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
.cart-trigger.is-pulsing {
  animation: cart-pulse 420ms var(--ease-standard);
}