/* 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;
  /* 11px, not 10: this token carries every eyebrow and label on the site, and
     an audit counted 7 of them on one page below the 11.5px legibility floor.
     They are uppercase, mono and widely letterspaced, so one pixel is enough. */
  --hc-fs-xxs: 11px;
  --hc-fs-xs: 11px;
  --hc-fs-sm: 12px;
  --hc-fs-md: 14px;
  --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;
  --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. */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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;
}

/* `svg { fill: currentColor }` is a CSS declaration and `fill="none"` on the
   markup is a presentation attribute, so the rule beat the attribute on all 120
   line-art icons in the site: outlines were flooded with the current colour.
   That is why the password reveal read as a solid green ellipse, the gallery
   zoom as a dark dot and the empty-cart illustration as a green blob. Give the
   icon back its own decision — only fill what does not ask for something. */
svg:not([fill]) { 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;
}

/* `[hidden]` is one attribute selector, so any component rule carrying a class
   outranks it and the element stays on screen. `.hc-hdr__badge{display:inline-
   flex}` did exactly that: the cart icon wore an empty green "0" on every page
   of the site even though the markup ships the badge hidden. The same trap was
   patched locally in the Hettich configurator before. Settle it once, for the
   whole document — the attribute means hidden. */
[hidden] {
  display: none !important;
}

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

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
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"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
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);
}

/* Honeypots are used by public lead, Q&A, review and one-click forms.  Keep
   them in the DOM for bot detection, but outside every visual/a11y layout on
   every page — not only where the account CSS bundle happens to be loaded. */
.auth-hp,
.hc-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.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;
}

mark.hc-mark {
  padding: 0 2px;
  border-radius: 3px;
  background: rgba(46, 125, 70, 0.16);
  color: inherit;
}

[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);
}

[hx-trigger="load"]:empty,
[hx-get]:empty {
  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;
}

[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;
  }
}

/* Text that exists for anyone not looking at the screen. Used where a control
   or a column has no visible label but still has to be named — a bare
   aria-label on an empty <th>, for instance, is not a column header. */
.hc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 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;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
}

/* 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));
  z-index: 70;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

body.cookie-banner-open {
  padding-bottom: calc(var(--cookie-banner-h, 96px) + 12px);
}

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);
}

@media (min-width: 721px) {
  body.cookie-banner-open {
    padding-bottom: 0;
  }

  body.cookie-banner-open footer {
    padding-bottom: calc(var(--cookie-banner-h, 108px) + 12px);
  }
}

@media (max-width: 720px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    justify-content: center;
  }

  body:has(.hc-mobile-tabbar) .cookie-banner {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }

  body.cookie-banner-open {
    padding-bottom: 0;
  }

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

  .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: 1fr 1fr;
    gap: 6px;
  }

  .cookie-banner .btn {
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
  }

  .cookie-banner #cookieReject {
    grid-column: 1 / -1;
  }
}

/* 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: 760px;
  margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) 0;
}
.editorial > .bc a,
.editorial > nav.bc 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 > .bc a:hover { border-bottom-color: var(--hc-accent-dark, var(--hc-accent-dark)); }

.editorial h1 {
  font-family: '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: '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: '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 > nav.bc,
.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;
  gap: 7px;
  padding: 8px 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/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}
}

/* page_hero breadcrumb (.bc) — the separator had no spacing, gluing crumbs
   ("Главная →Блог"). Flex + gap spaces them uniformly, matching .hc-crumbs. */
.bc {display: flex; align-items: center; flex-wrap: wrap; gap: var(--hc-sp-1); font-size: var(--hc-fs-sm); color: var(--hc-ink-mid)}
.bc a {color: var(--hc-ink-soft)}
.bc a:hover {color: var(--hc-accent)}
.bc__sep {color: var(--hc-ink-muted)}

.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;
}

/* On a phone the PDP trail ("Главная › Каталог › Мебельная фурнитура › Hettich
   › Петли для дверей") ran to two lines and, with the promo bar, the header,
   the region chip and the delivery chips above it, pushed the product name to
   the bottom of a 664px screen. Keep the one crumb that is actually useful
   there — the section the visitor came from — as a back link. The full trail
   stays in the markup for the BreadcrumbList JSON-LD and for desktop.

   The trail always ends `… , node, sep, here`, so the immediate parent is the
   third child from the end; when a product has no category crumbs at all that
   position holds the "Каталог" link, which is the right fallback anyway. */
