/* css/blocks/296-theme-industrial.css */
/* ===== 296-theme-industrial.css — timb «industrial» theme =====
   Complete industrial skin for the timb brand, scoped to [data-theme="industrial"]
   → fully inert on non-industrial themes. No !important anywhere.
   Part A = colour/type/radius TOKENS (override base :root); Part B = SVG scene recolours.
   Selector :root[data-theme="industrial"] (0,2,0) beats base :root (0,1,0) regardless
   of block load order — same pattern the built-in "dark" theme uses. */

/* ─────────────────────── A. DESIGN TOKENS ─────────────────────── */
:root[data-theme="industrial"] {
  /* surfaces — cool white / steel-grey, no warm cream */
  --hc-bg: #eef1f3;
  --hc-bg-warm: #e2e7ea;
  --hc-paper: #ffffff;
  --hc-paper-2: #f6f8f9;
  --hc-paper-3: #e8edf0;
  /* ink — graphite */
  --hc-ink: #14181c;
  --hc-ink-2: #232b31;
  --hc-ink-soft: rgba(20, 24, 28, 0.72);
  --hc-ink-mid: rgba(20, 24, 28, 0.55);
  --hc-ink-muted: rgba(20, 24, 28, 0.32);
  /* accent — industrial green */
  --hc-accent: #2e7d46;
  --hc-accent-dark: #1f5c33;
  --hc-accent-soft: rgba(46, 125, 70, 0.10);
  /* "gold" repurposed → green family (keeps premium accents on-brand) */
  --hc-gold: #2e7d46;
  --hc-gold-rgb: 46, 125, 70;
  --hc-accent-rgb: 46, 125, 70;
  --hc-gold-soft: rgba(46, 125, 70, 0.12);
  --hc-gold-border: rgba(46, 125, 70, 0.40);
  --hc-gold-1: #2e7d46;
  --hc-gold-2: #24713b;
  --hc-green: #2e7d46;
  --hc-success: #2e7d46;
  --hc-success-soft: rgba(46, 125, 70, 0.12);
  --hc-muted: rgba(20, 24, 28, 0.62);
  /* hairlines — cool graphite */
  --hc-line: rgba(20, 24, 28, 0.09);
  --hc-line-2: rgba(20, 24, 28, 0.16);
  --hc-line-strong: rgba(20, 24, 28, 0.26);
  /* glow / warm shadow → cool */
  --hc-glow-color: rgba(46, 125, 70, 0.26);
  --hc-shadow-warm: 0 30px 80px -20px rgba(20, 24, 28, 0.30);
  /* typography — geometric grotesk, NO serif */
  --hc-serif: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --hc-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hc-font: var(--hc-sans);
  /* radius — sharp / industrial */
  --hc-r-xs: 2px;
  --hc-r-sm: 3px;
  --hc-r-md: 5px;
  --hc-r-lg: 7px;
  --hc-r-xl: 9px;
  --hc-r-2xl: 12px;
  --hc-r-3xl: 16px;
  /* gradients — steel + green, not sand */
  --hc-hero-grad: linear-gradient(160deg, #e7edf0 0%, #ccd6db 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #e7edf0 0%, #cad5d0 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #cad5d0 0%, #2e7d46 100%);
  --hc-b2b-grad: linear-gradient(135deg, #14181c 0%, #232b31 100%);
  /* storefront (sf-*) mirror */
  --sf-ink: #14181c;
  --sf-muted: rgba(20, 24, 28, 0.62);
  --sf-line: rgba(20, 24, 28, 0.16);
  --sf-line-strong: rgba(46, 125, 70, 0.36);
  --sf-paper: #ffffff;
  --sf-soft: #eef1f3;
  --sf-radius-xl: 12px;
  --sf-radius-lg: 8px;
  --sf-radius-md: 5px;
  --sf-shadow: 0 24px 56px -36px rgba(20, 24, 28, 0.32);
}

/* ─────────────────────── B. SVG SCENE RECOLOURS ─────────────────────── */
/* Category tile media panel — cool grey instead of cream */
[data-theme="industrial"] .hc-cat-sm__media { background: #eef2f4; }
[data-theme="industrial"] .hc-cat-sm { border-color: rgba(20,24,28,0.12); }

/* Category ICONS → flat green/charcoal line-art (animations untouched) */
[data-theme="industrial"] .hc-cat-scene__bg { fill: #eef2f4; }
[data-theme="industrial"] .hc-cat-scene__orb,
[data-theme="industrial"] .hc-cat-scene__shadow { display: none; }
[data-theme="industrial"] .hc-cat-scene__panel,
[data-theme="industrial"] .hc-cat-scene__panel--one,
[data-theme="industrial"] .hc-cat-scene__panel--two,
[data-theme="industrial"] .hc-cat-scene__panel--three {
  fill: none;
  stroke: #2e7d46;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
[data-theme="industrial"] .hc-cat-scene__grain,
[data-theme="industrial"] .hc-cat-scene__edge,
[data-theme="industrial"] .hc-cat-scene__measure,
[data-theme="industrial"] .hc-cat-scene__coating,
[data-theme="industrial"] .hc-cat-scene__route,
[data-theme="industrial"] .hc-cat-scene__spark { stroke: #2e7d46; }
[data-theme="industrial"] .hc-cat-scene__sample,
[data-theme="industrial"] .hc-cat-scene__rail,
[data-theme="industrial"] .hc-cat-scene__drawer,
[data-theme="industrial"] .hc-cat-scene__shelf,
[data-theme="industrial"] .hc-cat-scene__drawer-front,
[data-theme="industrial"] .hc-cat-scene__box {
  fill: none;
  stroke: #14181c;
  stroke-width: 2.2;
  stroke-linejoin: round;
}
[data-theme="industrial"] .hc-cat-scene__blade { fill: none; stroke: #14181c; }
[data-theme="industrial"] .hc-cat-scene__blade-hole { fill: #2e7d46; stroke: none; }
[data-theme="industrial"] .hc-cat-scene__runner,
[data-theme="industrial"] .hc-cat-scene__hinge path { stroke: #2e7d46; }
[data-theme="industrial"] .hc-cat-scene__hinge circle { fill: none; stroke: #14181c; }

/* Sharper cards on the industrial theme */
[data-theme="industrial"] .hc-cat-sm { border-radius: 6px; }
[data-theme="industrial"] .hc-cat-sm__media { border-radius: 6px 6px 0 0; }

/* /catalog root section cards use a warm radial gradient on the media panel */
[data-theme="industrial"] .hc-cat-sections-card__media { background: #eef2f4; }
[data-theme="industrial"] .hc-cat-sections-card:hover .hc-cat-sections-card__media { background: #e7edf0; }

/* Catalog hero band — replace warm cream gradient with cool paper (block 063 hardcodes rgba warm) */
[data-theme="industrial"] .hc-cat-head {
  background:
    radial-gradient(700px 360px at 100% -20%, rgba(var(--hc-gold-rgb), 0.10), transparent 55%),
    linear-gradient(150deg, var(--hc-paper) 0%, var(--hc-paper-3) 100%);
}
[data-theme="industrial"] .hc-cat-head::before { background: radial-gradient(circle, rgba(var(--hc-accent-rgb), 0.12), transparent 64%); }

/* css/blocks/008-foundation-tokens.css */
/* =================== foundation-tokens.css =================== */
:root {
  --hc-paper: #ffffff;
  --hc-paper-2: #fafaf8;
  --hc-paper-3: #f2efe9;
  --hc-bg: #f8f6f3;
  --hc-bg-warm: #f0ebe1;
  --hc-ink: #1a1714;
  --hc-ink-2: #3a3128;
  --hc-ink-soft: rgba(26, 23, 20, 0.7);
  --hc-ink-mid: rgba(26, 23, 20, 0.55);
  --hc-ink-muted: rgba(26, 23, 20, 0.3);
  --hc-accent: #8b7355;
  --hc-accent-dark: #5d4d3a;
  --hc-accent-soft: rgba(139, 115, 85, 0.08);
  --hc-gold: #d4b896;
  --hc-gold-soft: rgba(212, 184, 150, 0.15);
  --hc-gold-border: rgba(212, 184, 150, 0.38);
  --hc-success: #3d6b4f;
  --hc-success-soft: rgba(61, 107, 79, 0.1);
  --hc-warning: #a67426;
  --hc-warning-soft: rgba(166, 116, 38, 0.1);
  --hc-danger: #c9433a;
  --hc-danger-soft: rgba(201, 67, 58, 0.08);
  --hc-info: #3a6a8a;
  --hc-line: rgba(26, 23, 20, 0.08);
  --hc-line-2: rgba(26, 23, 20, 0.15);
  --hc-line-strong: rgba(26, 23, 20, 0.22);
  --hc-sh-1: 0 1px 2px rgba(26, 23, 20, 0.04);
  --hc-sh-2: 0 2px 8px rgba(26, 23, 20, 0.06);
  --hc-sh-3: 0 8px 28px rgba(26, 23, 20, 0.08);
  --hc-sh-4: 0 18px 50px -30px rgba(26, 23, 20, 0.28);
  --hc-sh-card: 0 18px 50px -44px rgba(26, 23, 20, 0.55), 0 1px 0 rgba(255, 255, 255, 0.9);
  --hc-sh-lift: 0 30px 72px -46px rgba(26, 23, 20, 0.58);
  --hc-r-xs: 4px;
  --hc-r-sm: 8px;
  --hc-r-md: 12px;
  --hc-r-lg: 16px;
  --hc-r-xl: 20px;
  --hc-r-2xl: 24px;
  --hc-r-3xl: 32px;
  --hc-r-pill: 9999px;
  --hc-sp-1: 4px;
  --hc-sp-2: 8px;
  --hc-sp-3: 12px;
  --hc-sp-4: 16px;
  --hc-sp-5: 24px;
  --hc-sp-6: 32px;
  --hc-sp-7: 48px;
  --hc-sp-8: 64px;
  --hc-sp-9: 96px;
  --hc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --hc-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hc-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --hc-fs-xxs: 10px;
  --hc-fs-xs: 11px;
  /* Витрина читается с расстояния вытянутой руки, а не с макета в редакторе:
     14px основного текста заметно мелко, подписи в 12px — на грани. Подняли на
     ступень; крупные размеры не трогали, чтобы не поехала вся вертикаль. */
  --hc-fs-sm: 13px;
  --hc-fs-md: 16px;
  --hc-fs-lg: 16px;
  --hc-fs-xl: 18px;
  --hc-fs-2xl: 22px;
  --hc-fs-3xl: 28px;
  --hc-fs-4xl: 36px;
  --hc-fs-5xl: 48px;
  --hc-fs-6xl: 64px;
  --hc-lh-tight: 1.1;
  --hc-lh-snug: 1.25;
  --hc-lh-base: 1.5;
  --hc-lh-loose: 1.7;
  --hc-ls-tight: -0.02em;
  --hc-ls-normal: 0;
  --hc-ls-wide: 0.06em;
  --hc-ls-ultra: 0.14em;
  --hc-wrap: 1280px;
  --hc-wrap-wide: 1440px;
  /* Reading measure for article-style pages. Shared so a page header can
     line up with the article column instead of guessing the same number. */
  --hc-measure: 760px;
  --hc-hdr-h: 68px;
  --hc-dur-fast: 140ms;
  --hc-dur-base: 220ms;
  --hc-dur-slow: 360ms;
  --hc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hc-z-header: 50;
  --hc-z-drawer: 80;
  --hc-z-modal: 100;
  --hc-z-toast: 120;
  --hc-z-tooltip: 140;
}

:root[data-theme="dark"] {
  --hc-paper: #1a1714;
  --hc-paper-2: #221d18;
  --hc-paper-3: #2a231e;
  --hc-bg: #14110e;
  --hc-bg-warm: #1f1a16;
  --hc-ink: #f5f2ec;
  --hc-ink-2: #e0d9cc;
  --hc-ink-soft: rgba(245, 242, 236, 0.7);
  --hc-ink-mid: rgba(245, 242, 236, 0.55);
  --hc-ink-muted: rgba(245, 242, 236, 0.3);
  --hc-line: rgba(245, 242, 236, 0.08);
  --hc-line-2: rgba(245, 242, 236, 0.14);
  --hc-line-strong: rgba(245, 242, 236, 0.24);
  --hc-accent-soft: rgba(212, 184, 150, 0.14);
  --hc-gold-soft: rgba(212, 184, 150, 0.1);
  --hc-gold-border: rgba(212, 184, 150, 0.3);
}

[data-theme="warm-sand"],
:root {
  --hc-bg: #f8f6f3;
  --hc-bg-warm: #f0ebe1;
  --hc-paper: #ffffff;
  --hc-paper-2: #fafaf8;
  --hc-paper-3: #f2efe9;
  --hc-ink: #1a1714;
  --hc-ink-2: #3a3128;
  --hc-ink-soft: rgba(26, 23, 20, 0.7);
  --hc-ink-mid: rgba(26, 23, 20, 0.55);
  --hc-ink-muted: rgba(26, 23, 20, 0.3);
  --hc-accent: #8b7355;
  --hc-accent-dark: #5d4d3a;
  --hc-accent-soft: rgba(139, 115, 85, 0.08);
  --hc-gold: #d4b896;
  --hc-gold-soft: rgba(212, 184, 150, 0.15);
  --hc-gold-border: rgba(212, 184, 150, 0.38);
  --hc-success: #3d6b4f;
  --hc-success-soft: rgba(61, 107, 79, 0.1);
  --hc-line: rgba(26, 23, 20, 0.08);
  --hc-line-2: rgba(26, 23, 20, 0.15);
  --hc-line-strong: rgba(26, 23, 20, 0.22);
  --hc-hero-grad: linear-gradient(160deg, #f3e9d6 0%, #e8dfd0 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #f3e9d6 0%, #e8dfd0 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #ede2c9 0%, #d4b896 100%);
  --hc-b2b-grad: linear-gradient(135deg, #2c2820 0%, #4a3f30 100%);
  --hc-glow-color: rgba(212, 184, 150, 0.28);
  --hc-shadow-warm: 0 30px 80px -20px rgba(139, 115, 85, 0.3);
}

[data-theme="midnight-brass"] {
  --hc-bg: #14110e;
  --hc-bg-warm: #1f1a16;
  --hc-paper: #221d18;
  --hc-paper-2: #2a2520;
  --hc-paper-3: #322b25;
  --hc-ink: #f5f0e8;
  --hc-ink-2: #e0d9cc;
  --hc-ink-soft: rgba(245, 240, 232, 0.72);
  --hc-ink-mid: rgba(245, 240, 232, 0.55);
  --hc-ink-muted: rgba(245, 240, 232, 0.3);
  --hc-accent: #d4b896;
  --hc-accent-dark: #b8966a;
  --hc-accent-soft: rgba(212, 184, 150, 0.1);
  --hc-gold: #d4b896;
  --hc-gold-soft: rgba(212, 184, 150, 0.1);
  --hc-gold-border: rgba(212, 184, 150, 0.3);
  --hc-success: #6ba480;
  --hc-success-soft: rgba(107, 164, 128, 0.15);
  --hc-line: rgba(245, 240, 232, 0.08);
  --hc-line-2: rgba(245, 240, 232, 0.14);
  --hc-line-strong: rgba(245, 240, 232, 0.24);
  --hc-hero-grad: linear-gradient(160deg, #2a2520 0%, #3d3329 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #2a2520 0%, #3d3329 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #3d3329 0%, #5a4a3a 100%);
  --hc-b2b-grad: linear-gradient(135deg, #d4b896 0%, #b8966a 100%);
  --hc-glow-color: rgba(212, 184, 150, 0.35);
  --hc-shadow-warm: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}

[data-theme="champagne-gold"] {
  --hc-bg: #fafaf7;
  --hc-bg-warm: #f5f1e8;
  --hc-paper: #ffffff;
  --hc-paper-2: #fbf9f3;
  --hc-paper-3: #f3eee0;
  --hc-ink: #2a2520;
  --hc-ink-2: #3d3329;
  --hc-ink-soft: rgba(42, 37, 32, 0.72);
  --hc-ink-mid: rgba(42, 37, 32, 0.55);
  --hc-ink-muted: rgba(42, 37, 32, 0.28);
  --hc-accent: #c9a961;
  --hc-accent-dark: #a8893f;
  --hc-accent-soft: rgba(201, 169, 97, 0.1);
  --hc-gold: #d4b061;
  --hc-gold-soft: rgba(212, 176, 97, 0.16);
  --hc-gold-border: rgba(212, 176, 97, 0.42);
  --hc-success: #4a7858;
  --hc-success-soft: rgba(74, 120, 88, 0.1);
  --hc-line: rgba(42, 37, 32, 0.07);
  --hc-line-2: rgba(42, 37, 32, 0.14);
  --hc-line-strong: rgba(42, 37, 32, 0.22);
  --hc-hero-grad: linear-gradient(160deg, #f7f0d9 0%, #e8d8a8 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #f7f0d9 0%, #e8d8a8 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #f0e3b0 0%, #c9a961 100%);
  --hc-b2b-grad: linear-gradient(135deg, #2a2520 0%, #3d3329 100%);
  --hc-glow-color: rgba(212, 176, 97, 0.32);
  --hc-shadow-warm: 0 30px 80px -20px rgba(168, 137, 63, 0.28);
}

[data-theme="forest-premium"] {
  --hc-bg: #f4f3ec;
  --hc-bg-warm: #e8e8d8;
  --hc-paper: #ffffff;
  --hc-paper-2: #fafaf2;
  --hc-paper-3: #ededdc;
  --hc-ink: #1d2418;
  --hc-ink-2: #2c3826;
  --hc-ink-soft: rgba(29, 36, 24, 0.72);
  --hc-ink-mid: rgba(29, 36, 24, 0.55);
  --hc-ink-muted: rgba(29, 36, 24, 0.3);
  --hc-accent: #5a7a5a;
  --hc-accent-dark: #3d5a3d;
  --hc-accent-soft: rgba(90, 122, 90, 0.1);
  --hc-gold: #c9a961;
  --hc-gold-soft: rgba(201, 169, 97, 0.14);
  --hc-gold-border: rgba(201, 169, 97, 0.38);
  --hc-success: #5a7a5a;
  --hc-success-soft: rgba(90, 122, 90, 0.12);
  --hc-line: rgba(29, 36, 24, 0.08);
  --hc-line-2: rgba(29, 36, 24, 0.15);
  --hc-line-strong: rgba(29, 36, 24, 0.24);
  --hc-hero-grad: linear-gradient(160deg, #d8e0c8 0%, #b8c8a0 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #d8e0c8 0%, #b8c8a0 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #b8c8a0 0%, #5a7a5a 100%);
  --hc-b2b-grad: linear-gradient(135deg, #1d2418 0%, #2c3826 100%);
  --hc-glow-color: rgba(201, 169, 97, 0.3);
  --hc-shadow-warm: 0 30px 80px -20px rgba(61, 90, 61, 0.3);
}

[data-theme="bordeaux-lux"] {
  --hc-bg: #f5f0ea;
  --hc-bg-warm: #ede2d4;
  --hc-paper: #ffffff;
  --hc-paper-2: #faf3eb;
  --hc-paper-3: #f0e3d2;
  --hc-ink: #2a1818;
  --hc-ink-2: #3d2828;
  --hc-ink-soft: rgba(42, 24, 24, 0.72);
  --hc-ink-mid: rgba(42, 24, 24, 0.55);
  --hc-ink-muted: rgba(42, 24, 24, 0.3);
  --hc-accent: #8b3a3a;
  --hc-accent-dark: #6b2828;
  --hc-accent-soft: rgba(139, 58, 58, 0.08);
  --hc-gold: #c9a961;
  --hc-gold-soft: rgba(201, 169, 97, 0.14);
  --hc-gold-border: rgba(201, 169, 97, 0.38);
  --hc-success: #4a7858;
  --hc-success-soft: rgba(74, 120, 88, 0.1);
  --hc-line: rgba(42, 24, 24, 0.08);
  --hc-line-2: rgba(42, 24, 24, 0.15);
  --hc-line-strong: rgba(42, 24, 24, 0.24);
  --hc-hero-grad: linear-gradient(160deg, #f0d8c0 0%, #d8a890 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #f0d8c0 0%, #c89888 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #c89888 0%, #8b3a3a 100%);
  --hc-b2b-grad: linear-gradient(135deg, #2a1818 0%, #3d2828 100%);
  --hc-glow-color: rgba(139, 58, 58, 0.28);
  --hc-shadow-warm: 0 30px 80px -20px rgba(107, 40, 40, 0.3);
}

[data-theme="onyx-pearl"] {
  --hc-bg: #fbfaf8;
  --hc-bg-warm: #f4f1ea;
  --hc-paper: #ffffff;
  --hc-paper-2: #faf8f3;
  --hc-paper-3: #f0ede5;
  --hc-ink: #0a0a0a;
  --hc-ink-2: #1a1a1a;
  --hc-ink-soft: rgba(10, 10, 10, 0.72);
  --hc-ink-mid: rgba(10, 10, 10, 0.55);
  --hc-ink-muted: rgba(10, 10, 10, 0.3);
  --hc-accent: #1a1a1a;
  --hc-accent-dark: #000000;
  --hc-accent-soft: rgba(10, 10, 10, 0.06);
  --hc-gold: #b8a48f;
  --hc-gold-soft: rgba(184, 164, 143, 0.14);
  --hc-gold-border: rgba(184, 164, 143, 0.38);
  --hc-success: #2c5a3a;
  --hc-success-soft: rgba(44, 90, 58, 0.08);
  --hc-line: rgba(10, 10, 10, 0.07);
  --hc-line-2: rgba(10, 10, 10, 0.14);
  --hc-line-strong: rgba(10, 10, 10, 0.24);
  --hc-hero-grad: linear-gradient(160deg, #ede9e0 0%, #d4cfc4 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #ede9e0 0%, #c8c4b8 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #c8c4b8 0%, #1a1a1a 100%);
  --hc-b2b-grad: linear-gradient(135deg, #0a0a0a 0%, #2a2520 100%);
  --hc-glow-color: rgba(184, 164, 143, 0.3);
  --hc-shadow-warm: 0 30px 80px -20px rgba(0, 0, 0, 0.4);
}

:root {
  --cookie-banner-h: 96px;
  --gx: 50%;
  --gy: 50%;
  --parallaxY: 0px;
  --hc-bg-2: var(--hc-paper-3);
  --hc-font: var(--hc-sans);
  --hc-gold-1: #d4b896;
  --hc-gold-2: #b8966a;
  --hc-green: #3d6b4f;
  --hc-muted: rgba(26, 23, 20, 0.66);
  --hc-red: #8b3a2e;
  --sf-ink: #1a1714;
  --sf-muted: rgba(26, 23, 20, 0.66);
  --sf-line: rgba(139, 115, 85, 0.24);
  --sf-line-strong: rgba(139, 115, 85, 0.36);
  --sf-paper: #ffffff;
  --sf-soft: #f8f3e8;
  --sf-radius-xl: 24px;
  --sf-radius-lg: 18px;
  --sf-radius-md: 14px;
  --sf-shadow: 0 24px 56px -36px rgba(27, 20, 13, 0.34);
}

:root {
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-52: 52px;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --lh-1: 1;
  --lh-1-1: 1.1;
  --lh-1-2: 1.2;
  --lh-1-4: 1.4;
  --lh-1-5: 1.5;
  --lh-1-6: 1.6;
  --c-primary: #1a1716;
  --c-primary-dark: #0f0d0b;
  --c-primary-light: #2d2420;
  --c-white: #fffcf7;
  --c-bg: #f3f1ef;
  --c-bg-light: #fafaf8;
  --c-border: #e8e4e0;
  --c-text: #1a1716;
  --c-text-secondary: #6b6258;
  --c-text-muted: #a6a29c;
  --c-success: #3d6b4f;
  --c-warning: #b8731c;
  --c-error: #d63031;
  --c-error-light: #ff7675;
  --c-accent: #d4af37;
  --c-accent-warm: #8b7355;
  --sf-gold: #b8966a;
  --sf-red: #8b3a2e;
  --sh-sm: 0 2px 8px rgba(27, 20, 13, 0.06);
  --sh-md: 0 4px 16px rgba(27, 20, 13, 0.1);
  --sh-lg: 0 8px 24px rgba(27, 20, 13, 0.12);
  --sh-xl: 0 12px 32px rgba(27, 20, 13, 0.15);
  --sh-2xl: 0 16px 48px rgba(27, 20, 13, 0.18);
  --tr-fast: 0.15s ease-out;
  --tr-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  --br-4: 4px;
  --br-6: 6px;
  --br-8: 8px;
  --br-12: 12px;
  --br-16: 16px;
  --br-full: 9999px;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
}

:root { --hc-gold-rgb: 212, 184, 150; --hc-accent-rgb: 139, 115, 85; }

/* css/blocks/009-foundation-base.css */
/* =================== foundation-base.css =================== */
/* Base reset, typography baseline, form primitives, and shared micro-utilities. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* clip (NOT hidden): overflow-x:hidden makes the root a scroll container,
     which silently breaks position:sticky for the header on every page.
     clip contains horizontal overflow without establishing that container. */
  overflow-x: clip;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #f5f2ec;
  color: #1a1714;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--hc-sans);
  font-size: var(--hc-fs-md);
  line-height: var(--hc-lh-base);
  color: var(--hc-ink);
  background: var(--hc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-y: visible;
}

body > main {
  flex: 1 0 auto;
}

body > .hc-ftr,
body > footer {
  flex-shrink: 0;
  margin-top: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hc-serif);
  font-weight: 500;
  line-height: var(--hc-lh-tight);
  letter-spacing: var(--hc-ls-tight);
  color: var(--hc-ink);
}

h1 { font-size: var(--hc-fs-4xl); }
h2 { font-size: var(--hc-fs-3xl); }
h3 { font-size: var(--hc-fs-2xl); }
h4 { font-size: var(--hc-fs-xl); }
h5 { font-size: var(--hc-fs-lg); }

h6 {
  font-size: var(--hc-fs-md);
  font-family: var(--hc-sans);
  text-transform: uppercase;
  letter-spacing: var(--hc-ls-wide);
}

p { line-height: var(--hc-lh-base); }
small { font-size: var(--hc-fs-xs); }

code,
kbd,
samp,
pre {
  font-family: var(--hc-mono);
  font-size: 0.94em;
}

strong,
b { font-weight: 600; }

em,
i { font-style: italic; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hc-dur-fast) var(--hc-ease);
}

a:hover { color: var(--hc-accent); }

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inline icon SVGs without explicit dimensions must not stretch to the full
   width of their flex/grid container. Decorative/art SVGs that need custom
   geometry keep their component class rules; bare icons get a safe 1em box.
   Wrapped in :where() so this stays a zero-specificity fallback: the bare
   selector scores (0,3,1) — three attribute :not()s — which outranks ordinary
   component rules like `.ldsp-logo-mark svg { width: 54px }` (0,1,1) and was
   shrinking the header logo to 18px, the phone icon to 14px and every product
   tile action icon to 19px. */
:where(svg:not([width]):not([height]):not([class])) {
  width: 1em;
  height: 1em;
}

svg { fill: currentColor; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
}

input,
textarea,
select {
  background: transparent;
  border: 0;
}

textarea { resize: vertical; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--hc-accent);
  outline-offset: 2px;
  border-radius: var(--hc-r-sm);
}

::selection {
  background: var(--hc-gold-soft);
  color: var(--hc-ink);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: var(--hc-line-2);
  border-radius: var(--hc-r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hc-line-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* css/blocks/010-foundation-forms.css */
/* =================== foundation-forms.css =================== */
/* Global form primitives. Keep it minimal and token-driven. */

/* Поле с классом .hc-input описано своим модулем (101-hc-input.css) целиком.
   Здесь — только поля без класса. Раньше оба правила попадали в один и тот
   же input, и селектор по типу перебивал класс: у поля e-mail получалась
   высота 50px против 46px у соседей, потому что тип совпал, а у «Имя» и
   «Телефон» — нет. Отсюда и разнобой в форме заказа. */
input[type="text"]:not(.hc-input),
input[type="email"]:not(.hc-input),
input[type="number"]:not(.hc-input),
input[type="search"]:not(.hc-input),
textarea:not(.hc-input),
select:not(.hc-select) {
  width: 100%;
  padding: var(--hc-sp-3) var(--hc-sp-4);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-sm);
  font-size: var(--hc-fs-lg);
  line-height: var(--hc-lh-base);
  font-family: inherit;
  color: var(--hc-ink);
  background: var(--hc-paper);
  transition: all var(--hc-dur-fast) var(--hc-ease-out);
  will-change: border-color, box-shadow;
}

input[type="text"]:not(.hc-input):focus,
input[type="email"]:not(.hc-input):focus,
input[type="number"]:not(.hc-input):focus,
input[type="search"]:not(.hc-input):focus,
textarea:not(.hc-input):focus,
select:not(.hc-select):focus {
  border-color: var(--hc-ink);
  box-shadow: 0 0 0 3px rgba(26, 23, 20, 0.06);
  background: var(--hc-paper);
}

input::placeholder {
  color: var(--hc-ink-muted);
}

.hc-dadata-wrap {
  position: relative;
}

.hc-dadata-dd {
  position: absolute;
  z-index: 50;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: var(--hc-paper);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-sm);
  box-shadow: var(--hc-sh-3);
}

.hc-dadata-dd[hidden] {
  display: none;
}

.hc-dadata-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--hc-line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--hc-fs-sm);
  text-align: left;
  cursor: pointer;
}

.hc-dadata-item:hover,
.hc-dadata-item:focus-visible {
  background: var(--hc-accent-soft);
}

.is-hc-empty {
  display: none !important;
}

.is-hc-disabled-tab {
  opacity: 0.45;
  pointer-events: none;
}

input.is-hc-success,
.hc-input.is-hc-success,
.hc-field.is-hc-success {
  background: var(--hc-success);
  border-color: var(--hc-success);
}

.is-hc-fading-count {
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.is-hc-fading-count.is-visible {
  opacity: 1;
}

[data-progress-visual="0"] { width: 0%; }
[data-progress-visual="5"] { width: 5%; }
[data-progress-visual="10"] { width: 10%; }
[data-progress-visual="15"] { width: 15%; }
[data-progress-visual="20"] { width: 20%; }
[data-progress-visual="25"] { width: 25%; }
[data-progress-visual="30"] { width: 30%; }
[data-progress-visual="35"] { width: 35%; }
[data-progress-visual="40"] { width: 40%; }
[data-progress-visual="45"] { width: 45%; }
[data-progress-visual="50"] { width: 50%; }
[data-progress-visual="55"] { width: 55%; }
[data-progress-visual="60"] { width: 60%; }
[data-progress-visual="65"] { width: 65%; }
[data-progress-visual="70"] { width: 70%; }
[data-progress-visual="75"] { width: 75%; }
[data-progress-visual="80"] { width: 80%; }
[data-progress-visual="85"] { width: 85%; }
[data-progress-visual="90"] { width: 90%; }
[data-progress-visual="95"] { width: 95%; }
[data-progress-visual="100"] { width: 100%; }

/* css/blocks/010-foundation-utilities.css */
/* =================== foundation-utilities.css =================== */
/* Cross-page utility selectors and attribute hooks. */

[x-cloak] {
  display: none !important;
}

[data-fx-glow] {
  position: relative;
  isolation: isolate;
}

[data-fx-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(199, 155, 96, 0.14),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

[data-fx-glow]:hover::before {
  opacity: 1;
}

[data-fx-glow] > * {
  position: relative;
  z-index: 1;
}

[data-fx-img-lift] img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}

[data-fx-img-lift]:hover img {
  transform: scale(1.04);
  filter: brightness(1.02) saturate(1.05);
}

/* A failed fragment never fills, so without the [data-hx-failed] guard the
   shimmer below would keep pulsing forever on a request that already errored. */
[hx-trigger="load"]:empty:not(input, select, textarea, button):not([data-hx-failed]):not([data-hx-empty-collapse]),
[hx-get]:empty:not(input, select, textarea, button):not([data-hx-failed]):not([data-hx-empty-collapse]) {
  min-height: 80px;
  background: linear-gradient(
    90deg,
    rgba(248, 244, 237, 0.3),
    rgba(248, 244, 237, 0.7),
    rgba(248, 244, 237, 0.3)
  );
  background-size: 200% 100%;
  animation: hz-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* Optional fragments can legitimately return an empty successful response.
   Such a slot must not turn into a permanent skeleton or reserve whitespace. */
[data-hx-empty-collapse]:empty {
  display: none;
}

[data-fav-stat-num] {
  margin-right: 4px;
}

input[type="hidden"] {
  display: none;
}

[class*="stat"] strong,
[class*="kpi"] strong,
[class*="facts"] strong,
.premium-surface > div > strong + span,
.premium-surface > div > b + small {
  display: block;
}

[data-fx-parallax] {
  transform: translate3d(0, var(--parallaxY, 0px), 0);
  will-change: transform;
  transition: none;
}

[data-phone-reveal] {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

[data-fx-draw] path,
[data-fx-draw] circle,
[data-fx-draw] line {
  stroke-dasharray: 100%;
  stroke-dashoffset: 100%;
}

.hc-countup {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 920px) {
  section + section,
  .hc-sec + .hc-sec {
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Yandex.Metrika <noscript> fallback pixel must not affect layout. */
.ym-noscript-pixel {
  position: absolute;
  left: -9999px;
}

/* Message left behind when a lazy fragment fails (see main.js strand handler). */
.hc-frag-failed { margin: 0; padding: 14px 0; color: #667085; font-size: 14px; }

/* Keyboard users had to tab through the whole header and mega menu on every
   page before reaching content. Off-screen until focused, then visible. */
.hc-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
  color: #1a1a1a;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .45);
}
.hc-skiplink:focus {
  left: 0;
}

/* css/blocks/010-foundation-motion.css */
/* =================== foundation-motion.css =================== */
/* Centralized keyframes to avoid duplicate animation-name declarations across blocks. */

@keyframes hcToastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes hcSpin { to { transform: rotate(360deg); } }

@keyframes hcSkel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes hcShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes hcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hcSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes hc-empty-float {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(27, 20, 13, 0.1);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(27, 20, 13, 0.16);
  }
}

@keyframes hcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes hzTileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes hz-orb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3%, -4%); }
}

@keyframes hcPhSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hcPhSpinR {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes hcPhDot {
  0%, 100% { r: 2; opacity: 0.85; }
  50% { r: 2.8; opacity: 1; }
}

@keyframes hcPhSchema {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes hc-svg-draw {
  from { stroke-dashoffset: 100%; }
  to { stroke-dashoffset: 0; }
}

@keyframes hc-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes hc-pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes hc-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 40px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-r, 40px)) rotate(-360deg); }
}

@keyframes hc-isearch-pop {
  from { transform: translateY(-12px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes hc-livechat-pop {
  from { transform: scale(0.92) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes hcHingeSwing {
  0%, 15% { transform: rotate(0deg); }
  45%, 60% { transform: rotate(-108deg); }
  92%, 100% { transform: rotate(0deg); }
}

@keyframes hcDrawerSlide {
  0%, 10% { transform: translateX(0); }
  45%, 55% { transform: translateX(140px); }
  90%, 100% { transform: translateX(0); }
}

@keyframes hcMotionFade {
  0%, 10% { opacity: 0.5; }
  45%, 55% { opacity: 0; }
  90%, 100% { opacity: 0.5; }
}

@keyframes hcLiftRaise {
  0%, 12% { transform: rotate(0deg); }
  42%, 58% { transform: rotate(-85deg); }
  88%, 100% { transform: rotate(0deg); }
}

@keyframes hcRailSlide {
  0%, 45% { transform: translateX(0); }
  55%, 100% { transform: translateX(110px); }
}

@keyframes hcTipOnPush {
  0%, 25% { transform: translate(0, 0); opacity: 0; }
  30%, 40% { transform: translate(0, -12px); opacity: 1; }
  45%, 50% { transform: translate(0, 0); opacity: 0.7; }
  55%, 100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes hcTipOnSpring {
  0%, 48% { transform: translateX(0); }
  52%, 75% { transform: translateX(30px); }
  85%, 100% { transform: translateX(0); }
}

@keyframes hcCatGlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes hcCatPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}

@keyframes hcCatArm {
  0%, 85% { transform: rotate(0deg); }
  92%, 100% { transform: rotate(-4deg); }
}

@keyframes hcCatAvntos {
  0%, 18% { transform: rotate(0deg); }
  48%, 62% { transform: rotate(-70deg); }
}

@keyframes hcCatTipOnDrawer {
  0%, 45% { transform: translateX(0); }
  55%, 70% { transform: translateX(32px); }
  80%, 100% { transform: translateX(0); }
}

@keyframes hcCatPush {
  0%, 30% { opacity: 0; transform: translate(0, 0); }
  40%, 50% { opacity: 1; transform: translate(0, -8px); }
  58%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes hcCatBearings {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@keyframes hcCatShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

@keyframes hcCatArrow {
  0%, 30% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(8px); }
  70%, 100% { opacity: 0.5; transform: translateX(0); }
}

@keyframes hcCatLed {
  0%, 100% { fill: #3d6b4f; }
  50% { fill: #7dbf96; }
}

@keyframes hcCatCable {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 8; }
}

@keyframes hcCatSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hc-hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes hc-pcard-stock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.4); }
}

@keyframes hc-fx-auto-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes hcCheckDraw {
  from { stroke-dashoffset: 100%; }
  to { stroke-dashoffset: 0; }
}

@keyframes hcTimelinePulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(214, 48, 49, 0.3); }
  50% { box-shadow: 0 4px 12px rgba(214, 48, 49, 0.5); }
}

@keyframes salePulse {
  0%, 100% { background: linear-gradient(90deg, transparent 0%, rgba(214, 48, 49, 0.05) 100%); }
  50% { background: linear-gradient(90deg, transparent 0%, rgba(214, 48, 49, 0.1) 100%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes hcModalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@keyframes hcModalSlideUp {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes hcTabSlide {
  from { width: 0; left: 50%; right: 50%; }
  to { width: 100%; left: 0; right: 0; }
}

@keyframes hcGlowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(var(--hc-accent-rgb), 0.3); }
  50% { text-shadow: 0 0 30px rgba(var(--hc-accent-rgb), 0.6); }
}

@keyframes hcPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(61, 107, 79, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(61, 107, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 107, 79, 0); }
}

@keyframes hcModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hcModalRise {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes hcBlogRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hcOrbitFloat {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes hcHaloPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes hc-acc-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hc-isearch-shimmer {
  0% { background-position: -220px 0; }
  100% { background-position: calc(100% + 220px) 0; }
}

/* css/blocks/292-promo-bar.css */
/* =================== promo-bar.css =================== */
/* Contextual top announcement bar, above the sticky header (scrolls away on
   scroll). Slim, dark, premium; gold-accented icon + emphasis. Dismissible. */

.hc-promo-bar {
  background: var(--hc-ink, #1a1714);
  color: #fdf8ef;
  font-size: 12.5px;
}

.hc-promo-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.hc-promo-bar__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
  line-height: 1.35;
  color: rgba(253, 248, 240, 0.92);
}

.hc-promo-bar__ico {
  flex: 0 0 auto;
  color: var(--hc-gold, var(--hc-gold));
}

.hc-promo-bar b {
  color: var(--hc-gold, var(--hc-gold));
  font-weight: 600;
}

.hc-promo-bar__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(253, 248, 240, 0.55);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.hc-promo-bar__close:hover {
  color: #fdf8ef;
  background: rgba(253, 248, 240, 0.1);
}

@media (max-width: 640px) {
  .hc-promo-bar {
    font-size: 11.5px;
  }
  .hc-promo-bar__inner {
    padding-left: 8px;
    padding-right: 34px;
  }
  .hc-promo-bar__text {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .hc-promo-bar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* css/blocks/285-hc-trust-ico.css */
/* =================== hc-trust — animated trust teasers ===================
   Used in PDP buy-box (.hc-pdp-m1__trust) and quick-view (.hc-qv__assurance).
   Each teaser = inline SVG icon (stroke-drawn on reveal) + short text.
   Per-category text/icon are chosen server-side (templating.type_trust_badges). */

.hc-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.25;
  color: rgba(26, 23, 20, 0.64);
}

.hc-trust-ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--hc-gold, #b08a4f);
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: hc-trust-draw 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes hc-trust-draw {
  to { stroke-dashoffset: 0; }
}

/* stagger the draw-in across a teaser row */
.hc-trust:nth-of-type(2) .hc-trust-ico { animation-delay: 0.11s; }
.hc-trust:nth-of-type(3) .hc-trust-ico { animation-delay: 0.22s; }
.hc-trust:nth-of-type(4) .hc-trust-ico { animation-delay: 0.33s; }

/* gentle idle lift when the teaser group is hovered */
.hc-pdp-m1__trust:hover .hc-trust-ico,
.hc-qv__assurance:hover .hc-trust-ico {
  stroke-dashoffset: 0;
  animation: hc-trust-pulse 1.7s ease-in-out infinite;
}

@keyframes hc-trust-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-trust-ico,
  .hc-pdp-m1__trust:hover .hc-trust-ico,
  .hc-qv__assurance:hover .hc-trust-ico {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* css/blocks/288-hc-cart-fly.css */
/* =================== hc-cart-fly — add-to-cart micro-animation ===================
   A gilded dot arcs from the clicked "В корзину" button to the header cart icon,
   which gives a satisfying bump. JS (assets/main.js::animateCartFly) sets the
   --hc-fly-x0/y0 (source) and --hc-fly-x1/y1 (cart) coordinates as absolute px. */

.hc-cart-fly {
  position: fixed;
  left: 0;
  top: 0;
  margin: -9px 0 0 -9px;
  z-index: 3000;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f3e1c0, var(--hc-accent, var(--hc-accent)));
  box-shadow: 0 6px 18px rgba(var(--hc-accent-rgb), 0.45);
  pointer-events: none;
  will-change: transform, opacity;
  animation: hc-cart-fly 0.72s cubic-bezier(0.55, 0, 0.3, 1) forwards;
}

@keyframes hc-cart-fly {
  0% {
    transform: translate(var(--hc-fly-x0, 0), var(--hc-fly-y0, 0)) scale(1);
    opacity: 1;
  }
  55% {
    transform: translate(
      calc((var(--hc-fly-x0, 0) + var(--hc-fly-x1, 0)) / 2),
      calc(var(--hc-fly-y0, 0) - 46px)
    ) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translate(var(--hc-fly-x1, 0), var(--hc-fly-y1, 0)) scale(0.28);
    opacity: 0;
  }
}

/* Cart icon "receives" the item */
.hc-hdr__ico--cart-bump {
  animation: hc-cart-bump 0.5s ease;
}

@keyframes hc-cart-bump {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.28); }
  60% { transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .hc-cart-fly { display: none; }
  .hc-hdr__ico--cart-bump { animation: none; }
}

/* css/blocks/289-hc-list-multiadd.css */
/* =================== hc-list-multiadd — bulk add in catalog LIST view ===========
   In list view each card gets a select checkbox; a floating bar adds all
   selected products at once via /cart/batch-add. JS: assets/main.js. */

.hc-list-pick { display: none; }

#cat-results.hc-multiadd-on .hc-pgrid[data-view="list"] .pcard { position: relative; }
#cat-results.hc-multiadd-on .hc-pgrid[data-view="list"] .pcard .hc-list-pick {
  display: inline-flex;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid var(--hc-line, rgba(141, 109, 71, 0.3));
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 23, 20, 0.1);
}
.hc-list-pick input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--hc-accent, var(--hc-accent));
  cursor: pointer;
}

/* floating bulk-add bar */
.hc-bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 160%);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: 14px;
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #fff);
  box-shadow: 0 18px 44px rgba(26, 23, 20, 0.34);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.5, 0, 0.3, 1), opacity 0.28s ease;
  pointer-events: none;
}
.hc-bulk-bar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.hc-bulk-bar__count {
  font: 600 14px/1 var(--hc-sans, "Outfit", sans-serif);
  white-space: nowrap;
}
.hc-bulk-bar__add {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--hc-gold-1, var(--hc-gold)), var(--hc-accent, var(--hc-accent)));
  color: #1a1714;
  font: 600 13px/1 var(--hc-sans, "Outfit", sans-serif);
  cursor: pointer;
  white-space: nowrap;
}
.hc-bulk-bar__add:disabled { opacity: 0.6; cursor: default; }
.hc-bulk-bar__clear {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: 500 13px/1 var(--hc-sans, "Outfit", sans-serif);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .hc-bulk-bar { transition: opacity 0.2s ease; }
}

/* css/blocks/011-cookie-banner.css */
/* Cookie consent banner. */
.cookie-banner {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  /* Above the page chrome that can sit over it. At 70 the product page's tab
     nav (sticky, 80) covered "Принять все" and "Только выбранные" while
     leaving "Отклонить" clickable — measured at 390x664 by hit-test. 130 is
     above the sticky bars (120) and below tooltips (140); modals do not
     collide because body.hc-modal-open hides the banner outright. */
  z-index: 130;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

/* Место под баннером резервирует страница — иначе конец её содержимого лежит
   под ним, пока человек не ответит. Тем же числом пользуются те, кто прибит к
   низу окна сам: полоса покупки на карточке поднимается на высоту баннера. Как
   только согласие дано, класс уходит — и то и другое вместе с ним. */
body.cookie-banner-open {
  --cookie-banner-offset: calc(var(--cookie-banner-h, 96px) + 12px);
  padding-bottom: var(--cookie-banner-offset);
}

body.hc-modal-open .cookie-banner,
body:has(.share-cart-modal) .cookie-banner {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.hc-modal-open.cookie-banner-open,
body.cookie-banner-open:has(.share-cart-modal) {
  padding-bottom: 0;
}

.cookie-banner__inner {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 10px 12px;
  background: rgba(255, 252, 247, 0.96);
  border: 1px solid rgba(141, 109, 71, 0.22);
  border-radius: 14px;
  box-shadow: 0 14px 44px -30px rgba(26, 23, 20, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}

.cookie-banner__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.cookie-banner__body strong {
  color: var(--hc-ink, #1a1714);
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.cookie-banner__body p {
  display: -webkit-box;
  margin: 0;
  max-width: 68ch;
  overflow: hidden;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.70));
  font-size: 11px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cookie-banner__body a {
  color: var(--hc-accent-dark, #7c5a33);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner__details {
  margin-top: 0;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.70));
  font-size: 12px;
}

.cookie-banner__details summary {
  width: max-content;
  cursor: pointer;
  font-family: var(--hc-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-banner__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 4px 10px 0 0;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.70));
}

.cookie-banner__toggle input {
  accent-color: var(--hc-ink, #1a1714);
}

.cookie-banner__toggle small {
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}

.cookie-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cookie-banner .btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(26, 23, 20, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  font-family: var(--hc-sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
}

.cookie-banner .btn--primary {
  border-color: var(--hc-ink, #1a1714);
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
}

.cookie-banner .btn--ghost:hover {
  border-color: rgba(141, 109, 71, 0.34);
  background: rgba(var(--hc-gold-rgb), 0.18);
}

/* Место под баннер держит страница целиком, а не подвал. Одно число задаёт и
   отступ страницы, и clearance для прибитых к низу полос. */
@media (min-width: 721px) {
  body.cookie-banner-open {
    --cookie-banner-offset: calc(var(--cookie-banner-h, 108px) + 12px);
  }
}

@media (max-width: 720px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    /* Отступ в 88 пикселей держал место под мобильной панелью — но пока
       баннер висит, панель скрыта, и этот отступ только поднимал баннер
       ровно на полосу покупки. Прижимаемся к низу. */
    bottom: max(8px, env(safe-area-inset-bottom));
    justify-content: center;
  }

  body.cookie-banner-open {
    --cookie-banner-offset: calc(var(--cookie-banner-h, 88px) + 8px);
  }

  body.cookie-banner-open :is(.ldsp-cart-stickybuy, .ldsp-pdp-stickybuy, .hc-mobile-tabbar, .live-chat-widget) {
    display: none;
  }

  .cookie-banner__inner {
    width: 100%;
    gap: 6px;
    padding: 9px 11px;
    border-radius: 12px;
  }

  .cookie-banner__body strong {
    font-size: 13px;
  }

  .cookie-banner__body p {
    -webkit-line-clamp: 1;
  }

  .cookie-banner__ctas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .cookie-banner .btn {
    width: 100%;
    min-height: 30px;
    padding: 0 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  /* «Отклонить» на своей строке добавляла карточке ещё 37 пикселей высоты, а
     на телефоне карточка и так лежит поверх товара, пока человек не ответит.
     Все три ответа — в один ряд. */
  .cookie-banner #cookieReject {
    grid-column: auto;
  }

  /* Checkout is a long form; the banner belongs at the very bottom of it.
     Expressed as the offset token rather than a second bottom, because the
     theme also positions this banner and won the old rule outright — on
     ldsp-classic it sat at 76px and this never applied. */
  .page-checkout {
    --hc-banner-bottom: 8px;
  }
}

/* css/blocks/028-ed.css */
/* =================== ed.css =================== */
.ed__list {list-style: none; padding: 0; margin: 0; counter-reset: ed-counter; padding-left: 1.4em; line-height: 1.7}
.ed__list li {counter-increment: ed-counter; padding: 8px 0 8px 32px; position: relative; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7)); font-size: 14px; line-height: 1.55; margin-bottom: 0.4em}
.ed__list li::before {content: counter(ed-counter) "."; position: absolute; left: 0; top: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; color: var(--hc-accent, var(--hc-accent))}

/* css/blocks/029-editorial.css */
/* =================== editorial.css =================== */
/* editorial — premium typography for legal / static pages (privacy, terms,
 * blog posts). Wraps the article in serif headings, hierarchical heading
 * accents, premium dash-list / numbered-list, and TOC sidebar.
 *
 * NB: rules were previously wrapped in `@media(max-width:920px)`, which
 * silently hid all typography on desktop. Moved to base scope. */

.editorial {
  max-width: var(--hc-measure);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) 0;
}
.editorial > .hc-crumbs a {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition: border-color 0.2s ease;
}
.editorial > .hc-crumbs a:hover { border-bottom-color: var(--hc-accent-dark, var(--hc-accent-dark)); }

.editorial h1 {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--hc-ink, #1a1714);
}
.editorial h2 {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  margin: 40px 0 14px;
  color: var(--hc-ink, #1a1714);
  position: relative;
  padding-top: 24px;
}
.editorial h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--hc-accent, var(--hc-accent));
}
.editorial h3 {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  margin: 28px 0 10px;
  color: var(--hc-ink, #1a1714);
}
.editorial p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
  margin: 0 0 14px;
  max-width: 68ch;
}
.editorial ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
}
.editorial ul:not(.ed__list) li {
  position: relative;
  padding: 6px 0 6px 24px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
  font-size: 15px;
  line-height: 1.6;
}
.editorial ul:not(.ed__list) li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--hc-accent, var(--hc-accent));
  font-weight: 500;
}
.editorial ul.ed__list li {
  counter-increment: ed-counter;
  padding: 8px 0 8px 36px;
  position: relative;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
  font-size: 15px;
  line-height: 1.6;
}
.editorial ul.ed__list li::before {
  content: counter(ed-counter) ".";
  position: absolute;
  left: 0;
  top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--hc-accent, var(--hc-accent));
}
.editorial ol {
  padding-left: 24px;
  margin: 14px 0 22px;
}
.editorial ol li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.78));
  padding-left: 8px;
  margin-bottom: 8px;
}
.editorial ol li::marker {
  color: var(--hc-accent, var(--hc-accent));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
}
.editorial a {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: none;
  border-bottom: 0.5px solid var(--hc-accent, var(--hc-accent));
  transition: color 0.2s ease, border-color 0.2s ease;
}
.editorial a:hover {
  color: var(--hc-ink, #1a1714);
  border-color: var(--hc-ink, #1a1714);
}
.editorial strong,
.editorial b {
  color: var(--hc-ink, #1a1714);
  font-weight: 500;
}
.editorial table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 22px 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}
.editorial th,
.editorial td {
  padding: 10px 12px;
  border: 1px solid rgba(26, 23, 20, 0.10);
  text-align: left;
  overflow-wrap: normal;
}
.editorial__body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 23, 20, 0.78);
}
.editorial__body h2,
.editorial__body h3 {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
  margin: 1.6em 0 0.5em;
}
.editorial__body h2 { font-size: 22px; }
.editorial__body h3 { font-size: 17px; }
.editorial__body p { margin: 0 0 1em; }
.editorial__body a {
  color: var(--hc-accent, var(--hc-accent));
  text-decoration: underline;
}

/* ─── Premium with-TOC variant (privacy / terms) ─── */
.editorial--with-toc {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.editorial--with-toc > .hc-crumbs,
.editorial--with-toc > .editorial__meta {
  grid-column: 1 / -1;
}

.editorial__toc {
  position: sticky;
  top: 24px;
  align-self: start;
  padding: 14px 0;
  border-left: 0.5px solid rgba(141, 109, 71, 0.22);
}
.editorial__toc-h {
  padding-left: 14px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.42));
  margin-bottom: 6px;
}
.editorial__toc a {
  display: block;
  padding: 8px 14px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  text-decoration: none;
  border: 0;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.editorial__toc a:hover,
.editorial__toc a.is-active {
  color: var(--hc-ink, #1a1714);
  border-left-color: var(--hc-accent, var(--hc-accent));
  background: rgba(var(--hc-gold-rgb), 0.10);
}
.editorial__meta {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.5));
}

@media (max-width: 920px) {
  .editorial--with-toc { grid-template-columns: 1fr; }
  .editorial__toc { position: static; border-left: 0; border-bottom: 0.5px solid rgba(141,109,71,0.22); padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
  .editorial__toc a { border-left: 0; padding: 6px 10px; border-radius: 6px; }
}

/* css/blocks/034-g4.css */
/* =================== g4.css =================== */
.g4 {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px
}
.page-delivery .g4 {
align-items: stretch
}
@media(max-width:920px) {
  .page-delivery .g4 {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch}
}

/* css/blocks/042-hc-badge.css */
/* =================== hc-badge.css =================== */
.hc-badge {
display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; line-height: 1.4; background: var(--hc-paper-3); color: var(--hc-ink-2); letter-spacing: 0.04em; margin-left: 6px
}
.hc-badge::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor
}
.hc-badge--ok {
background: rgba(90, 122, 90, 0.12); color: rgb(60, 95, 60)
}
.hc-badge--warn {
background: var(--hc-warning-soft); color: var(--hc-warning)
}
.hc-badge--err {
background: var(--hc-danger-soft); color: var(--hc-danger)
}
.hc-badge--gold {
background: linear-gradient(135deg, #d4a020, #b8860b); color: var(--hc-paper, #ffffff); font-weight: 500
}
/* Icon badge — animated SVG trust icon (trust_icon) instead of the plain dot. */
.hc-badge--ico {
  gap: 5px;
}
.hc-badge--ico::before {
  display: none;
}
.hc-badge--ico .hc-trust-ico {
  flex: none;
  width: 13px;
  height: 13px;
}

.hc-pdp__chips .hc-badge {
display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  height: 28px;
  font: 500 12px/1 var(--hc-sans, "Outfit", sans-serif);
  letter-spacing: 0.02em;
  border-radius: 9999px;
  background: rgba(var(--hc-gold-rgb), 0.14);
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  border: 1px solid rgba(141, 109, 71, 0.18);
  white-space: nowrap;
}

.hc-mobile-tabbar__cart .hc-badge {
position: absolute;
  top: 6px;
  right: 18%;
}

.hc-pdp-head .hc-badge--ok {
background: rgba(61, 107, 79, 0.12);
  color: #2d5440;
  border-color: rgba(61, 107, 79, 0.28);
}

.hc-pdp-head .hc-badge--ok::before {
content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* css/blocks/048-hc-btn.css */
/* =================== hc-btn.css =================== */
/* hc-btn - premium button primitive used across the site.
 * Variants: --primary (filled dark), --gold (filled gold), --outline (ghost
 * with border), --ghost (text-only), --accent (filled accent-dark), --ico
 * (icon-only square), --magnetic (with shimmer), --lg/--sm/--xl size
 * modifiers. Strictly .hc-btn / .hc-btn--*. */

.hc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  font: inherit;
  font-family: var(--hc-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hc-r-pill, 999px);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1),
    background 0.24s ease,
    color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.32s ease;
}
.hc-btn:focus-visible {
  outline: 2px solid var(--hc-accent, var(--hc-accent));
  outline-offset: 3px;
}
.hc-btn:disabled,
.hc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.hc-btn--primary {
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.08),
    0 10px 24px -10px rgba(40, 30, 15, 0.30);
}
.hc-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.32) 50%, transparent 70%);
  transform: skewX(-18deg);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-btn--primary:hover {
  background: linear-gradient(135deg, #2a2018, #3d3024);
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(40, 30, 15, 0.12),
    0 18px 36px -12px rgba(40, 30, 15, 0.42);
}
.hc-btn--primary:hover::after { transform: skewX(-18deg) translateX(320%); }
.hc-btn--primary:active { transform: translateY(0); }

.hc-btn--gold {
  background: linear-gradient(135deg, var(--hc-gold, var(--hc-gold)), #b89a6f);
  color: #2a2018;
  box-shadow:
    0 2px 4px rgba(184, 154, 111, 0.16),
    0 10px 24px -10px rgba(184, 154, 111, 0.42);
}
.hc-btn--gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.50) 50%, transparent 70%);
  transform: skewX(-18deg);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-btn--gold:hover {
  background: linear-gradient(135deg, #e0c4a4, #c9aa7d);
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(184, 154, 111, 0.22),
    0 18px 36px -12px rgba(184, 154, 111, 0.52);
}
.hc-btn--gold:hover::after { transform: skewX(-18deg) translateX(320%); }

.hc-btn--outline {
  background: transparent;
  color: var(--hc-ink, #1a1714);
  border-color: rgba(26, 23, 20, 0.22);
}
.hc-btn--outline:hover {
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
  border-color: var(--hc-ink, #1a1714);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(40, 30, 15, 0.32);
}
.hc-btn--outline-light {
  background: transparent;
  color: var(--hc-paper, #ffffff);
  border-color: rgba(255, 255, 255, 0.4);
}
.hc-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.hc-btn--ghost {
  background: transparent;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  padding: 0 14px;
}
.hc-btn--ghost:hover {
  background: rgba(var(--hc-gold-rgb), 0.14);
  color: var(--hc-ink, #1a1714);
}

.hc-btn--accent {
  background: var(--hc-accent-dark, var(--hc-accent-dark));
  color: var(--hc-paper, #ffffff);
  box-shadow:
    0 2px 4px rgba(93, 77, 58, 0.16),
    0 10px 24px -10px rgba(93, 77, 58, 0.36);
}
.hc-btn--accent:hover {
  background: var(--hc-accent, var(--hc-accent));
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(93, 77, 58, 0.5);
}

.hc-btn--ico {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
}
.hc-btn--ico.hc-btn--sm {
  width: 36px;
  height: 36px;
}

.hc-btn--full {
  width: 100%;
  display: flex;
}

.hc-btn--xs { height: 28px; padding: 0 12px; font-size: 12px; }
.hc-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.hc-btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.hc-btn--xl { height: 60px; padding: 0 36px; font-size: 16px; }

.hc-btn--magnetic {
  --mx: 0;
  --my: 0;
  transition:
    transform 0.18s cubic-bezier(0.22, 1.4, 0.36, 1),
    background 0.24s ease,
    color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.32s ease;
}
.hc-btn--magnetic:hover {
  transform: translate(calc(var(--mx) * 1px), calc(var(--my) * 1px - 1px));
}


/* css/blocks/050-hc-card.css */
/* =================== hc-card.css =================== */
.hc-card {background: var(--hc-paper); border: 1px solid var(--hc-line); border-radius: var(--hc-r-lg); padding: var(--hc-sp-4); transition: box-shadow var(--hc-dur-base), transform var(--hc-dur-base)}
.hc-card--flat {border: 0; background: var(--hc-paper-2)}
.hc-card--gold {background: linear-gradient(135deg, var(--hc-gold-soft), rgba(var(--hc-gold-rgb),0.04)); border-color: var(--hc-gold-border)}
.hc-card[data-fx-orb], .hc-pcard[data-fx-orb] {position: relative; overflow: hidden; isolation: isolate}
.hc-card[data-fx-orb]::after, .hc-pcard[data-fx-orb]::after {content: ""; position: absolute; right: -20%; bottom: -55%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(
    circle,
    rgba(199, 155, 96, 0.14),
    transparent 65%
  ); opacity: 0; transform: translateY(18px); transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 0}
.hc-card[data-fx-orb]:hover::after, .hc-pcard[data-fx-orb]:hover::after {opacity: 1; transform: translateY(0)}
.hc-card[data-fx-orb] > *, .hc-pcard[data-fx-orb] > * {position: relative; z-index: 1}
.hc-card--hover {transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1)}
.hc-card--hover:hover {transform: translateY(-4px); box-shadow: 0 22px 60px rgba(26, 23, 20, 0.12); border-color: rgba(var(--hc-accent-rgb), 0.28)}
.hc-card--soft {background: var(--hc-bg-2, var(--hc-paper-3, var(--hc-paper-3))); border-radius: 14px; border: 1px solid rgba(26, 23, 20, 0.06)}
@media(max-width:920px) {
  .hc-card.hc-card--hover {background: var(--hc-paper, #ffffff); border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.18)); border-radius: 16px; padding: 22px 24px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease}
  .hc-card.hc-card--hover:hover {border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.42)); transform: translateY(-2px); box-shadow: 0 14px 36px -16px rgba(var(--hc-accent-rgb), 0.20)}
}

.page-about .hc-card {
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.page-about .hc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(141, 109, 71, 0.35);
  box-shadow: 0 24px 48px -32px rgba(27, 20, 13, 0.32);
}

.hc-card img:not([src]),
.hc-card img[src=""],
.hc-contact-card img:not([src]),
.hc-contact-card img[src=""] {
  display: none;
}

/* css/blocks/209-premium-surface.css */
/* =================== premium-surface.css =================== */
/* premium-surface — premium content card (used on /about, /delivery, content
 * pages). Adds depth via layered shadow + gold-tinted top-rule accent so cards
 * read as objects on the cream page background instead of blending in.
 * Strictly .premium-surface / .premium-surface--*. */

.premium-surface {
position: relative;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 40px);
  background: var(--hc-paper, #ffffff);
  border-radius: clamp(16px, 1.4vw, 22px);
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.22));
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.04),
    0 22px 50px -28px rgba(40, 30, 15, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.32s ease;
  isolation: isolate;
  overflow: hidden;
}
.premium-surface::before {
content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 2.4vw, 40px);
  right: clamp(24px, 2.4vw, 40px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--hc-gold-1, var(--hc-gold, var(--hc-gold))) 24%,
    var(--hc-gold-2, #b89a6f) 50%,
    var(--hc-gold-1, var(--hc-gold, var(--hc-gold))) 76%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
}
.premium-surface::after {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(620px 360px at 100% -10%, rgba(var(--hc-gold-rgb), 0.14), transparent 62%);
}
.premium-surface:hover {
border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.05),
    0 28px 62px -22px rgba(184, 154, 111, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.premium-surface > div > strong, .premium-surface > div > b {
display: block;
  margin-bottom: 2px;
}

/* Highlight variant — used to break monotony in stacked-card sections.
 * Inverted: ink-tinted card with cream content, gold accents stay. */
.premium-surface--highlight {
background:
    radial-gradient(900px 460px at 0% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 60%),
    linear-gradient(160deg, #1f1a16 0%, #2a2018 100%);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.32);
  color: rgba(252, 248, 240, 0.92);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 32px 70px -26px rgba(20, 14, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.premium-surface--highlight::before {
opacity: 0.78;
}
.premium-surface--highlight::after {
background: radial-gradient(700px 380px at 100% 110%, rgba(var(--hc-gold-rgb), 0.18), transparent 60%);
}
.premium-surface--highlight h1,
.premium-surface--highlight h2,
.premium-surface--highlight h3,
.premium-surface--highlight h4,
.premium-surface--highlight .t-title {
color: var(--hc-paper);
}
.premium-surface--highlight p {
color: rgba(252, 248, 240, 0.72);
}
.premium-surface--highlight [class*="eyebrow"] {
color: var(--hc-gold-1, var(--hc-gold, var(--hc-gold)));
}
.premium-surface--highlight:hover {
border-color: rgba(var(--hc-gold-rgb), 0.55);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 40px 80px -22px rgba(20, 14, 8, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* css/blocks/176-hz-orb.css */
/* =================== hz-orb.css =================== */
.hz-orb {position: relative; inset: auto; width: auto; height: auto; border-radius: inherit; background: transparent; pointer-events: auto; z-index: auto; filter: none; transform: none; animation: none; isolation: isolate}
.hz-orb::before {content: ""; position: absolute; width: clamp(180px, 22vw, 280px); height: clamp(180px, 22vw, 280px); right: clamp(-72px, -4vw, -28px); top: 50%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--hc-accent-rgb),0.16) 0%, rgba(var(--hc-accent-rgb),0.06) 46%, transparent 74%); pointer-events: none; z-index: 0; filter: blur(34px); transform: translate3d(0, -50%, 0); animation: hz-orb-float 18s ease-in-out infinite}
.hz-orb>* {position: relative; z-index: 1}
/* In multi-column tile grids (e.g. delivery «Уверенность в покупке») the side
   glow extends ~280px past the card and bleeds over the neighbouring tile, so
   the two cards look like they collide during the float animation. Clip it to
   the card in grid contexts — the glow stays, the bleed stops. */
.g2 .hz-orb,
.contact-intent-grid .hz-orb {overflow: hidden}
@media(max-width:920px) {
  .delivery-stats__item .hz-orb::before {display: none}
}

/* css/blocks/074-hc-chip.css */
/* =================== hc-chip.css =================== */
/* hc-chip - premium pill chip used for filters, tags, signals, quick-actions.
 * Variants: --active (selected dark), --gold (premium accent), --dismiss
 * (with close button), --toggle (checkbox variant). Strictly .hc-chip / .hc-chip__*. */

.hc-chip {
position: relative;
  display: inline-flex;
  align-items: center;
  /* The topic filters on the blog and the quick filters in the catalogue —
     the most-pressed controls on those pages and, at 30px, the smallest.
     Height from padding rather than a fixed value so a chip that wraps still
     grows with its text. */
  min-height: 44px;
  gap: 7px;
  padding: 12px 16px;
  font-family: var(--hc-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--hc-ink, #1a1714);
  background: rgba(255, 255, 255, 0.94);
  border: 0.5px solid rgba(180, 151, 115, 0.28);
  border-radius: 100px;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(40, 30, 15, 0.04),
    0 6px 16px -8px rgba(40, 30, 15, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    background 0.20s ease,
    border-color 0.20s ease,
    color 0.20s ease,
    transform 0.20s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.20s ease;
}
.hc-chip::before {
content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.5), transparent 50%);
  opacity: 0.7;
}
.hc-chip:hover {
background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, #fbf5e8 100%);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
  color: var(--hc-ink, #1a1714);
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 2px 4px rgba(40, 30, 15, 0.06),
    0 12px 22px -8px rgba(184, 154, 111, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.hc-chip:focus-visible {
outline: 2px solid var(--hc-accent, var(--hc-accent));
  outline-offset: 3px;
}

/* active state — dark with gold inner glow */
.hc-chip--active, .hc-chip[aria-current="true"] {
background: linear-gradient(180deg, rgba(28, 24, 20, 0.96), rgba(17, 14, 12, 0.99));
  color: var(--hc-paper, #ffffff);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.30),
    0 14px 28px -10px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(var(--hc-gold-rgb), 0.18);
}
.hc-chip--active:hover, .hc-chip[aria-current="true"]:hover {
background: linear-gradient(180deg, #2a2018, var(--hc-ink, #1a1714));
  color: var(--hc-paper, #ffffff);
  transform: translateY(-1px) scale(1.02);
}

/* gold premium variant */
.hc-chip--gold {
background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.32), rgba(184, 154, 111, 0.18));
  color: var(--hc-accent-dark, #7a6548);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.55));
}
.hc-chip--gold:hover {
background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.50), rgba(184, 154, 111, 0.30));
  color: var(--hc-ink, #1a1714);
}

/* dismiss variant — has a close X on the right */
.hc-chip--dismiss {
padding-right: 6px;
  background: linear-gradient(135deg, rgba(var(--hc-gold-rgb), 0.20), rgba(184, 154, 111, 0.10));
  color: var(--hc-accent-dark, #7a6548);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.50));
}
.hc-chip__x {
width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  background: rgba(var(--hc-accent-rgb), 0.22);
  color: var(--hc-accent-dark, #7a6548);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-chip__x:hover {
background: var(--hc-accent-dark, #7a6548);
  color: var(--hc-paper, #ffffff);
  transform: rotate(90deg) scale(1.1);
}

/* count badge inside a chip (e.g. "Все · 1121") */
.hc-chip__count {
display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 6px;
  background: var(--hc-paper-3, var(--hc-paper-3));
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease;
}
.hc-chip[aria-current="true"] .hc-chip__count {
background: rgba(255, 255, 255, 0.16);
  color: var(--hc-paper, #ffffff);
}

/* toggle variant — chip wrapping a checkbox label */
.hc-chip--toggle {
display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--hc-paper-3, var(--hc-paper-3));
  border: 0.5px solid rgba(26, 23, 20, 0.12);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.hc-chip--toggle:hover {
background: rgba(var(--hc-gold-rgb), 0.12);
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.4));
}
.hc-chip--toggle input[type="checkbox"] {
width: 14px;
  height: 14px;
  accent-color: var(--hc-accent-dark, #7a6548);
  cursor: pointer;
}

/* size modifiers */
.hc-chip--sm {
padding: 5px 11px;
  font-size: 11px;
}
.hc-chip--lg {
padding: 11px 20px;
  font-size: 14px;
}

.hc-chip--active .hc-chip__count {
background: rgba(255, 255, 255, 0.16);
  color: var(--hc-paper, #ffffff);
}

/* css/blocks/079-hc-compare-bar.css */
/* =================== hc-compare-bar.css =================== */
/* The sticky compare prompt is emitted by _base.html on every storefront page,
   so its styles must be part of the global shell rather than the /compare page. */
.hc-compare-bar {
  position: fixed;
  /* Clear the fixed 52px desktop contact/footer line. */
  bottom: 68px;
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: var(--hc-sp-3);
  max-width: 92vw;
  padding: var(--hc-sp-3) var(--hc-sp-4);
  color: var(--hc-paper, #fff);
  background: var(--hc-ink);
  border-radius: var(--hc-r-pill);
  box-shadow: var(--hc-sh-4);
  transform: translateX(-50%);
}

.hc-compare-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  color: var(--hc-ink);
  font-family: var(--hc-mono);
  font-size: var(--hc-fs-sm);
  font-weight: 600;
  background: var(--hc-gold);
  border-radius: 50%;
}

.hc-compare-bar__label { font-size: var(--hc-fs-sm); }
.hc-compare-bar__clear {
  padding: 0 var(--hc-sp-2);
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--hc-fs-xs);
}
.hc-compare-bar__clear:hover { color: var(--hc-paper, #fff); }
.hc-compare-bar[hidden] { display: none; }

@media (max-width: 640px) {
  .hc-compare-bar {
    right: 12px;
    bottom: calc(var(--hc-tabbar-clearance, 79px) + 8px);
    left: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    width: auto;
    max-width: none;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 16px;
    transform: none;
  }
  .hc-compare-bar__label {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hc-compare-bar .hc-btn {
    min-height: 38px;
    padding: 0 14px;
    white-space: nowrap;
  }
  .hc-compare-bar__clear {
    width: 36px;
    height: 38px;
    padding: 0;
    font-size: 20px;
  }
}

@media (max-width: 360px) {
  .hc-compare-bar__label { display: none; }
  .hc-compare-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* css/blocks/085-hc-crumbs.css */
/* =================== hc-crumbs.css =================== */
.hc-crumbs {display: flex; align-items: center; flex-wrap: wrap; gap: var(--hc-sp-1); font-size: var(--hc-fs-sm); color: var(--hc-ink-mid); margin-bottom: var(--hc-sp-3)}
.hc-crumbs a {color: var(--hc-ink-soft)}
.hc-crumbs a:hover {color: var(--hc-accent)}
.hc-crumbs__sep {color: var(--hc-ink-muted); margin: 0 var(--hc-sp-1)}
.hc-crumbs__here {color: var(--hc-ink); font-weight: 500}
.hc-crumbs__here--truncate {max-width: 400px; display: inline-block; vertical-align: middle}
.hc-crumbs__node {position: relative; display: inline-flex; align-items: center; gap: 4px}
.hc-crumbs__toggle {width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--hc-ink-muted); font: inherit; line-height: 18px; cursor: pointer}
.hc-crumbs__toggle:hover, .hc-crumbs__node:focus-within .hc-crumbs__toggle {background: color-mix(in srgb, var(--hc-accent) 10%, transparent); color: var(--hc-accent)}
.hc-crumbs__menu {position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; display: grid; min-width: 240px; max-width: min(360px, calc(100vw - 32px)); max-height: 280px; overflow: auto; padding: 8px; border: 1px solid var(--hc-line); border-radius: 8px; background: var(--hc-surface, #fff); box-shadow: 0 18px 46px rgba(28, 24, 20, .14); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease}
.hc-crumbs__menu a {display: block; padding: 8px 10px; border-radius: 6px; color: var(--hc-ink); line-height: 1.25; white-space: normal}
.hc-crumbs__menu a:hover, .hc-crumbs__menu a:focus {background: color-mix(in srgb, var(--hc-accent) 10%, transparent); color: var(--hc-accent)}
.hc-crumbs__node.is-open .hc-crumbs__menu {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0)}
@media (max-width: 640px) {
  .hc-crumbs__node {position: static}
  .hc-crumbs__menu {left: 0; right: 0; width: calc(100vw - 48px); min-width: 0}
}

.hc-cat-head .hc-crumbs {
  font: 500 12px/1 var(--hc-sans, 'Outfit', sans-serif);
  color: var(--hc-muted, #6b6660);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* css/blocks/086-hc-drawer.css */
/* =================== hc-drawer.css =================== */
.hc-drawer {
position: fixed; inset: 0; z-index: var(--hc-z-drawer); pointer-events: none
}
.hc-drawer::before {
content: ""; position: absolute; inset: 0; background: rgba(26,23,20,.45); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--hc-dur-base)
}
.hc-drawer.is-open {
pointer-events: auto
}
.hc-drawer.is-open::before {
opacity: 1
}
.hc-drawer__panel {
position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 94vw; background: var(--hc-paper); box-shadow: var(--hc-sh-4); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--hc-dur-slow) var(--hc-ease-out)
}
.hc-drawer.is-open .hc-drawer__panel {
transform: translateX(0)
}


.hc-drawer__head {
padding: var(--hc-sp-4) var(--hc-sp-5); border-bottom: 1px solid var(--hc-line); display: flex; align-items: center; justify-content: space-between
}
.hc-drawer__body {
flex: 1; overflow-y: auto; padding: var(--hc-sp-4) var(--hc-sp-5)
}
.hc-drawer__title {
font-family: var(--hc-serif); font-size: var(--hc-fs-xl)
}

.hc-drawer--left .hc-drawer__panel {
right: auto; left: 0; transform: translateX(-100%)
}

.hc-drawer--left.is-open .hc-drawer__panel {
transform: translateX(0)
}

/* css/blocks/089-hc-eyebrow.css */
/* =================== hc-eyebrow.css =================== */
/* The site-wide kicker: the small mono line that sits above a heading.
 *
 * This is the one description of it. Other files had grown their own copies of
 * the same treatment — mono, uppercase, wide tracking — differing only in
 * colour and bottom margin, which is why the same site opened one section with
 * a blue kicker and the next with a gold one.
 *
 * Callers pick a colour with an explicit modifier. Spacing is deliberately not
 * set per caller here: margin is layout, so it belongs beside the rules of the
 * surface the kicker sits on. */

.hc-eyebrow {display: inline-block; font-family: var(--hc-mono); font-size: var(--hc-fs-xxs); font-weight: 500; letter-spacing: var(--hc-ls-ultra); text-transform: uppercase; color: var(--hc-accent)}

/* Colour is the only thing most callers ever changed. */
.hc-eyebrow--gold {color: var(--hc-gold)}
.hc-eyebrow--muted {color: var(--hc-ink-mid)}
.hc-eyebrow--onDark {color: rgba(255, 255, 255, .55)}
/* For a kicker on a surface that already sets a text colour it should keep. */
.hc-eyebrow--inherit {color: inherit}

/* Some surfaces dress the kicker as a pill. The shape is here; the fill and
   the border belong to the surface, which is what makes them differ. */
.hc-eyebrow--pill {display: inline-flex; align-items: center; border-radius: var(--hc-r-pill, 999px)}

/* Surfaces that stack the kicker above their own heading. */
.hc-sec-h__title > .hc-eyebrow {display: block; margin-bottom: var(--hc-sp-1)}
.page-hero__surface > .hc-eyebrow {display: block; margin-bottom: 8px}
.loyalty-widget__head > .hc-eyebrow, .shared-cart__hdr > .hc-eyebrow {display: block; margin-bottom: 8px}

/* The footer B2B panel dresses the kicker as a pill.
 *
 * Declared once. There used to be three rules for this selector and two of
 * them never applied: a white 45% colour, and a @media(max-width:920px) block
 * placed ABOVE the pill rule — media queries carry no extra specificity, so at
 * equal specificity the later rule won at every width. Verified at 375px
 * before removing them: the computed colour was the pill's, not the media
 * rule's. */
.hc-ftr__b2b .hc-eyebrow {
  display: inline-block;
  align-self: start;
  padding: 5px 10px;
  background: rgba(var(--hc-gold-rgb), 0.18);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.34);
  border-radius: var(--hc-r-pill, 999px);
  font-family: var(--hc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-gold);
}

.premium-surface--highlight .hc-eyebrow {color: var(--hc-gold-1, var(--hc-gold))}

/* css/blocks/294-hc-error.css */
/* =================== hc-error.css — страница 404 / ошибки =================== */
/* Единый источник стилей error-страницы. Раньше: разнобой — заголовок/код/лид/
   кнопки не центрировались (.hc-util-center не существует), стили были только у
   поиска и сетки ссылок (и те лежали в 089-hc-eyebrow.css). */

.hc-error{
  text-align: center;
  padding-block: clamp(56px, 10vw, 120px);
}
.hc-error .hc-wrap{
  max-width: 720px;
  margin-inline: auto;
}

.hc-error__code{
  font-family: var(--hc-serif);
  font-weight: 500;
  font-size: clamp(80px, 15vw, 156px);
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--hc-accent);
  margin: 0 0 clamp(12px, 2vw, 20px);
}

.hc-error__title{
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.08;
  margin: 0 auto clamp(10px, 1.4vw, 16px);
}

.hc-error__lede{
  max-width: 30em;
  margin: 0 auto;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
}

.hc-error__search{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 540px;
  margin: clamp(24px, 3.5vw, 36px) auto clamp(4px, 1vw, 8px);
}
.hc-error__search .hc-input{ flex: 1; min-width: 240px; }

.hc-error__ctas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(16px, 2.5vw, 24px);
}

.hc-error__links{ margin-top: clamp(40px, 6vw, 72px); }
.hc-error__links .hc-eyebrow{
  display: block;
  text-align: center;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.hc-error__links-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}
.hc-error__links-grid a{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--hc-line, rgba(26,23,20,.08));
  border-radius: 14px;
  background: var(--hc-paper, #fff);
  text-decoration: none;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hc-error__links-grid a:hover{
  border-color: var(--hc-accent, #7a6548);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(26,23,20,.18);
}
.hc-error__links-grid a strong{
  font: 600 14px/1.3 var(--hc-sans, "Outfit", sans-serif);
  color: var(--hc-ink, #1a1714);
}
.hc-error__links-grid a span{
  font-size: 12px;
  line-height: 1.4;
  color: var(--hc-ink-soft, rgba(26,23,20,.55));
}

@media(max-width: 560px){
  .hc-error__links-grid{ grid-template-columns: 1fr; }
  .hc-error{ padding-block: clamp(36px, 12vw, 64px); }
}

/* css/blocks/091-hc-field.css */
/* =================== hc-field.css =================== */
.hc-field {display: block; margin-bottom: var(--hc-sp-4)}
.hc-field__label {display: block; font-size: var(--hc-fs-sm); color: var(--hc-ink-2); font-weight: 500; margin-bottom: var(--hc-sp-2)}
.hc-field__label em {color: var(--hc-danger); font-style: normal}
.hc-field__row {display: flex; align-items: center; gap: var(--hc-sp-2); padding: var(--hc-sp-2) 0}

/* css/blocks/096-hc-hdr.css */
/* =================== hc-hdr.css =================== */
/* hc-hdr — sticky site header (the one shown on every page).
   Owns: header bar, brand logo, primary nav, mega-panel under "Каталог",
   right-rail icons with their badges and tooltips, phone link, CTA button,
   and the responsive collapse to burger ≤1024px. The drawer that the burger
   opens lives in its own block (hc-mobile-menu). Strictly .hc-hdr*. */

.hc-hdr {
position: sticky;
  top: 0;
  z-index: var(--hc-z-header);
  height: var(--hc-hdr-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--hc-dur-base), background var(--hc-dur-base), box-shadow var(--hc-dur-base);
}
/* Прокрученное состояние. Класс is-scrolled вешает fx.js после 50 пикселей,
   и правило .hc-hdr выше уже объявляет под него переход по border-color,
   background и box-shadow — а самого состояния не было написано: шапка
   оставалась без границы и тени над уехавшим под неё содержимым.
   В теме ldsp-classic шапка не липкая (position: relative), там класс
   приходит и ничего не меняет — так и задумано. */
.hc-hdr.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--hc-line);
  box-shadow: 0 6px 20px -14px rgba(20, 40, 76, 0.5);
}

.hc-hdr__in {
display: flex;
  align-items: center;
  gap: var(--hc-sp-4);
  min-width: 0;
  min-height: var(--hc-hdr-h);
  padding: var(--hc-sp-3) 0;
}
.hc-hdr__logo {
font-family: var(--hc-serif);
  font-size: var(--hc-fs-xl);
  font-weight: 500;
  color: var(--hc-ink);
  letter-spacing: var(--hc-ls-tight);
  white-space: nowrap;
  flex-shrink: 0;
}
.hc-hdr__logo b {
color: var(--hc-accent);
  font-weight: 500;
}

/* burger — hidden on desktop, shown ≤1024 (see @media block below). */
.hc-hdr__burger {
display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: var(--hc-r-sm, 6px);
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.hc-hdr__burger:hover {
background: rgba(var(--hc-gold-rgb), 0.10);
  border-color: rgba(141, 109, 71, 0.35);
}

/* primary nav */
.hc-hdr__nav {
display: flex;
  align-items: center;
  /* Never shrink: a shrinking nav let its nowrap links bleed under the icon
     rail (search icon landed on "Контакты"). Fixed width = links can't overlap;
     when the bar runs out of room the right rail collapses via breakpoints. */
  flex: 0 0 auto;
  gap: var(--hc-sp-1);
  margin: 0 0 0 var(--hc-sp-3);
  min-width: 0;
}
.hc-hdr__mega {
display: flex;
  align-items: center;
  position: relative;
}
.hc-hdr__link {
display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: var(--hc-sp-2) var(--hc-sp-3);
  border-radius: var(--hc-r-pill);
  font-size: var(--hc-fs-md);
  line-height: 1;
  white-space: nowrap;
  color: var(--hc-ink-soft);
  transition: color var(--hc-dur-fast), background var(--hc-dur-fast);
}
.hc-hdr__link:hover, .hc-hdr__link--active {
color: var(--hc-ink);
  background: var(--hc-accent-soft);
}

/* mega-panel — drops below "Каталог". Closed by default; opens on hover
   or when the trigger gets .hc-hdr__mega--open. No: closed-state
   selector is more specific than open-state, but we order rules so open wins. */
.hc-hdr__mega-panel {
position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 720px;
  max-height: min(78vh, 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--hc-sp-5);
  background: var(--hc-paper);
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-r-lg);
  box-shadow: var(--hc-sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--hc-dur-base), visibility var(--hc-dur-base), transform var(--hc-dur-base);
}
.hc-hdr__mega-panel.hc-hdr__mega--open {
opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* transparent hover-bridge over the 6px gap between trigger and panel, so
   moving the cursor down into the menu doesn't cross dead space and close it. */
.hc-hdr__mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.hc-hdr__mega-grid {
display: grid;
  grid-template-columns: minmax(720px, 1fr) 252px;
  gap: var(--hc-sp-4);
  min-width: 1000px;
}
.hc-hdr__mega-cats {
display: grid;
  grid-template-columns: 1fr 188px;
  gap: 24px;
  align-items: start;
}
/* left: categories WITH subcategories (2-up rich cards) */
.hc-hdr__mega-cats-rich {
  /* Multicol, not a 2-up grid: categories have wildly different sub-counts,
     so a grid left ragged row-gaps (the "кривой" look). Multicol flows the
     cards down each column and balances them. */
  column-count: 2;
  column-gap: 22px;
  min-width: 0;
}
/* right: categories WITHOUT subcategories (compact link column) */
.hc-hdr__mega-cats-plain {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 168px;
  padding-left: 20px;
  border-left: 1px solid var(--hc-line);
}
.hc-hdr__mega-plain-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-ink-muted, rgba(26, 23, 20, 0.4));
  margin-bottom: 6px;
}
.hc-hdr__mega-plain-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--hc-r-md, 8px);
  text-decoration: none;
  color: var(--hc-ink, #1a1714);
  transition: background var(--hc-dur-fast), color var(--hc-dur-fast);
}
.hc-hdr__mega-plain-link:hover {
  background: var(--hc-accent-soft);
}
.hc-hdr__mega-plain-name {
  font-size: var(--hc-fs-md, 14px);
  font-weight: 500;
  line-height: 1.28;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hc-hdr__mega-thumb--sm {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.hc-hdr__mega-cat {
display: flex;
  flex-direction: column;
  gap: 5px;
  break-inside: avoid;
  margin-bottom: 18px;
}
.hc-hdr__mega-cat-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--hc-ink);
  text-decoration: none;
}
.hc-hdr__mega-cat-name {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.12;
}
.hc-hdr__mega-cat-head:hover .hc-hdr__mega-cat-name {
  color: var(--hc-accent-dark, #7a6548);
}
.hc-hdr__mega-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding-left: 50px;
}
.hc-hdr__mega-sub {
  font-size: 12px;
  line-height: 1.55;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
  text-decoration: none;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.hc-hdr__mega-sub:hover {
  color: var(--hc-accent-dark, #7a6548);
}
.hc-hdr__mega-sub--more {
  color: var(--hc-accent, var(--hc-accent));
  font-weight: 500;
}
.hc-hdr__mega-thumb {
width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f0ece7;
  border: 1px solid var(--hc-line);
}
.hc-hdr__mega-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* category covers are drawn at 55% inner-scale for the big cards; zoom the
     icon in the 40px mega thumb so it reads (transparent margins are clipped). */
  transform: scale(1.5);
}
.hc-hdr__mega-banner-wrap {
display: flex;
}
.hc-hdr__mega-banner {
position: relative;
  display: block;
  width: 280px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hc-line);
}
.hc-hdr__mega-banner img {
width: 100%;
  height: 100%;
  object-fit: cover;
}
.hc-hdr__mega-banner-text {
position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  gap: 2px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

/* right-rail: icons, badges, phone, CTA */
.hc-hdr__right {
margin-left: auto;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: var(--hc-sp-3);
  min-width: 0;
  max-width: 100%;
}
.hc-hdr__phone {
font-family: var(--hc-serif);
  font-size: var(--hc-fs-md);
  color: var(--hc-ink);
  margin: 0 0 0 var(--hc-sp-2);
  padding-left: var(--hc-sp-4);
  border-left: 1px solid var(--hc-line);
  white-space: nowrap;
}
.hc-hdr__ico {
position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--hc-r-sm);
  background: transparent;
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hc-hdr__ico:hover {
background: rgba(var(--hc-gold-rgb), 0.10);
  color: var(--hc-accent-dark, #7a6548);
}
.hc-hdr__badge {
position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hc-accent);
  color: var(--hc-paper, #ffffff);
  border-radius: var(--hc-r-pill);
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--hc-paper);
}
/* hide the badge when count is zero — JS sets data-count / data-cart-count */
.hc-hdr [data-count="0"] .hc-hdr__count, .hc-hdr [data-cart-count="0"] {
display: none;
}

/* tooltip on icon buttons that carry an aria-label */
.hc-hdr__icon-btn, .hc-hdr__nav a[aria-label] {
position: relative;
}
.hc-hdr__icon-btn[aria-label]:hover::after, .hc-hdr__nav a[aria-label]:hover::after {
content: attr(aria-label);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
  font: 500 11px/1 var(--hc-sans, "Outfit", sans-serif);
  white-space: nowrap;
  border-radius: 6px;
  z-index: 100;
  pointer-events: none;
}

/* ≤1024px: collapse desktop nav, surface burger, drop phone + CTA so only
   the essential icons + cart stay in the right rail. Burger toggles
   .hc-mobile-menu (own block). */
/* Drop the CTA, then the phone, well before the rail can crowd the nav. */
@media (max-width: 1560px) {
  .hc-hdr__right .hc-btn { display: none; }
}

@media (max-width: 1440px) {
  .hc-hdr__phone { display: none; }
}

@media (max-width: 1280px) {
  .hc-hdr__link { padding-left: var(--hc-sp-2); padding-right: var(--hc-sp-2); }
  .hc-hdr__nav { gap: 2px; }
}

@media (max-width: 1024px) {
  .hc-hdr__burger { display: inline-flex; }
  .hc-hdr__nav    { display: none; }
  .hc-hdr__phone  { display: none; }
  .hc-hdr__right .hc-btn { display: none; }
  .hc-hdr__right { gap: var(--hc-sp-1); }
}

/* ≤480px: tighten the bar so a small viewport doesn't crush the logo. */
@media (max-width: 480px) {
  .hc-hdr__in   { gap: var(--hc-sp-2); }
  .hc-hdr__logo { font-size: var(--hc-fs-lg); }
  /* v8.6 — at ≤420px the four-icon right-rail used to spill past edge by ~12px.
     Shrink icons to 32px and zero out gap so all four still fit inside 375px. */
  .hc-hdr__right { gap: 0; }
  .hc-hdr__ico { width: 32px; height: 32px; }
}

.hc-hdr__mega:hover .hc-hdr__mega-panel {
opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Header CTA must never shrink below its text — flex right-rail was squeezing
   ".hc-btn" (overflow:hidden) and clipping "Подобрать материал →" on both ends. */
.hc-hdr__right .hc-btn { flex-shrink: 0; }

/* css/blocks/304-hc-ecosystem.css */
/* =================== hc-ecosystem.css =================== */
/* Cross-site HOLZCOM switcher. One link component is reused by the desktop
   popover, the mobile drawer and the crawlable footer directory. */

.hc-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.hc-ecosystem__item,
.hc-ecosystem__current {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.1));
  border-radius: 13px;
  color: var(--hc-ink, #1a1714);
}

.hc-ecosystem__item {
  text-decoration: none;
  background: var(--hc-paper, #fff);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.hc-ecosystem__item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--hc-gold-rgb), .42);
  background: rgba(var(--hc-gold-rgb), .08);
}

.hc-ecosystem__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #fff);
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 16px;
  font-weight: 600;
}

.hc-ecosystem__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.hc-ecosystem__copy strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.15;
}

.hc-ecosystem__copy small {
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--hc-muted, rgba(26, 23, 20, .58));
}

.hc-ecosystem__arrow {
  align-self: start;
  color: var(--hc-muted, rgba(26, 23, 20, .42));
  font-size: 14px;
  transition: color .18s ease, transform .18s ease;
}

.hc-ecosystem__item:hover .hc-ecosystem__arrow {
  color: var(--hc-accent-dark, #7a6548);
  transform: translate(1px, -1px);
}

.hc-ecosystem__current {
  background: rgba(var(--hc-gold-rgb), .11);
  border-color: rgba(var(--hc-gold-rgb), .3);
}

.hc-ecosystem__here {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(var(--hc-gold-rgb), .18);
  color: var(--hc-accent-dark, #7a6548);
  font-family: var(--hc-mono, monospace);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Desktop header trigger + popover. */
.hc-ecosystem--header {
  position: relative;
  flex: 0 0 auto;
}

.hc-ecosystem__trigger {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, .1));
  border-radius: 999px;
  background: rgba(var(--hc-gold-rgb), .07);
  color: var(--hc-ink-soft, rgba(26, 23, 20, .72));
  font: 600 11px/1 var(--hc-sans, sans-serif);
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.hc-ecosystem__trigger svg {
  flex: none;
  fill: currentColor;
}

.hc-ecosystem__trigger:hover,
.hc-ecosystem__trigger[aria-expanded="true"] {
  border-color: rgba(var(--hc-gold-rgb), .38);
  background: rgba(var(--hc-gold-rgb), .14);
  color: var(--hc-ink, #1a1714);
}

.hc-ecosystem__chevron {
  margin-top: -3px;
  font-size: 14px;
}

.hc-ecosystem__popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, .1));
  border-radius: 18px;
  background: var(--hc-bg, #faf8f4);
  box-shadow: 0 22px 64px rgba(26, 23, 20, .2);
  z-index: calc(var(--hc-z-header, 60) + 2);
}

.hc-ecosystem__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.hc-ecosystem__head > span {
  font-family: var(--hc-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 550;
}

.hc-ecosystem__head > small {
  color: var(--hc-muted, rgba(26, 23, 20, .55));
  font-size: 11px;
}

/* Mobile drawer directory. */
.hc-ecosystem--mobile {
  display: none;
}

/* Footer directory. */
.hc-ecosystem--footer {
  display: grid;
  gap: 20px;
  margin-bottom: 38px;
  padding-bottom: 36px;
  border-bottom: .5px solid rgba(var(--hc-gold-rgb), .18);
}

.hc-ecosystem__footer-head {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  align-items: end;
  gap: 32px;
}

.hc-ecosystem__footer-head h2 {
  margin: 7px 0 0;
  color: var(--hc-paper, #fff);
  font-family: var(--hc-serif, Georgia, serif);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.1;
}

.hc-ecosystem__footer-head p {
  max-width: 64ch;
  margin: 0;
  color: rgba(245, 240, 232, .62);
  font-size: 13px;
  line-height: 1.55;
}

.hc-ecosystem--footer .hc-ecosystem__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hc-ecosystem--footer .hc-ecosystem__item {
  min-height: 88px;
  background: rgba(255, 255, 255, .035);
  border-color: rgba(var(--hc-gold-rgb), .14);
  color: var(--hc-paper, #fff);
}

.hc-ecosystem--footer .hc-ecosystem__item:hover {
  background: rgba(var(--hc-gold-rgb), .1);
  border-color: rgba(var(--hc-gold-rgb), .36);
}

.hc-ecosystem--footer .hc-ecosystem__mark {
  background: rgba(var(--hc-gold-rgb), .16);
  color: var(--hc-gold, #c79b60);
}

.hc-ecosystem--footer .hc-ecosystem__copy small,
.hc-ecosystem--footer .hc-ecosystem__arrow {
  color: rgba(245, 240, 232, .52);
}

@media (max-width: 1280px) {
  .hc-ecosystem__trigger {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .hc-ecosystem__trigger-text,
  .hc-ecosystem__chevron {
    display: none;
  }
}

@media (max-width: 1024px) {
  .hc-ecosystem--header {
    display: none;
  }
  .hc-ecosystem--mobile {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--hc-line, rgba(26, 23, 20, .1));
  }
  /* Not a heading since 2026-08-04: it precedes the page h1 in source order,
     so any heading level here hijacks the document outline. */
  .hc-ecosystem--mobile .hc-ecosystem__label {
    margin: 0;
    padding: 0 14px;
    color: var(--hc-ink-mid, rgba(26, 23, 20, .55));
    font-family: var(--hc-mono, monospace);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .hc-ecosystem--mobile .hc-ecosystem__grid {
    grid-template-columns: 1fr;
  }
  .hc-ecosystem--mobile .hc-ecosystem__item,
  .hc-ecosystem--mobile .hc-ecosystem__current {
    padding: 10px 12px;
  }
  .hc-ecosystem--footer .hc-ecosystem__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hc-ecosystem__footer-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }
  .hc-ecosystem--footer .hc-ecosystem__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hc-ecosystem--footer .hc-ecosystem__item {
    min-height: 76px;
  }
}

/* css/blocks/093-hc-ftr.css */
/* =================== hc-ftr.css =================== */
/* hc-ftr - premium site footer. Matches the live aspro-variant markup
 * (.hc-ftr--brand-end.hc-ftr--aspro) with:
 *   - __servicebar (4 service cells at top)
 *   - __top (3-zone composition: manifesto / B2B / nav)
 *   - __manifesto > __brand-link > __brand + __brand-sub, __contact-list, __pay
 *   - __b2b with eyebrow + b2b-h + b2b-text
 *   - __nav > __nav-col (h6 headings)
 *   - __legal (P0 entity info) + __bottom (copyright + privacy links)
 * Strictly .hc-ftr / .hc-ftr__*. */

.hc-ftr {
  position: relative;
  margin-top: clamp(48px, 6vw, 96px);
  padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 2vw, 36px);
  background:
    radial-gradient(900px 700px at 0% 0%, rgba(var(--hc-gold-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, var(--hc-ink, #1a1714) 0%, #14110e 100%);
  color: rgba(245, 240, 232, 0.86);
  isolation: isolate;
  overflow: hidden;
}
.hc-ftr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--hc-gold-rgb), 0.55), transparent);
  z-index: 1;
}

/* SERVICE BAR — 4 trust cells at the very top */
.hc-ftr__servicebar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 32px;
  margin-bottom: 36px;
  border-bottom: 0.5px solid rgba(var(--hc-gold-rgb), 0.18);
}
.hc-ftr__service {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.12);
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.hc-ftr__service:hover {
  background: rgba(var(--hc-gold-rgb), 0.08);
  border-color: rgba(var(--hc-gold-rgb), 0.32);
  transform: translateY(-2px);
}
.hc-ftr__service-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--hc-gold, var(--hc-gold));
  background: rgba(var(--hc-gold-rgb), 0.10);
  transition: transform 0.22s ease, background 0.22s ease;
}
.hc-ftr__service:hover .hc-ftr__service-ico {
  transform: translateY(-1px);
  background: rgba(var(--hc-gold-rgb), 0.18);
}
.hc-ftr__service-k {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--hc-gold, var(--hc-gold));
}
.hc-ftr__service strong {
  display: block;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__service small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(245, 240, 232, 0.58);
}

/* TOP — 3-zone grid (manifesto / b2b / nav) */
.hc-ftr__top {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(260px, 1fr) minmax(360px, 1.3fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}

/* MANIFESTO column */
.hc-ftr__manifesto {
  display: grid;
  gap: 14px;
}
.hc-ftr__brand-link {
  display: grid;
  gap: 4px;
  text-decoration: none;
  color: inherit;
}
.hc-ftr__brand {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.10em;
  line-height: 1;
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__brand-sub {
  display: block;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.48);
}
.hc-ftr__manifesto-text {
  margin: 4px 0 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.74);
}

/* Contact list (icons + main link + meta) */
.hc-ftr__contact-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 14px;
}
.hc-ftr__contact {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
}
.hc-ftr__contact-ico {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(var(--hc-gold-rgb), 0.12);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.28);
  border-radius: 10px;
  color: var(--hc-gold, var(--hc-gold));
}
.hc-ftr__contact-ico svg {
  width: 16px;
  height: 16px;
}
.hc-ftr__contact-main {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--hc-paper, #ffffff);
  text-decoration: none;
  transition: color 0.18s ease;
}
.hc-ftr__contact-main:hover {
  color: var(--hc-gold, var(--hc-gold));
}
.hc-ftr__contact-meta {
  grid-column: 2;
  grid-row: 2;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(245, 240, 232, 0.5);
}

/* Payments block — inline single-row layout: label + pills side-by-side */
.hc-ftr__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 0.5px solid rgba(var(--hc-gold-rgb), 0.16);
}
.hc-ftr__pay-h {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.5);
}
.hc-ftr__pay-h::after {
  content: "";
  width: 14px;
  height: 1px;
  margin-left: 10px;
  background: rgba(245, 240, 232, 0.22);
}
.hc-ftr__pay-pills {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.hc-ftr__pay-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 5px;
  font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1f71;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hc-ftr__pay-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22);
}
/* Brand-tinted variants by visual order (Visa / MC / МИР / СБП / Безнал) */
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(1) {
  background: #1a1f71;
  color: var(--hc-paper, #ffffff);
  letter-spacing: 0.08em;
  font-style: italic;
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(2) {
  background: var(--hc-paper, #ffffff);
  color: #eb001b;
  position: relative;
  padding-left: 22px;
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #eb001b;
  transform: translateY(-50%);
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(2)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f79e1b;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(3) {
  background: linear-gradient(90deg, #00754a 50%, #009b3a 50%);
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(4) {
  background: linear-gradient(135deg, #00aff0 0%, #f6b900 100%);
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(5) {
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.32);
  color: rgba(245, 240, 232, 0.92);
  box-shadow: none;
}

/* B2B card */
.hc-ftr__b2b {
  display: grid;
  gap: 10px;
  padding: 24px 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--hc-gold-rgb), 0.20), transparent 55%),
    rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(var(--hc-gold-rgb), 0.22);
  border-radius: 18px;
}

.hc-ftr__b2b-h {
  margin: 4px 0 0;
  font-family: var(--hc-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__b2b-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(245, 240, 232, 0.72);
}

/* NAV — 3 columns (Каталог / Покупателям / Компания) */
.hc-ftr__nav,
.hc-ftr__nav--desktop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 32px);
}
.hc-ftr__mobile-nav {
  display: none;
}
.hc-ftr__nav-col {
  display: grid;
  gap: 10px;
  align-content: start;
}
/* Footer columns are page-level sections, so their headings are h2. They were
   h6, which made every page's outline jump h2 -> h6 with nothing in between.
   Styled by class, not by tag: as h6 the theme reached them through a tag
   selector, and simply renaming the tag silently handed them the global h2
   typography — font, weight, tracking and colour all moved. A class no tag
   rule can match keeps the level and the look independent. */
.hc-ftr__nav-col .hc-ftr__nav-h,
.hc-ftr__nav-col strong {
  margin: 0 0 4px;
  font-family: var(--hc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-gold, var(--hc-gold));
}
.hc-ftr__nav-col a,
.hc-ftr__nav-col li a {
  display: inline-flex;
  font-size: 13.5px;
  color: rgba(245, 240, 232, 0.78);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.hc-ftr__nav-col a:hover {
  color: var(--hc-paper, #ffffff);
  transform: translateX(3px);
}
.hc-ftr__nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* Legal entity strip */
.hc-ftr__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 44px);
  padding: 18px 0;
  border-top: 0.5px dashed rgba(var(--hc-gold-rgb), 0.16);
  border-bottom: 0.5px dashed rgba(var(--hc-gold-rgb), 0.16);
  font-family: var(--hc-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(245, 240, 232, 0.58);
}

/* Bottom copyright strip */
.hc-ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 24px;
  border-top: 0.5px solid rgba(var(--hc-gold-rgb), 0.12);
  font-size: 12px;
  color: rgba(245, 240, 232, 0.5);
}
.hc-ftr__bottom a {
  color: rgba(245, 240, 232, 0.62);
  text-decoration: none;
  transition: color 0.18s ease;
}
.hc-ftr__bottom a:hover {
  color: var(--hc-gold, var(--hc-gold));
}

@media (max-width: 1024px) {
  .hc-ftr__servicebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hc-ftr__top {
    grid-template-columns: 1fr 1fr;
  }
  .hc-ftr__manifesto {
    grid-column: 1 / -1;
  }
  .hc-ftr__nav,
  .hc-ftr__nav--desktop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .hc-ftr__servicebar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hc-ftr__top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hc-ftr__nav--desktop {
    display: none;
  }
  .hc-ftr__mobile-nav {
    display: grid;
    gap: 8px;
  }
  .hc-ftr__acc {
    border-top: 1px solid rgba(var(--hc-gold-rgb), 0.16);
  }
  .hc-ftr__acc:last-child {
    border-bottom: 1px solid rgba(var(--hc-gold-rgb), 0.16);
  }
  .hc-ftr__acc summary {
    position: relative;
    padding: 15px 34px 15px 0;
    color: var(--hc-paper, #ffffff);
    font-family: var(--hc-mono, "JetBrains Mono", monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }
  .hc-ftr__acc summary::-webkit-details-marker {
    display: none;
  }
  .hc-ftr__acc summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    color: var(--hc-gold, #c79b60);
    font-size: 18px;
    font-weight: 400;
  }
  .hc-ftr__acc[open] summary::after {
    content: "−";
  }
  .hc-ftr__acc-body {
    display: grid;
    gap: 0;
    padding: 0 0 10px;
  }
  .hc-ftr__acc-body a {
    padding: 9px 0;
    color: rgba(245, 240, 232, 0.76);
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
  }
  .hc-ftr__brand {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .hc-ftr {
    padding: var(--hc-sp-5) 0 clamp(80px, 14vw, 110px);
  }
  .hc-ftr__b2b {
    padding: 20px 22px;
  }
  .hc-ftr__legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 24px;
  }
  .hc-ftr__legal span:last-child {
    grid-column: 1 / -1;
  }
  .hc-ftr__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* css/blocks/101-hc-input.css */
/* =================== hc-input.css =================== */
.hc-field.is-valid .hc-input {border-color: var(--hc-success)}
.hc-field.is-invalid .hc-input {border-color: var(--hc-danger)}
/* Одно описание поля. Раньше .hc-input объявлялся здесь дважды: второе
   правило перебивало рамку и фон первого, и прочитать настоящий вид поля
   можно было только сложив оба. Свёрнуто в одно, значения — итоговые. */
.hc-input {width: 100%; padding: 11px 14px; font-family: inherit; font-size: var(--hc-fs-md); line-height: 1.4; color: var(--hc-ink); background: rgba(255,255,255,.72); border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: border-color var(--hc-dur-fast), box-shadow var(--hc-dur-fast)}
.hc-input:focus {border-color: var(--hc-accent); box-shadow: 0 0 0 3px var(--hc-accent-soft); outline: none}
.hc-input::placeholder {color: var(--hc-ink-muted)}
.hc-input--sm {padding: 6px 10px; font-size: var(--hc-fs-sm)}


/* ---- folded from 073-hc-checkbox.css ---- */
/* =================== hc-checkbox.css =================== */
.hc-checkbox, .hc-radio {width: 18px; height: 18px; margin-right: var(--hc-sp-2); accent-color: var(--hc-accent); cursor: pointer}

/* css/blocks/103-hc-label.css */
/* =================== hc-label.css =================== */
.hc-label {display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-radius: var(--hc-r-xs); font-family: var(--hc-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4}
.hc-label--sale {background: var(--hc-danger)}
.hc-label--hit {background: var(--hc-gold); color: var(--hc-ink-2)}

.hc-pdp-gallery__sale .hc-label--sale {
display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--hc-danger, #c9433a), #a82e26);
  color: var(--hc-paper, #ffffff);
  border-radius: var(--hc-r-pill);
  font-family: var(--hc-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: 0 6px 14px -4px rgba(201, 67, 58, 0.42);
}

/* css/blocks/104-hc-lead-modal.css */
/* hc-lead-modal.css - global lead/contact modal. */
.hc-lead-modal {
  position: fixed;
  inset: 0;
  z-index: var(--hc-z-modal, 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 13, 10, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hcFadeIn 160ms var(--hc-ease-out);
}

.hc-lead-modal[x-cloak],
.hc-modal[x-cloak] {
  display: none;
}

.hc-lead-modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: var(--hc-sp-6) var(--hc-sp-5);
  overflow: hidden;
  border: 1px solid rgba(46, 34, 24, 0.12);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(247, 242, 234, 0.98));
  box-shadow: 0 40px 120px rgba(28, 22, 16, 0.18), 0 10px 30px rgba(28, 22, 16, 0.10);
  animation: hcSlideUp 260ms var(--hc-ease-out);
}

.hc-lead-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hc-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--hc-ink-soft);
  box-shadow: 0 8px 24px rgba(27, 20, 13, 0.08);
  transition: background var(--hc-dur-fast), color var(--hc-dur-fast);
}

.hc-lead-modal__close:hover {
  background: var(--hc-paper-2);
  color: var(--hc-ink);
}

.hc-lead-modal__title {
  max-width: 18ch;
  margin: 0;
  color: var(--hc-ink);
  font-family: var(--hc-serif);
  font-size: var(--hc-fs-xl);
  font-weight: 500;
}

/* css/blocks/105-hc-lightbox.css */
/* =================== hc-lightbox.css =================== */
.hc-lightbox {position: fixed; inset: 0; z-index: 120; display: grid; align-items: center; justify-content: center; background: rgba(18, 14, 11, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 20px; place-items: center}
.hc-lightbox__close {position: absolute; top: 24px; right: 24px; z-index: 5; width: 44px; height: 44px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--hc-paper, #ffffff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--hc-dur-fast)}
.hc-lightbox__close:hover {background: rgba(255,255,255,0.18)}
.hc-lightbox__nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--hc-paper, #ffffff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--hc-dur-fast), transform var(--hc-dur-fast)}
.hc-lightbox__nav:hover {background: rgba(255,255,255,.22); transform: translateY(-50%) scale(1.08)}
.hc-lightbox__nav--prev {left: 24px; top: 50%; transform: translateY(-50%)}
.hc-lightbox__nav--next {right: 24px; top: 50%; transform: translateY(-50%)}
.hc-lightbox__figure {position: relative; max-width: 90vw; max-height: 88vh; display: flex; align-items: center; justify-content: center}
.hc-lightbox__img {max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 14px; box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8)}
.hc-lightbox__caption {position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-family: var(--hc-mono); font-size: var(--hc-fs-sm)}
.hc-lightbox__counter {position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 13px; letter-spacing: 0.1em}
.hc-lightbox__close, .hc-lightbox__nav {position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--hc-paper, #ffffff); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.2s ease}
.hc-lightbox__close:hover, .hc-lightbox__nav:hover {background: rgba(255, 255, 255, 0.2)}
@media(max-width:920px) {
  .hc-lightbox__img.hc-img-broken {display: none}
}

/* css/blocks/108-hc-livechat.css */
/* =================== hc-livechat.css =================== */
.hc-livechat {
position: fixed; right: 20px; bottom: 20px; z-index: 70; font-family: var(--hc-sans, "Outfit", -apple-system, sans-serif)
}
.hc-livechat__fab {
width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--hc-ink, #1a1714), #2a221c); color: var(--hc-paper, #ffffff); border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(26, 23, 20, 0.32); position: relative; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s
}
.hc-livechat__fab:hover {
transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(26, 23, 20, 0.4)
}
.hc-livechat__fab::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--hc-gold-rgb), 0.35), transparent 65%); opacity: 0; transition: opacity 0.28s; z-index: -1; pointer-events: none
}
.hc-livechat__fab:hover::after {
opacity: 1
}
.hc-livechat__dot {
position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--hc-green, var(--hc-success, #3d6b4f)); border: 2px solid var(--hc-ink, #1a1714); animation: hc-pulse-glow 2s ease-in-out infinite
}
.hc-livechat__fab svg {
color: var(--hc-gold, var(--hc-gold))
}
.hc-livechat__panel {
position: absolute; bottom: 76px; right: 0; width: 340px; max-width: calc(100vw - 40px); background: var(--hc-bg, var(--hc-bg)); border: 1px solid rgba(26, 23, 20, 0.1); border-radius: 18px; box-shadow: 0 24px 72px rgba(18, 14, 11, 0.24); overflow: hidden; transform-origin: bottom right; animation: hc-livechat-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1)
}
.hc-livechat__panel[hidden] {
display: none
}
.hc-livechat__header {
padding: 18px 20px; background: linear-gradient(135deg, var(--hc-ink, #1a1714), #2a221c); color: var(--hc-paper, #ffffff); position: relative; overflow: hidden
}
.hc-livechat__header::after {
content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 120px; background: radial-gradient(ellipse at top right, rgba(var(--hc-gold-rgb), 0.25), transparent 60%); pointer-events: none
}
.hc-livechat__head .hc-eyebrow {
display: flex; align-items: center; gap: 6px; margin-bottom: 6px; position: relative
}
.hc-livechat__head .hc-eyebrow i {
display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--hc-success, #3d6b4f); animation: hc-pulse-glow 2s ease-in-out infinite
}
.hc-livechat__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 18px; margin: 0 0 2px; position: relative
}
.hc-livechat__sub {
font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 0; position: relative
}
.hc-livechat__close {
position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: none; color: var(--hc-paper, #ffffff); font-size: 13px; cursor: pointer; z-index: 2
}
.hc-livechat__body {
padding: 18px 20px
}
.hc-livechat__body p {
font-size: 13px; line-height: 1.55; margin: 0 0 12px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.72))
}
.hc-livechat__channels {
display: grid; gap: 8px; margin-bottom: 16px
}
.hc-livechat__channel {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--hc-paper, #ffffff); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 12px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: transform 0.2s ease, border-color 0.2s ease
}
.hc-livechat__channel:hover {
transform: translateX(2px); border-color: var(--hc-accent, var(--hc-accent))
}
.hc-livechat__channel-ico {
width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 16px
}



.hc-livechat__channel-body {
display: flex; flex-direction: column; gap: 2px; min-width: 0
}
.hc-livechat__channel-body strong {
font-weight: 500; font-size: 13.5px
}
.hc-livechat__channel-body span {
font-size: 11.5px; color: var(--hc-muted, rgba(26, 23, 20, 0.58))
}
.hc-livechat__form {
display: grid; gap: 8px; padding-top: 14px; border-top: 1px dashed rgba(26, 23, 20, 0.12)
}
.hc-livechat__form label {
font-size: 11px; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--hc-mono, "JetBrains Mono", monospace)
}
.hc-livechat__form input, .hc-livechat__form textarea {
width: 100%; padding: 10px 12px; background: var(--hc-paper, #ffffff); border: 1px solid rgba(26, 23, 20, 0.1); border-radius: 10px; font-size: 13px; font-family: inherit; outline: none; resize: vertical
}
.hc-livechat__form input:focus, .hc-livechat__form textarea:focus {
border-color: var(--hc-accent, var(--hc-accent))
}
.hc-livechat__submit {
padding: 10px 14px; background: var(--hc-ink, #1a1714); color: var(--hc-bg); border: none; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform 0.2s ease
}
.hc-livechat__submit:hover {
transform: translateY(-1px)
}
.hc-livechat__done {
padding: 14px; background: rgba(61, 107, 79, 0.08); border: 1px solid rgba(61, 107, 79, 0.22); border-radius: 10px; font-size: 13px; color: var(--hc-green, var(--hc-success, #3d6b4f)); text-align: center
}

.hc-livechat__channel--tg .hc-livechat__channel-ico {
background: rgba(42, 170, 226, 0.14); color: #2aaae2
}

.hc-livechat__channel--wa .hc-livechat__channel-ico {
background: rgba(37, 211, 102, 0.14); color: #25d366
}

.hc-livechat__channel--phone .hc-livechat__channel-ico {
background: rgba(var(--hc-accent-rgb), 0.14); color: var(--hc-accent, var(--hc-accent))
}

/* Keep the contact control clear of the fixed mobile tab bar.  Checkout and
   compare need the whole viewport for fields/tables, so only those pages hide
   the FAB on mobile. */
@media (max-width: 640px) {
  .hc-livechat {
    right: 14px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .page-checkout .hc-livechat,
  .page-compare .hc-livechat,
  body.cookie-banner-open .hc-livechat { display: none; }
}

/* css/blocks/109-hc-mobile-menu.css */
/* =================== hc-mobile-menu.css =================== */
/* hc-mobile-menu — overlay drawer toggled by .hc-hdr__burger on ≤1024px.
   Body class `hc-mobile-menu-open` (added by the burger click handler) puts
   the drawer into its open state. Strictly .hc-mobile-menu* + the body-class
   selectors that describe THIS drawer's own state. */

.hc-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--hc-z-drawer, 80);
  overflow: hidden;
  background: rgba(27, 20, 13, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  /* visibility, not only opacity: a transparent element keeps its place in the
     tab order and in the accessibility tree. Measured 2026-08-05 — the closed
     menu was 390x664 on screen with seventeen focusable links in it, so a
     keyboard user tabbed straight into an invisible panel. The delay keeps the
     fade: visible immediately on open, hidden only once the fade has finished. */
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.hc-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 90vw);
  padding: 24px 20px;
  overflow-y: auto;
  background: var(--hc-paper, #fffcf7);
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Шапка панели: логотип слева, крестик справа. До этого в панели не было
   кнопки закрытия вообще — выйти можно было только тычком в узкую полоску
   затемнения справа от неё. */
.hc-mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hc-mobile-menu__close {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--hc-ink, #1a1714);
  background: transparent;
  border: 1px solid var(--hc-line, #e6e0d8);
  border-radius: 50%;
  cursor: pointer;
}
.hc-mobile-menu__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.hc-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
}
.hc-mobile-menu__nav a {
  display: block;
  padding: 12px 14px;
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  font-size: 16px;
  border-radius: 8px;
  transition: background 0.12s;
}
.hc-mobile-menu__nav a:hover,
.hc-mobile-menu__nav a.is-active {
  background: rgba(var(--hc-gold-rgb), 0.18);
}
.hc-mobile-menu__nav strong {
  display: block;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  margin: 16px 0 6px;
  padding: 0 14px;
}

/* open state — body class controls only this drawer's own visuals */
body.hc-mobile-menu-open {
  overflow: hidden;
}
body.hc-mobile-menu-open .hc-mobile-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}
body.hc-mobile-menu-open .hc-mobile-menu__panel {
  transform: none;
}

/* css/blocks/110-hc-mobile-tabbar.css */
/* =================== hc-mobile-tabbar.css =================== */
/* hc-mobile-tabbar - bottom fixed nav strip shown only on mobile (≤640px).
 * 5 items: Home / Catalog / Favorites / Compare / Cart. Premium dark glass
 * with backdrop-blur. Strictly .hc-mobile-tabbar / .hc-mobile-tabbar__*. */

.hc-mobile-tabbar {
display: none;
}

@media (max-width: 640px) {
  /* How much of the bottom of the screen this bar occupies — its own height
     plus the gap it floats above the edge. Anything else that pins itself to
     the bottom (the purchase bar on a product page, the one on the cart) has
     to clear it, and each of them used to carry its own guess of 58px. The bar
     is 67px tall at the shop's font sizes and sits 12px up, so the guess was
     nine pixels short and the purchase bar landed on top of it. Declared here,
     in the bar's own file, so there is one number to change. */
  body {
    --hc-tabbar-h: 67px;
    --hc-tabbar-clearance: calc(12px + var(--hc-tabbar-h));
  }
  body main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .hc-mobile-tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: var(--hc-tabbar-h);
    z-index: var(--hc-z-header, 50);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    background: rgba(20, 17, 14, 0.92);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 0.5px solid rgba(var(--hc-gold-rgb), 0.20);
    border-radius: 20px;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.18),
      0 24px 50px -16px rgba(0, 0, 0, 0.42);
  }
  .page-checkout .hc-mobile-tabbar,
  body.cookie-banner-open .hc-mobile-tabbar {
    display: none;
  }
  .page-checkout main {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}
.hc-mobile-tabbar__item {
display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  color: rgba(245, 240, 232, 0.66);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hc-mobile-tabbar__item span {
font-size: 20px;
  line-height: 1;
  color: var(--hc-gold, var(--hc-gold));
}
.hc-mobile-tabbar__item b {
font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-mobile-tabbar__item:hover, .hc-mobile-tabbar__item.is-active {
background: rgba(var(--hc-gold-rgb), 0.14);
  color: var(--hc-paper, #ffffff);
}
.hc-mobile-tabbar__item:active {
transform: scale(0.96);
}
.hc-mobile-tabbar__cart {
position: relative;
}
.hc-mobile-tabbar__cart::after {
position: absolute;
  top: 6px;
  right: 18%;
}

/* auto-hide on scroll-down (JS toggles .is-tabbar-hidden); mobile only */
@media (max-width: 640px) {
  .hc-mobile-tabbar { transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
  .hc-mobile-tabbar.is-tabbar-hidden { transform: translateY(calc(100% + 16px)); opacity: 0; pointer-events: none; }
}

/* 320px devices: keep all five labels readable without horizontal crowding. */
@media (max-width: 360px) {
  .hc-mobile-tabbar {
    left: 6px;
    right: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 1px;
    padding: 4px;
    border-radius: 16px;
  }
  .hc-mobile-tabbar__item {
    gap: 1px;
    padding: 7px 1px;
    border-radius: 11px;
    font-size: 8px;
    letter-spacing: 0;
  }
  .hc-mobile-tabbar__item span,
  .hc-mobile-tabbar__item svg {
    width: 18px;
    height: 18px;
  }
}

/* css/blocks/111-hc-modal.css */
/* =================== hc-modal.css =================== */
.hc-modal {
position: fixed; inset: 0; z-index: var(--hc-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--hc-sp-4); background: rgba(26, 23, 20, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--hc-dur-base), visibility 0s linear var(--hc-dur-base)
}
/* visibility, not only opacity: a transparent dialog keeps its place in
   the tab order and in the accessibility tree, so the keyboard walks into
   a modal nobody opened. Same fix as the mobile menu. */
.hc-modal.is-open {
opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--hc-dur-base), visibility 0s
}
.hc-modal__panel {
position: relative; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; background: var(--hc-paper); border-radius: var(--hc-r-2xl); box-shadow: var(--hc-sh-4); transform: scale(0.94); transition: transform var(--hc-dur-base) var(--hc-ease-bounce)
}
.hc-modal.is-open .hc-modal__panel {
transform: scale(1)
}
.hc-modal__head {
position: sticky; top: 0; padding: var(--hc-sp-4) var(--hc-sp-5); background: var(--hc-paper); border-bottom: 1px solid var(--hc-line); display: flex; align-items: center; justify-content: space-between
}
.hc-modal__title {
font-size: var(--hc-fs-xl)
}
.hc-modal__x {
width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--hc-ink-mid)
}
.hc-modal__x:hover {
background: var(--hc-paper-3); color: var(--hc-ink)
}
.hc-modal__body {
padding: var(--hc-sp-5)
}
.hc-modal__foot {
padding: var(--hc-sp-4) var(--hc-sp-5); border-top: 1px solid var(--hc-line); display: flex; justify-content: flex-end; gap: var(--hc-sp-2)
}

@media(max-width:920px) {
  .hc-modal[x-show], .hc-dialog[x-show] {display: none}
  .hc-modal[x-show="true"]:not([x-cloak]), .hc-dialog[x-show="true"]:not([x-cloak]) {display: block}
}

.hc-modal {
position: fixed;
  inset: 0;
  background: rgba(26, 23, 20, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--hc-z-modal);
  opacity: 0;
  transition: opacity var(--hc-dur-base) var(--hc-ease);
  animation: hcModalFadeIn var(--hc-dur-base) var(--hc-ease);
}
.hc-modal.is-active {
display: flex;
  opacity: 1;
}
.hc-modal__content {
background: var(--hc-paper);
  border-radius: var(--hc-r-md);
  padding: var(--hc-sp-6);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--hc-sh-4);
  animation: hcModalSlideUp var(--hc-dur-base) var(--hc-ease);
}
.hc-modal__close {
position: absolute;
  top: var(--hc-sp-4);
  right: var(--hc-sp-4);
  width: 36px;
  height: 36px;
  border: none;
  background: var(--hc-bg);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hc-fs-2xl);
  color: var(--hc-ink);
  transition: all var(--hc-dur-base) var(--hc-ease);
}
.hc-modal__close:hover {
background: var(--hc-line);
  transform: rotate(90deg) scale(1.15);
}

.hc-modal--wide .hc-modal__panel {
max-width: 960px
}

/* css/blocks/112-hc-muted.css */
/* =================== hc-muted.css =================== */
.hc-muted {color: var(--hc-ink-mid)}
@media(max-width:920px) {
  .page-favorites .hc-muted {font-size: 15px; line-height: 1.55; max-width: 64ch; margin: 0 0 32px}
}

/* css/blocks/114-hc-pag.css */
/* =================== hc-pag.css =================== */
.hc-pag {display: flex; gap: 4px; justify-content: center; margin: var(--hc-sp-7) 0}
.hc-pag a, .hc-pag span {min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hc-line); border-radius: var(--hc-r-sm); background: var(--hc-paper); color: var(--hc-ink-soft); font-family: var(--hc-mono); font-size: var(--hc-fs-sm); transition: all var(--hc-dur-fast)}
.hc-pag a:hover {background: var(--hc-paper-3); color: var(--hc-ink)}
.hc-pag .is-current, .hc-pag [aria-current="page"] {background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-color: var(--hc-ink)}
.hc-pag [aria-disabled="true"] {opacity: 0.35; pointer-events: none}

.hc-pag__n{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(141,109,71,.2);border-radius:9px;text-decoration:none;color:var(--hc-ink,#1a1714);font-size:14px;transition:border-color .15s,background .15s}
.hc-pag__n:hover{border-color:var(--hc-accent,#b8895a);background:rgba(var(--hc-gold-rgb),.12)}
.hc-pag__n.is-current{background:var(--hc-ink,#1a1714);color:#fff;border-color:var(--hc-ink,#1a1714)}
.hc-pag__gap,.hc-pag__x{color:var(--hc-ink-mid,rgba(26,23,20,.4));padding:0 4px}

/* css/blocks/139-hc-phone-digits.css */
/* =================== hc-phone-digits.css =================== */
[data-phone-reveal] .hc-phone-digits {filter: none; transition: opacity 0.2s ease; letter-spacing: 0.02em; user-select: text}
[data-phone-reveal][data-revealed] .hc-phone-digits {filter: none; user-select: text}

/* css/blocks/140-hc-phone-hint.css */
/* =================== hc-phone-hint.css =================== */
[data-phone-reveal] .hc-phone-hint {font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hc-accent-dark, #7a6548); opacity: 0.7; transition: opacity 0.3s ease}
[data-phone-reveal][data-revealed] .hc-phone-hint {opacity: 0; width: 0; overflow: hidden}

/* css/blocks/147-hc-sec-h.css */
/* =================== hc-sec-h.css =================== */
.hc-sec-h {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hc-sp-4); margin-bottom: var(--hc-sp-5); flex-wrap: wrap}
.hc-sec-h__title > h2 {font-size: var(--hc-fs-3xl); margin: 0}
.hc-sec-h__side {font-size: var(--hc-fs-sm); color: var(--hc-accent-dark); display: inline-flex; align-items: center; gap: var(--hc-sp-1); transition: transform var(--hc-dur-base) var(--hc-ease)}
.hc-sec-h__side:hover {transform: translateX(3px); color: var(--hc-accent)}
.pdp-linked-section .hc-sec-h {align-items: flex-end}
.hc-sec-h__title {margin-top: var(--hc-sp-1, 6px); font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -0.01em; color: var(--hc-ink, #1a1714)}

/* css/blocks/148-hc-sec.css */
/* =================== hc-sec.css =================== */
.hc-sec {padding: 48px 0; position: relative}
.hc-sec--tight {padding: 32px 0}
.hc-sec--soft {background: var(--hc-bg-warm, #f5efde); padding: 56px 0}
.page-catalog main>.hc-sec:first-of-type {padding-top: clamp(14px,2vw,24px)}
.page-delivery main>.hc-sec:first-of-type, .page-favorites main>.hc-sec:first-of-type, .page-tracking main>.hc-sec:first-of-type, .page-cart main>.hc-sec:first-of-type, .page-checkout main>.hc-sec:first-of-type, .page-account main>.hc-sec:first-of-type {padding-top: clamp(18px,2.2vw,30px)}
.page-shared-cart .hc-sec {padding-block: clamp(40px, 5vw, 72px)}

/* css/blocks/149-hc-select.css */
/* =================== hc-select.css =================== */
.hc-select {width: 100%; padding: 11px 38px 11px 14px; font-family: inherit; font-size: var(--hc-fs-md); line-height: 1.4; color: var(--hc-ink); background-color: var(--hc-paper); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1714' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); transition: border-color var(--hc-dur-fast), box-shadow var(--hc-dur-fast); appearance: none; -webkit-appearance: none}
.hc-select:focus {border-color: var(--hc-accent); box-shadow: 0 0 0 3px var(--hc-accent-soft); outline: none}

/* css/blocks/151-hc-skel.css */
/* =================== hc-skel.css =================== */
.hc-skel {display: block; background: linear-gradient(90deg,
    var(--hc-paper-3) 0%,
    #ece7df 40%,
    var(--hc-paper-3) 80%); background-size: 200% 100%; animation: hcShimmer 1.4s ease-in-out infinite; border-radius: var(--hc-r-sm); position: relative}
.hc-pcard-skel__body > .hc-skel {margin-bottom: 6px}

/* ─── folded from hc-skel-grid.css ─── */
.hc-skel-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hc-sp-4)}

/* css/blocks/152-hc-small.css */
/* =================== hc-small.css =================== */
.hc-small {
font-size: var(--hc-fs-xs)
}
.hc-acc-order__delivery-grid .hc-small.hc-muted {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px
}

.hc-cat-filters__section-head .hc-small, .hc-cat-filters__section-head span {
font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(26, 23, 20, 0.45);
  white-space: nowrap;
}

.hc-cat-filters__section-head .hc-small {
font-family: var(--hc-sans, "Outfit", sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.42));
}

/* css/blocks/153-hc-spinner.css */
/* =================== hc-spinner.css =================== */
.hc-spinner {width: 18px; height: 18px; border: 2px solid var(--hc-line-2); border-top-color: var(--hc-accent); border-radius: 50%; animation: hcSpin 700ms linear infinite}

/* css/blocks/171-hc-wrap.css */
/* =================== hc-wrap.css =================== */
.hc-wrap {width: 100%; max-width: var(--hc-wrap); margin: 0 auto; padding: 0 var(--hc-sp-5)}
.page-catalog .hc-wrap, .page-pdp .hc-wrap, .page-favorites .hc-wrap, .page-delivery .hc-wrap, .page-blog-index .hc-wrap, .page-blog-detail .hc-wrap {max-width: min(1480px, calc(100vw - 44px))}
.page-catalog .hc-wrap, .page-pdp .hc-wrap {max-width: min(1480px,calc(100vw - 48px))}
.page-hero .hc-wrap {position: relative; z-index: 2}
.page-shared-cart .hc-wrap {max-width: 920px}

@media (max-width: 640px) {
  .page-catalog .hc-wrap,
  .page-pdp .hc-wrap {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* css/blocks/174-hz-fx-reveal.css */
/* =================== hz-fx-reveal.css =================== */
/* Fail-safe mode: keep reveal blocks always visible.
   Any JS animation enhancer may add transforms later, but base state never hides content. */
.hz-fx-reveal,
[data-hc-reveal],
[data-fx-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
  will-change: opacity, transform;
}

.stagger > .hz-fx-reveal:nth-child(1) {transition-delay: 0ms}
.stagger > .hz-fx-reveal:nth-child(2) {transition-delay: 80ms}
.stagger > .hz-fx-reveal:nth-child(3) {transition-delay: 160ms}
.stagger > .hz-fx-reveal:nth-child(4) {transition-delay: 240ms}
.stagger > .hz-fx-reveal:nth-child(5) {transition-delay: 320ms}
.stagger > .hz-fx-reveal:nth-child(6) {transition-delay: 400ms}

.hz-fx-reveal--instant,
[data-fx-reveal].hz-fx-reveal--instant,
[data-hc-reveal].hz-fx-reveal--instant {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hz-fx-reveal,
  [data-hc-reveal],
  [data-fx-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hz-fx-magnetic,
[data-fx-magnetic] {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* css/blocks/175-hz-fx-stagger.css */
/* =================== hz-fx-stagger.css =================== */
/* Fail-safe mode: never hide grid children.
   We keep lightweight transition only for optional JS class toggles. */
.hz-fx-stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* css/blocks/177-hzlead.css */
/* hzlead.css - product lead/request modal. */
.hzlead {
  position: fixed;
  inset: 0;
  z-index: var(--hc-z-modal, 1000);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(26, 23, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hzlead[x-cloak] {
  display: none;
}

.hzlead__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 32px 32px 28px;
  background: #fdf8ef;
  border-radius: 20px;
  box-shadow: 0 40px 120px rgba(28, 22, 16, 0.28);
}

.hzlead__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 23, 20, 0.1);
  border-radius: 50%;
  background: var(--hc-paper, #ffffff);
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.18s ease;
}

.hzlead__close:hover {
  border-color: var(--hc-accent, var(--hc-accent));
  color: var(--hc-accent, var(--hc-accent));
  transform: scale(1.04);
}

.hzlead__close svg {
  width: 16px;
  height: 16px;
}

.hzlead__head {
  margin: 0 0 18px;
  padding-right: 44px;
}

.hzlead__title {
  margin: 0 0 8px;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hc-ink, #1a1714);
}

.hzlead__sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(26, 23, 20, 0.62);
}

/* Product preview — shown for Быстрый заказ / 1-click so the buyer sees exactly
   what they're ordering (image + name + price), framed premium. */
.hzlead__product {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 0.5px solid var(--hc-gold-border, rgba(180, 151, 115, 0.34));
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.96), rgba(247, 242, 234, 0.82));
}

.hzlead__product-media {
  flex: none;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(180, 151, 115, 0.22);
  border-radius: 11px;
  overflow: hidden;
}

.hzlead__product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

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

.hzlead__product-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 15px;
  line-height: 1.25;
  color: var(--hc-ink, #1a1714);
}

.hzlead__product-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.hzlead__product-sku {
  font-family: var(--hc-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 23, 20, 0.5);
}

.hzlead__product-price {
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--hc-ink, #1a1714);
}

.hzlead__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.hzlead__chips li {
  position: relative;
  padding: 6px 12px 6px 26px;
  font-size: 12px;
  line-height: 1.3;
  color: #6f5a3c;
  background: rgba(var(--hc-gold-rgb), 0.14);
  border: 0.5px solid rgba(180, 151, 115, 0.32);
  border-radius: 100px;
  white-space: nowrap;
}

.hzlead__chips li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--hc-accent, var(--hc-accent));
  border-bottom: 1.5px solid var(--hc-accent, var(--hc-accent));
  transform: translateY(-65%) rotate(-45deg);
}

.hzlead__form {
  display: grid;
  gap: 14px;
}

.hzlead__field {
  display: grid;
  gap: 6px;
}

.hzlead__field[x-show] {
  min-width: 0;
}

.hzlead__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
}

.hzlead__label em {
  font-style: normal;
  color: #c0392b;
  margin-left: 2px;
}

.hzlead__input,
.hzlead__textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--hc-ink, #1a1714);
  background: var(--hc-paper, #ffffff);
  border: 0.5px solid rgba(180, 151, 115, 0.35);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hzlead__input::placeholder,
.hzlead__textarea::placeholder {
  color: rgba(26, 23, 20, 0.4);
}

.hzlead__input:focus,
.hzlead__textarea:focus {
  outline: none;
  border-color: var(--hc-accent, var(--hc-accent));
  box-shadow: 0 0 0 3px rgba(var(--hc-accent-rgb), 0.18);
}

.hzlead__textarea {
  resize: vertical;
  min-height: 76px;
}

.hzlead__submit {
  height: 50px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}

.hzlead__submit:hover {
  background: #2c2620;
  transform: translateY(-1px);
}

.hzlead__legal {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(26, 23, 20, 0.55);
  text-align: center;
}

.hzlead__legal a {
  color: rgba(26, 23, 20, 0.7);
  text-decoration: underline;
  text-decoration-color: rgba(26, 23, 20, 0.3);
}

.hzlead__legal a:hover {
  color: var(--hc-ink, #1a1714);
}

/* css/blocks/215-t-label.css */
/* =================== t-label.css =================== */
.t-label {display: inline-block; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-accent-dark, #7a6548); margin-bottom: 10px}
@media(max-width:920px) {
  .premium-surface .t-label {font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hc-accent-dark, var(--hc-accent-dark)); font-weight: 500; display: block; margin-bottom: 12px}
}

/* css/blocks/216-t-title.css */
/* =================== t-title.css =================== */
.t-title {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(24px, 3vw, 36px); font-weight: 400; line-height: 1.15; color: var(--hc-ink, #1a1714); margin: 0 0 clamp(20px, 2.4vw, 28px)}
@media(max-width:920px) {
  .premium-surface .t-title {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; line-height: 1.15; margin: 0 0 16px; color: var(--hc-ink, #1a1714)}
  .t-title {margin-bottom: 24px}
  .page-favorites .t-title {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1.05; margin: 0 0 12px}
}

/* css/blocks/242-grid-utilities.css */
/* Shared responsive grid utilities for repeated card/rail patterns */

.hc-grid-fit-220 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hc-grid-fit-240 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hc-sp-3);
}

/* premium 2-up grid (contacts / about / account cards) — was referenced in
 * templates but never defined, so content collapsed to one column. */
.premium-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.hc-grid-4-3-2-1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hc-util-autofit-240 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hc-sp-3, 14px);
}

.hc-util-mt-3 { margin-top: var(--hc-sp-3, 14px); }
.hc-util-my-3 { margin: var(--hc-sp-3, 14px) 0; }
.hc-util-pad-4 { padding: var(--hc-sp-4, 20px); }
.hc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-link-accent { color: var(--hc-accent-dark, #7a6548); }
.hc-link-accent:hover { text-decoration: underline; text-underline-offset: 2px; }
.hc-link-underline { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1280px) {
  .hc-grid-4-3-2-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .hc-grid-4-3-2-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hc-grid-2 { grid-template-columns: 1fr; }
  .premium-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hc-grid-4-3-2-1 {
    grid-template-columns: 1fr;
  }
}


/* ---- folded from 033-g2.css ---- */
/* =================== g2.css =================== */
.g2 {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px}

.page-delivery .g2 {
align-items: stretch
}

/* css/blocks/243-mkt-popup.css */
.mkt-popup {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.mkt-popup.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mkt-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 7, 6, .58);
}

.mkt-popup__panel {
  position: relative;
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
}

.mkt-popup__media { min-height: 220px; background: #f2eee8; }
.mkt-popup__img { width: 100%; height: 100%; object-fit: cover; }
.mkt-popup__body { padding: 20px; }
.mkt-popup__title { margin: 0 0 8px; font-size: 28px; line-height: 1.15; }
.mkt-popup__content { margin: 0 0 14px; color: rgba(26, 23, 20, .75); }
.mkt-popup__cta, .mkt-popup__form .hc-btn { width: 100%; }
.mkt-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, .06);
}

@media (max-width: 760px) {
  .mkt-popup {
    align-items: end;
    padding: 12px 8px calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .mkt-popup__panel {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px));
    grid-template-columns: 1fr;
  }
  .mkt-popup__media { min-height: 160px; }
}

/* css/blocks/244-hc-toast.css */
.toast-stack {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--hc-z-toast);
  display: grid;
  gap: var(--sp-2);
  width: min(360px, calc(100vw - var(--sp-4) * 2));
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: start;
  overflow: hidden;
  padding: var(--sp-3);
  color: var(--hc-ink);
  background: var(--hc-bg);
  border: 1px solid var(--hc-line);
  border-radius: var(--radius);
  box-shadow: var(--hc-sh-3);
}

.toast.is-closing {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hc-accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
}

.toast-title {
  font-weight: 700;
}

.toast-msg {
  font-size: var(--hc-fs-sm);
  color: var(--ink-3);
}

.toast-close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  animation: hc-toast-progress 4.5s linear forwards;
}

.toast-progress--fast {
  animation-duration: 4.2s;
}

.toast.is-paused .toast-progress {
  animation-play-state: paused;
}

@keyframes hc-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* css/blocks/213-skip-nav.css */
/* =================== skip-nav.css =================== */
.skip-nav {position: fixed; left: 14px; top: 10px; z-index: calc(var(--hc-z-header) + 6); display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--hc-gold-border); background: rgba(26,23,20,.96); color: var(--hc-paper, #ffffff); font-size: 12px; font-weight: 600; letter-spacing: .02em; box-shadow: 0 10px 26px rgba(26,23,20,.28); transform: translateY(-140%); opacity: 0; pointer-events: none; transition: transform .18s ease,opacity .18s ease}
.skip-nav:focus, .skip-nav:focus-visible {transform: translateY(0); opacity: 1; pointer-events: auto; outline: none; color: var(--hc-paper, #ffffff)}

/* css/blocks/317-hc-page-loader.css */
/* Полоса загрузки вверху страницы.
 *
 * Скрипт hc-fx.js создаёт <div id="hc-page-loader" class="hc-loader">, ведёт
 * его прогресс через data-progress-visual и помечает работу классом
 * is-loading. Вида у него не было ни одного правила: элемент лежал в потоке
 * высотой 0 и прозрачным — то есть переход по ссылке или смена фильтра
 * происходили молча, без единого признака, что запрос ушёл.
 *
 * Ширину задаёт готовая лесенка [data-progress-visual="N"] из
 * 010-foundation-forms.css — здесь только место, высота и цвет.
 */
.hc-loader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  height: 3px;
  background: var(--ldsp-blue, #2f63d6);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(47, 99, 214, .45);
  opacity: 0;
  transition: width .22s ease, opacity .22s ease;
  pointer-events: none;
}

.hc-loader.is-loading { opacity: 1; }

/* Тем, кто просил не анимировать: полоса остаётся, но не ползёт. */
@media (prefers-reduced-motion: reduce) {
  .hc-loader { transition: opacity .01s linear; }
}

/* css/blocks/270-hc-tilefx.css */


/* ---- animated line-SVG icon ---- */
.tileSvg { width: 28px; height: 28px; overflow: visible; }

.tileSvg__ring,
.tileSvg__shape,
.tileSvg__path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tileSvg__ring {
  opacity: 0.30;
  stroke-width: 1.4;
  stroke-dasharray: 9 7;
  transform-origin: center;
  animation: tileSpin 14s linear infinite;
}

.tileSvg__shape {
  opacity: 0.95;
  transform-origin: center;
  animation: tileFloat 3.4s ease-in-out infinite;
}

.tileSvg__path {
  stroke-dasharray: 40 8;
  transform-origin: center;
  animation: tileDraw 3.6s ease-in-out infinite;
}
@keyframes tileSpin { to { transform: rotate(360deg); } }
@keyframes tileFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes tileDraw { 0%, 100% { stroke-dashoffset: 0; opacity: 1; } 50% { stroke-dashoffset: 12; opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  .tileSvg__ring, .tileSvg__shape, .tileSvg__path { animation: none !important; }
}
/* css/blocks/300-theme-scandi.css */
/* ===== 300-theme-scandi.css — «scandi» theme (V5 · HAY/Muuto reference) =====
   Light greige ground, near-black ink, green accent, system grotesk, soft radii.
   Scoped to [data-theme="scandi"] → inert elsewhere. No !important. */

:root[data-theme="scandi"] {
  /* surfaces — warm-grey, not cream */
  --hc-bg: #f2f1ef;
  --hc-bg-warm: #eae8e4;
  --hc-paper: #ffffff;
  --hc-paper-2: #faf9f7;
  --hc-paper-3: #e9e7e3;
  /* ink */
  --hc-ink: #1d1d1b;
  --hc-ink-2: #33332f;
  --hc-ink-soft: rgba(29, 29, 27, 0.72);
  --hc-ink-mid: rgba(29, 29, 27, 0.55);
  --hc-ink-muted: rgba(29, 29, 27, 0.34);
  /* accent — green */
  --hc-accent: #2e7d46;
  --hc-accent-dark: #20603a;
  --hc-accent-soft: rgba(46, 125, 70, 0.09);
  --hc-accent-rgb: 46, 125, 70;
  --hc-gold: #2e7d46;
  --hc-gold-rgb: 46, 125, 70;
  --hc-gold-soft: rgba(46, 125, 70, 0.12);
  --hc-gold-border: rgba(46, 125, 70, 0.35);
  --hc-gold-1: #2e7d46;
  --hc-gold-2: #24713b;
  --hc-green: #2e7d46;
  --hc-success: #2e7d46;
  --hc-success-soft: rgba(46, 125, 70, 0.12);
  --hc-muted: rgba(29, 29, 27, 0.6);
  /* hairlines */
  --hc-line: rgba(29, 29, 27, 0.09);
  --hc-line-2: rgba(29, 29, 27, 0.15);
  --hc-line-strong: rgba(29, 29, 27, 0.25);
  --hc-glow-color: rgba(46, 125, 70, 0.2);
  --hc-shadow-warm: 0 30px 80px -24px rgba(29, 29, 27, 0.28);
  /* type — clean system grotesk everywhere (no serif) */
  --hc-serif: -apple-system, "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif;
  --hc-sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --hc-font: var(--hc-sans);
  /* soft modern radii */
  --hc-r-xs: 6px;
  --hc-r-sm: 8px;
  --hc-r-md: 12px;
  --hc-r-lg: 16px;
  --hc-r-xl: 20px;
  --hc-r-2xl: 24px;
  --hc-r-3xl: 32px;
  /* gradients — greige, no sand */
  --hc-hero-grad: linear-gradient(160deg, #efeeeb 0%, #e2e0db 100%);
  --hc-cat-feat-grad: linear-gradient(160deg, #efeeeb 0%, #e0ddd7 100%);
  --hc-cat-feat-hover-grad: linear-gradient(160deg, #e0ddd7 0%, #2e7d46 100%);
  --hc-b2b-grad: linear-gradient(135deg, #1d1d1b 0%, #2c2c28 100%);
  /* storefront mirror */
  --sf-ink: #1d1d1b;
  --sf-muted: rgba(29, 29, 27, 0.6);
  --sf-line: rgba(29, 29, 27, 0.14);
  --sf-line-strong: rgba(46, 125, 70, 0.32);
  --sf-paper: #ffffff;
  --sf-soft: #f2f1ef;
  --sf-radius-xl: 20px;
  --sf-radius-lg: 16px;
  --sf-radius-md: 12px;
  --sf-shadow: 0 24px 56px -36px rgba(29, 29, 27, 0.3);
}

/* product-type placeholders: calm the warm palette down */
[data-theme="scandi"] .hc-ph { filter: saturate(0.3); }

/* category scenes (catalog root tiles): ink line-art with green accents */
[data-theme="scandi"] .hc-cat-scene__bg { fill: #edece9; }
[data-theme="scandi"] .hc-cat-scene__orb,
[data-theme="scandi"] .hc-cat-scene__shadow { display: none; }
[data-theme="scandi"] .hc-cat-scene__panel,
[data-theme="scandi"] .hc-cat-scene__panel--one,
[data-theme="scandi"] .hc-cat-scene__panel--two,
[data-theme="scandi"] .hc-cat-scene__panel--three {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
[data-theme="scandi"] .hc-cat-scene__grain,
[data-theme="scandi"] .hc-cat-scene__edge,
[data-theme="scandi"] .hc-cat-scene__measure,
[data-theme="scandi"] .hc-cat-scene__coating,
[data-theme="scandi"] .hc-cat-scene__route,
[data-theme="scandi"] .hc-cat-scene__spark { stroke: #2e7d46; }
[data-theme="scandi"] .hc-cat-scene__sample,
[data-theme="scandi"] .hc-cat-scene__rail,
[data-theme="scandi"] .hc-cat-scene__drawer,
[data-theme="scandi"] .hc-cat-scene__shelf,
[data-theme="scandi"] .hc-cat-scene__drawer-front,
[data-theme="scandi"] .hc-cat-scene__box {
  fill: none;
  stroke: #1d1d1b;
  stroke-width: 2;
  stroke-linejoin: round;
}
[data-theme="scandi"] .hc-cat-scene__blade { fill: none; stroke: #1d1d1b; }
[data-theme="scandi"] .hc-cat-scene__blade-hole { fill: #2e7d46; stroke: none; }
[data-theme="scandi"] .hc-cat-scene__runner,
[data-theme="scandi"] .hc-cat-scene__hinge path { stroke: #2e7d46; }
[data-theme="scandi"] .hc-cat-scene__hinge circle { fill: none; stroke: #1d1d1b; }
[data-theme="scandi"] .hc-cat-sm__media,
[data-theme="scandi"] .hc-cat-sections-card__media { background: #edece9; }
[data-theme="scandi"] .hc-cat-sections-card:hover .hc-cat-sections-card__media { background: #e6e4df; }

/* catalog hero band: greige instead of warm radial */
[data-theme="scandi"] .hc-cat-head {
  background:
    radial-gradient(700px 360px at 100% -20%, rgba(46, 125, 70, 0.08), transparent 55%),
    linear-gradient(150deg, var(--hc-paper) 0%, var(--hc-paper-3) 100%);
}
[data-theme="scandi"] .hc-cat-head::before { background: radial-gradient(circle, rgba(46, 125, 70, 0.1), transparent 64%); }

/* PDP under scandi: cool the warm benefit/trust surfaces (249/271 hardcode warm) */
[data-theme="scandi"] .pdp-benefit-card {
  border-color: var(--hc-line-2);
  background: var(--hc-paper);
}
[data-theme="scandi"] .pdp-benefit-card:hover {
  border-color: var(--hc-accent);
  box-shadow: 0 14px 32px -24px rgba(29, 29, 27, 0.35);
}
/* kill leftover warm pseudo-layers on PDP cards */
[data-theme="scandi"] .pdp-benefit-card::before,
[data-theme="scandi"] .pdp-benefit-card::after { background: none; }
[data-theme="scandi"] .page-pdp .pdp-trust-strip {
  background: var(--hc-paper);
  border: 1px solid var(--hc-line);
}

/* PDP chrome (.hc-pdp-*): sticky dock, gallery empty-state,
   buy-box card/tabs (cool the warm gradients 123/125), qty stepper */
[data-theme="scandi"] .hc-pdp-sticky-dock__thumb {
  background: var(--hc-paper-3);
}
[data-theme="scandi"] .hc-pdp-gallery__empty {
  background: linear-gradient(160deg, var(--hc-paper-2) 0%, var(--hc-paper-3) 100%);
}
[data-theme="scandi"] .hc-pdp-m1__card,
[data-theme="scandi"] .hc-pdp-m1 {
  background: var(--hc-paper);
}
[data-theme="scandi"] .hc-pdp-m1__tabs { background: var(--hc-paper); }
/* buy-box stepper: cool, consistent */
[data-theme="scandi"] .hc-pdp-m1__qty { border-color: var(--hc-line-2); background: var(--hc-paper); border-radius: var(--hc-r-sm); }
[data-theme="scandi"] .hc-pdp-m1__qty-btn:hover { background: var(--hc-accent-soft); }
[data-theme="scandi"] .hc-pdp-m1__qty-input { border-inline-color: var(--hc-line); color: var(--hc-ink); font-weight: 700; }

/* quickview modal on scandi: green price, cool media */
[data-theme="scandi"] .hc-qv [class*="price"] { color: var(--hc-ink); }
[data-theme="scandi"] .hc-qv [class*="media"],
[data-theme="scandi"] .hc-qv [class*="photo"],
[data-theme="scandi"] .hc-qv [class*="img-wrap"] { background: var(--hc-paper-3); }

/* finish scenes (cans/brush) → line-art */
[data-theme="scandi"] .hc-cat-scene__finish { fill: none; stroke: #1d1d1b; stroke-width: 2; }
[data-theme="scandi"] .hc-cat-scene__brush { fill: none; stroke: #2e7d46; stroke-width: 2; }
[data-theme="scandi"] .hc-cat-scene__drop,
[data-theme="scandi"] .hc-cat-scene__drop--a { fill: #2e7d46; stroke: none; }
[data-theme="scandi"] .hc-cat-scene circle[class*="dot"] { fill: #2e7d46; }
/* product placeholder → greige/ink (kills cream bubbles) */
[data-theme="scandi"] .hc-ph [fill="#fdfbf6"] { fill: var(--hc-paper); }
[data-theme="scandi"] .hc-ph [fill="#fbf7ec"] { fill: var(--hc-paper-2); }
[data-theme="scandi"] .hc-ph [fill="#f0e8d3"] { fill: var(--hc-paper-3); }
[data-theme="scandi"] .hc-ph [fill="#8b7355"] { fill: var(--hc-ink-muted); }
[data-theme="scandi"] .hc-ph [stroke="#8b7355"] { stroke: var(--hc-ink-muted); }
[data-theme="scandi"] .hc-ph [fill="#1a1714"] { fill: var(--hc-ink-soft); }
[data-theme="scandi"] .hc-ph__schema { stroke: var(--hc-line-strong); }

/* services page: cool the warm step chips + online badge + can lids */
[data-theme="scandi"] .service-card__step,
[data-theme="scandi"] .service-card__chip { background: var(--hc-paper-3); border-color: var(--hc-line-2); color: var(--hc-ink-soft); }
[data-theme="scandi"] .service-card--online,
[data-theme="scandi"] .service-card.is-online { border-color: rgba(var(--hc-accent-rgb), 0.45); }
[data-theme="scandi"] .service-card__badge { background: var(--hc-success-soft); color: var(--hc-accent-dark); }
[data-theme="scandi"] .hc-cat-scene__can,
[data-theme="scandi"] .hc-cat-scene__can-lid,
[data-theme="scandi"] .hc-cat-scene__lid,
[data-theme="scandi"] .hc-cat-scene__tube,
[data-theme="scandi"] .hc-cat-scene__nozzle { fill: none; stroke: #1d1d1b; stroke-width: 2; }

[data-theme="scandi"] .service-card__ext-badge { background: var(--hc-success-soft); color: var(--hc-accent-dark); border-color: rgba(var(--hc-accent-rgb), 0.4); }
[data-theme="scandi"] .service-card__flow span,
[data-theme="scandi"] .service-card__steps li { background: var(--hc-paper-3); border-color: var(--hc-line-2); color: var(--hc-ink-soft); }
/* finish/glue scene leftovers: beat 245 specificity */
[data-theme="scandi"] .hc-cat-scene--finish .hc-cat-scene__brush,
[data-theme="scandi"] .hc-cat-scene--finish .hc-cat-scene__sample,
[data-theme="scandi"] .hc-cat-scene--default .hc-cat-scene__sample { fill: none; stroke: #1d1d1b; stroke-width: 2; }
[data-theme="scandi"] .hc-cat-scene--finish .hc-cat-scene__drop { fill: #2e7d46; stroke: none; }

/* contacts: intent tiles — flat paper, no cream gradient, tame ghost art */
[data-theme="scandi"] .contact-intent-grid > a {
  background: var(--hc-paper);
  border: 1px solid var(--hc-line-2);
}
[data-theme="scandi"] .contact-intent-grid > a::before { opacity: 0.1; filter: saturate(0); }
[data-theme="scandi"] .contact-intent-grid > a:hover { border-color: var(--hc-accent); }
/* dark lead block: gold CTA → green */
[data-theme="scandi"] .hzlead-cta,
[data-theme="scandi"] .hc-btn--gold { background: var(--hc-accent); color: #fff; }
[data-theme="scandi"] .hzlead-cta:hover,
[data-theme="scandi"] .hc-btn--gold:hover { background: var(--hc-accent-dark); }

/* cart empty scandi + blog featured letterbox + dark-block gold CTA */
[data-theme="scandi"] .hc-empty, [data-theme="scandi"] .cart-empty {
  background: var(--hc-paper);
}
[data-theme="scandi"] .hc-empty h1, [data-theme="scandi"] .hc-empty h2,
[data-theme="scandi"] .cart-empty h1 { font-family: var(--hc-sans); letter-spacing: -0.02em; }
[data-theme="scandi"] .hc-blog-feat__media, [data-theme="scandi"] [class*="featured"] [class*="media"] {
  background: var(--hc-paper-3);
}
[data-theme="scandi"] .hzlead button[type="submit"],
[data-theme="scandi"] [class*="lead"] button[type="submit"] {
  background: var(--hc-accent);
  color: #fff;
}
[data-theme="scandi"] .hzlead button[type="submit"]:hover,
[data-theme="scandi"] [class*="lead"] button[type="submit"]:hover { background: var(--hc-accent-dark); }

/* empty-state заголовки — системная гарнитура, не сериф */
:root[data-theme="scandi"] .hc-empty__title { font-family: inherit; letter-spacing: -0.015em; }
/* (5) полоса брендов: живой hover */
:root[data-theme="scandi"] .hc-brands__item { transition: transform .15s ease; }
:root[data-theme="scandi"] .hc-brands__item:hover { transform: translateY(-2px); }
:root[data-theme="scandi"] .hc-brands__item:hover .hc-brands__ic { background: var(--hc-accent, #2e7d46); color: #fff; border-color: var(--hc-accent, #2e7d46); }
/* (6) сводка рейтинга в отзывах */
.hc-rev__wrap { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.hc-rev__summary { position: sticky; top: 90px; padding: 22px; border-radius: var(--hc-r-md, 14px); background: var(--hc-paper, #fff); border: 1px solid var(--hc-line, #e7e4df); }
.hc-rev__score { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.hc-rev__sumstars { color: #f5a623; font-size: 17px; letter-spacing: 2px; margin: 8px 0 4px; }
.hc-rev__sumcount { font-size: 13px; color: var(--hc-ink-soft, #6f6b64); }
.hc-rev__sumlink { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) { .hc-rev__wrap { grid-template-columns: 1fr; } .hc-rev__summary { position: static; } }
/* (7) счётчик на плитках категорий */
.hc-cat-sections-card__count { display: block; margin-top: 4px; font-size: 12.5px; color: var(--hc-ink-soft, #6f6b64); font-variant-numeric: tabular-nums; }
/* (9) пагинация: инфо + показать ещё */
.hc-pag-info { font-size: 12.5px; color: var(--hc-ink-soft, #6f6b64); margin-left: 12px; }
.hc-loadmore { display: block; margin: 14px auto 4px; padding: 11px 26px; font: inherit; font-size: 14px; font-weight: 700; color: var(--hc-ink, #1d1d1b); background: var(--hc-paper, #fff); border: 1.5px solid var(--hc-line-2, #d9d5cf); border-radius: 999px; cursor: pointer; transition: border-color .15s, transform .15s; }
.hc-loadmore:hover { border-color: var(--hc-accent, #2e7d46); transform: translateY(-1px); }
.hc-loadmore[disabled] { opacity: .5; cursor: wait; }
/* (10) сорт-пилюли */
.hc-sortseg { display: none; gap: 6px; }
@media (min-width: 901px) {
  .hc-sortseg { display: inline-flex; }
  .hc-cat-toolbar__sort { display: none; }
}
.hc-sortseg__pill { padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--hc-ink-mid, #55524c); background: var(--hc-paper, #fff); border: 1px solid var(--hc-line, #e7e4df); border-radius: 999px; cursor: pointer; text-decoration: none; transition: all .13s ease; white-space: nowrap; }
.hc-sortseg__pill:hover { border-color: var(--hc-accent, #2e7d46); color: var(--hc-ink, #1d1d1b); }
.hc-sortseg__pill.is-on { background: var(--hc-ink, #1d1d1b); border-color: var(--hc-ink, #1d1d1b); color: #fff; }
/* (12) микротрест под запросом цены */
.hc-pdp-microtrust { margin: 8px 0 0; font-size: 12.5px; color: var(--hc-ink-soft, #6f6b64); text-align: center; }
/* (17) подсветка совпадений в поиске */
mark.hc-mark { background: rgba(46,125,70,.16); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ── прайс-листы ── */
.hc-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.hc-price-card { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--hc-paper, #fff); border: 1px solid var(--hc-line, #e7e4df);
  border-radius: var(--hc-r-md, 14px); text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.hc-price-card:hover { border-color: var(--hc-accent, #2e7d46); transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(29,29,27,.25); }
.hc-price-card__ico { position: relative; width: 54px; height: 54px; color: var(--hc-accent, #2e7d46); }
.hc-price-card__ico svg { width: 100%; height: 100%; }
.hc-price-card__ico svg :not(circle) { fill: none; }
.hc-price-card__ico b { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: #fff;
  background: var(--hc-accent, #2e7d46); border-radius: 4px; padding: 1px 5px; }
.hc-price-card__title { display: block; font-size: 15px; font-weight: 700; }
.hc-price-card__meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--hc-ink-soft, #6f6b64); font-variant-numeric: tabular-nums; }
.hc-price-card__btn { padding: 9px 18px; font-size: 13px; font-weight: 700; color: var(--hc-ink, #1d1d1b);
  border: 1.5px solid var(--hc-line-2, #d9d5cf); border-radius: 999px; transition: all .13s ease; }
.hc-price-card:hover .hc-price-card__btn { background: var(--hc-accent, #2e7d46); border-color: var(--hc-accent, #2e7d46); color: #fff; }
.hc-price-note { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; padding: 18px 22px; background: var(--hc-paper, #fff);
  border: 1px solid var(--hc-line, #e7e4df); border-radius: var(--hc-r-md, 14px); }
.hc-price-note b { display: block; margin-bottom: 2px; }
@media (max-width: 860px) { .hc-price-grid { grid-template-columns: 1fr; } }

/* blog covers: neutral scandi surface, photos fill the frame (no cream letterbox) */
[data-theme="scandi"] .hc-blog-card__cover { background: var(--hc-bg); }
[data-theme="scandi"] .hc-blog-card__cover-img { object-fit: cover; }
[data-theme="scandi"] .page-blog-index .blog-index__featured-cover { background: var(--hc-bg); }
[data-theme="scandi"] .page-blog-index .blog-index__featured-image { object-fit: cover; }

/* PDP gallery thumbs: swatch fills the tile; active = accent ring, not a tinted field */
[data-theme="scandi"] .hc-pdp-gallery__thumb { padding: 0; background: var(--hc-paper); }
[data-theme="scandi"] .hc-pdp-gallery__thumb img { object-fit: cover; }
[data-theme="scandi"] .hc-pdp-gallery__thumb.is-active {
  background: var(--hc-paper);
  border-color: var(--hc-accent);
  box-shadow: inset 0 0 0 2px var(--hc-accent), 0 8px 22px -6px rgba(var(--hc-accent-rgb), 0.25);
}

/* css/blocks/305-theme-ldsp-classic.css */
/* LDSP Classic
   Separate Aspro-like retail layout. Every rule is scoped to the theme so the
   original TIMB themes and templates remain untouched. */

/* Self-hosted Roboto — the same files the donor serves, with cyrillic. */
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto/roboto-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto/roboto-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto/roboto-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto/roboto-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body[data-theme="ldsp-classic"] .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;
}

:root[data-theme="ldsp-classic"],
body[data-theme="ldsp-classic"],
[data-theme="ldsp-classic"].theme-card__preview {
  --hc-bg: #fff;
  --hc-surface: #fff;
  --hc-surface-soft: #f6f6f6;
  --hc-radius: 0px;
  --hc-radius-sm: 0px;
  --hc-shadow: none;
  --ldsp-blue: #2f63d6;
  --ldsp-blue-dark: #2455bd;
  --ldsp-navy: #142b55;
  --ldsp-ink: #1f2937;
  --ldsp-muted: #667085;
  --ldsp-line: #e2e8f0;
  --ldsp-soft: #f3f6fa;
  --ldsp-mist: #eef4ff;
  --ldsp-canvas: #eef3f8;
  --ldsp-green: #25845a;
  --ldsp-amber: #bc7a16;
  --ldsp-red: #d74d45;
  --ldsp-radius: 6px;
  --ldsp-font: "Roboto", Arial, "Helvetica Neue", sans-serif;
  /* Titles share the body face; redirecting the token beats chasing inherit. */
  --hc-serif: var(--ldsp-font);
  --hc-accent: var(--ldsp-blue);
  /* Wider measure than the default; the page header follows the token. */
  --hc-measure: 880px;
  --hc-accent-dark: var(--ldsp-blue-dark);
  /* «Золото» этой темы — синее. Переопределялся только --hc-gold, а вся
     остальная семья оставалась от темы, назначенной на <html>: там
     data-theme=industrial, и её токены зелёные. Блоки, которые красятся через
     rgba(var(--hc-gold-rgb), …) — «Популярные подборки», подложки карточек,
     тёмный блок обратной связи, — приезжали зелёными посреди синего сайта. */
  --hc-gold: var(--ldsp-blue);
  --hc-gold-rgb: 47, 99, 214;
  --hc-gold-1: var(--ldsp-blue);
  --hc-gold-2: var(--ldsp-blue-dark);
  --hc-gold-soft: rgba(47, 99, 214, .10);
  --hc-gold-border: rgba(47, 99, 214, .34);
  --hc-accent-rgb: 47, 99, 214;
  --hc-ink: var(--ldsp-ink);
  --hc-muted: var(--ldsp-muted);
  --hc-line: var(--ldsp-line);
  color: var(--ldsp-ink);
  background: #fff;
  font-family: var(--ldsp-font);
  /* The donor sets body copy in Roboto Light; heavier weights stay explicit. */
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* LDSP foundational layout: header, shared blocks, mobile base. */
/* Header: 44px service navigation + 116px main line. */
body[data-theme="ldsp-classic"] .ldsp-topbar {
  height: 44px;
  color: #333;
  background: #fafafa;
  border-bottom: 1px solid #e7e7e7;
}

body[data-theme="ldsp-classic"] .ldsp-topbar__in {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-theme="ldsp-classic"] .ldsp-topbar__nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

body[data-theme="ldsp-classic"] .ldsp-topbar__meta {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

body[data-theme="ldsp-classic"] .ldsp-topbar :is(a, .ldsp-topbar__menu) {
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 0 26px 0 0;
  color: #3a3a3a;
  background: transparent;
  border: 0;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
}

body[data-theme="ldsp-classic"] .ldsp-topbar a:hover,
body[data-theme="ldsp-classic"] .ldsp-topbar a.is-active {
  color: var(--hc-accent);
}

body[data-theme="ldsp-classic"] .ldsp-topbar__menu {
  width: 34px;
  padding: 0;
  justify-content: center;
  font-size: 18px;
}

body[data-theme="ldsp-classic"] .ldsp-topbar__nav > .ldsp-topbar__quick::before {
  content: '⚡';
  margin-right: 6px;
  font-size: 12px;
}

body[data-theme="ldsp-classic"] .ldsp-topbar__meta a,
body[data-theme="ldsp-classic"] .ldsp-topbar__meta span {
  height: auto;
  padding: 0;
  color: #777;
}

body[data-theme="ldsp-classic"] .ldsp-topbar__meta > a {
  color: #6480b6;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body[data-theme="ldsp-classic"] .hc-hdr {
  position: relative;
  z-index: 60;
  height: 116px;
  color: #222;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #ededed;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-theme="ldsp-classic"] .hc-hdr__in {
  min-height: 116px;
  display: grid;
  /* Свободную ширину забирает поиск, а не колонка телефона. Раньше третья
     колонка растягивалась на 1fr: на 1600px ей доставалось 573 пикселя при
     201 пикселе содержимого, и между телефоном и значками зияла дыра в 400
     пикселей, а поиск при этом упирался в потолок 490. */
  grid-template-columns: 230px minmax(360px, 1fr) auto auto;
  grid-template-areas: "logo search phone right";
  gap: 28px;
  padding: 0;
}

body[data-theme="ldsp-classic"] .hc-hdr__burger,
body[data-theme="ldsp-classic"] .hc-ecosystem--header,
body[data-theme="ldsp-classic"] .hc-hdr__nav {
  display: none;
}

body[data-theme="ldsp-classic"] .hc-hdr__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #173d91;
  text-decoration: none;
}

body[data-theme="ldsp-classic"] .ldsp-logo-mark {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
}

body[data-theme="ldsp-classic"] .ldsp-logo-mark svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
}

body[data-theme="ldsp-classic"] .ldsp-logo-mark svg * {
  fill: none;
}

body[data-theme="ldsp-classic"] .ldsp-logo-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

body[data-theme="ldsp-classic"] .ldsp-logo-copy strong {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
}

body[data-theme="ldsp-classic"] .ldsp-logo-copy small {
  margin-top: 7px;
  color: #294e9c;
  font-size: 11px;
  font-weight: 700;
}

body[data-theme="ldsp-classic"] .ldsp-header-search {
  grid-area: search;
  position: relative;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr 60px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 32px;
}

/* Suggest dropdown under the search pill; reuses the shared hc-sugg-*
   fragment markup. */
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg { position: absolute; z-index: 90; top: calc(100% + 8px); right: 0; left: 0; max-height: 62vh; overflow: auto; padding: 8px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: 0 22px 48px rgba(20,40,76,.16); }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg:empty { display: none; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg .hc-sugg-section__title { padding: 10px 12px 4px; color: #98a2b3; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg ul { margin: 0; padding: 0; list-style: none; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; color: var(--ldsp-ink); border-radius: 8px; text-decoration: none; font-size: 14px; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg a:hover { color: var(--ldsp-blue); background: #f2f6ff; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg .hc-sugg-exact { display: grid; gap: 3px; padding: 12px; background: #f2f6ff; border-radius: 8px; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg .hc-sugg-exact__kicker { color: var(--ldsp-blue); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg .hc-sugg-hint { padding: 12px; color: #8791a2; font-size: 13px; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg .hc-sugg-hint__examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
body[data-theme="ldsp-classic"] .ldsp-header-search__sugg .hc-sugg-chip { display: inline-flex; padding: 6px 10px; background: #f4f6f9; border-radius: 999px; font-size: 12px; }

body[data-theme="ldsp-classic"] .ldsp-header-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

body[data-theme="ldsp-classic"] .ldsp-header-search input {
  min-width: 0;
  height: 100%;
  padding: 0 18px;
  color: #333;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

body[data-theme="ldsp-classic"] .ldsp-header-search > button {
  height: 60px;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}

body[data-theme="ldsp-classic"] .ldsp-header-search > button svg {
  width: 44px;
  height: 44px;
  padding: 12px;
  background: var(--ldsp-blue);
  border-radius: 50%;
  transition: background .18s ease, transform .18s ease;
}

body[data-theme="ldsp-classic"] .ldsp-header-search > button:hover svg {
  background: var(--ldsp-blue-dark);
  transform: scale(1.05);
}

body[data-theme="ldsp-classic"] .ldsp-header-search > button span {
  display: none;
}

body[data-theme="ldsp-classic"] .ldsp-header-search input:focus {
  outline: none;
}

body[data-theme="ldsp-classic"] .ldsp-header-search:focus-within {
  border-color: #b9caf0;
  box-shadow: 0 0 0 3px rgba(47,99,214,.12);
}

body[data-theme="ldsp-classic"] .ldsp-header-phone {
  grid-area: phone;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #202020;
  text-decoration: none;
}

body[data-theme="ldsp-classic"] .ldsp-header-phone__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #111;
  border: 2px solid #111;
  border-radius: 11px;
}

body[data-theme="ldsp-classic"] .ldsp-header-phone__icon svg {
  width: 22px;
  height: 22px;
}

body[data-theme="ldsp-classic"] .ldsp-header-phone > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body[data-theme="ldsp-classic"] .ldsp-header-phone strong {
  font-size: 17px;
  white-space: nowrap;
}

body[data-theme="ldsp-classic"] .ldsp-header-phone small {
  color: #999;
  font-size: 11px;
}

body[data-theme="ldsp-classic"] .hc-hdr__right {
  grid-area: right;
  gap: 3px;
}

body[data-theme="ldsp-classic"] .hc-hdr__right > #hdrSearch,
body[data-theme="ldsp-classic"] .hc-hdr__right > .hc-hdr__phone,
body[data-theme="ldsp-classic"] .hc-hdr__right > .hc-btn {
  display: none;
}

body[data-theme="ldsp-classic"] .hc-hdr__ico {
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
  width: 39px;
  height: 48px;
  color: #222;
  border-radius: 0;
}

body[data-theme="ldsp-classic"] .hc-hdr__ico:hover {
  color: var(--hc-accent);
  background: transparent;
}

/* Reveal-on-scroll: main.js adds .ldsp-reveal to [data-reveal] blocks and
   .is-in when they enter the viewport; reduced-motion users never get it. */
body[data-theme="ldsp-classic"] .ldsp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
body[data-theme="ldsp-classic"] .ldsp-reveal.is-in { opacity: 1; transform: none; }

/* Visible keyboard focus for every interactive element of the theme. */
body[data-theme="ldsp-classic"] :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ldsp-blue); outline-offset: 2px; }

/* Breadcrumbs: readable links, each category crumb opens its subsections. */
body[data-theme="ldsp-classic"] .ldsp-crumbs { position: relative; z-index: 70; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: #98a2b3; font-size: 13px; }
body[data-theme="ldsp-classic"] .ldsp-crumbs > a { color: #667085; text-decoration: none; transition: color .15s ease; }
body[data-theme="ldsp-classic"] .ldsp-crumbs > a:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .ldsp-crumb { position: relative; display: inline-flex; gap: 3px; align-items: center; }
body[data-theme="ldsp-classic"] .ldsp-crumb > a { color: #667085; text-decoration: none; transition: color .15s ease; }
body[data-theme="ldsp-classic"] .ldsp-crumb > a:hover { color: var(--ldsp-blue); }
/* The visible chevron stays 18px — it is a hint next to the crumb, not a
   button competing with it — but the thing a finger has to land on is 44.
   The extra area is taken with a negative margin so the crumbs keep their
   line height and the row does not grow. Before this the target was 18×18,
   pressed up against the crumb link, so a miss on a phone opened the section
   instead of its list of subsections. */
/* Кнопка 44×44 — это область нажатия, а не размер значка: отрицательные поля
   убирают её из потока, чтобы строка крошек не разъезжалась. Слева поле было
   -10px, и круглая подсветка при наведении наползала на конец предыдущего
   слова — «ЛДСП» обрезался кружком. Слева не тянем: разделяет обычный отступ
   строки. */
body[data-theme="ldsp-classic"] .ldsp-crumb > button { box-sizing: border-box; width: 44px; height: 44px; margin: -13px -13px -13px 0; display: grid; place-items: center; padding: 13px; color: #98a2b3; background: none; background-clip: content-box; border: 0; border-radius: 17px; cursor: pointer; transition: color .15s ease, background .15s ease; }
body[data-theme="ldsp-classic"] .ldsp-crumb > button:hover, body[data-theme="ldsp-classic"] .ldsp-crumb > button[aria-expanded="true"] { color: var(--ldsp-blue); background: #eef3ff; }
body[data-theme="ldsp-classic"] .ldsp-crumb > button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"] .ldsp-crumb__menu { position: absolute; z-index: 90; top: calc(100% + 8px); left: -10px; min-width: 230px; max-height: 340px; display: grid; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 10px; box-shadow: 0 18px 42px rgba(20,40,76,.16); }
body[data-theme="ldsp-classic"] .ldsp-crumb__menu a { padding: 8px 12px; color: #3b4658; border-radius: 6px; text-decoration: none; font-size: 13px; line-height: 1.35; transition: background .15s ease, color .15s ease; }
body[data-theme="ldsp-classic"] .ldsp-crumb__menu a:hover { color: var(--ldsp-blue); background: #f2f6ff; }

/* Shared blue section cap used by home, catalog and PDP. */

body[data-theme="ldsp-classic"] .ldsp-section-cap__icon {
  width: 24px;
  height: 20px;
  display: grid;
  gap: 4px;
  font-size: 30px;
  font-weight: 300;
}

body[data-theme="ldsp-classic"] .ldsp-showcase {
  padding: 46px 0;
  background: #fff;
}

body[data-theme="ldsp-classic"] .ldsp-showcase__head {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
}

body[data-theme="ldsp-classic"] .ldsp-showcase__head h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
}

body[data-theme="ldsp-classic"] .ldsp-showcase__head a {
  color: var(--hc-accent);
}

/* ==========================================================================
   LDSP storefront theme
   Donor-based layout: left rail + hero, compact banners, dense catalog cards,
   clean PDP. No historical override layers below this point.
   ========================================================================== */
body[data-theme="ldsp-classic"] .hc-wrap { width: calc(100% - 48px); max-width: 1900px; }
/* Custom pages contain tables, forms and card grids as well as prose. Keeping
   the whole page at article measure leaves half of a desktop viewport empty. */
body[data-theme="ldsp-classic"].page-custom .hc-wrap { max-width: 1200px; }
body[data-theme="ldsp-classic"].page-custom .hc-sec { padding: 20px 0; }
body[data-theme="ldsp-classic"].page-custom .editorial { max-width: 1200px; padding: 0; margin-inline: auto; }
/* Цвет заголовка наследуется от того, на чём он лежит. Заданный тут тёмный
   цвет перебивал светлый заголовок тёмных карточек — специфичность у правила
   темы выше, чем у правила блока, — и «Помочь выбрать марку и серию?» на
   /brands выходило почти чёрным по почти чёрному. Наследование даёт верный
   цвет в обоих случаях: тёмный на светлой странице, светлый в тёмной карточке. */
body[data-theme="ldsp-classic"] h1,
body[data-theme="ldsp-classic"] h2,
body[data-theme="ldsp-classic"] h3 { letter-spacing: -.025em; color: inherit; }
body[data-theme="ldsp-classic"] .hc-promo-bar { display: none; }
/* LDSP already exposes comparison in the fixed desktop footer line and the
   mobile tabbar. The generic floating prompt only duplicates that control and
   obscures page content. */
body[data-theme="ldsp-classic"] .hc-compare-bar { display: none; }
body[data-theme="ldsp-classic"] .hc-card,
body[data-theme="ldsp-classic"] .premium-surface:not(.premium-surface--highlight) {
  background: #fff;
  border-color: var(--ldsp-line);
  border-radius: var(--ldsp-radius);
  box-shadow: none;
}
body[data-theme="ldsp-classic"] .hc-cookie,
body[data-theme="ldsp-classic"] .hc-modal__panel {
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(20,40,76,.14);
}
body[data-theme="ldsp-classic"] .hc-btn--primary,
body[data-theme="ldsp-classic"] .ldsp-ref-product__cta,
body[data-theme="ldsp-classic"] .ldsp-pdp-buy__primary { background: var(--ldsp-blue); border-color: var(--ldsp-blue); border-radius: 6px; color: #fff; font-weight: 500; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-btn--primary:hover,
body[data-theme="ldsp-classic"] .ldsp-product-tile__cta:hover,
body[data-theme="ldsp-classic"] .ldsp-ref-product__cta:hover,
body[data-theme="ldsp-classic"] .ldsp-pdp-buy__primary:hover { background: var(--ldsp-blue-dark); border-color: var(--ldsp-blue-dark); }

/* Home: donor structure, cleaner execution. */
body[data-theme="ldsp-classic"].page-home--ldsp main {
  /* clip, NOT hidden: hidden makes <main> the sticky containing scrollport
     and kills the left-rail sticky tail; clip only clips the bleed. */
  overflow: clip;
  background: #fff;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-stage {
  padding: 18px 0 6px;
  background: var(--ldsp-canvas);
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-stage__grid {
  display: grid;
  grid-template-columns: minmax(340px, 24%) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

body[data-theme="ldsp-classic"] .ldsp-section-cap {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  color: #fff;
  background: var(--ldsp-blue);
  border-radius: 6px 6px 0 0;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
}

body[data-theme="ldsp-classic"] .ldsp-section-cap__icon i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu {
  overflow: hidden;
  min-height: 500px;
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: 6px;
  box-shadow: none;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__list {
  padding: 12px 0 4px;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__list a {
  min-height: 38px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  padding: 5px 16px;
  color: #2f3a4c;
  text-decoration: none;
  font-size: 14px;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__list a:hover {
  color: var(--ldsp-blue);
  background: #eef4ff;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__thumb {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eef2f7; border: 1px solid #dfe7f2;
  border-radius: 4px;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.06);
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__thumb i {
  width: 18px;
  height: 18px;
  display: block;
  background: #d7dde7;
  border-radius: 4px;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__thumb svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ldsp-blue);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__arrow {
  width: 14px;
  fill: none;
  stroke: #7b8797;
  stroke-width: 1.8;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__all {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 18px 0;
  color: var(--ldsp-blue);
  border-top: 1px solid var(--ldsp-line);
  text-decoration: none;
  font-weight: 700;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero {
  position: relative;
  /* Пропорция кадра донора (1048×450): при жёсткой высоте 555 сцена уходила
     за края — это и читалось как «обрезали баннер». */
  aspect-ratio: 1048 / 450;
  width: 100%;  /* иначе соотношение считает ширину из высоты: 978 при экране 375 */
  min-height: 420px;
  overflow: hidden;
  background: #e7e8ea;
  border-radius: 6px;
  box-shadow: none;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  /* Out fast: both slides cross-faded over .45s and two headlines shared the
     frame for a quarter second. */
  transition: opacity .22s ease, visibility 0s linear .22s;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease .18s, visibility 0s linear 0s;  /* in after out */
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.08);
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,34,70,.76), rgba(14,34,70,.32) 46%, rgba(14,34,70,.04));
}
@keyframes ldsp-hero-in { from { opacity: 0; transform: translateY(14px); } }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__slide.is-active .ldsp-main-hero__content > * { animation: ldsp-hero-in .55s ease backwards; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__slide.is-active .ldsp-main-hero__content > :nth-child(2) { animation-delay: .08s; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__slide.is-active .ldsp-main-hero__content > :nth-child(3) { animation-delay: .16s; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__slide.is-active .ldsp-main-hero__content > :nth-child(4) { animation-delay: .24s; }
/* Текст стоит на снимке так же, как у донора: отступ 92 от края, по центру
   по высоте, чёрным. Сторону задаёт слайд из админки. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__content {
  position: absolute;
  top: 50%;
  left: 92px;
  z-index: 2;
  max-width: 46%;
  color: #000;
  /* Свечение под текстом — приём самого донора (у него так подписаны плитки
     мозаики): снимок остаётся ярким, а буквы читаются на любом участке. */
  text-shadow: 0 0 10px #fff;
  transform: translateY(-50%);
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__content--right {
  right: 92px;
  left: auto;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__content--center {
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* Светлый текст — для тёмных снимков, выбирается в карточке слайда. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__content--on-dark { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,.6); }

/* Brand tint on the dark hero; the treatment itself comes from .hc-eyebrow. */
/* Надпись над заголовком: у донора её нет вовсе, но слайд из админки может
   её нести — тогда она идёт тем же цветом, что и текст, вполовину меньше. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero .hc-eyebrow {
  margin-bottom: 16px;
  color: inherit;
  opacity: .7;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero h1,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero h2 { margin: 0; color: inherit; font-size: 36px; line-height: 40px; font-weight: 500; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero p { max-width: 520px; margin: 24px 0 0; color: inherit; font-size: 14px; line-height: 24px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 24px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__button { height: 50px; display: inline-flex; align-items: center; padding: 0 24px; color: #fff; background: var(--ldsp-blue); border-radius: 6px; font-size: 14px; text-decoration: none; transition: background .2s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__link { color: inherit; text-decoration: none; font-weight: 700; }
/* Листание как у донора: точки по центру внизу, стрелки по краям кадра.
   Белыми они были под тёмной пеленой — на светлом снимке их не видно. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__nav { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__dots { position: absolute; right: 0; bottom: 24px; left: 0; display: flex; gap: 10px; justify-content: center; pointer-events: auto; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__dots button { width: 14px; height: 14px; padding: 0; background: none; border: 0; cursor: pointer; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__dots i { display: block; width: 100%; height: 100%; background: rgba(255,255,255,.72); border: 2px solid var(--ldsp-blue); border-radius: 50%; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__dots .is-active i { background: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__arrows { pointer-events: auto; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__arrows button { position: absolute; top: 50%; width: 44px; height: 60px; display: grid; place-items: center; color: #282727; background: rgba(255,255,255,.72); border: 0; border-radius: 6px; font-size: 22px; cursor: pointer; transform: translateY(-50%); transition: background .2s ease, color .2s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__arrows button:first-child { left: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__arrows button:last-child { right: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__arrows button:hover { color: #fff; background: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__stat { position: absolute; z-index: 4; right: 24px; top: 22px; display: flex; gap: 8px; align-items: center; padding: 8px 14px; color: #282727; background: rgba(255,255,255,.82); border-radius: 6px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__stat strong { font-size: 20px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__stat span { font-size: 10px; text-transform: uppercase; opacity: .78; }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-home {
  padding: 32px 0 80px;
  background: linear-gradient(180deg, var(--ldsp-canvas) 0 56%, #fff 100%);
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-shell {
  display: grid;
  grid-template-columns: minmax(300px, 23.5%) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-left-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  align-self: stretch;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-sticky {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 20px;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help p { margin: 10px 0 12px; color: #526078; font-size: 14px; line-height: 1.5; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help__ico { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help__phone { display: block; color: #1d293d; font-size: 20px; font-weight: 700; text-decoration: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help__phone:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help small { display: block; margin-top: 4px; color: #8794a8; font-size: 12.5px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help__cta { display: flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 44px; color: #fff; background: var(--ldsp-blue); border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-help__cta:hover { filter: brightness(1.08); }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-main-column {
  display: grid;
  grid-template-rows: auto auto;
  gap: 20px;
  min-width: 0;
}

/* Мозаика донора, размеры его же: четыре колонки 25 / 25 / 19 / 31 %,
   обычная плитка 228, высокая 476, зазор 20 по вертикали и 16 по
   горизонтали (у него это padding 10/8 в обёртке каждой плитки).
   Ряд 248 = плитка 228 плюс зазор; высокая занимает два ряда, 496 − 20 = 476.
   Раскладка по колонкам: первая плитка занимает колонку целиком, следующие
   две встают друг под друга во второй, и так далее — как в его разметке. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-main-column .ldsp-ref-promos {
  display: grid;
  grid-template-columns: 25% 25% 19% 31%;
  grid-template-rows: repeat(2, 248px);
  grid-auto-flow: column;
  margin: -10px -8px;
}


/* Первая колонка у донора шире по полям — 36 вместо 24. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promos > :first-child .ldsp-ref-promo__copy { padding-right: 36px; padding-left: 36px; }

/* Ширина текста в колонках со сдвоенными плитками — его же доли. */


body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promos > :nth-child(5),
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promos > :nth-child(6) { grid-template-columns: 50% 50%; }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-full {
  display: grid;
  gap: 28px;
  margin-top: 4px;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-section-head small { color: var(--ldsp-blue); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-section-head h2 { margin: 6px 0 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
body[data-theme="ldsp-classic"].page-home--ldsp :is(.ldsp-ref-promo, .ldsp-ref-side-box) { overflow: hidden; background: #fff; border: 1px solid #dce4ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(31,56,94,.035); }
/* Снимок не фон, а своя полоса внизу.
   Он лежал фоном во всю плитку, а поверх — белая пелена до 72% высоты, чтобы
   читался текст. Снимки при этом 500 пикселей шириной и бледные (у двух из
   шести белого 62% и 79%), да ещё и резались: плитка «Мебельной фурнитуры»
   вертикальная, 320x380, а кадр у неё панорамный 2,5:1 — cover показывал 34%.
   В сумме выходило молоко с еле различимой тенью.
   Теперь текст живёт на чистом белом сверху, снимок занимает остаток высоты во
   всю ширину. Пелена не нужна: они не пересекаются. */
/* Плитка: подпись на белом сверху, снимок под ней целиком. Текст прямо
   на снимке не читался — у донора надписи вписаны в саму картинку, а
   наши кадры для этого не готовили. Размеры плитки при этом его. */
/* Подпись на белом, снимок рядом — в долях донора: у него текст занимает
   60 % ширины в одной колонке и 50 % в другой, только лежит поверх кадра.
   Поверх у нас не читалось, поэтому кадр стоит рядом, а не под буквами. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo { position: relative; display: grid; grid-template-columns: 60% 40%; box-sizing: border-box; min-height: 0; margin: 10px 8px; color: var(--ldsp-ink); text-decoration: none; }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo > img { grid-area: 1 / 2; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo:hover > img { transform: scale(1.04); }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo__copy { grid-area: 1 / 1; position: relative; z-index: 2; display: block; padding: 22px 20px 16px; background: #fff; }

/* Высокая плитка: по высоте места вдвое больше, поэтому подпись идёт
   сверху, а снимок под ней во всю ширину. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo--tall { grid-row: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo--tall > img { grid-area: 2 / 1; }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo__copy strong { display: block; max-height: 40px; margin-bottom: 10px; overflow: hidden; font-size: 18px; line-height: 20px; font-weight: 500; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo__copy small { display: block; max-height: 48px; margin-top: 0; margin-bottom: 12px; overflow: hidden; color: #282727; font-size: 13px; line-height: 16px; }
/* Кнопка залитая, как .btn-simple у донора. Я делал её ссылкой со стрелкой —
   это опять было улучшение вместо переноса. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo__copy b { min-height: 34px; display: inline-flex; gap: 7px; align-items: center; margin-top: 12px; padding: 0 16px; white-space: nowrap; color: #fff; background: var(--ldsp-blue); border-radius: 3px; font-size: 13px; font-weight: 400; transition: background .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo__copy b::after { content: '→'; transition: transform .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo:hover .ldsp-ref-promo__copy b::after { transform: translateX(3px); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo:hover .ldsp-ref-promo__copy b { background: var(--ldsp-blue-dark); }
/* Left rail boxes: donor stack — selections, offer, news, subscribe,
   vertical banners, collections and blog. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-box { padding: 18px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-box header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-box header b { font-size: 17px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe__plane { margin-left: 8px; vertical-align: -3px; color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-box header a { color: var(--ldsp-blue); text-decoration: none; font-size: 13px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-links a { min-height: 34px; display: flex; align-items: center; justify-content: space-between; color: #536176; border-bottom: 1px solid var(--ldsp-line); text-decoration: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-links a:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-links--plain a:last-child { border-bottom: 0; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer a { display: grid; grid-template-rows: 190px auto auto; gap: 10px; color: var(--ldsp-ink); text-decoration: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer img { align-self: center; width: 100%; height: 190px; object-fit: contain; background: #fff; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer span { display: -webkit-box; min-height: 40px; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer strong.is-request { font-size: 16px; color: #536176; }
/* Блок листается: товаров в подборке несколько, а места в колонке на один.
   Стрелки в шапке, точки под карточкой — тем же приёмом, что лента ниже.
   Кнопки — строчной сеткой: тогда они стоят рядом независимо от того, чем
   окажется их обёртка (в шапке уже есть свои правила на span). */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer__nav { display: flex; gap: 4px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer__nav button { width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--ldsp-line, #e3e7ee); border-radius: 50%; background: #fff; color: var(--ldsp-ink); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer__nav button:hover { border-color: var(--ldsp-blue); color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--ldsp-line, #e3e7ee); cursor: pointer; transition: background .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-spec-offer__dots button.is-active { background: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-news__list { display: grid; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-news__list a { display: grid; gap: 3px; padding: 10px 0; color: var(--ldsp-ink); border-bottom: 1px solid var(--ldsp-line); text-decoration: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-news__list a:last-child { border-bottom: 0; padding-bottom: 0; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-news__list small { color: var(--ldsp-muted); font-size: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-news__list span { font-size: 14px; line-height: 1.4; text-decoration: underline; text-decoration-color: #c4cede; text-underline-offset: 3px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-news__list a:hover span { color: var(--ldsp-blue); text-decoration-color: currentColor; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe p { margin: 0 0 12px; color: var(--ldsp-muted); font-size: 13px; line-height: 1.45; }
/* The account CSS module that normally hides honeypots is loaded only on
   account pages — the theme hides them everywhere (subscribe box, lead
   modals). */
body[data-theme="ldsp-classic"] .auth-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe form { display: grid; gap: 10px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe input[type="email"] { min-height: 46px; padding: 0 14px; color: var(--ldsp-ink); background: #f4f6f9; border: 1px solid var(--ldsp-line); border-radius: 6px; font: inherit; font-size: 14px; transition: border-color .18s ease, background .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe input[type="email"]:focus { background: #fff; border-color: #b9caf0; outline: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe label { display: flex; gap: 7px; align-items: center; color: var(--ldsp-muted); font-size: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe label a { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe button { min-height: 46px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-subscribe button:hover { background: var(--ldsp-blue-dark); }
/* Вертикальный баннер: у донора это готовая картинка с надписью внутри.
   Своей такой нет, поэтому текст лежит полосой сверху, а снимок — под
   ним целиком и без осветления: пересвеченный кадр выглядел линялым. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 420px; overflow: hidden; color: var(--ldsp-ink); background: #fff; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical img { grid-row: 2; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical:hover img { transform: scale(1.04); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical__copy { grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 18px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical__copy small { color: var(--ldsp-blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical__copy strong { margin-top: 8px; font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical__copy em { margin-top: 8px; font-size: 13px; font-style: normal; line-height: 1.45; color: #526078; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-vertical__copy b { min-height: 40px; display: inline-flex; align-items: center; margin-top: 14px; padding: 0 16px; color: #fff; background: var(--ldsp-blue); border-radius: 8px; font-size: 13px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__list { display: grid; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__list a { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; padding: 10px 0; color: var(--ldsp-ink); border-bottom: 1px solid var(--ldsp-line); text-decoration: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__list a:last-child { border-bottom: 0; padding-bottom: 0; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__thumb { width: 64px; height: 64px; display: block; overflow: hidden; background: #f4f6f9; border-radius: 6px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__thumb img { width: 100%; height: 100%; object-fit: cover; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__copy b { display: block; font-size: 13px; line-height: 1.35; font-weight: 500; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__copy b:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-blog__copy small { display: block; margin-top: 4px; color: var(--ldsp-muted); font-size: 12px; line-height: 1.4; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-recommend__tabs { min-height: 62px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; background: #fff; border: 1px solid var(--ldsp-line); border-bottom: 0; border-radius: 12px 12px 0 0; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs button,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-recommend__tabs button { min-height: 62px; padding: 8px 10px; color: #263247; background: #fff; border: 0; border-right: 1px solid var(--ldsp-line); font-size: 15px; line-height: 1.25; font-weight: 500; cursor: pointer; transition: background .18s ease, color .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs button:not(.is-active):hover,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-recommend__tabs button:not(.is-active):hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs button.is-active,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-recommend__tabs button.is-active { color: #fff; background: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs__all { grid-column: 3 / -1; display: inline-flex; align-items: center; justify-content: flex-end; padding: 8px 20px; color: var(--ldsp-blue); text-decoration: none; font-size: 15px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs__all:hover { text-decoration: underline; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-section-head { min-height: 74px; display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-section-head a { color: var(--ldsp-blue); text-decoration: none; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp :is(.ldsp-ref-category-grid, .ldsp-ref-brands__row) { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #fff; border: 1px solid var(--ldsp-line); border-radius: 0 0 12px 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid > a {
  min-height: 228px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  color: var(--ldsp-ink);
  border-right: 1px solid var(--ldsp-line);
  border-bottom: 1px solid var(--ldsp-line);
  text-decoration: none;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid > a > span {
  flex: 1;
  min-height: 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 12px;
  background: #f6f8fb;
  border-radius: 8px;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .35s ease;
}

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid > a:hover img { transform: scale(1.06); }

body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid > a:hover b { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category__media svg { width: 72%; height: 72%; max-width: 130px; max-height: 100px; fill: none; stroke: var(--ldsp-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category__media em { width: 54px; height: 54px; display: grid; place-items: center; color: var(--ldsp-blue); background: #e8f0ff; border-radius: 50%; font-size: 24px; font-style: normal; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid :is(b, small) {
  display: block;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid b {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  transition: color .18s ease;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid small {
  margin-top: 4px;
  color: var(--ldsp-muted);
  font-size: 12px;
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-brands__row { grid-template-columns: repeat(7,minmax(0,1fr)); border-radius: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-brands__row a { min-height: 104px; display: grid; place-items: center; align-content: center; gap: 8px; color: #4a5468; border-right: 1px solid var(--ldsp-line); text-decoration: none; }
/* Donor brand logos: neutral until hover, gentle lift. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-brands__mark img { max-width: 68%; max-height: 52px; object-fit: contain; opacity: .85; transition: opacity .18s ease, transform .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-brands__mark:hover img { opacity: 1; transform: translateY(-2px); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid a { overflow: hidden; color: var(--ldsp-ink); background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid a:hover { box-shadow: 0 14px 34px rgba(22,43,79,.12); transform: translateY(-3px); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid small { display: block; padding: 14px 18px 0; color: var(--ldsp-muted); font-size: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid b { display: block; padding: 6px 18px 18px; font-size: 15px; line-height: 1.45; font-weight: 500; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid a:hover b { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid span { height: 200px; display: block; overflow: hidden; background: #eef3f8; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid a:hover img { transform: scale(1.05); }

/* Lower page and footer. */
body[data-theme="ldsp-classic"] .hc-ecosystem--footer { display: none; }
body[data-theme="ldsp-classic"] .hc-ftr {
  margin-top: 0;
  padding: 52px 0 28px;
  color: var(--ldsp-ink);
  background: #fff;
  border-top: 1px solid var(--ldsp-line);
  isolation: auto;
  overflow: visible;
}
body[data-theme="ldsp-classic"] .hc-ftr::before { display: none; }
body[data-theme="ldsp-classic"] .hc-ftr__servicebar { display: none; }
body[data-theme="ldsp-classic"] .hc-ftr__top {
  grid-template-columns: minmax(300px,.9fr) minmax(260px,.72fr) minmax(480px,1.35fr);
  gap: 46px;
}
body[data-theme="ldsp-classic"] .hc-ftr :is(.hc-ftr__brand, .hc-ftr__b2b-h, .hc-ftr__contact-main, .hc-ftr__acc summary) {
  color: var(--ldsp-ink);
  font-family: inherit;
}
body[data-theme="ldsp-classic"] .hc-ftr__brand {
  color: var(--ldsp-ink);
  font-size: 25px;
  letter-spacing: .14em;
}
body[data-theme="ldsp-classic"] .hc-ftr__brand-sub,
body[data-theme="ldsp-classic"] .hc-ftr__manifesto-text,
body[data-theme="ldsp-classic"] .hc-ftr__contact-meta,
body[data-theme="ldsp-classic"] .hc-ftr__b2b-text {
  color: var(--ldsp-muted);
}
body[data-theme="ldsp-classic"] .hc-ftr__contact-ico {
  color: var(--ldsp-blue);
  background: #edf3ff;
  border-color: #d7e3fa;
}
body[data-theme="ldsp-classic"] .hc-ftr__pay {
  border-color: var(--ldsp-line);
}
body[data-theme="ldsp-classic"] .hc-ftr :is(.hc-ftr__legal, .hc-ftr__bottom) { color: var(--ldsp-muted); border-color: var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-ftr__pay-h,
body[data-theme="ldsp-classic"] .hc-ftr__nav-col .hc-ftr__nav-h,
body[data-theme="ldsp-classic"] .hc-ftr__nav-col strong {
  color: var(--ldsp-blue);
  font-family: inherit;
  font-weight: 700;
}
body[data-theme="ldsp-classic"] .hc-ftr__pay-h::after { background: var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-ftr__pay-pill {
  color: var(--ldsp-ink);
  background: #fff;
  border: 1px solid var(--ldsp-line);
  border-radius: 999px;
  box-shadow: none;
}
body[data-theme="ldsp-classic"] .hc-ftr__pay-pills > .hc-ftr__pay-pill:nth-child(n) {
  color: var(--ldsp-ink);
  background: #fff;
  border: 1px solid var(--ldsp-line);
}
body[data-theme="ldsp-classic"] .hc-ftr__pay-pills > .hc-ftr__pay-pill::before,
body[data-theme="ldsp-classic"] .hc-ftr__pay-pills > .hc-ftr__pay-pill::after { display: none; }
body[data-theme="ldsp-classic"] .hc-ftr__b2b {
  background: #f5f8ff;
  border: 1px solid #dce6f7;
  border-radius: 6px;
}
body[data-theme="ldsp-classic"] .hc-ftr__b2b .hc-eyebrow {
  color: var(--ldsp-blue);
  background: #e8f0ff;
  border-color: #cbdaf6;
  font-family: inherit;
}
body[data-theme="ldsp-classic"] .hc-ftr__nav-col a,
body[data-theme="ldsp-classic"] .hc-ftr__nav-col li a,
body[data-theme="ldsp-classic"] .hc-ftr a {
  color: #4b5565;
}
body[data-theme="ldsp-classic"] .hc-ftr__nav-col a:hover,
body[data-theme="ldsp-classic"] .hc-ftr a:hover {
  color: var(--ldsp-blue);
  transform: none;
}

/* Product cards. */
body[data-theme="ldsp-classic"] .ldsp-product-grid,
/* Разделители между карточками — это зазор в 1px, сквозь который просвечивал
   фон решётки. Пока ряд полный, видны тонкие линии; как только в последнем
   ряду товаров меньше четырёх, пустая ячейка показывала тот же фон большим
   серо-синим полем справа от последней карточки. Фон теперь белый, а линии
   рисует каждая карточка своим контуром — пустое место остаётся белым. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 0 0 12px 12px; }
body[data-theme="ldsp-classic"] .ldsp-product-tile,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product { position: relative; min-width: 0; min-height: 430px; display: flex; flex-direction: column; padding: 18px; background: #fff; border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--ldsp-line); transition: box-shadow .2s ease, transform .2s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile:hover,
/* Наведение видно по контуру, а не только по тени. Контур карточки рисует
   тот же box-shadow (border у неё нулевой), и одна тень его затирала: при
   наведении карточка теряла обводку и на фоне соседей выглядела не поднятой,
   а размытой. Держим оба слоя — кольцо синеет, тень появляется. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product:hover { z-index: 4; box-shadow: 0 0 0 1px #b9caf0, 0 14px 34px rgba(22,43,79,.13); transform: translateY(-2px); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__media-wrap,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__media-wrap { position: relative; }
/* Product tile media: one definition — full-bleed decor swatch with a soft
   zoom on hover, everywhere the tile is used (catalog, PDP related). */
body[data-theme="ldsp-classic"] .ldsp-product-tile__media { position: relative; height: 216px; display: grid; place-items: center; overflow: hidden; background: #f4f6f9; background-image: none; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(29,41,61,.07); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__media::before { display: none; content: none; background: none; }
/* Base scale(1.03) crops the 1px dark frame donor photos carry (it
   stretches into a visible bar at tile size); hover zooms further. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; filter: none; transition: transform .4s ease, opacity .3s ease; transform: scale(1.03); }
body[data-theme="ldsp-classic"] .ldsp-product-tile:hover .ldsp-product-tile__image--main { transform: scale(1.05); }
/* Second photo fades in over the first on hover. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__image--hover { opacity: 0; }
body[data-theme="ldsp-classic"] .ldsp-product-tile:hover .ldsp-product-tile__image--hover { opacity: 1; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__media { position: relative; height: 198px; display: grid; place-items: center; overflow: hidden; background: #f7f8fa; background-image: none; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(29,41,61,.06); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__media::before { display: none; content: none; background: none; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__media img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; mix-blend-mode: normal; filter: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: #f7f8fa; }
/* Подпись «фото декора» — на снимке, а не рядом: она относится к картинке.
   Мелкая и приглушённая, чтобы не спорить с бейджами новинки и скидки. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__decor-note { position: absolute; right: 6px; bottom: 6px; z-index: 2; padding: 2px 7px; border-radius: 3px; background: rgba(17, 24, 39, .58); color: #fff; font-size: 10px; line-height: 1.5; letter-spacing: .02em; pointer-events: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions { position: absolute; z-index: 5; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 7px; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #8b95a5; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 50%; opacity: 0; transform: translateX(8px); transition: opacity .18s ease, transform .18s ease, color .18s ease, background .18s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions button:hover { color: var(--ldsp-blue); background: #f2f6ff; border-color: #b9caf0; }
/* И по фокусу: по табу кнопки получали фокус, оставаясь невидимыми. */
body[data-theme="ldsp-classic"] .ldsp-product-tile:hover .ldsp-product-tile__top-actions button,
body[data-theme="ldsp-classic"] .ldsp-product-tile:focus-within .ldsp-product-tile__top-actions button { opacity: 1; transform: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Метки жмутся к своему тексту. В колонке они растягивались по самой длинной
   («В наличии · 70 шт»), и короткое «Новинка» превращалось в широкую плашку
   на 139 пикселей — отсюда и ощущение тяжёлого прямоугольника. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__badges { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Метки на фото. Были плотными плашками с заливкой во всю кнопку и жирным
   начертанием — синий прямоугольник «Новинка» перетягивал внимание с самого
   товара и спорил с кнопкой покупки того же цвета. Сделаны тише: капсула,
   мелкая прописная с разрядкой, светлая подложка с полупрозрачностью и
   волосяной рамкой. Цветом кричит только скидка — ей и положено. */
body[data-theme="ldsp-classic"] :is(.ldsp-product-tile__badge, .ldsp-product-tile__stock),
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; color: var(--ldsp-blue); background: rgba(255,255,255,.92); border: 1px solid rgba(47,99,214,.22); border-radius: 999px; box-shadow: 0 1px 2px rgba(20,40,76,.06); backdrop-filter: blur(6px); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__stock { color: #27724f; border-color: rgba(39,114,79,.24); }
/* Скидка — единственная метка с заливкой: это цифра, за которой приходят. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__badge.is-sale { color: #fff; background: var(--ldsp-red); border-color: transparent; letter-spacing: .02em; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__stock.is-low { color: #875c16; border-color: rgba(135,92,22,.24); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__stock.is-order { color: #5b6b83; border-color: rgba(91,107,131,.22); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__stock i { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__quick,
/* Быстрый просмотр говорит тем же языком, что и значки сверху: белый кружок
   с волосяной рамкой, тот же размер и тот же отступ от края фото. Тёмная
   заливка выбивалась из карточки и читалась как посторонний элемент, а
   висела она посреди снимка, а не в углу. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__quick { position: absolute; z-index: 4; right: 14px; bottom: 14px; left: auto; width: 34px; height: 34px; min-height: 0; display: grid; place-items: center; padding: 0; color: #8b95a5; cursor: pointer; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 50%; box-shadow: none; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, color .18s ease, background .18s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__quick:hover,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__quick:hover { color: var(--ldsp-blue); background: #f2f6ff; border-color: #b9caf0; }
/* Кнопка остаётся подсказкой на наведении, но с клавиатуры до неё тоже надо
   доходить: по табу она получала фокус, оставаясь невидимой. */
body[data-theme="ldsp-classic"] .ldsp-product-tile:hover .ldsp-product-tile__quick,
body[data-theme="ldsp-classic"] .ldsp-product-tile:focus-within .ldsp-product-tile__quick,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product:hover .ldsp-ref-product__quick,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product:focus-within .ldsp-ref-product__quick { opacity: 1; transform: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__quick svg,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__quick svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__head { min-height: 30px; display: flex; align-items: flex-start; justify-content: space-between; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__head-spacer { display: block; min-height: 1px; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__body,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__body { flex: 1; display: flex; flex-direction: column; padding: 12px 0 0; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__trust { display: none; }
/* Tiles surface the series and артикул plus key props as chips — single
   definitions, no per-page overrides. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__meta { display: flex; justify-content: space-between; gap: 10px; margin: 2px 0 8px; color: #8791a2; font-size: 12px; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__meta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Место под свойства и под цену за метр держится всегда, даже когда их
   нет. Иначе у соседних карточек цена стоит на разной высоте: у одной
   свойства в две строки, у другой в одну, у третьей есть «≈ ₽/м²», а у
   четвёртой нет — ряд читается как ломаный. Две строки чипов и одна
   строка метра — то, что встречается чаще всего. */
/* Ровно две строки чипов: 30 на строку плюс 6 зазора. Было 62 — на четыре
   пикселя меньше, чем нужно, и у 23 карточек из 34 нижний чип («Структура»)
   срезался по краю блока. Высота считается от размеров самого чипа. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__props { --chip-row: 30px; --chip-gap: 6px; min-height: calc(var(--chip-row) * 2 + var(--chip-gap)); max-height: calc(var(--chip-row) * 2 + var(--chip-gap)); overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; margin: 10px 0 0; }
/* Чип не ломается на две строки: у одного длинного значения он вырастал в
   третий ряд и тянул за собой высоту всей строки сетки — соседние карточки
   в том ряду становились выше остальных. Длинное значение подрезается. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__props > div { max-width: 100%; display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 11px; background: #eef3ff; border: 1px solid #dbe6fb; border-radius: 999px; font-size: 12px; white-space: nowrap; overflow: hidden; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__props dt { margin: 0; color: #5d76ad; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__props dd { min-width: 0; margin: 0; color: #1d3a7a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__title,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__title { min-height: 54px; display: -webkit-box; overflow: hidden; color: #000; text-decoration: none; font-size: 14px; line-height: 1.5; font-weight: 400; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition: color .18s ease; }
/* Размеры и цвета имени и цены — донорские: .product .name 14px обычным
   начертанием, .product .price 18px robotobold, оба чёрные, наведение
   #2a65d0. У нас было 16px/500 и цена 24px — крупнее и тяжелее донора. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__title:hover { color: #2a65d0; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__bottom { margin-top: auto; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__price-row,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__price { min-height: 34px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 12px 0 10px; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__price-row strong,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__price strong { color: #000; font-size: 18px; font-weight: 700; white-space: nowrap; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__price-row strong.is-request { font-size: 17px; white-space: normal; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__price-row del,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__price del { color: #98a2b3; font-size: 14px; white-space: nowrap; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__price-row span,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__price span { color: #777; font-size: 14px; }
/* Метр стоит в одной строке с ценой и переносится вместе с ней, если не
   помещается. Своей строки у него больше нет — она добавляла карточке
   высоты, а у товаров без метра приходилось держать пустоту. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__unit-price { color: #8791a2; font-size: 12px; font-style: normal; white-space: nowrap; }
/* Always-visible one-tap cart button with an animated icon. */
@keyframes ldsp-cart-run { 0% { transform: none; } 30% { transform: translateX(-2px) rotate(-7deg); } 65% { transform: translateX(2px) rotate(5deg); } 100% { transform: none; } }
body[data-theme="ldsp-classic"] .ldsp-product-tile__buyline { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
/* Круглая кнопка у цены была вторым «в корзину» — она нужна была, пока
   основная пряталась до наведения. Теперь основная на месте всегда, и два
   одинаковых призыва в одной карточке только спорят друг с другом. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart { display: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart button { position: relative; width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 8px 18px rgba(47,99,214,.26); transition: background .18s ease, transform .18s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart button:hover { background: var(--ldsp-blue-dark); transform: translateY(-2px); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart-cart { transition: opacity .2s ease, transform .2s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart button:hover .ldsp-product-tile__fastcart-cart { animation: ldsp-cart-run .5s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart-check { position: absolute; opacity: 0; transform: scale(.4); transition: opacity .22s ease, transform .22s ease; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart.is-added button { background: var(--ldsp-green); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart.is-added .ldsp-product-tile__fastcart-cart { opacity: 0; transform: scale(.4); }
body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart.is-added .ldsp-product-tile__fastcart-check { opacity: 1; transform: none; }
/* Ряд действий раскладывается по тому, что в нём есть. Колонки объявлялись
   заранее — «кнопка + два значка», — и место под значки резервировалось даже
   когда их нет: у товара без цены «Запросить цену» получала не всю ширину
   плитки, а на 84 пикселя меньше, и выглядела приклеенной к левому краю.
   Гибкая строка отдаёт кнопке всё, что не занято. */
/* Действия карточки стоят столбцом: покупка во всю ширину, под ней — ряд
   вторичных кнопок. Колонки объявлялись заранее («кнопка + два значка»), и
   место под значки резервировалось даже когда их нет: у товара без цены
   «Запросить цену» получала не всю ширину, а на 84 пикселя меньше, и стояла
   приклеенной к левому краю рядом с блоком вторичных действий. */
/* В карточке каталога ряд другой, чем в ленте: кнопка покупки занимает всю
   ширину, а текстовые действия идут строкой под ней. Общая запись с лентой
   давала раскладку по колонкам, и «В корзину» уезжала в 42-пиксельный трек
   для значка — от кнопки оставалась одна иконка. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; margin-top: auto; }
/* Лента на главной: покупка и два значка — одной строкой. Колонкой они
   вставали друг под друга тремя этажами. Треки под значки не объявлены
   заранее, а создаются под тех, кто есть: у товара без значков пустое место
   под них не резервируется. */
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__hover { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 42px; align-items: center; gap: 8px; margin-top: auto; }
/* Donor behaviour on hover devices: the purchase row slides out beneath the
   tile; on touch it stays inline (see the 720px block below). */
@media (hover: hover) and (min-width: 721px) {
  /* Ряд покупки раньше был всплывающей панелью: absolute, сдвинут вниз на
     свою высоту и показан только при наведении. Так «В корзину» на витрине не
     видно, пока мышь не окажется на карточке, — а на планшете наведения нет
     вовсе, и до правки панель просто висела снизу, налезая на соседний ряд
     (сдвиг снимался не был: при наведении менялась только прозрачность).
     Ряд стоит в потоке карточки и виден всегда; наведение оставляет за собой
     только подъём самой карточки. */
  /* Карточка в покое чистая — фото, имя, цена; покупка выезжает под неё при
     наведении. Так у донора: .product .optional лежит display:none, а на
     наведении карточка поднимается над соседями и панель раскрывается.
     Панель вне потока: в потоке на её месте в покое оставалась пустая полоса,
     из-за чего карточки выглядели растянутыми. */
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile { overflow: visible; min-height: 0; }
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__actions { position: absolute; top: 100%; right: -1px; left: -1px; z-index: 6; margin-top: 0; padding: 0 14px 14px; background: #fff; border: 1px solid #b9caf0; border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 16px 30px rgba(22,43,79,.14); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s ease; }
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile:hover,
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile:focus-within { z-index: 7; }
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile:hover .ldsp-product-tile__actions,
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile:focus-within .ldsp-product-tile__actions { opacity: 1; visibility: visible; }
  /* «Быстрый просмотр» — широкая плашка по центру фото, как .getFastView у
     донора (150x40, белым по тёмному). Кружок в углу читался как значок. */
  body[data-theme="ldsp-classic"] .ldsp-product-tile__quick { top: 50%; right: auto; bottom: auto; left: 50%; width: 168px; height: 40px; margin: -20px 0 0 -84px; gap: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(28,34,46,.88); border: 0; border-radius: 4px; font-size: 13px; transform: none; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__quick::after { content: 'Быстрый просмотр'; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__quick:hover { color: #fff; background: rgba(28,34,46,1); border: 0; }
}
body[data-theme="ldsp-classic"] .ldsp-product-tile__cta,
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__hover .ldsp-ref-product__cta { min-height: 46px; width: 100%; padding: 0 8px; color: #fff; background: var(--ldsp-blue); border-color: var(--ldsp-blue); border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__cta--ghost {
  color: var(--ldsp-blue);
  background: #fff;
  border-color: #b9caf0;
}
/* Единственное действие карточки без цены: заливка отличает его от ссылки. */
body[data-theme="ldsp-classic"] .ldsp-product-tile__cta.hc-cta-quote {
  /* Растягивается так же, как «В корзину»: это единственное действие
     карточки без цены, и вести себя оно должно как основное. */
  display: flex;
  width: 100%;
  gap: 8px;
  color: var(--ldsp-blue);
  background: #eef3fd;
  border-color: #c9d8f5;
}
body[data-theme="ldsp-classic"] .ldsp-product-tile__cta.hc-cta-quote:hover {
  color: #fff;
  background: var(--ldsp-blue);
  border-color: var(--ldsp-blue);
}
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__icon-action { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #536178; background: #fff; border: 1px solid #d9e1ec; border-radius: 50%; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__icon-action:hover { color: var(--ldsp-blue); background: #f2f6ff; border-color: #b9caf0; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product__icon-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__details { display: none; }
body[data-theme="ldsp-classic"] .ldsp-product-tile__mobile-actions { display: none; grid-column: 1 / -1; }
@media (hover: hover) and (min-width: 721px) {
  /* Второстепенное — под наведение. Покупка видна всегда, а «в 1 клик»,
     «в избранное» и «к сравнению» проявляются, когда карточку рассматривают:
     иначе в ряду из четырёх плиток одновременно горит двенадцать призывов и
     смотреть не на что. Место под строку зарезервировано — карточка при
     наведении не подпрыгивает и соседей не двигает. */
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__actions .ldsp-product-tile__mobile-actions { position: absolute; z-index: 5; top: 100%; right: -1px; left: -1px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; padding: 12px 18px 14px; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 0 0 1px #b9caf0, 0 16px 30px rgba(22,43,79,.14); clip-path: inset(0 -40px -40px -40px); opacity: 0; pointer-events: none; transition: opacity .16s ease; }
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile:hover .ldsp-product-tile__mobile-actions,
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile:focus-within .ldsp-product-tile__mobile-actions { opacity: 1; pointer-events: auto; }
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__actions .ldsp-product-tile__mobile-actions button { padding: 0; color: #536176; background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; transition: color .18s ease; }
  body[data-theme="ldsp-classic"] .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__actions .ldsp-product-tile__mobile-actions button:hover { color: var(--ldsp-blue); }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__stock-note { margin-left: auto; color: #8791a2; font-size: 12px; }
}

/* Catalog. */
/* Голубая подложка под левой колонкой. Её край был задан числом — 340px от
   края окна, — а колонка стоит по сетке .hc-wrap и начинается с 48-го пикселя,
   так что карточки вылезали за подложку на 28px. Считаем край там же, где его
   считает обёртка: поле + внутренний отступ + ширина колонки. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog { --ldsp-band: calc(max(24px, (100vw - 1900px) / 2) + var(--hc-sp-5) + 320px); padding: 24px 0 60px; background: linear-gradient(90deg, rgba(223,234,249,.8) 0 var(--ldsp-band), #f3f6fa var(--ldsp-band)); }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog__grid { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 22px; align-items: start; }
/* z-index здесь не украшение. position: sticky заводит свой слой, и всё, что
   внутри, красится на его уровне — а он был «как получится». Выпадающее
   подменю разделов (z-6 внутри) оказывалось под карточками товаров: они идут
   в разметке позже и на том же уровне. Поднимаем весь столбец над выдачей. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog__sidebar { position: sticky; z-index: 20; top: 16px; min-width: 0; }
/* Длину столбца держит список свойств, а не весь столбец. У разделов вроде
   фурнитуры фильтров на три экрана, и страница вытягивалась под них: под
   товарами оставалось пустое поле в полтора экрана. Прокрутка внутри самого
   списка — а баннеры и разделы под ним остаются на виду целиком (обрезать их
   общей прокруткой столбца оказалось лечением хуже болезни). */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-backdrop { display: none; }
/* Планка разделов и колонка под ней — в 312-ldsp-catalog-rail.css. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-refine,
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box { margin-top: 0; padding: 18px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; }
/* On listing pages the refine box sits directly under the blue cap. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-section-cap + .ldsp-refine,
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-section-cap + .ldsp-filter-box { margin-bottom: 22px; border-top: 0; border-radius: 0 0 6px 6px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-refine + .ldsp-filter-box { margin-top: 22px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-refine .ldsp-refine__label,
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .ldsp-refine__label { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-refine a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #536176;
  border-top: 1px solid var(--ldsp-line);
  text-decoration: none;
  transition: color .18s ease, padding-left .18s ease;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-refine a:hover { color: var(--ldsp-blue); padding-left: 6px; }
/* Число товаров за ссылкой. Без него «Уточнить раздел» — две голые
   ссылки, неотличимые от планки разделов, и непонятно, ради чего
   заходить. У донора число стоит с самого начала. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-refine small { padding: 1px 8px; color: #667085; background: #f2f5f9; border-radius: 10px; font-size: 12px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters { border: 0; box-shadow: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__form { padding: 0; max-height: calc(100vh - 220px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__head,
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__apply-top,
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-filter-help { display: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__form > h4 {
  margin: 22px 0 12px;
  padding: 0;
  color: #354052;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__form > h4:first-of-type { margin-top: 0; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__facet {
  display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 8px; color: #354052; background: #fff; border: 0; border-radius: 8px;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__facet:hover { background: #f4f7fd; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__facet small { min-width: 24px; padding: 1px 6px; text-align: center; color: #667085; background: #f2f5f9; border-radius: 999px; }
/* Размер был 40px до самого планшета, и длинные названия разделов рвались
   посреди фразы. Растёт вместе с колонкой, а перенос — только между словами. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fff 0%, #f5f8fe 100%);
  border: 1px solid var(--ldsp-line);
  border-radius: 10px;
}
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero__title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero h1 { margin: 0; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.1; font-weight: 500; text-wrap: balance; overflow-wrap: break-word; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero__desc { max-width: 72ch; margin: 8px 0 0; color: var(--ldsp-muted); font-size: 14px; line-height: 1.5; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero__count { flex: 0 0 auto; color: var(--ldsp-muted); font-size: 12px; white-space: nowrap; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero__count b { display: block; color: var(--ldsp-ink); font-size: 20px; line-height: 1.1; text-align: right; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-promo-insert { margin: 0 0 20px; padding: 10px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: 0 12px 30px -26px rgba(20,40,76,.5); }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-promo-insert .hc-banner-ribbon { margin: 0; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar { min-height: 60px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar label { display: flex; align-items: center; gap: 10px; color: #536176; font-size: 13px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar select { min-height: 38px; padding: 0 34px 0 12px; color: #536176; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 4px; transition: border-color .18s ease; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar select:hover { border-color: #b9caf0; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__shown { color: #667085; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__shown b { display: inline-flex; min-width: 42px; min-height: 36px; align-items: center; justify-content: center; margin-left: 6px; border: 1px solid var(--ldsp-line); border-radius: 4px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__filter { display: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__count { margin-left: auto; color: #8791a2; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__views { display: flex; gap: 6px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__views button { width: 36px; height: 36px; display: grid; place-items: center; color: #8791a2; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 4px; cursor: pointer; transition: color .18s ease, border-color .18s ease; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__views button.is-active { color: var(--ldsp-blue); border-color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__views svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* Список товаров — в 314-ldsp-catalog-list.css. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results { position: relative; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results .hc-applied-filters { padding: 14px; border-bottom: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-pag { padding: 28px 0; }
/* Подборки — продолжение фильтров, а не отдельный тёплый блок.
   Базовые правила (290) достались от прежней темы: коричневая рамка, скруглённые
   пилюли и тень. Рядом с синим каталогом это читалось как вставка с чужого
   сайта. Здесь блок говорит языком фильтра — те же подписи группы, те же чипы,
   — но на голубой заливке, чтобы отличаться от самого фильтра. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin: 0; padding: 11px 0 0; background: transparent; border: 0; border-top: 1px solid #dbe6f6; border-radius: 0; box-shadow: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-seo-links::before,
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-seo-links::after { content: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__head { flex: 0 0 auto; gap: 0; margin: 0; padding: 0; border: 0; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__eyebrow { color: #6b7688; font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__hint { display: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__row { display: contents; }
/* Подпись группы — как у фильтра: мелкая, разрядкой, прописными. */
/* Ширина подписи фиксирована: с min-width самая длинная («Бренд и толщина»,
   111px против 104) сдвигала свои чипы на семь пикселей вправо, и левый
   край блока получался рваным. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__label { width: auto; padding: 0; color: #7b8595; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-seo-links__label::before { content: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__chips { gap: 6px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-link { min-height: 30px; padding: 5px 10px; border-color: #cddaf0; border-radius: 6px; background: #fff; color: #4f5c70; font-size: 12px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-seo-link { min-height: 34px; padding: 6px 12px; color: var(--ldsp-ink); background: linear-gradient(180deg,#fff,#f8fbff); border: 1px solid #d3e0f7; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); font-size: 13px; transition: border-color .16s ease, color .16s ease; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-seo-link:hover { color: var(--ldsp-blue); background: #fff; border-color: var(--ldsp-blue); box-shadow: none; transform: none; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .hc-seo-link.is-active { color: #fff; background: var(--ldsp-blue); border-color: var(--ldsp-blue); }
/* Плотность каталога считается от ширины, а не от числа: на 1920 это пять
   карточек по 294px, на 1500 — четыре по 262. Жёсткие «четыре колонки»
   оставляли на широком экране лишний воздух, а на узком душили плитку. */
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-product-grid--catalog { grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); border-radius: 6px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-product-grid--catalog .ldsp-product-tile { min-height: 405px; }
/* Разделы каталога — в 312-ldsp-catalog-rail.css. */
/* PDP. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp { padding-bottom: 70px; background: linear-gradient(180deg,#eef3f8 0,#f6f8fb 420px,#fff 100%); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 22px; padding-top: 22px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid > div { padding: 24px 30px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid .hc-crumbs { min-height: 28px; display: flex; flex-wrap: wrap; align-items: center; overflow: visible; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid h1 { margin: 12px 0 0; font-size: 28px; line-height: 1.2; font-weight: 400; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs { position: sticky; top: 0; z-index: 80; margin-top: 18px; background: #fff; border-top: 1px solid var(--ldsp-line); border-bottom: 1px solid var(--ldsp-line); box-shadow: 0 6px 18px rgba(20,40,76,.05); }
/* Anchored sections stop below the sticky tabs bar. */
body[data-theme="ldsp-classic"].page-pdp :is(#pdp-overview, #pdp-description, #pdp-specifications, #pdp-related, #pdp-reviews) { scroll-margin-top: 96px; }
/* Полоса разделов прокручивается вбок на узком экране — это нормально, а вот
   серая полоса скроллбара под ней выглядит поломкой вёрстки. Прокрутка
   остаётся, полоса убрана; крайний раздел подрезается краем и этим сам
   говорит, что строка едет дальше. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs .hc-wrap { display: flex; overflow-x: auto; padding: 0; scrollbar-width: none; -ms-overflow-style: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs .hc-wrap::-webkit-scrollbar { display: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs a { min-height: 62px; display: flex; align-items: center; padding: 0 28px; color: #667085; border-right: 1px solid var(--ldsp-line); text-decoration: none; font-size: 13px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs a:first-child { border-left: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs a:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs a.is-active { color: var(--ldsp-blue); text-decoration: underline dotted; text-underline-offset: 6px; }
/* Donor proportions: gallery ≈ third, wide overview centre, narrow buy rail. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__main { display: grid; grid-template-columns: minmax(420px,44%) minmax(340px,1fr) minmax(264px,300px); gap: 22px; align-items: start; padding-top: 24px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery-stack { min-width: 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery-stack .pdp-rich-media { max-width: 520px; margin: 18px auto 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery-stack .pdp-rich-media__item { border-color: var(--ldsp-line); border-radius: var(--ldsp-radius); box-shadow: 0 10px 26px rgba(22,46,85,.06); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery-stack .pdp-rich-media__head span { color: var(--ldsp-muted); }
body[data-theme="ldsp-classic"].page-pdp :is(.ldsp-pdp-gallery, .ldsp-pdp-info, .ldsp-pdp-buy) { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; box-shadow: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery { overflow: hidden; }
/* Трек строки явный, иначе max-height:100% считается от неё самой и снимок вылезает. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__main { position: relative; width: 100%; height: auto; max-height: min(36vw,540px); min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; padding: 24px; background: #fff; border: 0; }
/* Sized by max-, not width/height: the image is a stretched grid item, so
   height:100% resolved against its own hypothetical height, not the 470px
   frame — 748×1122 in a 796×470 box, 675px hanging below, hidden only by the
   gallery's clip. That is why the photo looked cropped. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__main img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__thumbs { display: flex; gap: 8px; padding: 12px; background: #f7f9fc; border-top: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__thumbs button { width: 66px; height: 66px; padding: 3px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 4px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__thumbs button.is-active { border-color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__sale { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 11px; color: #fff; background: var(--ldsp-red); border-radius: 4px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__zoom { position: absolute; right: 16px; bottom: 16px; display: inline-flex; gap: 7px; align-items: center; padding: 8px 10px; color: #536176; background: rgba(255,255,255,.9); border: 1px solid var(--ldsp-line); border-radius: 999px; font-size: 12px; transition: color .18s ease, border-color .18s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__main:hover .ldsp-pdp-gallery__zoom { color: var(--ldsp-blue); border-color: #b9caf0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__placeholder { min-height: 360px; display: grid; place-items: center; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info { padding: 24px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--ldsp-line); color: #a0a7b3; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools > span { white-space: nowrap; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #8b95a5; background: #f8fafc; border: 1px solid var(--ldsp-line); border-radius: 6px; transition: color .15s ease, background .15s ease, border-color .15s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__tools button:hover { color: var(--ldsp-blue); background: #f2f6ff; border-color: #b9caf0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__stars { color: #dfe3ea; letter-spacing: 2px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__review-link { margin-left: auto; color: #667085; font-size: 13px; white-space: nowrap; text-decoration: underline dotted; text-underline-offset: 4px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__review-link:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__sku { margin: 16px 0 0; color: #777; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info h2 { margin: 0; font-size: 18px; font-weight: 400; }
/* Donor characteristic rows: dotted leader between key and value. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__specs-preview { margin-top: 22px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs { display: grid; gap: 0; margin: 10px 0 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs > div { display: flex; gap: 12px; align-items: baseline; margin: 0 -10px; padding: 10px; border-radius: 6px; transition: background .15s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs > div:hover { background: #f5f8fd; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs dt { flex: 1; display: flex; gap: 12px; align-items: baseline; margin: 0; color: #667085; font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs dt::after { content: ''; flex: 1; min-width: 32px; border-bottom: 1px dotted #d2dbe8; transform: translateY(-4px); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs dd { margin: 0; max-width: 56%; color: var(--ldsp-ink); font-weight: 500; line-height: 1.45; text-align: right; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy { position: sticky; top: 84px; padding: 26px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__price strong { font-size: 34px; line-height: 1; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__price span { color: #667085; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__purchase { display: grid; gap: 8px; }
/* The quantity control sat square-cornered next to 4px-rounded buttons and
   let the browser draw its own spinner arrows beside our own -/+ ones. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty { display: grid; grid-template-columns: 54px 1fr 54px; height: 48px; border: 1px solid var(--ldsp-line); border-radius: 4px; overflow: hidden; background: #fff; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty button,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty input { border: 0; background: #fff; text-align: center; font-size: 16px; color: var(--ldsp-ink); appearance: textfield; -moz-appearance: textfield; }
body[data-theme="ldsp-classic"].page-pdp :is(.ldsp-pdp-buy__primary, .ldsp-pdp-buy__secondary) { min-height: 54px; width: 100%; border-radius: 4px; font-size: 18px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__secondary { margin-top: 10px; color: #333; background: #fff; border: 1px solid var(--ldsp-line); }
/* Donor buy rail tail: found-cheaper, stock line, share row. */
/* Кнопка стала summary: раскрытие делает браузер, и форма работает без
   скриптов. Маркер-треугольник убираем — вид остаётся прежним. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__cheaper { list-style: none; display: flex; gap: 9px; align-items: center; margin-top: 22px; padding: 0; color: #667085; background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__cheaper::-webkit-details-marker { display: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__cheaper:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__cheaper i { width: 20px; height: 20px; display: grid; place-items: center; color: #98a2b3; border: 1px solid #d5dce8; border-radius: 50%; font-size: 11px; font-style: normal; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__unit-price { margin: 6px 0 0; color: #8791a2; font-size: 13px; }
/* Sheet calculator: area input → sheet count and order total. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc { margin-top: 16px; padding: 14px; background: #f6f8fb; border-radius: 8px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc label { display: block; margin-bottom: 8px; color: #667085; font-size: 12px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Поле площади: 108 пикселей не вмещали подсказку «Например, 12», а поверх
   неё браузер рисовал свои стрелки — подсказка обрывалась на «Например,».
   Стрелки убраны (значение вводят с клавиатуры), ширины хватает на текст. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc-row input { width: 150px; min-height: 40px; padding: 0 12px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; font: inherit; font-size: 14px; appearance: textfield; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc-row input::-webkit-outer-spin-button,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc-row input::-webkit-inner-spin-button { margin: 0; appearance: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc-row span { color: #445066; font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__calc-row b { font-weight: 700; }
/* Volume prices from PriceTier. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__tiers { margin-top: 16px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__tiers > span { display: block; margin-bottom: 6px; color: #98a2b3; font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__tiers ul { margin: 0; padding: 0; list-style: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__tiers li { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__tiers li i { flex: 1; border-bottom: 1px dotted #c3cddc; transform: translateY(-4px); }
/* Warehouse remainders under the stock line. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__warehouses { margin: 10px 0 0; padding: 0; list-style: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__warehouses li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; color: #667085; font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__warehouses li i { flex: 1; border-bottom: 1px dotted #d5dce8; transform: translateY(-3px); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__warehouses li b { color: var(--ldsp-ink); font-weight: 500; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__watch { margin-top: 12px; }
/* Закрытый details прячет содержимое сам, но собственный display у формы
   это перебивает: форма оставалась видимой всегда. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__watch:not([open]) form { display: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__watch form { display: grid; grid-template-columns: minmax(0,1fr) 58px; gap: 8px; margin-top: 10px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__watch input { min-height: 42px; padding: 0 12px; background: #f4f6f9; border: 1px solid var(--ldsp-line); border-radius: 6px; font: inherit; font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__watch form button { min-height: 42px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 6px; font-size: 13px; cursor: pointer; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-stickybuy,
body[data-theme="ldsp-classic"].page-cart .ldsp-cart-stickybuy { display: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__stockline { margin-top: 12px; color: var(--ldsp-amber); font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__stockline.is-stock { color: var(--ldsp-green); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__share { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__share > span { display: block; margin-bottom: 8px; color: #98a2b3; font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__share > div { display: flex; gap: 8px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__share a { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--ldsp-blue); border-radius: 6px; text-decoration: none; font-size: 11px; font-weight: 700; transition: transform .18s ease, background .18s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__share a:hover { background: var(--ldsp-blue-dark); transform: translateY(-2px); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__specs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__specs-head a { color: var(--ldsp-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__specs-head a:hover { color: var(--ldsp-blue); }

/* Donor blocks below the purchase area: perks strip, delivery cost, specs. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; margin-top: 34px; padding: 30px 0; background: #fff; border-top: 1px solid var(--ldsp-line); border-bottom: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks > div { display: grid; justify-items: center; gap: 14px; padding: 0 18px; text-align: center; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks i { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks i::after { content: '✓'; position: absolute; top: -4px; right: -6px; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: #7ac143; border-radius: 50%; font-size: 11px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks svg { width: 44px; height: 44px; fill: none; stroke: #3d4a5f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease, stroke .25s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks > div:hover svg { stroke: var(--ldsp-blue); transform: translateY(-3px); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks span { color: #445066; font-size: 14px; line-height: 1.45; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery h2,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full h2 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pickup { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; padding: 26px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pickup em { display: block; margin-top: 4px; color: var(--ldsp-muted); font-size: 12px; font-style: normal; line-height: 1.4; max-width: 240px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__alt { padding-left: 26px; border-left: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pickup i { width: 46px; height: 46px; display: grid; place-items: center; color: #3d4a5f; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pickup svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pickup small { display: block; color: var(--ldsp-muted); font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pickup strong { display: block; margin-top: 4px; font-size: 20px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__q { width: 38px; height: 38px; display: grid; place-items: center; margin-left: auto; color: #667085; border: 1px solid var(--ldsp-line); border-radius: 6px; text-decoration: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__cta { min-height: 46px; display: inline-flex; gap: 7px; align-items: center; padding: 0 22px; color: #fff; background: var(--ldsp-blue); border-radius: 4px; text-decoration: none; font-weight: 400; transition: background .18s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__cta::after { content: '→'; transition: transform .18s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__cta:hover::after { transform: translateX(3px); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__cta:hover { background: var(--ldsp-blue-dark); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pay { padding: 26px; background: #f7f8fb; border-left: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pay h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pay p { margin: 0; color: #555; font-size: 14px; line-height: 1.55; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pills span { padding: 6px 12px; color: #354052; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 999px; font-size: 12px; font-weight: 500; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full h3 { margin: 0 0 10px; color: var(--ldsp-blue); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
/* Groups are uneven, so a lone last one sat beside a hole as wide as itself.
   column-count was worse: the browser balanced 114 against 273. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__groups { display: grid; gap: 26px 28px; align-items: start; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__group:last-child:nth-child(odd) { grid-column: 1 / -1; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table { display: grid; margin: 0; overflow: hidden; background: #fff; border: 1px solid #e2e8f2; border-radius: 8px; }
/* Подпись и значение держатся друг друга. Колонка подписи растягивалась до
   260px независимо от длины слова, и «Декор» отъезжал от своего значения на
   треть строки — пара читалась как два несвязанных столбца. Теперь подпись
   занимает столько, сколько ей нужно (в пределах разумного), а значение
   встаёт сразу за ней. */
body[data-theme="ldsp-classic"].page-pdp /* Колонка подписи фиксированная, а не по содержимому: каждая строка — своя
   сетка, и по max-content «Фасовка товара» отодвигала своё значение на шесть
   пикселей дальше соседних, отчего столбец значений шёл вразнобой. 15 знаков
   покрывают все ходовые подписи; редкие длинные переносятся внутри своей
   ячейки и колонку не двигают. */
.ldsp-pdp-specs-full__table > div { display: grid; grid-template-columns: 15ch minmax(0,1fr); gap: 18px; align-items: baseline; padding: 11px 18px; border-bottom: 1px solid #eef1f5; transition: background .15s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table > div:last-child { border-bottom: 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table > div:nth-child(odd) { background: #f8fafc; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table > div:hover { background: #eef4fd; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table dt { margin: 0; max-width: 22ch; color: #667085; font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table dd { margin: 0; color: var(--ldsp-ink); font-size: 15px; font-weight: 500; line-height: 1.45; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__store-rating { color: #b8860b; text-decoration: none; font-size: 13px; white-space: nowrap; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info__store-rating:hover { text-decoration: underline; }
/* Reviews: product reviews or the store's Yandex reviews as social proof. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews h2 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__note { margin: -8px 0 16px; color: #667085; font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__grid article { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 8px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__stars { color: #f5a623; letter-spacing: 2px; font-size: 14px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__grid p { margin: 0; flex: 1; color: #445066; font-size: 14px; line-height: 1.55; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__grid footer { color: #98a2b3; font-size: 13px; }
/* Recently viewed strip (localStorage). */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-recent h2 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* The consultation prompt: an offer, not a section. It was a third bordered
   card in a column that already has two, with a 44px filled circle. Hairline
   instead of a frame, icon down to the size of the words beside it. */
/* Блок «нужна проверка перед заказом» под галереей. Стоял без оформления
   вовсе — тонкая линия сверху и текст, — и рядом с карточками фактов справа
   («Самовывоз со склада» и соседние) читался как недовёрстанный кусок.
   Оформлен теми же средствами, что и .ldsp-pdp-facts li: белая плашка,
   та же рамка, тот же радиус, иконка в кружке. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px 12px; align-items: start; margin-top: 18px; padding: 14px 16px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: var(--ldsp-radius); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist__icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ldsp-blue); background: var(--ldsp-mist); border-radius: 50%; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist small { display: block; color: var(--ldsp-muted); font-size: 12px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist strong { display: block; margin-top: 2px; color: var(--ldsp-ink); font-size: 13px; line-height: 1.45; font-weight: 600; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist a { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 2px 0 -6px; color: var(--ldsp-blue); text-decoration: none; font-weight: 600; font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-assist a:hover { text-decoration: underline; text-underline-offset: 3px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase { padding: 60px 0 0; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase__head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-showcase__head h2 { margin: 4px 0 0; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"] .ldsp-section-kicker { color: var(--ldsp-blue); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Content pages (CustomPage): donor-ported texts in theme typography. */
body[data-theme="ldsp-classic"] .cp-pagehead { padding: 30px 0 0; }
body[data-theme="ldsp-classic"] .cp-pagehead__title { margin: 6px 0 0; font-size: 32px; line-height: 1.15; font-weight: 400; }
body[data-theme="ldsp-classic"] .cp-pagehead__lede { margin: 12px 0 0; max-width: 62ch; color: #5a6376; font-size: 16px; line-height: 1.6; }
body[data-theme="ldsp-classic"] .cp-pagehead + .hc-sec { padding-top: 18px; }
/* max-width restated: .hc-wrap ties on specificity and loads later. */
body[data-theme="ldsp-classic"] .hc-sec .editorial { max-width: var(--hc-measure); color: #465164; font-size: 15px; line-height: 1.65; }
body[data-theme="ldsp-classic"].page-custom .hc-sec .editorial { max-width: 1200px; }
body[data-theme="ldsp-classic"].page-custom .hc-sec .editorial:has(table) { max-width: 1200px; }
body[data-theme="ldsp-classic"].page-custom .editorial > :is(p, ul, ol, h2, h3, h4) { max-width: 72ch; }
body[data-theme="ldsp-classic"] .editorial p { margin: 0 0 12px; }
body[data-theme="ldsp-classic"] .editorial :is(h2, h3, h4) { margin: 26px 0 10px; color: var(--ldsp-ink); font-weight: 500; }
body[data-theme="ldsp-classic"] .editorial h2 { font-size: 21px; }
body[data-theme="ldsp-classic"] .editorial h2::before { display: none; }
body[data-theme="ldsp-classic"] .editorial h3 { font-size: 17px; }
body[data-theme="ldsp-classic"] .editorial h4 { font-size: 15px; }
body[data-theme="ldsp-classic"] .editorial :is(ul, ol) { margin: 0 0 14px; padding-left: 22px; }
body[data-theme="ldsp-classic"] .editorial li { margin: 6px 0; }
body[data-theme="ldsp-classic"] .editorial a { color: var(--ldsp-blue); text-underline-offset: 3px; }
body[data-theme="ldsp-classic"] .editorial table { margin: 14px 0 22px; background: #fff; }
body[data-theme="ldsp-classic"].page-custom .editorial table { display: table; width: 100%; table-layout: auto; }
body[data-theme="ldsp-classic"] .editorial :is(td, th) { padding: 11px 14px; border: 1px solid #e6ebf3; font-size: 14px; text-align: left; vertical-align: top; }
body[data-theme="ldsp-classic"] .editorial th { background: #f7f8fb; font-weight: 500; }

@media (max-width: 700px) {
  body[data-theme="ldsp-classic"].page-custom .editorial table {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
}

/* Service overlays (cart drawer, upsells) share the theme surfaces. */
body[data-theme="ldsp-classic"] .hc-drawer__panel { background: #fff; border-left: 1px solid var(--ldsp-line); box-shadow: -18px 0 48px rgba(20,40,76,.14); }
body[data-theme="ldsp-classic"] .hc-drawer__head { background: #fff; border-bottom: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-drawer__title { color: var(--ldsp-ink); font-size: 19px; font-weight: 500; }
body[data-theme="ldsp-classic"] .hc-cart-drawer__item { background: #fff; border-color: var(--ldsp-line); border-radius: 8px; }
body[data-theme="ldsp-classic"] .hc-cart-drawer__name { color: var(--ldsp-ink); }
body[data-theme="ldsp-classic"] .hc-cart-drawer__foot { background: #f7f8fb; border-top: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-cart-drawer__cart-link { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .hc-cart-upsells { background: #fff; border-top: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-cart-upsells__title { color: var(--ldsp-ink); font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .04em; }
body[data-theme="ldsp-classic"] .hc-cart-upsells__item { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 8px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-cart-upsells__price { color: var(--ldsp-ink); }
body[data-theme="ldsp-classic"] .hc-cart-upsells .hc-btn--outline { color: var(--ldsp-blue); background: #fff; border: 1px solid #b9caf0; border-radius: 50%; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-cart-upsells .hc-btn--outline:hover { background: #f2f6ff; }
body[data-theme="ldsp-classic"] .hc-drawer .qty-form { border: 1px solid var(--ldsp-line); border-radius: 6px; background: #fff; }

/* Lead modal follows the theme: white card, blue rectangular submit. */
body[data-theme="ldsp-classic"] .hzlead__dialog { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: 0 24px 64px rgba(20,40,76,.18); }
body[data-theme="ldsp-classic"] .hzlead__title { color: var(--ldsp-ink); font-weight: 700; }
body[data-theme="ldsp-classic"] .hzlead__sub { color: var(--ldsp-muted); }
body[data-theme="ldsp-classic"] .hzlead__chips span, body[data-theme="ldsp-classic"] .hzlead__chips li { color: #35529e; background: #eef3ff; border: 1px solid #d7e3fa; border-radius: 999px; }
body[data-theme="ldsp-classic"] .hzlead__input, body[data-theme="ldsp-classic"] .hzlead__textarea { background: #f7f8fb; border: 1px solid var(--ldsp-line); border-radius: 6px; font: inherit; }
body[data-theme="ldsp-classic"] .hzlead__input:focus, body[data-theme="ldsp-classic"] .hzlead__textarea:focus { background: #fff; border-color: #b9caf0; box-shadow: 0 0 0 3px rgba(47,99,214,.12); }
body[data-theme="ldsp-classic"] .hzlead__label { color: var(--ldsp-ink); }
body[data-theme="ldsp-classic"] .hzlead__submit { color: #fff; background: var(--ldsp-blue); border-radius: 6px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hzlead__submit:hover { background: var(--ldsp-blue-dark); }
body[data-theme="ldsp-classic"] .hzlead__close { color: #667085; background: #fff; border: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hzlead__legal { color: var(--ldsp-muted); }
body[data-theme="ldsp-classic"] .hzlead__legal a { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .hzlead__product { background: #f7f8fb; border: 1px solid var(--ldsp-line); border-radius: 8px; }
body[data-theme="ldsp-classic"] .hzlead__product-sku { color: var(--ldsp-muted); font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
body[data-theme="ldsp-classic"] .hzlead__product-name { font-weight: 500; }

/* Restored backend features: upsell services, FAQ, related posts,
   quick filter chips and the Yandex reviews band. */
/* Вопросы и ответы — в 313-ldsp-faq.css. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts h2 { margin: 0 0 18px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__row a { display: flex; flex-direction: column; gap: 8px; padding: 16px; color: var(--ldsp-ink); background: #fff; border: 1px solid var(--ldsp-line); border-radius: 8px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__row a:hover { border-color: #b9caf0; box-shadow: 0 10px 26px rgba(22,46,85,.08); }
/* 120px on a 590px card was a strip of worktop. A ratio holds at any width;
   5/2 doubles it, 16/9 was 333px and dwarfed the text. */
/* 3/2 — как у карточек блога: при 5/2 от вертикальных обложек оставалась треть. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__img { aspect-ratio: 3 / 2; min-height: 150px; display: block; overflow: hidden; margin: -16px -16px 8px; border-radius: 8px 8px 0 0; background: #f4f6f9; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__img img { width: 100%; height: 100%; object-fit: cover; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__row b { font-size: 14px; line-height: 1.4; font-weight: 500; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__row small { display: -webkit-box; overflow: hidden; color: var(--ldsp-muted); font-size: 12px; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-quick-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-quick-chip { min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; color: #536176; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 999px; text-decoration: none; font-size: 13px; transition: color .15s ease, border-color .15s ease; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-quick-chip:hover { color: var(--ldsp-blue); border-color: #b9caf0; }
body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-quick-chip.is-active { color: #fff; background: var(--ldsp-blue); border-color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__grid { display: grid; grid-template-columns: 230px repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__summary { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 22px; text-align: center; background: #fff; border: 1px solid #dce4ef; border-radius: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__summary strong { font-size: 40px; line-height: 1; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__summary small { color: var(--ldsp-muted); font-size: 12px; line-height: 1.45; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__stars { color: #f5a623; letter-spacing: 2px; font-size: 13px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; border: 1px solid #dce4ef; border-radius: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card p { flex: 1; margin: 0; color: #445066; font-size: 13px; line-height: 1.55; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card footer { display: flex; gap: 10px; align-items: center; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card footer i { width: 34px; height: 34px; display: grid; place-items: center; color: #35529e; background: #eef3ff; border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card footer b { display: block; font-size: 13px; font-weight: 500; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card footer small { color: var(--ldsp-muted); font-size: 11px; }

/* Decor/series format variants + per-category PDP teaser. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants { margin-top: 16px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants__label { display: block; margin-bottom: 8px; color: var(--ldsp-muted); font-size: 13px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants__label b { color: var(--ldsp-ink); font-weight: 500; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants__row { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants__row a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; color: #35529e; background: #eef3ff; border: 1px solid #dbe6fb; border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 500; transition: background .15s ease, border-color .15s ease, color .15s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants__row a:hover { color: #fff; background: var(--ldsp-blue); border-color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-teaser { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-top: 34px; padding: 22px 26px; color: var(--ldsp-ink); background: linear-gradient(90deg, #eef3ff 0%, #f7faff 60%, #fff 100%); border: 1px solid #d7e3fa; border-left: 4px solid var(--ldsp-blue); border-radius: 8px; text-decoration: none; transition: box-shadow .18s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-teaser:hover { box-shadow: 0 12px 30px rgba(44,104,218,.12); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-teaser__copy strong { display: block; font-size: 17px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-teaser__copy small { display: block; margin-top: 4px; color: #526078; font-size: 14px; line-height: 1.45; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-teaser > b { flex-shrink: 0; color: var(--ldsp-blue); font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Premium pack: decor finder, cutting page, invoice, PDP review form. */
body[data-theme="ldsp-classic"] .ldsp-pdp-info__stars.is-filled ~ .ldsp-pdp-info__store-rating { margin-left: 6px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find { padding: 22px 26px; background: #fff; border: 1px solid #dce4ef; border-radius: 12px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__head { display: flex; align-items: center; gap: 16px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__ico { flex-shrink: 0; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__head small { color: var(--ldsp-blue); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__head h2 { margin: 6px 0 0; font-size: 22px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__form { display: flex; gap: 10px; margin-top: 16px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__form input { flex: 1; min-height: 48px; padding: 0 16px; background: #f4f6f9; border: 1px solid var(--ldsp-line); border-radius: 8px; font: inherit; font-size: 15px; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__form input:focus { background: #fff; border-color: #b9caf0; outline: none; box-shadow: 0 0 0 3px rgba(47,99,214,.12); }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__form button { min-height: 48px; padding: 0 26px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-decor-find__form button:hover { background: var(--ldsp-blue-dark); }
body[data-theme="ldsp-classic"] .ldsp-decor-find__empty { margin: 14px 0 0; color: var(--ldsp-muted); font-size: 14px; }
body[data-theme="ldsp-classic"] .ldsp-decor-find__empty a { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .ldsp-decor-find__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
body[data-theme="ldsp-classic"] .ldsp-decor-find__col > b { display: block; margin-bottom: 8px; color: var(--ldsp-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body[data-theme="ldsp-classic"] .ldsp-decor-find__col a { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; padding: 9px 0; color: var(--ldsp-ink); border-bottom: 1px solid #eef1f5; text-decoration: none; font-size: 14px; }
body[data-theme="ldsp-classic"] .ldsp-decor-find__col a:hover span { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .ldsp-decor-find__col a em { flex-shrink: 0; color: var(--ldsp-ink); font-style: normal; font-weight: 700; white-space: nowrap; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting { padding: 26px 0 70px; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting h1 { margin: 14px 0 24px; font-size: 34px; font-weight: 400; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form { display: grid; gap: 14px; padding: 26px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form label { display: grid; gap: 6px; color: var(--ldsp-ink); font-size: 14px; font-weight: 500; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form input[type="text"],
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form input[type="tel"],
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form textarea { min-height: 46px; padding: 10px 14px; background: #f7f8fb; border: 1px solid var(--ldsp-line); border-radius: 8px; font: inherit; font-size: 14px; font-weight: 300; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form input:focus,
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form textarea:focus { background: #fff; border-color: #b9caf0; outline: none; box-shadow: 0 0 0 3px rgba(47,99,214,.12); }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__agree { display: flex; gap: 8px; align-items: center; color: var(--ldsp-muted); font-size: 13px; font-weight: 300; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__agree a { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form > button { min-height: 52px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__form > button:hover { background: var(--ldsp-blue-dark); }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__aside { padding: 24px; background: #f5f8ff; border: 1px solid #dce6f7; border-radius: 12px; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__aside h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__aside ol { margin: 0 0 14px; padding-left: 20px; color: #445066; font-size: 14px; line-height: 1.6; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__aside p { color: var(--ldsp-muted); font-size: 13px; line-height: 1.55; }
body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__aside a { color: var(--ldsp-blue); text-decoration: none; font-weight: 500; }
body[data-theme="ldsp-classic"] .ldsp-invoice { padding: 10px 0 60px; }
/* Две колонки соразмерны, а не «весь остаток» слева: на широком экране
   текст растягивался на полторы тысячи пикселей и рядом с формой
   читался как пустое поле. Выравнивание по верху — карточка читается
   одним блоком, а не двумя половинками, висящими по центру. */
body[data-theme="ldsp-classic"] .ldsp-invoice__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(24px, 3vw, 34px); background: linear-gradient(90deg, #eef3ff 0%, #f7faff 70%, #fff 100%); border: 1px solid #d7e3fa; border-left: 4px solid var(--ldsp-blue); border-radius: 10px; }
body[data-theme="ldsp-classic"] .ldsp-invoice__eyebrow { display: block; margin-bottom: 8px; color: var(--ldsp-blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* Три факта под текстом: раньше слева была пустота, а вопросы «когда
   придёт счёт» и «дадут ли УПД» решались письмом менеджеру. */
body[data-theme="ldsp-classic"] .ldsp-invoice__facts { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
body[data-theme="ldsp-classic"] .ldsp-invoice__facts li { position: relative; padding-left: 24px; color: #3d4657; font-size: 13px; line-height: 1.45; }
body[data-theme="ldsp-classic"] .ldsp-invoice__facts li::before { content: ""; position: absolute; top: 5px; left: 0; width: 14px; height: 8px; border-left: 2px solid var(--ldsp-blue); border-bottom: 2px solid var(--ldsp-blue); transform: rotate(-45deg); }
body[data-theme="ldsp-classic"] .ldsp-invoice__copy h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
body[data-theme="ldsp-classic"] .ldsp-invoice__copy p { max-width: 46ch; margin: 0; color: #526078; font-size: 14px; line-height: 1.55; }
body[data-theme="ldsp-classic"] .ldsp-invoice form { display: grid; gap: 10px; }
body[data-theme="ldsp-classic"] .ldsp-invoice form input[type="text"],
body[data-theme="ldsp-classic"] .ldsp-invoice form input[type="email"],
body[data-theme="ldsp-classic"] .ldsp-invoice form input[type="tel"] { min-height: 44px; padding: 0 14px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 6px; font: inherit; font-size: 14px; }
body[data-theme="ldsp-classic"] .ldsp-invoice form label { display: flex; gap: 8px; align-items: center; color: var(--ldsp-muted); font-size: 12px; }
body[data-theme="ldsp-classic"] .ldsp-invoice form label a { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .ldsp-invoice form button { min-height: 46px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
body[data-theme="ldsp-classic"] .ldsp-invoice form button:hover { background: var(--ldsp-blue-dark); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form { max-width: 720px; margin-top: 18px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 8px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form summary { padding: 14px 18px; color: var(--ldsp-blue); font-weight: 500; cursor: pointer; list-style: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form summary::before { content: '+'; margin-right: 10px; font-weight: 700; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form[open] summary::before { content: '−'; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form form { display: grid; gap: 12px; padding: 4px 18px 18px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ldsp-ink); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form input[type="text"],
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form select,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form textarea { min-height: 42px; padding: 8px 12px; background: #f7f8fb; border: 1px solid var(--ldsp-line); border-radius: 6px; font: inherit; font-size: 14px; font-weight: 300; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form-agree { display: flex; gap: 8px; align-items: center; color: var(--ldsp-muted); font-weight: 300; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form-agree a { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__form form > button { min-height: 46px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }

/* Transactional pages join the theme: cart, checkout, favorites, compare,
   empty states and the mobile menu. */
body[data-theme="ldsp-classic"].page-cart main, body[data-theme="ldsp-classic"] .hc-cmp-wrap { background: transparent; }
body[data-theme="ldsp-classic"] .hc-cart__item { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 10px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-cart__title { color: var(--ldsp-ink); font-family: inherit; font-size: 30px; font-weight: 400; }
body[data-theme="ldsp-classic"].page-cart .hc-card { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 10px; box-shadow: none; }
body[data-theme="ldsp-classic"] .fav-summary, body[data-theme="ldsp-classic"] .hc-cmp-head { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 10px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-cmp-tbl__head, body[data-theme="ldsp-classic"] .hc-cmp-tbl__lbl { background: #f7f8fb; color: var(--ldsp-ink); font-family: inherit; }
body[data-theme="ldsp-classic"] .hc-cmp-tbl__val, body[data-theme="ldsp-classic"] .hc-cmp-tbl__prod { background: #fff; border-color: #eef1f5; }
body[data-theme="ldsp-classic"] .hc-cart-empty__intro, body[data-theme="ldsp-classic"] .hc-empty-rail { color: var(--ldsp-ink); background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-empty { justify-items: center; gap: 14px; padding: 48px 24px; color: var(--ldsp-ink); background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-empty strong { font-size: 19px; font-weight: 500; }
body[data-theme="ldsp-classic"] .hc-empty__title { font-size: 38px; font-weight: 700; letter-spacing: -0.5px; }
body[data-theme="ldsp-classic"] .premium-empty__step-num { background: var(--ldsp-blue); color: #fff; box-shadow: none; font: 700 12px/1 "Roboto", Arial, sans-serif; }

/* /reviews page joins the theme (base blocks: 291-page-reviews, 145-hc-rev). */
body[data-theme="ldsp-classic"] .hc-reviews-hero { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; }
body[data-theme="ldsp-classic"] .hc-reviews-hero__score { background: #f6f8fd; border: 1px solid var(--ldsp-line); border-radius: 10px; }
body[data-theme="ldsp-classic"] .hc-reviews-hero__num { font-family: inherit; font-weight: 700; }
body[data-theme="ldsp-classic"] .hc-reviews-hero__stars,
body[data-theme="ldsp-classic"] .hc-rev__stars { color: #f5a623; }
body[data-theme="ldsp-classic"] .hc-reviews-hist__fill { background: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .hc-rev__card { border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: none; }
body[data-theme="ldsp-classic"] .hc-rev__card:hover { transform: none; border-color: #b9caf0; box-shadow: 0 8px 24px -12px rgba(47, 99, 214, 0.25); }
body[data-theme="ldsp-classic"] .hc-rev__card::before { color: #e3ebfb; }

/* Entity page hero (brands, collections) joins the theme. */
body[data-theme="ldsp-classic"] .page-hero { background: #f4f6fb; }
body[data-theme="ldsp-classic"] .page-hero__bgfx,
body[data-theme="ldsp-classic"] .page-hero__orb { display: none; }
/* Карточка шапки раздела занимает полосу страницы. Базовый потолок в 960px
   рассчитан на колонку текста, а здесь это карточка с рамкой: на широком
   экране она жалась к левому краю, а сетка под ней шла во всю ширину — блок
   выглядел развалившимся. Читаемость держит ограничение на самом тексте. */
/* ── Блок «оставьте контакты» на страницах разделов ──────────────────────
   Собственных правил у темы для него не было, и он приезжал в оформлении
   прежней темы: чёрная карточка, песочная кнопка, тёмное поле на тёмном фоне
   и золотая рамка от --hc-gold-rgb, которая на этой витрине зелёная. Рядом с
   синим магазином это выглядело куском чужого сайта. Здесь блок описан один
   раз в своей палитре: светлая карточка, синяя кнопка, читаемое поле. */
body[data-theme="ldsp-classic"] .lead-block__card { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(22,43,79,.06); color: var(--ldsp-ink); }
body[data-theme="ldsp-classic"] .lead-block__card::before,
body[data-theme="ldsp-classic"] .lead-block__card::after { display: none; }
body[data-theme="ldsp-classic"] .lead-block__eyebrow { color: var(--ldsp-blue); background: #eef4ff; border: 1px solid #d7e3f8; }
body[data-theme="ldsp-classic"] .lead-block__title { font-family: inherit; font-weight: 700; color: var(--ldsp-ink); }
body[data-theme="ldsp-classic"] .lead-block__desc { color: #536176; }
body[data-theme="ldsp-classic"] .lead-block__phone { color: var(--ldsp-ink); background: #f7f9fc; border: 1px solid var(--ldsp-line); border-radius: 8px; box-shadow: none; }
body[data-theme="ldsp-classic"] .lead-block__phone::placeholder { color: #98a2b3; }
body[data-theme="ldsp-classic"] .lead-block__phone:focus { background: #fff; border-color: var(--ldsp-blue); box-shadow: 0 0 0 3px rgba(47,99,214,.16); }
body[data-theme="ldsp-classic"] .lead-block__btn { color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 8px; box-shadow: none; }
body[data-theme="ldsp-classic"] .lead-block__btn:hover { background: var(--ldsp-blue-dark); }
/* Согласие набиралось серым по чёрному и стояло вплотную к рамке. */
body[data-theme="ldsp-classic"] .lead-block__form label { display: flex; gap: 8px; align-items: center; margin: 2px 0 4px; color: #536176; font-size: 13px; }
body[data-theme="ldsp-classic"] .lead-block__form label a { color: var(--ldsp-blue); }

body[data-theme="ldsp-classic"] .page-hero__surface { max-width: 100%; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; box-shadow: none; }
body[data-theme="ldsp-classic"] .page-hero__lede { max-width: 62ch; }
body[data-theme="ldsp-classic"] .page-hero__quicklink { background: #fff; border: 1px solid var(--ldsp-line); border-radius: 999px; }
body[data-theme="ldsp-classic"] .page-hero__quicklink:hover { border-color: #b9caf0; color: var(--ldsp-blue); }

/* Mobile bottom tabbar joins the theme (base block: 110-hc-mobile-tabbar). */
body[data-theme="ldsp-classic"] .hc-mobile-tabbar { background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--ldsp-line); box-shadow: 0 -10px 30px -22px rgba(15, 23, 42, 0.5); }
body[data-theme="ldsp-classic"] .hc-mobile-tabbar__item { color: #6b7687; }
body[data-theme="ldsp-classic"] .hc-mobile-tabbar__item:hover,
body[data-theme="ldsp-classic"] .hc-mobile-tabbar__item.is-active { color: var(--ldsp-blue); background: #f2f6ff; }
body[data-theme="ldsp-classic"] .hc-empty-rail__title { color: var(--ldsp-ink); font-family: inherit; font-weight: 700; }
body[data-theme="ldsp-classic"] .hc-mobile-menu__panel { background: #fff; box-shadow: -18px 0 48px rgba(20,40,76,.16); }
body[data-theme="ldsp-classic"] .hc-mobile-menu__nav a { color: var(--ldsp-ink); border-color: #eef1f5; font-family: inherit; }
body[data-theme="ldsp-classic"] .hc-mobile-menu__nav a:hover { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .hc-mobile-menu__nav strong { color: var(--ldsp-muted); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
body[data-theme="ldsp-classic"] .hc-mobile-menu__nav a.is-active { color: var(--ldsp-blue); background: #f2f6ff; }
body[data-theme="ldsp-classic"] .hc-ecosystem__current { background: #f2f6ff; border: 1px solid #b9caf0; }
body[data-theme="ldsp-classic"] .hc-ecosystem__here { color: var(--ldsp-blue); background: #dbe6fb; }
body[data-theme="ldsp-classic"] .hc-ecosystem__mark { background: var(--ldsp-blue-dark, #1d3a7a); }
body[data-theme="ldsp-classic"] .hc-ecosystem__item { background: #fff; border: 1px solid var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-ecosystem__item:hover { border-color: #b9caf0; }
body[data-theme="ldsp-classic"] .hc-chip { color: var(--ldsp-ink); border-color: var(--ldsp-line); }
body[data-theme="ldsp-classic"] .hc-chip:hover { color: var(--ldsp-blue); border-color: #b9caf0; }
body[data-theme="ldsp-classic"] .hc-chip--active { color: #fff; background: var(--ldsp-blue); border-color: var(--ldsp-blue); }

/* Simple info page (price-alert unsubscribe, generic messages). */
body[data-theme="ldsp-classic"] .ldsp-info-card { max-width: 640px; margin: 24px 0 60px; padding: 32px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; }
body[data-theme="ldsp-classic"] .ldsp-info-card h1 { margin: 0 0 12px; font-size: 26px; font-weight: 700; }
body[data-theme="ldsp-classic"] .ldsp-info-card p { margin: 0 0 20px; color: var(--ldsp-muted); font-size: 15px; line-height: 1.6; }
body[data-theme="ldsp-classic"] .ldsp-info-card__btn { display: inline-flex; padding: 11px 22px; color: #fff; background: var(--ldsp-blue); border-radius: 6px; text-decoration: none; font-weight: 700; }

/* Inline error alert (batch-add failure, form errors). */
body[data-theme="ldsp-classic"] .hc-alert--error { margin: 0; padding: 14px 16px; color: #8a1c1c; background: #fdecec; border: 1px solid #f3c3c3; border-radius: 10px; font-size: 14px; line-height: 1.5; }

/* Colour swatches for decor facets (class produced by decor_swatch_class). */
body[data-theme="ldsp-classic"] .ldsp-swatch { width: 14px; height: 14px; flex: 0 0 auto; display: inline-block; border: 1px solid rgba(15, 23, 42, 0.22); border-radius: 50%; vertical-align: -2px; }
body[data-theme="ldsp-classic"] .ldsp-swatch--white { background: #f6f6f3; }
body[data-theme="ldsp-classic"] .ldsp-swatch--black { background: #23252a; }
body[data-theme="ldsp-classic"] .ldsp-swatch--gray { background: #9aa0a6; }
body[data-theme="ldsp-classic"] .ldsp-swatch--beige { background: #e4d3b4; }
body[data-theme="ldsp-classic"] .ldsp-swatch--yellow { background: #e8c25a; }
body[data-theme="ldsp-classic"] .ldsp-swatch--orange { background: #dd8a3f; }
body[data-theme="ldsp-classic"] .ldsp-swatch--red { background: #b4443c; }
body[data-theme="ldsp-classic"] .ldsp-swatch--pink { background: #e0a9b8; }
body[data-theme="ldsp-classic"] .ldsp-swatch--purple { background: #8e6faf; }
body[data-theme="ldsp-classic"] .ldsp-swatch--blue { background: #4a76c9; }
body[data-theme="ldsp-classic"] .ldsp-swatch--green { background: #6d9e6b; }
body[data-theme="ldsp-classic"] .ldsp-swatch--oak { background: linear-gradient(135deg, #d7b078, #b98d54); }
body[data-theme="ldsp-classic"] .ldsp-swatch--walnut { background: linear-gradient(135deg, #7a5636, #55381f); }
body[data-theme="ldsp-classic"] .ldsp-swatch--fantasy { background: linear-gradient(120deg, #c9d4e8 0 33%, #e4d3b4 33% 66%, #b0b8c4 66%); }

/* Decor hub — /decors/ index and /decor/<code> detail pages. */
body[data-theme="ldsp-classic"] .ldsp-decor-hub { padding: 26px 0 56px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin: 10px 0 26px; padding: 26px 28px; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 12px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__head h1 { margin: 6px 0 8px; font-size: 34px; font-weight: 700; letter-spacing: -0.5px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__head p { max-width: 640px; margin: 0; color: var(--ldsp-muted); font-size: 15px; line-height: 1.55; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__facts { display: flex; gap: 14px; margin: 0; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__facts > div { min-width: 118px; padding: 14px 18px; background: #f2f6ff; border-radius: 10px; text-align: center; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__facts dt { font-size: 26px; font-weight: 700; color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__facts dd { margin: 2px 0 0; color: var(--ldsp-muted); font-size: 12.5px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__sub { margin: 30px 0 14px; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__cta { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 34px; padding: 22px 28px; background: #f2f6ff; border-left: 3px solid var(--ldsp-blue); border-radius: 10px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__cta strong { display: block; margin-bottom: 4px; font-size: 17px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__cta p { margin: 0; color: var(--ldsp-muted); font-size: 14px; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__cta-btn { flex: 0 0 auto; padding: 12px 22px; color: #fff; background: var(--ldsp-blue); border-radius: 6px; text-decoration: none; font-weight: 700; white-space: nowrap; }
body[data-theme="ldsp-classic"] .ldsp-decor-hub__cta-btn:hover { background: var(--ldsp-blue-dark, #2450b0); }
body[data-theme="ldsp-classic"] .ldsp-decor-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
body[data-theme="ldsp-classic"] .ldsp-decor-index__item { display: grid; gap: 3px; padding: 14px 16px; color: var(--ldsp-ink); background: #fff; border: 1px solid var(--ldsp-line); border-radius: 10px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
body[data-theme="ldsp-classic"] .ldsp-decor-index__item:hover { border-color: #b9caf0; box-shadow: 0 10px 24px -16px rgba(47, 99, 214, 0.45); }
body[data-theme="ldsp-classic"] .ldsp-decor-index__item b { font-size: 16px; }
body[data-theme="ldsp-classic"] .ldsp-decor-index__item.is-paired b { color: var(--ldsp-blue); }
body[data-theme="ldsp-classic"] .ldsp-decor-index__item span { font-size: 13.5px; }
body[data-theme="ldsp-classic"] .ldsp-decor-index__item small { color: var(--ldsp-muted); font-size: 12px; }
@media (max-width: 900px) {
  body[data-theme="ldsp-classic"] .ldsp-decor-hub__head { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"] .ldsp-decor-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-theme="ldsp-classic"] .ldsp-decor-hub__cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1380px) {
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-product-grid--catalog,
  body[data-theme="ldsp-classic"] .ldsp-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  /* PDP related shows 4 tiles: 2 per row keeps both rows full. */
  body[data-theme="ldsp-classic"] .ldsp-product-grid--home { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Узкие экраны — по донору: при 1300 у него остаются две колонки, высокая
   плитка держит две строки. У нас слева ещё колонка, поэтому его порог
   наступает раньше. */
@media (max-width: 1380px) {
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-main-column .ldsp-ref-promos {
    grid-auto-flow: row dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 220px;
  }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promos > :nth-child(n) .ldsp-ref-promo__copy { width: auto; }
}

@media (max-width: 720px) {
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-main-column .ldsp-ref-promos {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 200px;
  }
body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo--tall { grid-row: auto; }
}

@media (max-width: 1180px) {
  /* Ниже 1180 колонка фильтра схлопывается — и вместе с ней фильтр должен
     становиться шторкой с кнопкой, а не полосой во всю ширину страницы.
     Раньше шторка включалась только с 900, а кнопка «Фильтр» и подложка —
     с 720: между 901 и 1180 параметры растягивались на всю ширину
     (773 пикселя на строку с галочкой слева и числом справа), а между 721
     и 900 колонка уже уезжала за экран, но открыть её было нечем. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog__sidebar { position: fixed; z-index: 200; inset: 0 38px 0 0; width: auto; max-width: 390px; height: auto; max-height: none; overflow: auto; padding: 15px; background: #fff; transform: translateX(-110%); transition: transform .2s ease; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog__sidebar.is-open { transform: translateX(0); box-shadow: 12px 0 40px rgba(0,0,0,.18); }
  /* В шторке прокрутка одна — сама шторка. Ограничение по высоте у формы
     осталось от колонки на широком экране, где список параметров не должен
     уезжать за край рядом с товарами; здесь оно даёт две вложенные прокрутки
     (592 видимых на 2293 содержимого внутри уже прокручиваемой шторки): палец
     попадает то в одну, то в другую, а шапка «Фильтры · Закрыть» уходит вверх
     вместе с содержимым. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__form { max-height: none; overflow-y: visible; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog__main { position: relative; z-index: 1; padding-top: 0; }
  /* Колонка уехала в шторку — подложке под ней нечего подкладывать. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog { background: #f3f6fa; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-backdrop { position: fixed; z-index: 190; inset: 0; display: block; padding: 0; background: rgba(0,0,0,.34); border: 0; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-filter-box .hc-cat-filters__head { display: flex; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__filter { min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 4px; }
  /* Home showcases render 8 tiles: 4 or 2 per row keeps every row full. */
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body[data-theme="ldsp-classic"] .hc-hdr__in { grid-template-columns: 205px minmax(300px,1fr) 210px auto; gap: 16px; }
  body[data-theme="ldsp-classic"] .ldsp-logo-copy strong { font-size: 21px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-stage__grid,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-shell { grid-template-columns: 1fr; }
  /* The former two-column grid stretched every short card to the height of
     the tall banner beside it. CSS columns keep all tablet content without
     metre-high empty white panels. */
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-left-column {
    position: static;
    display: block;
    columns: 2;
    column-gap: 20px;
  }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-left-column > *,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-sticky > * {
    width: 100%;
    margin: 0 0 20px;
    break-inside: avoid;
  }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-side-sticky { display: contents; }
  body[data-theme="ldsp-classic"] .hc-ftr__top { grid-template-columns: 1fr 1fr; }
  body[data-theme="ldsp-classic"] .hc-ftr__manifesto { grid-column: 1 / -1; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog__grid { display: block; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__main { grid-template-columns: minmax(0,1fr) minmax(290px,330px); }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery-stack { grid-column: 1/-1; }
}
@media (max-width: 980px) {
  body[data-theme="ldsp-classic"] .ldsp-topbar { display: none; }
  body[data-theme="ldsp-classic"] .hc-hdr { height: auto; }
  body[data-theme="ldsp-classic"] .hc-hdr__in {
    min-height: 116px;
    grid-template-columns: auto 190px minmax(230px,1fr) auto;
    grid-template-areas: "burger logo search right";
  }
  body[data-theme="ldsp-classic"] .hc-hdr__burger { grid-area: burger; display: inline-flex; }
  body[data-theme="ldsp-classic"] .ldsp-header-phone { display: none; }
}
@media (max-width: 900px) {
}
@media (max-width: 720px) {
  body[data-theme="ldsp-classic"] .hc-wrap { width: calc(100% - 28px); }
  body[data-theme="ldsp-classic"] .hc-hdr__in {
    min-height: 112px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "burger logo right"
      "search search search";
    gap: 8px 10px;
    padding: 8px 0;
  }
  body[data-theme="ldsp-classic"] .ldsp-logo-mark { width: 38px; height: 38px; flex-basis: 38px; }
  body[data-theme="ldsp-classic"] .ldsp-logo-copy strong { font-size: 18px; }
  body[data-theme="ldsp-classic"] .ldsp-logo-copy small { display: none; }
  body[data-theme="ldsp-classic"] .ldsp-header-search { height: 43px; grid-template-columns: 1fr 48px; border-radius: 23px; }
  body[data-theme="ldsp-classic"] .ldsp-header-search > button { height: 43px; }
  body[data-theme="ldsp-classic"] .ldsp-header-search > button svg { width: 33px; height: 33px; padding: 8px; }
  body[data-theme="ldsp-classic"] .hc-hdr__right > :not([data-cart-icon]) { display: none; }
  body[data-theme="ldsp-classic"] .ldsp-showcase { padding: 30px 0; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-full { gap: 20px; margin-top: 0; }
  body[data-theme="ldsp-classic"] .hc-ftr { padding: 38px 0 calc(92px + env(safe-area-inset-bottom)); }
  body[data-theme="ldsp-classic"] .hc-ftr__top { grid-template-columns: 1fr; gap: 26px; }
  body[data-theme="ldsp-classic"] .hc-ftr__manifesto { grid-column: auto; }
  body[data-theme="ldsp-classic"] .hc-ftr__nav--desktop { display: none; }
  body[data-theme="ldsp-classic"] .hc-ftr__mobile-nav { display: grid; gap: 8px; }
  body[data-theme="ldsp-classic"] .hc-ftr__acc { border-color: var(--ldsp-line); }
  /* The desktop catalogue rail becomes one compact entry point on mobile. */
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-stage { padding-top: 10px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu { min-height: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__list,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-home-menu__all { display: none; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-section-cap { min-height: 56px; padding: 0 18px; border-radius: 10px; font-size: 16px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-left-column { display: none; }
  /* A phone gets a useful edit of the desktop page. Full lists remain one tap
     away via the catalogue and blog links. */
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promos > :nth-child(n+4),
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-brands,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-recommend { display: none; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product-grid > :nth-child(n+5),
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid > :nth-child(n+5),
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid > :nth-child(n+3),
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__card:nth-of-type(n+3) { display: none; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-reviews__grid,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-category-grid,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-brands__row,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-journal__grid,
  body[data-theme="ldsp-classic"] .ldsp-product-grid,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-product-grid { grid-template-columns: 1fr; }
  /* Listing keeps two tiles per row on phones: one 666px-tall card per screen
     made the catalog impossible to scan or compare, and every major storefront
     (Ozon, WB, Leroy) stays two-up at this width. List mode still overrides. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-product-grid--catalog { grid-template-columns: repeat(2,minmax(0,1fr)); }
  /* A two-up phone tile is ~156px wide. The property chips are inline-flex and
     cannot shrink — one measured 164px and pushed past the card edge — and the
     detail belongs on the product page rather than on a thumbnail. Grid mode
     only: list mode keeps full-width rows where the chips still read well. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__props { display: none; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__title { min-height: 0; font-size: 13px; line-height: 1.35; }
  /* The actions row declares three tracks (1fr + two 42px icon slots). Explicit
     tracks are reserved even when their children are hidden, so on a 120px
     content column the add-to-cart button was squeezed into 20px and rendered
     as a single clipped letter. One track, full-width button. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__actions { grid-template-columns: minmax(0,1fr); }
  /* Secondary actions (1-click, wishlist, compare) stack to 132px on a 156px
     card — more than the image is worth. The grid tile keeps price + В корзину;
     the full set stays on the product page and in list mode. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__mobile-actions { display: none; }
  /* The stock chip wrapped onto two lines (110x45) and masked a fifth of the
     decor photo on a 156px card. Smaller type fixed that — but nowrap then cut
     the longest label instead: «Осталось мало · 1 шт» measures 128px inside a
     110px photo, so every low-stock tile on a phone read «…· 1 ш». The chip is
     held inside the photo and wraps when it has to; at 10px that is two short
     lines, ~30px, not the 45px that started this. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__badges { max-width: calc(100% - 20px); }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__stock { padding: 4px 7px; font-size: 10px; line-height: 1.25; white-space: normal; }
  /* A fixed 216px photo on a 156px card is portrait: it pushed the card to a
     1:3.1 silhouette when storefront grids sit near 1:2. Square keeps the decor
     readable (these are surface swatches) and returns ~60px per card. */
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-results:not(.is-list) .ldsp-product-tile__media { height: auto; aspect-ratio: 1 / 1; }
  /* The hero veil is a left-to-right gradient built for the desktop layout,
     where the copy sits in the dark 0.86 end. On a phone the copy spans the
     full slide and its last words land on the 0.12 end — white text over a
     pale photo. Vertical veil covers the whole line on narrow screens. */
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__veil { background-image: linear-gradient(180deg, rgba(14,34,70,.55), rgba(14,34,70,.82)); }
  /* Touch screens have no hover: keep the purchase and quick-view controls
     discoverable instead of leaving a visually empty card. */
  body[data-theme="ldsp-classic"] .ldsp-product-tile__actions { position: static; display: grid; margin-top: 12px; opacity: 1; transform: none; }
  body[data-theme="ldsp-classic"] :is(.ldsp-product-tile__top-actions button, .ldsp-product-tile__quick) { opacity: 1; transform: none; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__top-actions { display: none; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__mobile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__mobile-actions button { min-height: 44px; color: #536176; background: #fff; border: 1px solid var(--ldsp-line); border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__quick { width: 44px; height: 44px; right: 6px; bottom: 6px; }
  body[data-theme="ldsp-classic"] .ldsp-product-tile__fastcart { display: none; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero { min-height: 340px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__content { max-width: min(100%, 330px); padding: 34px 20px 78px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero :is(h1,h2) { font-size: clamp(25px, 8vw, 34px); line-height: 1.06; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero p { max-width: 280px; margin: 12px 0 18px; font-size: 13px; line-height: 1.45; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__stat { top: 14px; right: 14px; padding: 7px 9px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-main-hero__nav { right: 16px; bottom: 16px; left: 20px; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-main-column .ldsp-ref-promos { grid-auto-rows: auto; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 190px;
  }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo > img,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo--tall > img { grid-area: 2 / 1; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-promo__copy { grid-area: 1 / 1; }
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-recommend__tabs,
  body[data-theme="ldsp-classic"].page-home--ldsp .ldsp-ref-tabs { overflow-x: auto; grid-template-columns: repeat(4, minmax(132px, 1fr)); }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero { gap: 10px; padding: 14px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero__title-row { display: block; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero h1 { font-size: 30px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero__count { display: none; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links { flex-wrap: nowrap; max-height: none; overflow-x: auto; overflow-y: hidden; align-items: center; scrollbar-width: thin; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__head,
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__label,
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__chips { flex: 0 0 auto; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-hero .hc-seo-links__chips { flex-wrap: nowrap; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-cat-promo-insert { padding: 6px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar { min-height: 58px; gap: 8px; padding: 9px 10px; }
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar label,
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__shown,
  body[data-theme="ldsp-classic"].page-catalog--ldsp .ldsp-catalog-toolbar__views { display: none; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid,
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__main { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__main > .ldsp-pdp-gallery-stack,
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__main > .ldsp-pdp-info,
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__main > .ldsp-pdp-buy { grid-column: 1; grid-row: auto; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery-stack { order: 0; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy { order: 1; position: static; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-info { order: 2; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid > .ldsp-section-cap { display: none; }
  /* 28px is the desktop size: on 390px a plate name ran to five lines and the
     header ate 260 of the 664 pixels above the fold. 21/1.25 gives three. */
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid h1 { margin-top: 8px; font-size: 21px; line-height: 1.25; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp__head-grid > div { padding: 16px 18px; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs { overflow-x: auto; margin-top: 0; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs .hc-wrap { width: max-content; min-width: 100%; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-tabs a { min-width: 135px; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-gallery__main { height: 330px; min-height: 300px; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__table > div { grid-template-columns: 1fr; gap: 3px; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-posts__row { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"].page-cutting .ldsp-cutting__grid { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"] .ldsp-invoice__card { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"] .ldsp-decor-find__cols { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs dd { max-width: 62%; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-perks { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__card { grid-template-columns: 1fr; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-delivery__pay { border-top: 1px solid var(--ldsp-line); border-left: 0; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-reviews__grid { grid-template-columns: 1fr; }
  /* Cart: at 390x664 the total sat 1.0 screens down and the checkout button
     1.8, with nothing fixed to reach either. --hc-stickybar-h is what the
     consent banner reads to clear the bar; min-height keeps it true. Footer
     clearance is margin because the banner owns its padding-bottom.
     See tests/test_a_real_phone_can_reach_the_buttons.py. */
  /* Bars are z-120, the lead modal --hc-z-modal (100): with it open the bar
     sat over the modal's consent checkbox. visibility, not display, so this
     stays a state rather than a second rule over one property. */
  body[data-theme="ldsp-classic"].hc-modal-open .ldsp-cart-stickybuy,
  body[data-theme="ldsp-classic"].hc-modal-open .ldsp-pdp-stickybuy { visibility: hidden; pointer-events: none; }
  body[data-theme="ldsp-classic"]:has(.ldsp-cart-stickybuy),
  body[data-theme="ldsp-classic"]:has(.ldsp-pdp-stickybuy) { --hc-stickybar-h: 68px; }
  body[data-theme="ldsp-classic"].page-cart .ldsp-cart-stickybuy { position: fixed; z-index: var(--hc-z-header, 50); right: 0; bottom: calc(var(--hc-tabbar-clearance, 70px) + env(safe-area-inset-bottom)); left: 0; display: flex; gap: 14px; align-items: center; justify-content: space-between; min-height: var(--hc-stickybar-h); padding: 10px 14px; background: rgba(255,255,255,.97); border-top: 1px solid var(--ldsp-line); box-shadow: 0 -8px 24px rgba(20,40,76,.08); }
  body[data-theme="ldsp-classic"].page-cart .ldsp-cart-stickybuy__price small { display: block; color: #777; font-size: 12px; }
  body[data-theme="ldsp-classic"].page-cart .ldsp-cart-stickybuy__price strong { font-size: 19px; }
  body[data-theme="ldsp-classic"].page-cart .ldsp-cart-stickybuy .hc-btn { min-height: 44px; padding: 0 22px; }
  body[data-theme="ldsp-classic"].page-cart footer,
  body[data-theme="ldsp-classic"].page-pdp footer { margin-bottom: calc(var(--hc-tabbar-clearance, 70px) + var(--hc-stickybar-h, 0px) + env(safe-area-inset-bottom)); }
  /* Sticky purchase bar keeps price and cart reachable while scrolling. */
    /* Пока висит баннер cookie, полоса покупки поднимается над ним: иначе
     первый посетитель видит поверх кнопки «В корзину» согласие на cookie. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-stickybuy { position: fixed; z-index: var(--hc-z-header, 50); right: 0; bottom: calc(max(var(--hc-tabbar-clearance, 70px), var(--cookie-banner-offset, 0px)) + env(safe-area-inset-bottom)); left: 0; display: flex; gap: 14px; align-items: center; justify-content: space-between; min-height: var(--hc-stickybar-h); padding: 10px 14px; background: rgba(255,255,255,.97); border-top: 1px solid var(--ldsp-line); box-shadow: 0 -8px 24px rgba(20,40,76,.08); }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-stickybuy__price strong { font-size: 19px; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-stickybuy__price small { margin-left: 4px; color: #777; }
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-stickybuy button { min-height: 44px; padding: 0 26px; color: #fff; background: var(--ldsp-blue); border: 0; border-radius: 6px; font-size: 15px; font-weight: 500; }
}

/* Specs groups sit side by side once there is room, so the table stops leaving
   a ~350px dead zone on wide screens and a one-row group ("Прочие") no longer
   reads as an orphaned full-width strip. */
@media (min-width: 1080px) {
  body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-specs-full__groups { grid-template-columns: 1fr 1fr; }
}

/* Decor hub: a colour chip and an instant filter. The hub lists 750 codes as
   plain text with no imagery and no search, so a visitor could neither scan it
   by colour nor jump to a code without Ctrl+F. */
body[data-theme="ldsp-classic"].page-decors-index--ldsp .ldsp-decor-hub__find { display: grid; gap: 6px; margin: 22px 0 6px; max-width: 460px; }
body[data-theme="ldsp-classic"].page-decors-index--ldsp .ldsp-decor-hub__find-label { color: #667085; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-decors-index--ldsp .ldsp-decor-hub__find input { height: 46px; padding: 0 14px; border: 1px solid #d7deea; border-radius: 8px; background: #fff; color: var(--ldsp-ink); font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
body[data-theme="ldsp-classic"].page-decors-index--ldsp .ldsp-decor-hub__find input:focus { border-color: var(--ldsp-blue); box-shadow: 0 0 0 3px rgba(42,101,208,.16); outline: none; }
body[data-theme="ldsp-classic"].page-decors-index--ldsp .ldsp-decor-hub__empty { margin: 18px 0 0; color: #667085; font-size: 15px; }
body[data-theme="ldsp-classic"].page-decors-index--ldsp .ldsp-decor-index__swatch { width: 18px; height: 18px; border-radius: 4px; }

/* One convention for icon motion: decorative icons (hero, empty states) keep
   their looping SMIL, every FUNCTIONAL icon reacts only to interaction with the
   same easing and the same 1.12 lift. The header icon carries its transition in
   its own rule above and the tile quick-view already has hover handling, so only
   the states missing from the theme are declared here — one selector each, no
   second block for an element that is already described. */
body[data-theme="ldsp-classic"] a:hover > .hc-hdr__ico,
body[data-theme="ldsp-classic"] button:hover > .hc-hdr__ico,
body[data-theme="ldsp-classic"] .ldsp-decor-index__item:hover .ldsp-decor-index__swatch { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="ldsp-classic"] a:hover > .hc-hdr__ico,
  body[data-theme="ldsp-classic"] button:hover > .hc-hdr__ico,
  body[data-theme="ldsp-classic"] .ldsp-decor-index__item:hover .ldsp-decor-index__swatch { transform: none; }
}

/* Reviews page: the histogram doubles as a rating filter and the wall of cards
   is revealed in batches (see main.js). */
body[data-theme="ldsp-classic"] .hc-reviews-hist__pick { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: transparent; font: inherit; cursor: pointer; }
body[data-theme="ldsp-classic"] .hc-reviews-hist__pick:focus-visible { outline: 2px solid var(--ldsp-blue); outline-offset: 2px; border-radius: 8px; }
body[data-theme="ldsp-classic"] .hc-reviews-hist__row.is-active { background: #e4edfc; }
body[data-theme="ldsp-classic"] .hc-reviews-more { display: grid; justify-items: center; gap: 10px; margin: 26px 0 0; }
body[data-theme="ldsp-classic"] .hc-reviews-more__count { margin: 0; color: #667085; font-size: 14px; }

/* The tile grid paints its separators by letting the container colour show
   through 1px gaps. With a fixed four-column track and only three companions,
   the unused track showed up as a 334px slab of that colour beside the cards.
   Letting the tracks collapse to the number of items removes the slab without
   touching how a full row looks. */

/* Product documents: instruction sheets imported from the donor's storage,
   shown as files rather than as a spec row printing a raw path. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs { margin-top: 40px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs h2 { margin: 0 0 14px; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs__list a { display: flex; gap: 12px; align-items: center; padding: 13px 16px; background: #fff; border: 1px solid #e2e8f2; border-radius: 8px; color: var(--ldsp-ink); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs__list a:hover { border-color: #b9caf0; box-shadow: 0 10px 24px -16px rgba(47, 99, 214, .45); }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs__list small { margin-left: auto; color: #667085; font-size: 12px; letter-spacing: .06em; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-docs__ico { width: 20px; height: 20px; color: var(--ldsp-blue); flex: none; }

/* Decor-format chips across the content width: a row instead of the four-line
   stack they formed inside the info column. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants--wide { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 34px 0 0; padding: 16px 18px; background: #fff; border: 1px solid #e2e8f2; border-radius: 10px; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-variants--wide .ldsp-pdp-variants__row { flex: 1 1 auto; }

/* Native number spinners duplicate the -/+ buttons and crowd the field. */
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty input::-webkit-outer-spin-button,
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty input::-webkit-inner-spin-button { margin: 0; appearance: none; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty > button { color: #667085; font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty button:hover { color: var(--ldsp-blue); background: #eef4fd; }
body[data-theme="ldsp-classic"].page-pdp .ldsp-pdp-buy__qty input:focus-visible { outline: 2px solid var(--ldsp-blue); outline-offset: -2px; }

/* css/blocks/321-ldsp-grid-banner.css */
/* Баннер внутри сетки товаров каталога.
 *
 * Сетка каталога — четыре колонки на десктопе и две на телефоне; баннер
 * занимает две, поэтому ряд остаётся ровным на обеих ширинах. Высоту не
 * задаём: её держит соседняя плитка, и баннер тянется ровно на ряд.
 *
 * Картинка — полосой сверху, а не фоном во всю плитку. У разделов картинки
 * разного склада: у кромки это лента 440×106, и растянутая на всю высоту она
 * превращалась в пятно, по которому не понять, куда ведёт баннер. Полоса
 * фиксированной высоты показывает то же изображение узнаваемым при любом
 * соотношении сторон.
 *
 * Разметку даёт _ldsp/catalog_grid_banner.html.
 */
.ldsp-grid-banner {
  grid-column: span 2;
  display: grid;
  grid-template-rows: 44% 1fr;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #1f3f7a, #2f63d6);
  border: 1px solid var(--ldsp-line, #e2e8f2);
  border-radius: 6px;
}

/* Без картинки полоса не занимает места: остаётся один градиент с подписью. */
.ldsp-grid-banner:not(:has(.ldsp-grid-banner__img)) { grid-template-rows: 1fr; }

.ldsp-grid-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f2f5fa;
}

.ldsp-grid-banner__body {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px 22px;
}

/* Цвет объявлен на каждой части отдельно, а не унаследован от ссылки: тема
   красит a:hover в синий, и на синем баннере при наведении текст пропадал —
   заголовок, подпись и призыв уходили в цвет фона. */
.ldsp-grid-banner__title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.ldsp-grid-banner__sub {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.45;
  opacity: .9;
}

.ldsp-grid-banner__cta {
  margin-top: 2px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

a.ldsp-grid-banner:hover .ldsp-grid-banner__cta { text-decoration: underline; }
a.ldsp-grid-banner:focus-visible { outline: 3px solid #2f63d6; outline-offset: 2px; }

/* Светлый вариант — когда картинка раздела сама тёмная. */
.ldsp-grid-banner--light {
  color: #16233a;
  background: linear-gradient(135deg, #eef3fd, #dfe9fb);
}
.ldsp-grid-banner--light .ldsp-grid-banner__title,
.ldsp-grid-banner--light .ldsp-grid-banner__cta { color: #16233a; }
.ldsp-grid-banner--light .ldsp-grid-banner__sub { color: #41506b; }

/* На телефоне сетка двухколоночная: баннер занимает ряд целиком и становится
   ниже — иначе он вытесняет с экрана товары, ради которых человек и пришёл. */
@media (max-width: 720px) {
  .ldsp-grid-banner { grid-template-rows: 40% 1fr; }
  .ldsp-grid-banner__body { padding: 14px 16px; gap: 6px; }
  .ldsp-grid-banner__title { font-size: 17px; }
  .ldsp-grid-banner__sub { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ldsp-grid-banner { transition: none; }
}

/* css/blocks/322-hc-flash-sale.css */
/* =================== hc-flash-bar =================== */
/* Полоса акции в самом верху страницы.
 *
 * Первая версия была цветной плитой во всю ширину под шапкой: оранжевый
 * градиент, заголовок в три строки, отдельная кнопка. На первом экране она
 * перекрикивала логотип и каталог — вместо приглашения получался баннер,
 * который хочется закрыть.
 *
 * Стала строкой в 40 пикселей: чёрный фон, белый текст, всё в одну линию, и
 * вся полоса — одна ссылка. Цвет остался только на проценте, потому что это
 * единственное, что в ней спорит за внимание.
 *
 * Строго .hc-flash-bar / .hc-flash-bar__*.
 */
.hc-flash-bar {
  background: #12151a;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  line-height: 1;
}

.hc-flash-bar__in {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.hc-flash-bar__pct {
  padding: 4px 8px;
  color: #12151a;
  background: var(--ldsp-red, #d74d45);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.hc-flash-bar__title {
  font-weight: 600;
  white-space: nowrap;
}

/* Пояснение — первое, чем жертвуем на узком экране: заголовка и срока
   достаточно, чтобы понять, о чём речь. */
.hc-flash-bar__sub {
  min-width: 0;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-flash-bar__spacer {
  flex: 1 1 auto;
}

.hc-flash-bar__left {
  color: rgba(255, 255, 255, .55);
}

/* Моноширинный, чтобы строка не дёргалась каждую секунду при смене цифр. */
.hc-flash-bar__timer {
  font-family: var(--hc-mono, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.hc-flash-bar__timer.is-over {
  color: rgba(255, 255, 255, .55);
  font-weight: 400;
}

.hc-flash-bar__cta {
  padding: 5px 12px;
  color: #12151a;
  background: #fff;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .16s ease;
}

.hc-flash-bar__in:hover .hc-flash-bar__cta {
  background: var(--ldsp-red, #d74d45);
  color: #fff;
}

/* Телефон: остаются процент, срок и стрелка — то, ради чего полосу и читают. */
@media (max-width: 860px) {
  .hc-flash-bar__sub,
  .hc-flash-bar__left {
    display: none;
  }
}

/* Телефон уже: строка не резиновая — процент, срок и подпись не сжимаются, и
   вместе они шире экрана. Вся полоса и так одна ссылка, поэтому белая плашка
   уходит: остаются повод и сколько осталось, а нажимается по-прежнему всё. */
@media (max-width: 560px) {
  .hc-flash-bar__in {
    gap: 10px;
  }
  .hc-flash-bar__title {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hc-flash-bar__cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-flash-bar__cta { transition: none; }
}

/* css/blocks/323-hc-banner-ribbon.css */
/* =================== hc-banner-ribbon =================== */
/* Лента баннеров над списком товаров.
 *
 * Раньше баннеры вставлялись ячейками внутрь сетки товаров. Ячейка баннера
 * выше карточки, а строка грида тянется по самой высокой ячейке — из-за этого
 * соседние карточки растягивались, и под ними оставалась пустота.
 *
 * У донора баннер идёт лентой над списком: одна широкая полоса, слайды
 * меняются сами, слева и справа стрелки, снизу точки. Так он ничего не
 * растягивает, потому что живёт вне сетки.
 *
 * Слайды лежат друг на друге и переключаются прозрачностью — тот же приём,
 * что у героя главной, чтобы лента не прыгала по высоте при смене кадра.
 *
 * Строго .hc-banner-ribbon / .hc-banner-ribbon__*.
 */
.hc-banner-ribbon {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #eef1f6;
}

/* Высота ленты задана пропорцией, а не пикселями: у баннеров разные исходники,
   и фиксированная высота либо резала их, либо оставляла поля. */
.hc-banner-ribbon__track {
  position: relative;
  width: 100%;
  /* Лента ниже: на 1900 пикселях полоса 1520×230 вырастала до 290 в высоту и
     занимала треть первого экрана раздела — под ней товар начинался уже за
     сгибом. Пропорция та же, но с потолком по высоте. */
  aspect-ratio: 1520 / 230;
  min-height: 118px;
  max-height: 210px;
}

.hc-banner-ribbon__slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background:
    linear-gradient(110deg, #fff 0%, #f7f9fd 58%, #eef3fb 100%);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.hc-banner-ribbon__slide picture {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  display: block;
  overflow: hidden;
  background: #f3f5f8;
}

.hc-banner-ribbon__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hc-banner-ribbon__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Текст поверх кадра — слева, в колонке. Подложка только под ним: у баннеров
   светлый край не гарантирован. */
.hc-banner-ribbon__body {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 clamp(18px, 3vw, 44px);
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 72%, rgba(255,255,255,0) 100%);
}

.hc-banner-ribbon__title {
  color: #12151a;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.2;
  font-weight: 700;
}

.hc-banner-ribbon__sub {
  margin: 0;
  color: #48505f;
  font-size: 14px;
  line-height: 1.4;
}

.hc-banner-ribbon__cta {
  align-self: flex-start;
  min-height: 34px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  margin-top: 6px;
  padding: 0 16px;
  color: #fff;
  background: var(--ldsp-blue, #2f63d6);
  border-radius: 3px;
  font-size: 13px;
  white-space: nowrap;
}

/* Тёмный вариант — для кадров, на которых белая подложка выглядит грязно. */
.hc-banner-ribbon__slide--light .hc-banner-ribbon__body {
  background: linear-gradient(90deg, rgba(18,31,53,.95) 0%, rgba(18,31,53,.9) 82%, rgba(18,31,53,.62) 100%);
}

.hc-banner-ribbon__slide--light .hc-banner-ribbon__title { color: #fff; }
.hc-banner-ribbon__slide--light .hc-banner-ribbon__sub { color: rgba(255,255,255,.82); }

/* Стрелки и точки. Показываем их только когда слайдов больше одного —
   иначе управление есть, а управлять нечем. */
.hc-banner-ribbon__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-top: -17px;
  padding: 0;
  color: #12151a;
  cursor: pointer;
  background: rgba(255,255,255,.86);
  border: 0;
  border-radius: 50%;
  font-size: 15px;
  transition: background .16s ease;
}

.hc-banner-ribbon__arrow:hover { background: #fff; }
.hc-banner-ribbon__arrow--prev { left: 12px; }
.hc-banner-ribbon__arrow--next { right: 12px; }

.hc-banner-ribbon__dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 3;
  display: flex;
  gap: 7px;
  justify-content: center;
}

.hc-banner-ribbon__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  cursor: pointer;
  background: rgba(18,21,26,.28);
  border: 0;
  border-radius: 50%;
  transition: background .16s ease, transform .16s ease;
}

.hc-banner-ribbon__dots button.is-active {
  background: var(--ldsp-blue, #2f63d6);
  transform: scale(1.25);
}

.hc-banner-ribbon__arrow:focus-visible,
.hc-banner-ribbon__dots button:focus-visible {
  outline: 2px solid var(--ldsp-blue, #2f63d6);
  outline-offset: 2px;
}

/* Телефон: стрелки убираются — на узкой ленте они закрывают текст, а листать
   удобнее точками. */
@media (max-width: 680px) {
  .hc-banner-ribbon__arrow { display: none; }
  .hc-banner-ribbon__body { width: 68%; padding-inline: 16px; }
  .hc-banner-ribbon__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-banner-ribbon__slide { transition: none; }
}

/* css/blocks/324-hc-footer-line.css */
/* =================== hc-footer-line =================== */
/* Нижняя панель: связь слева, счётчики справа — как #footerLine у донора.
 *
 * Прибита к низу окна, поэтому телефон под рукой и на две тысячи товаров
 * вниз. На телефоне её нет: там своя нижняя навигация, две полосы друг на
 * друге закрыли бы пол-экрана.
 *
 * Строго .hc-footer-line / .hc-footer-line__*.
 */
.hc-footer-line {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* Ниже шторок и модальных окон, выше содержимого страницы. */
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--hc-line, #e3e8f1);
  box-shadow: 0 -6px 20px rgba(20, 40, 76, .06);
}

.hc-footer-line__in {
  max-width: 1600px;
  min-height: 52px;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 28px);
}

.hc-footer-line__col {
  display: flex;
  gap: clamp(14px, 2vw, 32px);
  align-items: center;
  min-width: 0;
}

.hc-footer-line__item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  color: var(--hc-ink, #1a2233);
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}

.hc-footer-line__item:hover { color: var(--ldsp-blue, #2f63d6); }
.hc-footer-line__item--muted { color: var(--hc-muted, #6b7480); }
.hc-footer-line__item--call { color: var(--ldsp-blue, #2f63d6); }

.hc-footer-line__item svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Счётчик: серый кружок, синеет когда в нём что-то есть. Пустой ноль тоже
   показываем — у донора он на месте всегда, и панель не прыгает по ширине. */
.hc-footer-line__mark {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  color: var(--hc-muted, #6b7480);
  background: var(--hc-line-soft, #eef1f6);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hc-footer-line__mark.is-filled {
  color: #fff;
  background: var(--ldsp-blue, #2f63d6);
}

/* Наверх — кружок у правого края над панелью. */
.hc-footer-line__top {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  bottom: 64px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--hc-ink, #1a2233);
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--hc-line, #e3e8f1);
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(20, 40, 76, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.hc-footer-line__top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hc-footer-line__top svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hc-footer-line__item:focus-visible,
.hc-footer-line__top:focus-visible {
  outline: 2px solid var(--ldsp-blue, #2f63d6);
  outline-offset: 2px;
}

/* Место под панель, чтобы она не накрывала конец страницы. */
body:has(.hc-footer-line) { padding-bottom: 52px; }

/* Телефон: панели нет — там своя нижняя навигация. */
@media (max-width: 900px) {
  .hc-footer-line { display: none; }
  body:has(.hc-footer-line) { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-footer-line__top { transition: none; }
}

/* css/blocks/325-hc-cat-news.css */
/* =================== hc-cat-news =================== */
/* Подписка внизу раздела — «Новости магазина» как у донора: серая полоса во
 * всю ширину, заголовок слева, поле и кнопка справа, согласие под ними.
 *
 * Строго .hc-cat-news / .hc-cat-news__*.
 */
.hc-cat-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  margin-top: 32px;
  padding: clamp(22px, 3vw, 40px) clamp(18px, 3vw, 48px);
  background: #f5f6f8;
  border-radius: 10px;
}

.hc-cat-news__title {
  margin: 0;
  color: #12151a;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.2;
  font-weight: 700;
}

.hc-cat-news__sub {
  margin: 8px 0 0;
  color: #5a6376;
  font-size: 14px;
  line-height: 1.45;
}

.hc-cat-news__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Поле не растягивается на всю колонку: на широком экране адрес почты
     получал 734 пикселя — строка ввода шире, чем всё, что в неё пишут. */
  width: 100%;
  max-width: 520px;
}

/* Поле и кнопка одной строкой: значок слева внутри поля, кнопка встык. */
.hc-cat-news__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid #e3e8f1;
  border-radius: 4px;
  overflow: hidden;
}

.hc-cat-news__ico {
  display: grid;
  place-items: center;
  padding-left: 14px;
  color: #9aa3b2;
}

.hc-cat-news__ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.hc-cat-news__input {
  min-height: 46px;
  padding: 0 12px;
  color: #12151a;
  background: none;
  border: 0;
  font-size: 14px;
  font-family: inherit;
}

.hc-cat-news__input:focus { outline: none; }
.hc-cat-news__row:focus-within { border-color: var(--ldsp-blue, #2f63d6); }

.hc-cat-news__submit {
  min-height: 46px;
  padding: 0 24px;
  color: #fff;
  cursor: pointer;
  background: var(--ldsp-blue, #2f63d6);
  border: 0;
  font-size: 14px;
  font-family: inherit;
  white-space: nowrap;
  transition: background .16s ease;
}

.hc-cat-news__submit:hover { background: var(--ldsp-blue-dark, #244fac); }

.hc-cat-news__consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #5a6376;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}

.hc-cat-news__consent input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--ldsp-blue, #2f63d6);
}

.hc-cat-news__consent a { color: #5a6376; }
.hc-cat-news__consent i { color: #c2382f; font-style: normal; }

.hc-cat-news__submit:focus-visible,
.hc-cat-news__consent input:focus-visible {
  outline: 2px solid var(--ldsp-blue, #2f63d6);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .hc-cat-news { grid-template-columns: minmax(0, 1fr); }
  .hc-cat-news__row { grid-template-columns: auto minmax(0, 1fr); }
  .hc-cat-news__submit { grid-column: 1 / -1; }
}

/* css/blocks/326-hc-cat-rails.css */
/* =================== hc-cat-rails =================== */
/* Подборки внизу раздела: «Рекомендуем» и «Самые продаваемые».
 *
 * Вкладки как у донора — подчёркнутая активная, остальные серые. Карточка
 * берётся каталожная (product_tile), поэтому здесь только раскладка ряда и
 * сами вкладки.
 *
 * Строго .hc-cat-rails / .hc-cat-rails__*.
 */
.hc-cat-rails {
  margin-top: 36px;
}

.hc-cat-rails__tabs {
  display: flex;
  gap: 26px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hc-line, #e3e8f1);
}

.hc-cat-rails__tabs button {
  position: relative;
  padding: 6px 0;
  color: #8b95a5;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .16s ease;
}

.hc-cat-rails__tabs button:hover { color: #4a535f; }
.hc-cat-rails__tabs button.is-active { color: #12151a; }

/* Подчёркивание активной вкладки — пунктиром, как у донора. */
.hc-cat-rails__tabs button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, #12151a 0 5px, transparent 5px 9px);
}

.hc-cat-rails__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hc-cat-rails__tabs button:focus-visible {
  outline: 2px solid var(--ldsp-blue, #2f63d6);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .hc-cat-rails__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hc-cat-rails__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-cat-rails__tabs { gap: 16px; justify-content: flex-start; }
  .hc-cat-rails__tabs button { font-size: 12px; }
}

/* css/blocks/327-hc-home-special.css */
/* =================== hc-home-special =================== */
/* «Специальное предложение» на главной: карточка товара в рамке, заголовок
 * со стрелками, точки под ней. Один товар на экран — блок узкий, это колонка,
 * а не полоса во всю ширину.
 *
 * Строго .hc-home-special / .hc-home-special__*.
 */
.hc-home-special {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hc-line, #e3e8f1);
  border-radius: 10px;
}

.hc-home-special__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hc-line, #e3e8f1);
}

.hc-home-special__title {
  margin: 0;
  color: var(--hc-ink, #1f2937);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.hc-home-special__nav {
  display: flex;
  gap: 6px;
}

.hc-home-special__nav button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--hc-ink-mid, #667085);
  background: #fff;
  border: 1px solid var(--hc-line, #e3e8f1);
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  transition: border-color .16s ease, color .16s ease;
}

.hc-home-special__nav button:hover {
  color: var(--hc-accent, #2f63d6);
  border-color: var(--hc-accent, #2f63d6);
}

.hc-home-special__stage {
  padding: 14px 16px 4px;
}

.hc-home-special__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 4px 16px 14px;
}

.hc-home-special__dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  cursor: pointer;
  background: #d5dced;
  border: 0;
  border-radius: 50%;
  transition: background .16s ease;
}

.hc-home-special__dots button.is-active { background: var(--hc-accent, #2f63d6); }

.hc-home-special__dots button:focus-visible,
.hc-home-special__nav button:focus-visible {
  outline: 2px solid var(--hc-accent, #2f63d6);
  outline-offset: 2px;
}

/* css/blocks/051-hc-cart-drawer.css */
/* =================== hc-cart-drawer.css =================== */
/* hc-cart-drawer - premium right-side cart drawer. Toggled by header cart
 * icon via Alpine `cartOpen`. Panel slides in from the right with backdrop
 * blur. Has head, body (cart items + upsells), and footer (totals + CTA).
 * Strictly .hc-cart-drawer / .hc-cart-drawer__*. */

/* host overlay (the dimmer behind the panel) — uses .hc-drawer wrapper from
 * Alpine; we style the variant .hc-cart-drawer scoped to its own class.
 * The wrapper opens on `body[data-body] [x-show=cartOpen]`; CSS just handles
 * the visual layers. */
.hc-cart-drawer {
  position: relative;
}

.hc-cart-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--hc-z-drawer, 80);
  display: flex;
  flex-direction: column;
  width: min(440px, 92vw);
  background: linear-gradient(180deg, var(--hc-paper, #ffffff) 0%, rgba(252, 248, 240, 0.96) 100%);
  border-left: 0.5px solid rgba(141, 109, 71, 0.22);
  box-shadow: -32px 0 80px -20px rgba(40, 30, 15, 0.32);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hc-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 0.5px solid rgba(141, 109, 71, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--hc-gold-rgb), 0.18), transparent 50%),
    rgba(255, 252, 247, 0.86);
}
.hc-cart-drawer__title {
  margin: 0;
  font-family: var(--hc-serif, "Playfair Display", Georgia, serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--hc-ink, #1a1714);
}
.hc-cart-drawer__count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  background: var(--hc-accent-dark, var(--hc-accent-dark));
  color: var(--hc-paper, #ffffff);
  border-radius: var(--hc-r-pill);
  font-family: var(--hc-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hc-cart-drawer__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.5px solid rgba(141, 109, 71, 0.18);
  border-radius: 10px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.7));
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hc-cart-drawer__close:hover {
  background: var(--hc-ink, #1a1714);
  color: var(--hc-paper, #ffffff);
  border-color: var(--hc-ink);
  transform: rotate(90deg);
}

.hc-cart-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 22px;
  display: grid;
  gap: 14px;
}
.hc-cart-drawer__loading {
  display: grid;
  place-items: center;
  padding: 48px 0;
}

/* one cart line */
.hc-cart-drawer__line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 14px;
  background: rgba(255, 252, 247, 0.86);
  border: 0.5px solid rgba(141, 109, 71, 0.14);
  border-radius: 14px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.hc-cart-drawer__line:hover {
  border-color: var(--hc-gold-border, rgba(var(--hc-gold-rgb), 0.4));
  box-shadow: 0 8px 18px -8px rgba(184, 154, 111, 0.18);
}
.hc-cart-drawer__thumb {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f7f3ea 0%, #efe8da 100%);
  border-radius: 10px;
  overflow: hidden;
}
.hc-cart-drawer__thumb img,
.hc-cart-drawer__thumb svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.hc-cart-drawer__line-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.hc-cart-drawer__line-name {
  font-family: var(--hc-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hc-cart-drawer__line-series {
  font-family: var(--hc-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
}
.hc-cart-drawer__line-qty {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  border: 0.5px solid rgba(141, 109, 71, 0.22);
  border-radius: var(--hc-r-pill);
  overflow: hidden;
}
.hc-cart-drawer__line-qty button {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  font-size: 14px;
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
  transition: background 0.16s ease;
}
.hc-cart-drawer__line-qty button:hover {
  background: rgba(var(--hc-gold-rgb), 0.22);
}
.hc-cart-drawer__line-qty input {
  width: 32px;
  height: 28px;
  text-align: center;
  background: transparent;
  border: 0;
  font: inherit;
  font-family: var(--hc-mono);
  font-size: 12px;
  font-weight: 600;
}
.hc-cart-drawer__line-price {
  font-family: var(--hc-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--hc-ink, #1a1714);
  white-space: nowrap;
}
.hc-cart-drawer__line-remove {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  background: transparent;
  border: 0;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.45));
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.18s ease, color 0.18s ease;
}
.hc-cart-drawer__line-remove:hover {
  background: rgba(201, 67, 58, 0.12);
  color: var(--hc-danger, #c9433a);
}

/* empty state */
.hc-cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 24px;
  text-align: center;
}
.hc-cart-drawer__empty-art {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f7f3ea, #efe8da);
  border-radius: 50%;
}
.hc-cart-drawer__empty strong {
  font-family: var(--hc-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--hc-ink, #1a1714);
}
.hc-cart-drawer__empty span {
  max-width: 32ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}

/* upsells strip */
.hc-cart-drawer__upsell {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 0.5px dashed rgba(141, 109, 71, 0.22);
}
.hc-cart-drawer__upsell h4 {
  margin: 0 0 10px;
  font-family: var(--hc-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-accent-dark, #7a6548);
}

/* footer with totals + CTA */
.hc-cart-drawer__foot {
  padding: 18px 22px 22px;
  background: rgba(255, 252, 247, 0.94);
  border-top: 0.5px solid rgba(141, 109, 71, 0.18);
  display: grid;
  gap: 12px;
}
.hc-cart-drawer__sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.hc-cart-drawer__sum-label {
  font-family: var(--hc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
}
.hc-cart-drawer__sum-value {
  font-family: var(--hc-serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--hc-ink, #1a1714);
}
.hc-cart-drawer__cta {
  width: 100%;
}
.hc-cart-drawer__view {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--hc-ink-soft, rgba(26, 23, 20, 0.62));
}
.hc-cart-drawer__view a {
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 480px) {
  .hc-cart-drawer__panel {
    width: 100vw;
    border-left: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   Drawer line items + cross-sell + footer. The template was rewritten
   with __item/__info/__row/__xsell* / hc-cart-upsells__* class names
   that had NO CSS, so the drawer rendered as a raw text list. Styles
   below match the current markup; built on design tokens.
   ────────────────────────────────────────────────────────────── */
.hc-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hc-sp-3, 12px);
}

.hc-cart-drawer__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--hc-sp-3, 12px);
  padding-bottom: var(--hc-sp-3, 12px);
  border-bottom: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.hc-cart-drawer__thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hc-bg-warm, var(--hc-bg-warm));
  flex-shrink: 0;
}

.hc-cart-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hc-cart-drawer__info { min-width: 0; display: grid; gap: var(--hc-sp-1, 4px); align-content: start; }

.hc-cart-drawer__name {
  font-size: var(--hc-fs-md, 14px);
  line-height: var(--hc-lh-snug, 1.25);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
}

.hc-cart-drawer__name:hover { color: var(--hc-accent-dark, var(--hc-accent-dark)); }

.hc-cart-drawer__sub { margin: 0; font-size: var(--hc-fs-sm, 13px); color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55)); }

.hc-cart-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-sp-2, 8px);
  margin-top: var(--hc-sp-1, 4px);
}

.hc-cart-drawer__lt { font-size: var(--hc-fs-lg, 16px); color: var(--hc-ink, #1a1714); white-space: nowrap; }

.hc-cart-drawer__remove { margin: 0; }
.hc-cart-drawer__remove button {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--hc-ink-muted, rgba(26, 23, 20, 0.4));
  line-height: 0;
  transition: color var(--hc-dur-fast, 0.15s) var(--hc-ease, ease);
}
.hc-cart-drawer__remove button:hover { color: var(--hc-danger, #c0392b); }

/* Footer rows */
.hc-cart-drawer__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hc-sp-2, 8px);
  padding: var(--hc-sp-2, 8px) 0;
}

.hc-cart-drawer__foot-row--total {
  margin-top: var(--hc-sp-2, 8px);
  padding-top: var(--hc-sp-3, 12px);
  border-top: 1px solid var(--hc-line, rgba(26, 23, 20, 0.14));
  font-size: var(--hc-fs-xl, 18px);
}
.hc-cart-drawer__foot-row--total strong { font-size: var(--hc-fs-2xl, 22px); color: var(--hc-ink, #1a1714); }

.hc-cart-drawer__installment {
  font-size: var(--hc-fs-sm, 13px);
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  padding: var(--hc-sp-2, 8px) 0;
}

.hc-cart-drawer__cart-link {
  display: inline-block;
  margin-top: var(--hc-sp-2, 8px);
  font-size: var(--hc-fs-md, 14px);
  color: var(--hc-accent-dark, var(--hc-accent-dark));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Cross-sell inside drawer */
.hc-cart-drawer__xsell {
  margin-top: var(--hc-sp-5, 24px);
  padding-top: var(--hc-sp-4, 16px);
  border-top: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
}

.hc-cart-drawer__xsell-title,
.hc-cart-upsells__title {
  font: 600 var(--hc-fs-xs, 12px) / 1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  margin-bottom: var(--hc-sp-3, 12px);
}

.hc-cart-drawer__xsell-grid,
.hc-cart-upsells__grid {
  display: grid;
  gap: var(--hc-sp-2, 8px);
}

.hc-cart-drawer__xsell-item,
.hc-cart-upsells__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--hc-sp-2, 8px);
  padding: var(--hc-sp-2, 8px);
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.08));
  border-radius: 12px;
}

.hc-cart-drawer__xsell-thumb,
.hc-cart-upsells__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hc-bg-warm, var(--hc-bg-warm));
}
.hc-cart-drawer__xsell-thumb img,
.hc-cart-upsells__thumb img { width: 100%; height: 100%; object-fit: cover; }

.hc-cart-drawer__xsell-info,
.hc-cart-upsells__info { min-width: 0; display: grid; gap: 2px; }

.hc-cart-drawer__xsell-name,
.hc-cart-upsells__name {
  font-size: var(--hc-fs-sm, 13px);
  line-height: var(--hc-lh-snug, 1.25);
  color: var(--hc-ink, #1a1714);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-cart-drawer__xsell-price,
.hc-cart-upsells__price { font-size: var(--hc-fs-sm, 13px); font-weight: 600; color: var(--hc-ink, #1a1714); }

.hc-cart-drawer__xsell-add,
.hc-cart-upsells__add { margin: 0; }
.hc-cart-drawer__xsell-add button,
.hc-cart-upsells__item button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hc-line, rgba(26, 23, 20, 0.14));
  background: var(--hc-bg, #fff);
  color: var(--hc-ink, #1a1714);
  font-size: var(--hc-fs-lg, 16px);
  line-height: 1;
  cursor: pointer;
  transition: background var(--hc-dur-fast, 0.15s) var(--hc-ease, ease),
              color var(--hc-dur-fast, 0.15s) var(--hc-ease, ease);
}
.hc-cart-drawer__xsell-add button:hover,
.hc-cart-upsells__item button:hover {
  background: var(--hc-ink, #1a1714);
  color: #fff;
}

.hc-cart-upsells { margin-bottom: var(--hc-sp-4, 16px); }

.hc-installment-modal {
  max-width: 520px;
}

.hc-installment-modal__title {
  font-family: var(--serif);
  font-size: 18px;
}

.hc-installment-modal__results {
  max-height: 60vh;
  padding: var(--sp-4);
}

.hc-installment-quote {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hc-installment-quote__head,
.hc-installment-schedule__row {
  display: flex;
  justify-content: space-between;
}

.hc-installment-quote__head {
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.hc-installment-quote__lead {
  margin-bottom: var(--sp-2);
  font-size: 14px;
}

.hc-installment-schedule summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent-dark);
}

.hc-installment-schedule__row {
  padding: 3px 0;
  font-size: 12px;
  color: var(--ink-3);
}

.hc-installment-quote__choose {
  width: 100%;
  margin-top: var(--sp-3);
}

/* ── Qty stepper + 0%-badge (drawer line) — were unstyled ─────────────────── */
.qty-form {
  display: inline-flex;
  align-items: center;
  border: 0.5px solid var(--hc-line-2, rgba(180, 151, 115, 0.28));
  border-radius: 999px;
  overflow: hidden;
  background: var(--hc-paper, #fff);
}
.qty-form button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--hc-ink, #1a1714);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.qty-form button:hover:not(:disabled) {
  background: rgba(var(--hc-gold-rgb), 0.16);
}
.qty-form button:disabled {
  opacity: 0.4;
  cursor: default;
}
.qty-form__v {
  min-width: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.badge-0pct {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(61, 107, 79, 0.12);
  color: #2f6f4c;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* css/blocks/088-hc-empty.css */
/* =================== hc-empty.css =================== */
/* hc-empty — basic empty-state component (cart, search, blog index).
 * Single source of truth for empty states. */

.hc-empty {
padding: 64px 32px;
  text-align: center;
  max-width: 420px;
  margin: 24px auto;
  background: var(--hc-bg-warm, #f5efde);
  border: 0.5px dashed var(--hc-line-2, rgba(180, 151, 115, 0.3));
  border-radius: 16px;
  display: grid;
  place-items: center;
  min-height: 200px;
}
.hc-empty__ico {
width: 72px;
  height: 72px;
  margin: 0 auto var(--hc-sp-3, 14px);
  border-radius: 50%;
  background: rgba(var(--hc-accent-rgb), 0.10);
  color: var(--hc-accent, var(--hc-accent));
  display: inline-grid;
  align-items: center;
  justify-content: center;
  place-items: center;
}
.hc-empty__title {
font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--hc-ink, #1a1714);
  margin: 0 0 8px;
  white-space: normal;
}
.hc-empty__desc {
color: var(--hc-muted, rgba(26, 23, 20, 0.58));
  max-width: 420px;
  margin: 0 0 var(--hc-sp-4, 20px);
  font-size: 14px;
  line-height: 1.55;
}
.hc-empty__actions {
display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hc-empty__text, .hc-empty p {
color: var(--hc-ink-soft, rgba(26, 23, 20, 0.6));
  font-size: 14px;
  margin: 0;
  max-width: 48ch;
  line-height: 1.5;
}

.blog-index__empty .hc-empty__title {
font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  white-space: normal;
  word-break: normal;
  max-width: 60ch;
}

.hc-empty--cart {
  position: relative;
  max-width: none;
  min-height: clamp(340px, 34vw, 460px);
  margin: 14px 0 clamp(34px, 4vw, 58px);
  padding: clamp(28px, 4vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
  text-align: left;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--hc-gold-rgb), 0.22), transparent 28%),
    linear-gradient(135deg, #fffdfa 0%, #f4ede1 58%, #eee3d1 100%);
  border-style: solid;
  border-color: rgba(141, 109, 71, 0.18);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(41, 30, 18, 0.08);
}
.hc-empty--cart::after {
  content: "";
  position: absolute;
  right: clamp(28px, 6vw, 96px);
  top: 50%;
  width: clamp(210px, 20vw, 320px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(141, 109, 71, 0.16);
  border-radius: 50%;
  opacity: 0.45;
  pointer-events: none;
}
.hc-cart-empty__intro {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
}
.hc-empty--cart .hc-empty__ico {
  margin: 0 0 18px;
  width: 68px;
  height: 68px;
  background: rgba(26, 23, 20, 0.08);
}
.hc-empty--cart .hc-empty__title {
  font-size: clamp(36px, 4.4vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  margin-bottom: 16px;
}
.hc-empty--cart .hc-empty__desc {
  max-width: 58ch;
  margin-bottom: 24px;
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(26, 23, 20, 0.66);
}
.hc-empty--cart .hc-empty__actions {
  justify-content: flex-start;
}
.hc-empty--cart .premium-empty__steps {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(41, 30, 18, 0.08);
}
@media (max-width: 900px) {
  .hc-empty--cart {
    grid-template-columns: 1fr;
    padding: 28px 20px;
    text-align: left;
  }
  .hc-empty--cart::after {
    right: -90px;
    top: 120px;
  }
  .hc-empty--cart .hc-empty__title {
    font-size: clamp(32px, 10vw, 46px);
  }
}

/* css/blocks/100-hc-img-broken.css */
/* =================== hc-img-broken.css =================== */
.post-card__media img.hc-img-broken, .news-item__cover.hc-img-broken, .article-related-card__img.hc-img-broken {display: none}
@media(max-width:920px) {
  img.hc-img-broken {display: none}
  .pcard-a__media img.hc-img-broken, .pcard-b__media img.hc-img-broken, .pcard-c__media img.hc-img-broken, .pcard-d__media img.hc-img-broken {display: none}
  .hc-cart-drawer__thumb img.hc-img-broken, .related-card__img.hc-img-broken {display: none}
}

.hc-img-broken { display: none; }

/* css/blocks/102-hc-isearch.css */
/* =================== hc-isearch.css =================== */
.hc-isearch {position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; animation: hc-isearch-fade 0.18s ease-out}
.hc-isearch[hidden] {display: none}
.hc-isearch__backdrop {position: absolute; inset: 0; background: rgba(18, 14, 11, 0.55); backdrop-filter: blur(6px) saturate(140%); cursor: pointer}
.hc-isearch__panel {position: relative; width: 100%; max-width: 720px; max-height: 78vh; display: flex; flex-direction: column; background: var(--hc-bg, var(--hc-bg)); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 22px; overflow: hidden; box-shadow: 0 28px 90px rgba(18, 14, 11, 0.28); animation: hc-isearch-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1)}
.hc-isearch__form {display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(26, 23, 20, 0.08); background: var(--hc-paper, #ffffff)}
.hc-isearch__ico {display: grid; place-items: center; color: var(--hc-accent, var(--hc-accent)); flex: none}
.hc-isearch__input {flex: 1; border: none; outline: none; background: transparent; font-family: var(--hc-sans, "Outfit", -apple-system, sans-serif); font-size: 17px; color: var(--hc-ink, #1a1714); min-width: 0}
.hc-isearch__input::placeholder {color: var(--hc-muted, rgba(26, 23, 20, 0.4))}
.hc-isearch__kbd {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.06em; padding: 4px 7px; background: rgba(26, 23, 20, 0.06); border: 1px solid rgba(26, 23, 20, 0.08); border-radius: 4px; color: var(--hc-muted, rgba(26, 23, 20, 0.5))}
.hc-isearch__close {width: 28px; height: 28px; border-radius: 50%; background: rgba(26, 23, 20, 0.04); border: none; color: var(--hc-muted, rgba(26, 23, 20, 0.55)); font-size: 14px; cursor: pointer; flex: none; transition: background 0.2s ease}
.hc-isearch__close:hover {background: rgba(26, 23, 20, 0.1)}
.hc-isearch__results {padding: 14px 18px 20px; overflow-y: auto; min-height: 120px; max-height: calc(78vh - 76px)}

.hc-isearch:has(input.htmx-request) #hc-isearch-results {
  opacity: 0.35;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.hc-isearch__input.htmx-request {
  background-image: linear-gradient(90deg, transparent 0%, rgba(141, 109, 71, 0.14) 50%, transparent 100%);
  background-size: 220px 100%;
  background-repeat: no-repeat;
  animation: hc-isearch-shimmer 1.1s linear infinite;
}