@media (max-width: 640px) {
  .page-pdp .hc-crumbs > * {
    display: none;
  }
  .page-pdp .hc-crumbs > :nth-last-child(3) {
    display: inline-flex;
    align-items: center;
  }
  .page-pdp .hc-crumbs__toggle,
  .page-pdp .hc-crumbs__menu {
    display: none;
  }
  .page-pdp .hc-crumbs > :nth-last-child(3)::before {
    content: "‹\00a0";
    color: var(--hc-ink-muted);
  }
}

/* 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 =================== */
.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)}
.hc-sec-h__title > .hc-eyebrow {display: block; margin-bottom: var(--hc-sp-1)}
@media(max-width:920px) {
  .hc-ftr__b2b .hc-eyebrow {color: rgba(200, 175, 130, 0.85); font-size: 11px; letter-spacing: 2.5px}
}

.hc-ftr__b2b .hc-eyebrow {
  color: rgba(255, 255, 255, 0.45);
}


.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, var(--hc-gold));
}

.premium-surface--highlight .hc-eyebrow {
color: var(--hc-gold-1, var(--hc-gold, 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);
}
.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); }
}

/* Below 640px the bottom tab bar appears, and it already carries Favourites and
   Compare. Keeping them in the header too put the same two destinations on
   screen twice and left five icons fighting for 390px beside the logo. The
   header keeps what the tab bar does not have: search, cart, account. */
@media (max-width: 640px) {
  .hc-hdr__ico--in-tabbar { display: none; }
}
/* The pages that suppress the tab bar (checkout, compare, account, tracking,
   thanks, error) still need those icons in the header. */
@media (max-width: 640px) {
  .page-checkout .hc-hdr__ico--in-tabbar,
  .page-compare .hc-hdr__ico--in-tabbar,
  .page-account .hc-hdr__ico--in-tabbar,
  .page-tracking .hc-hdr__ico--in-tabbar,
  .page-thanks .hc-hdr__ico--in-tabbar,
  .page-error .hc-hdr__ico--in-tabbar { display: inline-flex; }
}

/* ≤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); }
  .hc-hdr__ico { width: 34px; height: 34px; }
}

.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: 11px; /* was 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: 14px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  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: 24px;
}

.hc-ecosystem__footer-head h2 {
  margin: 5px 0 0;
  color: var(--hc-paper, #fff);
  font-family: var(--hc-serif, Georgia, serif);
  font-size: clamp(21px, 2vw, 28px);
  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.45;
}

/* Six tiles at 88px minimum with 12px of padding took a whole screen to list
   six links. Nothing in a tile needs that room: a 32px mark and two short
   lines. Compact enough that the band reads as a footer note rather than a
   section of its own. */
.hc-ecosystem--footer .hc-ecosystem__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hc-ecosystem--footer .hc-ecosystem__item {
  min-height: 0;
  padding: 8px 10px;
  gap: 9px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  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));
  }
  .hc-ecosystem--mobile h3 {
    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: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .hc-ecosystem--footer .hc-ecosystem__item {
    min-height: 0;
  }
}

@media (max-width: 360px) {
  .hc-ecosystem--footer .hc-ecosystem__grid {
    grid-template-columns: 1fr;
  }
}

.hc-ecosystem--footer .hc-ecosystem__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 14px;
}

/* 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(30px, 3vw, 44px) 0 clamp(20px, 1.5vw, 28px);
  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: 10px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 0.5px solid rgba(var(--hc-gold-rgb), 0.18);
}
.hc-ftr__service {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  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 {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  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 {
  display: none;
  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: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__service small {
  display: block;
  font-size: 11.5px;
  line-height: 1.3;
  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(22px, 2vw, 32px);
  align-items: start;
}

/* MANIFESTO column */
.hc-ftr__manifesto {
  display: grid;
  gap: 10px;
}
.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: 25px;
  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: 11px; /* was 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: 4px 0 0;
  display: grid;
  gap: 10px;
}
.hc-ftr__contact {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 10px;
}
.hc-ftr__contact-ico {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  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: 15px;
  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: 12px;
  padding-top: 12px;
  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: 26px;
  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: 8px;
  padding: 18px 20px;
  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: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hc-paper, #ffffff);
}
.hc-ftr__b2b-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  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: 7px;
  align-content: start;
}
.hc-ftr__nav-col h6,
.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: 13px;
  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: 7px;
}

/* Legal entity strip */
.hc-ftr__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 2vw, 28px);
  padding: 12px 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(16px, 1.5vw, 22px);
  padding-top: 16px;
  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: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .hc-ftr__top {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .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: 12px 34px 12px 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: 7px 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: 16px 18px;
  }
  .hc-ftr__legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 18px;
  }
  .hc-ftr__legal span:last-child {
    grid-column: 1 / -1;
  }
  .hc-ftr__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .hc-ftr__servicebar {
    grid-template-columns: 1fr;
  }
}

/* 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 {width: 100%; padding: 11px 14px; font-family: inherit; font-size: var(--hc-fs-md); line-height: 1.4; color: var(--hc-ink); background: var(--hc-paper); 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)}
.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)}
.hc-input {border: 1px solid var(--hc-line); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.35)}

/* `input[type="number"]` in foundation-forms is an attribute selector, so it
   outranks the plain `.hc-input` class and took over padding and background —
   while a text field with no `type` attribute at all matched nothing there and
   kept the component's own. In one row of the delivery calculator that put
   Город and Индекс at 44px on tinted paper beside Вес and Сумма at 50px on
   solid white. The component governs the component: same specificity, later
   file, so this wins back its own field. */
input.hc-input,
textarea.hc-input,
select.hc-input {
  padding: 11px 14px;
  font-size: var(--hc-fs-md);
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hc-line);
}
input.hc-input--sm { padding: 6px 10px; font-size: var(--hc-fs-sm); }

/* The stepper arrows appear on two of the four fields and nowhere else on the
   site, which is the other half of why the row looked mismatched. */
input.hc-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input.hc-input[type="number"]::-webkit-outer-spin-button,
input.hc-input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}


/* ---- 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__eyebrow {
font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hc-gold, var(--hc-gold)); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; position: relative
}
.hc-livechat__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. */
@media (max-width: 640px) {
  .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;
  transition: opacity 0.2s ease;
}
.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__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hc-mobile-menu__close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(26, 23, 20, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--hc-ink, #1a1714);
  cursor: pointer;
}
.hc-mobile-menu__close:focus-visible {
  outline: 3px solid rgba(var(--hc-gold-rgb), 0.28);
  outline-offset: 2px;
}
.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;
}
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) {
  .page-checkout .hc-mobile-tabbar,
  .page-compare .hc-mobile-tabbar,
  .page-account .hc-mobile-tabbar,
  .page-tracking .hc-mobile-tabbar,
  .page-thanks .hc-mobile-tabbar,
  .page-error .hc-mobile-tabbar {
    display: none;
  }

  .hc-mobile-tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    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);
  }
}
.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: visible;
  white-space: normal;
  text-align: center;
  line-height: 1.05;
}
@media (max-width: 400px) {
  .hc-mobile-tabbar__item { font-size: 9px; letter-spacing: 0; }
}
.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;
  }
}

/* The bar floats over the page, so at the very bottom of the document it sits
   permanently across the last rows of the footer — legal links and the phone
   number were unreachable there. Reserve its height (72px + the 12px it is
   inset by) at the end of the page. */
body:not(.page-checkout):not(.page-compare):not(.page-account):not(.page-tracking):not(.page-thanks):not(.page-error) .hc-ftr {
  padding-bottom: clamp(20px, 1.5vw, 28px);
}

@media (max-width: 640px) {
  body:not(.page-checkout):not(.page-compare):not(.page-account):not(.page-tracking):not(.page-thanks):not(.page-error) .hc-ftr {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* 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; transition: opacity var(--hc-dur-base)
}
.hc-modal.is-open {
opacity: 1; pointer-events: auto
}
.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}

.hc-pag-info { margin-left: 12px; color: var(--hc-ink-soft, #6f6b64); font-size: 12.5px; }
.hc-loadmore {
  display: block;
  margin: 14px auto 4px;
  padding: 11px 26px;
  border: 1.5px solid var(--hc-line-2, #d9d5cf);
  border-radius: 999px;
  background: var(--hc-paper, #fff);
  color: var(--hc-ink, #1d1d1b);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: border-color .15s, transform .15s;
}
.hc-loadmore:hover { border-color: var(--hc-accent, #2e7d46); transform: translateY(-1px); }
.hc-loadmore[disabled] { cursor: wait; opacity: .5; }

/* 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 =================== */
/* One page container for the whole site.
 *
 * There used to be three. `.hc-wrap` was 1280px, catalog and PDP widened it to
 * min(1480px, 100vw - 48px), and favourites/delivery/blog took a third value of
 * 100vw - 44px. The header sits inside the wrap, so the logo landed at x=105 on
 * the home page, x=69 on the catalog and x=48 on the blog: navigating between
 * sections made the whole chrome jump sideways. Catalog and PDP carry the
 * densest grids, so the shared value is the wide one — the pages that change
 * are the simple content ones, and they only gain room. */
.hc-wrap {
  width: 100%;
  max-width: min(1440px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 0 var(--hc-sp-5);
}
.page-hero .hc-wrap {position: relative; z-index: 2}
/* A shared cart is a single document, not a listing: it keeps a reading width. */
.page-shared-cart .hc-wrap {max-width: 920px}

@media (max-width: 640px) {
  .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/214-t-eyebrow.css */
/* =================== t-eyebrow.css =================== */
.lead-block__body .t-eyebrow {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}
.t-eyebrow {display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(26, 23, 20, 0.55); margin-bottom: 8px}

/* 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, .premium-surface .t-eyebrow {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: '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: '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:
    radial-gradient(circle at 74% 18%, rgba(46, 128, 84, .26), transparent 32%),
    rgba(9, 7, 6, .62);
  backdrop-filter: blur(8px);
}

.mkt-popup__panel {
  position: relative;
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(250, 247, 240, .98)),
    #fff;
  border: 1px solid rgba(111, 91, 68, .18);
  border-radius: 28px;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .34), 0 1px 0 rgba(255, 255, 255, .7) inset;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  isolation: isolate;
}

.mkt-popup__media {
  position: relative;
  min-height: 360px;
  background:
    linear-gradient(145deg, rgba(32, 82, 54, .22), rgba(132, 96, 57, .16)),
    #f2eee8;
  overflow: hidden;
}

.mkt-popup__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(0deg, rgba(16, 13, 10, .44), transparent);
  pointer-events: none;
}

.mkt-popup__img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transform: scale(1.02);
}

.mkt-popup__orb {
  position: absolute;
  inset: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .9), transparent 22%),
    radial-gradient(circle at 58% 60%, rgba(34, 132, 78, .62), rgba(34, 132, 78, .08) 62%, transparent 64%);
  filter: drop-shadow(0 24px 38px rgba(36, 88, 58, .18));
}

.mkt-popup__body {
  padding: clamp(24px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mkt-popup__eyebrow {
  margin: 0 0 14px;
  color: #2a814d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mkt-popup__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: .98;
  letter-spacing: -.04em;
}

.mkt-popup__content {
  margin: 0 0 22px;
  color: rgba(26, 23, 20, .72);
  font-size: 17px;
  line-height: 1.55;
}

.mkt-popup__content p { margin: 0 0 10px; }
.mkt-popup__content p:last-child { margin-bottom: 0; }
.mkt-popup__cta, .mkt-popup__form .hc-btn { width: 100%; }
.mkt-popup__cta {
  min-height: 54px;
  border-radius: 999px;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(18, 16, 12, .18);
}
.mkt-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
  z-index: 2;
  cursor: pointer;
}

@media (max-width: 760px) {
  .mkt-popup {
    align-items: end;
    padding: 8px;
  }

  .mkt-popup__panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    grid-template-columns: 1fr;
    border-radius: 24px;
  }
  .mkt-popup__media { min-height: 190px; }
  .mkt-popup__body { padding: 22px; }
  .mkt-popup__title { font-size: 30px; }
  .mkt-popup__content { font-size: 15px; }
}

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

@media (max-width: 640px) {
  .toast-stack {
    left: 12px;
    right: 12px;
    top: calc(var(--hc-hdr-h, 68px) + 50px);
    width: auto;
  }
}

.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/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; } }

/* 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/308-decor-match.css */
.decor-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:20px;padding:24px 28px;border:1px solid rgba(var(--hc-gold-rgb),.2);border-radius:22px;background:linear-gradient(120deg,rgba(var(--hc-gold-rgb),.08),rgba(255,255,255,.72))}
.decor-entry h2{margin:5px 0 7px;font-size:clamp(24px,2.4vw,34px)}.decor-entry p{margin:0;max-width:62ch;color:var(--hc-ink-mid)}
.decor-entry__form{display:grid;gap:7px}.decor-entry__form>label,.decor-match__search span{font:600 10px/1 var(--hc-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hc-accent)}
.decor-entry__control{display:grid;grid-template-columns:1fr auto;gap:8px}.decor-entry input,.decor-match input,.pdp-sheet-calc input,.pdp-sheet-calc select{min-width:0;border:1px solid var(--hc-line);border-radius:12px;background:#fff;padding:12px 14px;font:inherit}.decor-entry small{color:var(--hc-ink-muted)}
.decor-match{padding-top:clamp(36px,5vw,72px);padding-bottom:72px}.decor-match__hero{padding:clamp(24px,4vw,48px);border-radius:26px;background:radial-gradient(circle at 90% 10%,rgba(var(--hc-gold-rgb),.18),transparent 35%),var(--hc-paper);border:1px solid var(--hc-line)}.decor-match__hero h1{margin:8px 0}.decor-match__hero p{max-width:70ch;color:var(--hc-ink-mid)}
.decor-match__search{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:24px}.decor-match__search label{display:grid;gap:8px}.decor-match__search .hc-btn{min-height:46px;padding:0 22px;border:1px solid #1d1d1b;border-radius:999px;background:#1d1d1b;color:#fff;font-weight:700;white-space:nowrap;box-shadow:0 8px 20px rgba(20,20,18,.12)}.decor-match__search .hc-btn:hover{border-color:var(--hc-accent);background:var(--hc-accent)}.decor-match__summary{display:flex;align-items:baseline;gap:12px;margin:30px 0 10px}.decor-match__summary strong{font:600 30px/1 var(--hc-serif)}.decor-match__summary span{color:var(--hc-ink-muted)}
.decor-match__group{margin-top:28px}.decor-match__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.decor-match-card{min-width:0;overflow:hidden;border:1px solid var(--hc-line);border-radius:18px;background:var(--hc-paper)}.decor-match-card__media{display:block;aspect-ratio:4/3;background:#f3f0ea}.decor-match-card__media img{width:100%;height:100%;object-fit:contain;padding:8px}.decor-match-card__body{display:grid;gap:8px;padding:14px}.decor-match-card__body>span{font:500 10px/1.3 var(--hc-mono);color:var(--hc-ink-muted)}.decor-match-card h3{margin:0;font-size:16px}.decor-match-card h3 a{text-decoration:none;color:inherit}.decor-match-card__foot{display:flex;justify-content:space-between;gap:8px;align-items:end}.decor-match-card__foot small{color:var(--hc-accent)}.decor-match__empty{margin-top:28px;padding:32px;border:1px dashed var(--hc-line);border-radius:20px;text-align:center}
.pdp-sheet-price{display:block;margin-top:4px;font-size:12px;color:var(--hc-ink-muted)}.pdp-sheet-calc{margin:0;border-top:1px solid rgba(var(--hc-gold-rgb),.16);border-bottom:1px solid rgba(var(--hc-gold-rgb),.16);background:transparent}.pdp-sheet-calc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;cursor:pointer;list-style:none;color:var(--hc-ink)}.pdp-sheet-calc summary::-webkit-details-marker{display:none}.pdp-sheet-calc summary span:first-child{display:flex;align-items:baseline;gap:8px}.pdp-sheet-calc summary b{font-size:13px}.pdp-sheet-calc summary small{font-size:11px;color:var(--hc-ink-muted)}.pdp-sheet-calc__chevron{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}.pdp-sheet-calc[open] .pdp-sheet-calc__chevron{transform:rotate(225deg)}.pdp-sheet-calc__body{display:grid;grid-template-columns:1fr .6fr auto auto;gap:8px;align-items:end;padding:2px 0 12px}.pdp-sheet-calc label{display:grid;gap:4px;font-size:10px}.pdp-sheet-calc output{display:flex;gap:5px;align-items:baseline;white-space:nowrap}.pdp-sheet-calc output b{font-size:22px}.pdp-sheet-calc button{min-height:42px;padding:0 12px;border:1px solid var(--hc-line);border-radius:10px;background:#fff;color:var(--hc-accent-dark);cursor:pointer}
.pdp-decor-kit{padding:clamp(22px,3vw,34px);border:1px solid rgba(var(--hc-gold-rgb),.22);border-radius:24px;background:linear-gradient(130deg,rgba(var(--hc-gold-rgb),.08),var(--hc-paper))}.pdp-decor-kit__head h2{margin:5px 0}.pdp-decor-kit__head p{margin:0;color:var(--hc-ink-mid)}.pdp-decor-kit__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.pdp-decor-item{display:grid;grid-template-columns:auto 58px 1fr auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--hc-line);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.pdp-decor-item:has(input:checked){border-color:rgba(47,111,76,.48);background:rgba(47,111,76,.055);box-shadow:0 10px 24px -22px rgba(47,111,76,.8)}.pdp-decor-item img{width:58px;height:48px;object-fit:contain}.pdp-decor-item span{display:grid;gap:3px}.pdp-decor-item b{font-size:13px}.pdp-decor-item small{color:var(--hc-ink-muted)}
.pdp-decor-item--quote{cursor:default}.pdp-decor-item__quote-mark{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--hc-green-soft);color:var(--hc-green);font-size:11px;font-weight:800}.pdp-decor-item--quote strong{color:var(--hc-green);white-space:nowrap}
@media(max-width:900px){.decor-match__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pdp-sheet-calc{order:5}.pdp-sheet-calc__body{grid-template-columns:1fr 1fr}.pdp-decor-kit__grid{grid-template-columns:1fr}}
@media(max-width:640px){.decor-entry{grid-template-columns:1fr;padding:20px}.decor-entry__control{grid-template-columns:1fr}.decor-match__search{grid-template-columns:1fr}.decor-match__grid{grid-template-columns:1fr 1fr}.pdp-sheet-calc summary small{display:none}.pdp-sheet-calc__body{grid-template-columns:1fr 90px}.pdp-sheet-calc output,.pdp-sheet-calc button{grid-column:1/-1}.pdp-decor-item{grid-template-columns:auto 46px 1fr}.pdp-decor-item>strong{grid-column:3}.pdp-decor-item img{width:46px;height:42px}}
@media(max-width:400px){.decor-match__grid{grid-template-columns:1fr}}

/* 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 {
  list-style: none;
  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);
  }
}

/* Stacked on a phone the three cart actions are left-aligned boxes, but the
   ghost one carries the same 28px of padding as the filled buttons, so its
   label hung 28px to the right of theirs and the column read as crooked. It is
   a link in a button's clothing here — let its text start where they do. */
@media (max-width: 640px) {
  .hc-empty--cart .hc-empty__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .hc-empty--cart .hc-empty__actions .hc-btn--ghost {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 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;
}

.hc-sugg-section {
  display: grid;
  gap: 8px;
}

.hc-sugg-section + .hc-sugg-section {
  margin-top: 16px;
}

.hc-sugg-section__title {
  color: rgba(26, 23, 20, 0.56);
  font: 700 10px/1.2 var(--hc-mono, ui-monospace, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hc-sugg-section__list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-sugg-section__list > li {
  margin: 0;
  padding: 0;
}

.hc-sugg-exact,
.hc-sugg-cat,
.hc-sugg-prod,
.hc-sugg-chip,
.hc-sugg-all {
  color: inherit;
  text-decoration: none;
}

.hc-sugg-exact {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(141, 109, 71, 0.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.98), rgba(242, 235, 222, 0.82));
}

.hc-sugg-exact__kicker,
.hc-sugg-prod__kicker {
  color: rgba(26, 23, 20, 0.54);
  font: 700 10px/1.2 var(--hc-mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hc-sugg-exact__sku code,
.hc-sugg-prod__kicker code {
  border-radius: 6px;
  background: rgba(26, 23, 20, 0.06);
  padding: 2px 5px;
  color: rgba(26, 23, 20, 0.74);
  font: 700 11px/1.2 var(--hc-mono, ui-monospace, monospace);
}

.hc-sugg-exact__name {
  color: var(--hc-ink, #1a1714);
  font: 700 15px/1.28 var(--hc-sans, system-ui, sans-serif);
}

.hc-sugg-cat,
.hc-sugg-prod {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.hc-sugg-cat {
  grid-template-columns: 32px minmax(0, 1fr);
}

.hc-sugg-prod {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.hc-sugg-exact:hover,
.hc-sugg-exact.is-active,
.hc-sugg-cat:hover,
.hc-sugg-cat.is-active,
.hc-sugg-prod:hover,
.hc-sugg-prod.is-active,
.hc-sugg-chip:hover,
.hc-sugg-chip.is-active,
.hc-sugg-all:hover {
  border-color: rgba(141, 109, 71, 0.28);
  background: rgba(255, 252, 247, 0.96);
}

.hc-sugg-cat__ico,
.hc-sugg-prod__thumb {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(var(--hc-gold-rgb), 0.14);
  color: var(--hc-accent-dark, #7a6548);
}

.hc-sugg-prod__thumb {
  width: 54px;
  height: 54px;
  background: #fff;
  border: 1px solid rgba(141, 109, 71, 0.14);
}

.hc-sugg-prod__thumb img,
.hc-sugg-prod__thumb svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.hc-sugg-cat__name,
.hc-sugg-prod__body,
.hc-sugg-prod__name {
  min-width: 0;
}

.hc-sugg-cat__name,
.hc-sugg-prod__name {
  display: block;
  color: var(--hc-ink, #1a1714);
  font: 650 14px/1.28 var(--hc-sans, system-ui, sans-serif);
  overflow-wrap: anywhere;
}

.hc-sugg-prod__price {
  color: var(--hc-ink, #1a1714);
  font: 700 14px/1.2 var(--hc-sans, system-ui, sans-serif);
  white-space: nowrap;
}

.hc-sugg-section__list--chips,
.hc-sugg-hint__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hc-sugg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(141, 109, 71, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  font: 650 13px/1.2 var(--hc-sans, system-ui, sans-serif);
}

.hc-sugg-all {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-top: 12px;
  color: var(--hc-accent-dark, #7a6548);
  font: 700 13px/1.2 var(--hc-sans, system-ui, sans-serif);
}

.hc-sugg-empty,
.hc-sugg-hint {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px 2px;
}

.hc-sugg-empty__title,
.hc-sugg-hint p {
  margin: 0;
  color: var(--hc-ink, #1a1714);
  font: 700 15px/1.32 var(--hc-sans, system-ui, sans-serif);
}

.hc-sugg-empty__sub {
  margin: 0;
  color: rgba(26, 23, 20, 0.62);
  font: 500 13px/1.5 var(--hc-sans, system-ui, sans-serif);
}

@media (max-width: 520px) {
  .hc-isearch {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .hc-isearch__panel {
    max-height: calc(100vh - 20px);
    border-radius: 18px;
  }

  .hc-isearch__form {
    gap: 8px;
    padding: 12px;
  }

  .hc-isearch__kbd {
    display: none;
  }

  .hc-sugg-prod {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .hc-sugg-prod__price {
    grid-column: 2;
    justify-self: start;
  }
}

/* "по запросу" stands in for a price, so it must not shout like one. */
.hc-sugg-prod__price--quote {
  font-family: var(--hc-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--hc-ink-mid, rgba(26, 23, 20, 0.55));
  white-space: nowrap;
}