/* Шрифты размещены на сайте (без Google Fonts — 152-ФЗ). Лицензия SIL OFL 1.1, см. assets/fonts/ */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/montserrat-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/montserrat-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/montserrat-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/montserrat-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/montserrat-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/montserrat-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/montserrat-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/montserrat-cyrillic-800-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/montserrat-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/jetbrains-mono-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/jetbrains-mono-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ===== base.css ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  hanging-punctuation: first last; scroll-padding-top: 88px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
body { min-height: 100dvh; line-height: 1.6; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); }
img, picture, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; }
p, li, figcaption { text-wrap: pretty; }
::selection { background: color-mix(in oklab, var(--color-primary) 25%, transparent); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
a, button, [role='button'], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
a, button, [role='button'] {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* phone/email links display real contact info people expect to copy —
   the site-wide no-select rule above (meant for nav/buttons) shouldn't
   apply to them, and iOS needs touch-callout back for its copy menu */
a[href^="tel:"], a[href^="mailto:"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}
input, textarea, select {
  font-size: 16px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ===== tokens =====
   Light-only, cool-neutral palette (no warm cream/olive cast, no dark theme —
   both were reading as generic "AI-generated template" tells). */
:root, [data-theme='light'] {
  /* Алюминиевая палитра: светлое серебро, анодированный графит, сталь */
  --color-bg: #F3F4F6;
  --color-surface: #FFFFFF;
  --color-surface-2: #E9EBEE;
  --color-surface-offset: #DCDFE3;
  --color-border: #CDD2D8;
  --color-divider: #DEE1E5;
  --color-text: #1B1F24;
  --color-text-muted: #525A64;
  --color-text-faint: #646C76;
  --color-text-inverse: #F6F7F8;
  --color-primary: #4A5560;
  --color-primary-hover: #38414A;
  --color-primary-active: #272D34;
  --color-primary-highlight: #E4E7EB;
  --color-metal: #A9B0B8;
  --color-metal-light: #D7DBE0;
  --color-metal-shine: #F4F6F8;
  --color-ink: #2A2F35;
  --color-ink-2: #353B42;
  --color-success: #2E7D46;
  --color-success-highlight: #E1F1E6;
  --color-error: #B23A2E;
  --color-error-highlight: #F6DED9;
  --alu-brushed: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px, rgba(0,0,0,0.035) 3px 4px, transparent 4px 7px);
  --alu-gradient: linear-gradient(180deg, #FDFDFE 0%, #E6E9ED 48%, #D3D8DE 52%, #EBEEF1 100%);
  --alu-dark-gradient: linear-gradient(160deg, #3B424A 0%, #2A2F35 55%, #22262B 100%);
  /* near-sharp everywhere structural (cards, buttons, inputs, modals) — depth
     comes from a 1px border, not a radius or a shadow. --radius-full stays
     for the small round things (pills, tags, avatars) that actually earn it. */
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 4px; --radius-full: 9999px;
  --transition-interactive: 160ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 2px rgba(27,31,36,0.06);
  --shadow-md: 0 6px 20px rgba(27,31,36,0.08);
  --shadow-lg: 0 20px 48px rgba(27,31,36,0.16);
  --content-wide: 1400px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --font-display: 'Montserrat', 'Century Gothic', 'Futura', sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* type scale */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
}

/* ===== layout helpers ===== */
.wrap { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-primary); color: #fff; padding: var(--space-2) var(--space-4); z-index: 200; border-radius: var(--radius-sm); }
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

section { padding-block: clamp(var(--space-12), 7vw, var(--space-24)); }
#howto { background: var(--color-surface-2); }
#howto .step-num { box-shadow: 0 0 0 6px var(--color-surface-2); }

/* one workhorse family (Manrope) carries the whole page; Jost is reserved for
   the single big hero moment — hierarchy comes from size and weight, not
   from switching typefaces at every level */
h1, h2, h3, .display { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em; }
h1.display-hero, .display-hero { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* ===== header ===== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: color-mix(in oklab, var(--color-bg) 95%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-border); transition: background 280ms ease, border-color 280ms ease; }
/* while it still overlaps the dark hero photo: no plate, white wordmark and
   nav — the moment the hero scrolls out from under it, JS drops this class
   and the header falls back to its normal solid, dark-on-light state above. */
/* подложка не пропадает никогда: над тёмным hero — тёмное матовое стекло, чтобы
   заголовок hero, уезжающий под шапку при скролле, не сливался с логотипом и меню */
.site-header.is-over-hero { background: rgba(42,47,53,0.72); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: rgba(255,255,255,0.08); }
/* ">" everywhere here on purpose: the dropdown panels living inside each
   .nav-item are always a solid light surface, so their own links must stay
   dark-on-light regardless of header state — only the top-level trigger
   link (a direct child of .nav-item) should ever turn white. */
.site-header.is-over-hero .brand,
.site-header.is-over-hero .brand-sub,
.site-header.is-over-hero .main-nav > .nav-item > a,
.site-header.is-over-hero .icon-btn { color: #fff; transition: color 280ms ease; }
.site-header.is-over-hero .main-nav > .nav-item > a.active::after { background: #fff; }
.site-header.is-over-hero .main-nav-pills > .nav-item > a.active { background: rgba(255,255,255,0.18); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .site-header.is-over-hero .main-nav > .nav-item > a:hover { color: #fff; opacity: 0.7; }
  .site-header.is-over-hero .main-nav-pills > .nav-item > a:hover { background: rgba(255,255,255,0.16); color: #fff; opacity: 1; }
  .site-header.is-over-hero .icon-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .site-header, .site-header.is-over-hero .brand, .site-header.is-over-hero .brand-sub, .site-header.is-over-hero .main-nav > .nav-item > a, .site-header.is-over-hero .icon-btn { transition: none; } }
/* pages with no status strip above the header have the header sit flush against
   the top of the screen, so it — not the strip — needs the notch padding there */
.skip-link + .site-header { padding-top: env(safe-area-inset-top, 0px); }
/* the header's own .wrap must track the true viewport edge like the hero
   content below it does, not center within --content-wide — otherwise on
   very wide screens the logo drifts well to the right of the hero heading */
.header-inner { display: flex; align-items: center; gap: var(--space-6); height: 72px; max-width: none; margin-inline: 0; padding-left: clamp(var(--space-6), 4vw, var(--space-12)); padding-right: clamp(var(--space-6), 4vw, var(--space-12)); }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.brand-sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; color: var(--color-text-muted); text-transform: uppercase; }
.main-nav { display: flex; gap: var(--space-6); margin-inline: auto; }
.main-nav a { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; padding: var(--space-2) 0; position: relative; text-decoration: none; }
.main-nav a:hover, .main-nav a.active { color: var(--color-text); }
.main-nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--color-primary); border-radius: var(--radius-full); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 1000px) {
  .header-actions { gap: 2px; margin-left: auto; }
  .header-actions .icon-btn { width: 36px; height: 36px; }
  .header-inner { gap: var(--space-3); }
}
@media (max-width: 480px) {
  .header-actions .icon-btn { width: 34px; height: 34px; }
  .brand-sub { display: none; }
}
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); color: var(--color-text-muted); position: relative; }
.icon-btn svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); transform: scale(1.08); } }
.icon-btn:active { transform: scale(0.95); }
.cart-badge { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
@keyframes cartBadgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cart-badge.bump { animation: cartBadgeBump 260ms cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: reduce) { .cart-badge.bump { animation: none; } }
.cart-badge[hidden] { display: none; }
.nav-toggle { display: none; }

.city-picker-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 40px;
  padding: 0 var(--space-3); border-radius: var(--radius-full); border: 0; background: none;
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive);
}
.city-picker-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) { .city-picker-btn:hover { background: var(--color-surface-2); color: var(--color-text); transform: scale(1.03); } }
.city-picker-btn:active { transform: scale(0.96); }
@media (max-width: 640px) { .city-picker-btn span { display: none; } .city-picker-btn { padding: 0; width: 40px; justify-content: center; } }
.site-header.is-over-hero .city-picker-btn { color: #fff; }
@media (hover: hover) and (pointer: fine) { .site-header.is-over-hero .city-picker-btn:hover { background: rgba(255,255,255,0.18); color: #fff; } }

.city-modal .city-list-label { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-5) 0 var(--space-3); }
.city-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.city-chip {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface);
  transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) { .city-chip:hover { border-color: var(--color-primary); background: var(--color-surface-2); } }
.city-geo-status { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
.city-geo-confirm { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-md); }
.city-geo-confirm-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }

@media (max-width: 1000px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* mobile nav — rounded dropdown card под шапкой, а не занавес на весь экран */
.mobile-nav-backdrop {
  position: fixed; inset: 0; background: rgba(27,31,36,0.4); z-index: 89;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 220ms;
}
.mobile-nav-backdrop.open { opacity: 1; visibility: visible; }
.mobile-nav {
  position: fixed; top: calc(72px + var(--space-3)); left: var(--space-4); right: var(--space-4);
  background: var(--color-bg); z-index: 90; padding: var(--space-3) var(--space-6);
  border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
  max-height: calc(100vh - 72px - var(--space-6)); max-height: calc(100dvh - 72px - var(--space-6)); overflow-y: auto;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.16,1,0.3,1), visibility 220ms;
  overscroll-behavior: contain;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .mobile-nav { transition: opacity 150ms ease; transform: none; } }
.mobile-nav a { display: block; width: 100%; text-align: left; padding: var(--space-4) 0; font-size: var(--text-lg); border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a.active { color: var(--color-primary); }

/* ===== buttons =====
   Flat, single-accent, depth from a 1px border — not a gradient or a shadow. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm); padding: var(--space-3) var(--space-6); border-radius: 10px; border: 1px solid transparent; white-space: nowrap; text-decoration: none; transition: transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive); }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } }
.btn-primary:active { transform: scale(0.98); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); } }
.btn-outline:active { transform: scale(0.98); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== hero ===== */
.hero { padding-top: clamp(var(--space-10), 6vw, var(--space-16)); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); align-items: center; }
.hero-eyebrow { display: none; }
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); }
.hero h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; max-width: none; margin-bottom: var(--space-5); }
.hero p.lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; margin-bottom: var(--space-8); font-family: var(--font-body); font-weight: 400; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-10); }
.hero-stats { display: flex; gap: var(--space-8); flex-wrap: wrap; border-top: 1px solid var(--color-divider); padding-top: var(--space-6); }
.hero-stat b { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); }
.hero-stat span { font-size: var(--text-xs); color: var(--color-text-muted); }

.hero-visual { background: var(--color-ink); border-radius: var(--radius-xl); padding: var(--space-10); position: relative; overflow: hidden; aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; box-shadow: var(--shadow-lg); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-visual-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(115deg, transparent 42%, rgba(200,206,214,0.22) 49%, rgba(235,238,242,0.4) 51%, rgba(200,206,214,0.22) 53%, transparent 60%),
    linear-gradient(190deg, rgba(27,31,36,0.05) 0%, rgba(27,31,36,0.5) 58%, rgba(27,31,36,0.9) 100%);
}
.hero-visual .grid-icon { position: relative; z-index: 2; color: #ECEEF1; opacity: 0.95; width: 56px; height: 56px; }
.hero-visual-tag { position: relative; z-index: 2; color: #F2F3F5; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.hero-visual-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; color: #D3D8DE; font-size: var(--text-xs); letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; aspect-ratio: 16/9; }
}

/* ===== section heads ===== */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); flex-wrap: wrap; }
.section-head h2 { font-size: var(--text-xl); }
.section-head p { color: var(--color-text-muted); max-width: 46ch; }
.section-kicker { display: none; }

/* ===== category grid ===== */
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.cat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cat-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); color: var(--color-text-muted); background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) { .cat-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } }
.cat-chip:active { transform: scale(0.96); }
.cat-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cat-chip-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.cat-chip-label { flex: 1; }
.cat-chip-count { font-size: 10px; font-weight: 700; color: var(--color-text-faint); background: var(--color-surface-2); border-radius: var(--radius-full); padding: 1px 7px; flex-shrink: 0; }
.cat-chip.active .cat-chip-count { background: rgba(255,255,255,0.22); color: #fff; }
.cat-chip.active .cat-chip-icon { opacity: 1; }
/* «Услуги завода» — визуально выделенный пункт направлений, чтобы обращал на себя внимание */
.cat-chip.cat-chip-highlight { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-active)); border-color: transparent; color: #fff; }
.cat-chip.cat-chip-highlight .cat-chip-count, .cat-chip.cat-chip-highlight .cat-chip-icon { color: #fff; opacity: 1; }
.cat-chip.cat-chip-highlight .cat-chip-count { background: rgba(255,255,255,0.22); }
@media (hover: hover) and (pointer: fine) { .cat-chip.cat-chip-highlight:hover { color: #fff; filter: brightness(1.1); } }
.cat-chip.cat-chip-highlight.active { outline: 2px solid #fff; outline-offset: -4px; }
.cat-sort-wrap { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.cat-sort-wrap select { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--color-text); }
.cat-sort-wrap select:focus { border-color: var(--color-primary); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.cat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0; text-align: left; text-decoration: none; color: inherit; display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive); }
@media (hover: hover) and (pointer: fine) { .cat-card:hover { border-color: var(--color-primary); transform: translateY(-3px); } }
.cat-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-ink); }
.cat-card-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(200deg, rgba(255,255,255,0.16) 0%, transparent 35%), linear-gradient(0deg, rgba(0,0,0,0.22) 0%, transparent 45%);
  transition: opacity 340ms ease;
}
.cat-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover .cat-card-media img { transform: scale(1.12); }
  .cat-card:hover .cat-card-media::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cat-card-media img, .cat-card { transition: none; } }
.cat-card-cart-badge { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--color-success); color: #fff; font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }
.cat-card-content { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.cat-icon-chip { width: 44px; height: 44px; border-radius: 12px; background: rgba(74,85,96,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-card .cat-icon { width: 24px; height: 24px; color: var(--color-primary); }
.cat-card h3 { font-size: var(--text-base); font-family: var(--font-display); font-weight: 600; }
.cat-card p { font-size: var(--text-xs); color: var(--color-text-muted); }
.cat-card-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.cat-card .cat-count { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }
.cat-price-badge { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); font-family: var(--font-display); white-space: nowrap; }
.cat-breadcrumb { font-size: var(--text-xs); color: var(--color-text-faint); margin: calc(-1 * var(--space-4)) 0 var(--space-4); }

/* ===== category grid / detail: soft entrance fade so switching feels calm, not a jump-cut ===== */
@keyframes catGridSettle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cat-layout.is-entering { animation: catGridSettle 420ms cubic-bezier(0.16,1,0.3,1); }
.cat-detail { display: none; }
.cat-detail.active { display: block; }
@keyframes catDetailSettle { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cat-detail.active.is-entering { animation: catDetailSettle 460ms cubic-bezier(0.16,1,0.3,1); }
.back-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; margin-bottom: var(--space-6); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
@media (hover: hover) and (pointer: fine) { .back-btn:hover { color: var(--color-primary); } }

/* ===== каталог: направления как карточки (первый уровень навигации) ===== */
.direction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }
.direction-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; text-align: left; cursor: pointer; display: flex; flex-direction: column;
  transition: border-color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) { .direction-card:hover { border-color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); } }
a.direction-card { text-decoration: none; color: inherit; }
.direction-card-media { aspect-ratio: 4/3; overflow: hidden; }
.direction-card-media img { width: 100%; height: 100%; object-fit: cover; }
.direction-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.direction-card-body h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; }
.direction-card-count { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ===== карточка товара: фото слева, название+характеристики по центру,
   блок выбора и покупки справа — как на маркетплейсах ===== */
.cat-detail-grid { display: grid; grid-template-columns: 340px 1fr 320px; gap: var(--space-6); align-items: start; margin-bottom: var(--space-8); }
.cat-detail-photo { position: relative; border-radius: 20px; overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-border); aspect-ratio: 1/1; }
.cat-detail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-detail-main { min-width: 0; }
.cat-detail-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.cat-detail-icon { width: 48px; height: 48px; color: var(--color-primary); flex-shrink: 0; background: var(--color-primary-highlight); border-radius: 12px; padding: var(--space-2); }
.cat-detail-title h2 { font-size: var(--text-xl); color: var(--color-text); }
.cat-detail-title p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* фирменная синяя плавающая кнопка(и) поверх фото товара, дублирует
   действие снизу, чтобы не пришлось прокручивать страницу */
.cat-detail-hero-actions { position: absolute; z-index: 3; top: var(--space-4); right: var(--space-4); left: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cat-detail-hero-action {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(27,31,36,0.22);
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) {
  .cat-detail-hero-action:hover { background: var(--color-primary-hover); transform: translateY(-2px); }
}
.cat-detail-hero-action svg { width: 14px; height: 14px; flex-shrink: 0; }

.cat-detail-buybox {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px;
  padding: var(--space-6); box-shadow: 0 1px 2px rgba(27,31,36,0.04), 0 16px 40px rgba(27,31,36,0.07);
  position: sticky; top: calc(72px + var(--space-4));
}

@media (max-width: 960px) {
  .cat-detail-grid { grid-template-columns: 1fr; }
  .cat-detail-photo { aspect-ratio: 16/9; }
  .cat-detail-buybox { position: static; }
}
@media (max-width: 640px) {
  .cat-detail-head { gap: var(--space-3); }
}

.prod-table-wrap { border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-surface); }
table.prod-table { font-size: var(--text-sm); }
table.prod-table th { text-align: left; background: var(--color-ink); color: #fff; font-weight: 600; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
table.prod-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); vertical-align: middle; }
table.prod-table tbody tr:nth-child(even) { background: var(--color-surface-2); }
table.prod-table td.code { font-family: var(--font-display); font-weight: 600; }
table.prod-table td.price { font-weight: 600; white-space: nowrap; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-stepper button { width: 28px; height: 28px; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .qty-stepper button:hover { background: var(--color-surface-2); color: var(--color-text); } }
.qty-stepper button:active { transform: scale(0.9); background: var(--color-surface-2); }
.qty-stepper input { width: 34px; text-align: center; font-size: var(--text-sm); background: transparent; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); height: 28px; }
.add-btn { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
@media (hover: hover) and (pointer: fine) { .add-btn:hover { background: var(--color-primary); color: #fff; } }
.add-btn:active { transform: scale(0.95); }
.add-btn.added { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.info-note { background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.custom-cta { margin-top: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; background: var(--color-primary-highlight); border-radius: var(--radius-lg); padding: var(--space-6); }
.custom-cta p { font-size: var(--text-sm); color: var(--color-text); max-width: 40ch; }

.packaging-picker { margin-top: var(--space-8); }
.packaging-picker-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.packaging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.packaging-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.packaging-card h4 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; }
.packaging-card p { font-size: var(--text-xs); color: var(--color-text-muted); flex: 1; }
.packaging-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.packaging-price { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); }
.packaging-card-foot .btn.added { background: var(--color-success); border-color: var(--color-success); }

/* ===== главная: быстрый доступ к услугам (открывает всплывающее окно) ===== */
#quick-services { padding-block: clamp(var(--space-6), 4vw, var(--space-8)) 0; }
.quick-services-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.quick-service-card {
  flex: 1 1 280px; display: flex; align-items: center; gap: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: var(--space-6) var(--space-5); text-align: left; cursor: pointer;
  transition: transform 340ms cubic-bezier(0.16,1,0.3,1), box-shadow 340ms cubic-bezier(0.16,1,0.3,1), border-color var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) {
  .quick-service-card:hover { border-color: var(--color-primary); transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-lg); }
  .quick-service-card:hover .quick-service-media img { transform: scale(1.1); }
}
.quick-service-card:active { transform: scale(0.98); }
.quick-service-media { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.quick-service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 440ms cubic-bezier(0.16,1,0.3,1); }
.quick-service-body { display: flex; flex-direction: column; min-width: 0; }
.quick-service-label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
.quick-service-desc { margin-top: var(--space-2); }
.quick-service-desc > span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

/* карточка услуги «перетекает» в попап через View Transitions — там, где браузер
   умеет; название назначается только на время перехода (см. common.js) */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(quick-service-morph) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
}
.modal-card.service-quick-card {
  max-width: 560px; border-radius: 20px; font-family: var(--font-body);
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.modal-card.service-quick-card::-webkit-scrollbar { width: 6px; }
.modal-card.service-quick-card::-webkit-scrollbar-track { background: transparent; }
.modal-card.service-quick-card::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
.modal-card.service-quick-card::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }
.service-quick-card h3 { font-family: var(--font-display); }
.service-quick-media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; margin-bottom: var(--space-5); }
@media (max-width: 640px) {
  .modal-card.service-quick-card { border-radius: 16px; padding: var(--space-6); }
  .service-quick-media { aspect-ratio: 4/3; margin-bottom: var(--space-4); }
}
.service-quick-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-quick-media-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(27,31,36,0.82) 0%, rgba(27,31,36,0.25) 55%, transparent 100%); }
.service-quick-media-text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-5); }
.service-quick-media-text h3 { color: #fff; margin-bottom: 2px; }
.service-quick-subtitle { color: rgba(255,255,255,0.85); font-size: var(--text-sm); }
.service-quick-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.service-quick-list li { font-size: var(--text-sm); color: var(--color-text); padding-left: var(--space-5); position: relative; }
.service-quick-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.service-quick-list b { font-weight: 600; }
.service-quick-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 640px) {
  .service-quick-actions { flex-direction: column; }
  .service-quick-actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  .prod-table-wrap { overflow-x: auto; }
  table.prod-table { min-width: 560px; }
}

/* ===== about ===== */
.about-photo { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16/6; margin-bottom: var(--space-12); border: 1px solid var(--color-border); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .about-photo { aspect-ratio: 4/3; margin-bottom: var(--space-8); } }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.about-grid .lede { font-size: var(--text-lg); color: var(--color-text); font-family: var(--font-body); font-weight: 400; margin-bottom: var(--space-6); }
.about-grid p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.pill { font-size: var(--text-xs); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); color: var(--color-text-muted); }
.use-list { display: flex; flex-direction: column; gap: 0; }
.use-list li { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--color-divider); font-size: var(--text-sm); color: var(--color-text); }
.use-list li span.num { font-family: var(--font-display); color: var(--color-primary); font-weight: 700; min-width: 2ch; }
.adv-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.adv-list div { background: var(--color-surface); border: 1px solid var(--color-border); border-top: 2px solid var(--color-primary); padding: var(--space-5); }
.adv-list h3 { font-size: var(--text-sm); margin-bottom: var(--space-1); }
.adv-list p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ===== step flow (как заказать / этапы производства) ===== */
.steps-flow { display: flex; position: relative; gap: var(--space-6); margin-top: var(--space-10); counter-reset: none; }
.steps-flow::before { content: ''; position: absolute; top: 22px; left: 10%; right: 10%; height: 2px; background: var(--color-divider); z-index: 0; }
.steps-flow::after { content: ''; position: absolute; top: 22px; left: 10%; right: 10%; height: 2px; background: var(--color-primary); z-index: 0; transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.16,1,0.3,1) 150ms; }
.steps-flow.in-view::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .steps-flow::after { transform: scaleX(1); transition: none; } }
.step-item { position: relative; z-index: 1; flex: 1; text-align: center; }
.step-num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto var(--space-4); border-radius: var(--radius-full); background: var(--color-primary); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); box-shadow: 0 0 0 6px var(--color-bg); }
.step-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step-item p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.steps-flow-production .step-num { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); }

@media (max-width: 860px) {
  .steps-flow { flex-direction: column; gap: var(--space-5); margin-top: var(--space-8); }
  .steps-flow::before, .steps-flow::after { display: none; }
  .step-item { display: flex; gap: var(--space-4); align-items: flex-start; text-align: left; }
  .step-item .step-num, #howto .step-num { margin: 0; flex-shrink: 0; box-shadow: none; }
}

/* ===== homepage "how it works": static 3-over-2 grid, no scroll-jacking ===== */
.howto-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.howto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 calc((100% - 2 * var(--space-6)) / 3);
  min-width: 220px;
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-active));
  border: 1px solid var(--color-primary-hover);
  border-radius: 20px;
  padding: var(--space-6);
  box-shadow: 10px 10px 28px rgba(27,31,36, 0.28);
}
.howto-card .step-num {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 48px; height: 48px;
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.14);
  font-family: var(--font-mono); font-size: var(--text-base); font-weight: 700; line-height: 1;
  color: #fff;
}
.howto-card h3 { font-size: var(--text-lg); font-family: var(--font-display); font-weight: 500; margin-bottom: var(--space-2); color: #fff; text-align: left; }
.howto-card p { font-size: var(--text-sm); color: rgba(255,255,255,0.72); margin: 0; text-align: left; }

@media (max-width: 640px) {
  .howto-card { flex: 1 1 100%; }
}


/* ===== главная: «Как мы работаем» — тёмный блок с крупными номерами шагов ===== */
#howto-preview { background: var(--color-ink); color: #fff; padding-block: clamp(var(--space-12), 7vw, var(--space-20, 6rem)); --howto-accent: #C3C9D0; }
.howto-head { margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); }
.howto-kicker { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--howto-accent); margin-bottom: var(--space-4); }
.howto-kicker::before { content: ''; width: 40px; height: 2px; background: var(--howto-accent); }
.howto-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; color: #fff; margin: 0; }
#howto-preview .howto-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(var(--space-5), 2.4vw, var(--space-10)); margin: 0; justify-content: stretch; }
#howto-preview .howto-card { flex: none; min-width: 0; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; align-items: flex-start; }
#howto-preview .howto-card .step-num { width: auto; height: auto; margin: 0 0 var(--space-4); border-radius: 0; background: none; justify-content: flex-start; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 3.2vw, 5.25rem); line-height: 1; letter-spacing: -0.02em; color: rgba(255,255,255,0.14); box-shadow: none; }
#howto-preview .howto-card:last-child .step-num { color: var(--howto-accent); }
#howto-preview .howto-card::before { content: ''; order: 2; align-self: stretch; height: 2px; margin-bottom: var(--space-5); background: linear-gradient(to right, var(--howto-accent) var(--p, 20%), rgba(255,255,255,0.16) var(--p, 20%)); }
#howto-preview .howto-card .step-num { order: 1; }
#howto-preview .howto-card h3 { order: 3; font-size: var(--text-lg); font-weight: 800; line-height: 1.2; color: #fff; margin: 0 0 var(--space-3); }
#howto-preview .howto-card p { order: 4; font-size: var(--text-sm); line-height: 1.55; color: rgba(255,255,255,0.62); }
#howto-preview .section-cta-row { margin-top: clamp(var(--space-8), 4vw, var(--space-12)); }
#howto-preview .section-cta-row .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
@media (hover: hover) and (pointer: fine) { #howto-preview .section-cta-row .btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; } }
@media (max-width: 1000px) { #howto-preview .howto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-10); } }
@media (max-width: 640px) { #howto-preview .howto-grid { grid-template-columns: 1fr; row-gap: var(--space-8); } }

/* ===== about: terms & team ===== */
.about-extra { margin-top: var(--space-16); }
.terms-heading { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-6); }
#production-steps {
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary-active));
  border-radius: 20px;
  padding: var(--space-8) var(--space-6);
}
#production-steps .terms-heading, #production-steps .step-item h3 { color: #fff; }
#production-steps .terms-heading { text-align: center; }
#production-steps .step-item p { color: rgba(255,255,255,0.65); }
#production-steps .steps-flow::before, #production-steps .steps-flow::after { display: none; }
#production-steps .step-num { box-shadow: none; }
.spec-list { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-10); margin-bottom: var(--space-16); }
.spec-row { display: flex; align-items: flex-start; gap: var(--space-5); }
.spec-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-primary); color: #fff; }
.spec-row h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.spec-row p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
@media (max-width: 640px) { .spec-row { gap: var(--space-4); } }
#terms .section-head h2, #terms .spec-row h3 { color: #fff; }
#terms .section-head p, #terms .spec-row p { color: rgba(255,255,255,0.65); }
#terms .spec-icon { background: rgba(255,255,255,0.14); }

.team-note { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 62ch; }
.team-note a { color: var(--color-text); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .team-note a:hover { text-decoration: underline; } }

/* ===== contacts ===== */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); }
.contact-info dl { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info dt { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.contact-info dd { font-size: var(--text-base); margin-top: var(--space-1); }
.contact-info dd a { color: var(--color-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contact-info dd a:hover { color: var(--color-primary); } }
.legal-box { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.7; }

.form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text-muted); }
.field input, .field textarea, .field select { width: 100%; max-width: 100%; min-width: 0; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); box-sizing: border-box; transition: border-color var(--transition-interactive), background var(--transition-interactive); }
.field input:focus, .field textarea:focus { border-color: var(--color-primary); }
.field textarea { min-height: 100px; resize: vertical; }
.field-hint { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }
.field input[type="file"] { background: var(--color-surface-2); border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .field input[type="file"]:hover { border-color: var(--color-primary); } }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; font-size: var(--text-xs); color: #fff; background: var(--color-primary); border: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-right: var(--space-3); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .field input[type="file"]::file-selector-button:hover { background: var(--color-primary-hover); } }
.form-status { font-size: var(--text-xs); margin-top: var(--space-3); min-height: 1em; }
.form-status.is-sending { color: var(--color-text-muted); }
.form-status.is-error { color: var(--color-error); }
.form-status.is-ok { color: var(--color-success); }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-10); } }

/* ===== footer ===== */
.site-footer { position: relative; background: var(--color-ink); color: #D3D8DE; padding-block: var(--space-16) var(--space-8); overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--noise);
  opacity: 0.05; mix-blend-mode: overlay; pointer-events: none;
}
.site-footer > .wrap { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-10); margin-bottom: var(--space-10); }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: var(--space-4); font-size: var(--text-sm); color: #A9B0B8; max-width: 34ch; line-height: 1.6; }
.footer-col h3 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9AA2AB; margin-bottom: var(--space-4); line-height: 1; }
.footer-col a, .footer-col button { display: block; color: #D3D8DE; font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--space-3); text-align: left; text-decoration: none; }
.footer-col a:last-child, .footer-col button:last-child { margin-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover, .footer-col button:hover { color: #fff; } }
.footer-bottom { border-top: 1px solid #3A4148; padding-top: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: #8A929B; }
.footer-bottom a { color: #A9B0B8; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-bottom a:hover { color: #fff; text-decoration: underline; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ===== cart drawer ===== */
.overlay { position: fixed; inset: 0; background: rgba(27,31,36,0.5); z-index: 150; opacity: 0; visibility: hidden; transition: opacity 220ms ease; }
.overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--color-bg); z-index: 160; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 260ms cubic-bezier(0.16,1,0.3,1); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); }
.cart-head h2 { font-size: var(--text-lg); }
.cart-items { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-6); overscroll-behavior: contain; }
.cart-item { display: flex; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); max-height: 200px; animation: cartItemIn 260ms cubic-bezier(0.16,1,0.3,1); }
@keyframes cartItemIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cart-item.is-removing {
  opacity: 0;
  transform: translateX(16px);
  max-height: 0;
  padding-block: 0;
  border-bottom-width: 0;
  overflow: hidden;
  transition: opacity 180ms ease, transform 180ms ease, max-height 220ms ease 80ms, padding-block 220ms ease 80ms, border-bottom-width 220ms ease 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .cart-item { animation: none; }
  .cart-item.is-removing { transition: opacity 120ms ease; transform: none; max-height: 200px; }
}
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-body .name { font-size: var(--text-sm); font-weight: 600; }
.cart-item-body .meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.cart-item-remove { font-size: var(--text-xs); color: var(--color-text-faint); transition: color var(--transition-interactive); }
@media (hover: hover) and (pointer: fine) { .cart-item-remove:hover { color: var(--color-error); } }
.cart-item-price { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.cart-empty { text-align: center; padding: var(--space-16) var(--space-4); color: var(--color-text-muted); }
.cart-empty svg { width: 48px; height: 48px; margin: 0 auto var(--space-4); color: var(--color-text-faint); }
.cart-foot { padding: var(--space-6); border-top: 1px solid var(--color-border); }
.cart-total-row { display: flex; justify-content: space-between; font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-4); }

/* ===== sitewide quick search (Ctrl/Cmd+K command palette) ===== */
.search-modal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: flex-start; justify-content: center; padding: min(14vh, 120px) var(--space-4) var(--space-4); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms; }
.search-modal.open { opacity: 1; visibility: visible; }
.search-modal-backdrop { position: absolute; inset: 0; background: rgba(27,31,36,0.6); backdrop-filter: blur(2px); }
.search-modal-card {
  position: relative; width: 100%; max-width: 600px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  overflow: hidden; max-height: 70vh; display: flex; flex-direction: column;
  transform: translateY(-16px) scale(0.97); opacity: 0;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), opacity 220ms ease;
}
.search-modal.open .search-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.search-modal-input-wrap { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--color-divider); color: var(--color-text-faint); flex-shrink: 0; }
.search-modal-input-wrap svg { flex-shrink: 0; }
.search-modal-input-wrap input { flex: 1; border: none; background: none; font: inherit; font-size: var(--text-base); color: var(--color-text); outline: none; }
.search-modal-input-wrap input::placeholder { color: var(--color-text-faint); }
.search-modal-input-wrap kbd { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-faint); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 3px 7px; }
.search-modal-results { overflow-y: auto; padding: var(--space-2); overscroll-behavior: contain; }
.search-result-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); padding: var(--space-3) var(--space-3) var(--space-2); }
.search-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.search-result.is-active { background: var(--color-surface-2); }
@media (hover: hover) and (pointer: fine) { .search-result:hover { background: var(--color-surface-2); } }
.search-result-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-primary-highlight); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.search-result-icon svg { width: 18px; height: 18px; }
.search-result-body { min-width: 0; flex: 1; }
.search-result-title { display: block; font-weight: 600; font-size: var(--text-sm); }
.search-result-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-badge { font-size: 10px; font-weight: 600; color: var(--color-text-faint); background: var(--color-surface-2); border-radius: var(--radius-full); padding: 3px 9px; flex-shrink: 0; white-space: nowrap; }
.search-empty { padding: var(--space-10) var(--space-5); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 640px) { .search-modal { padding-top: var(--space-6); } .search-modal-input-wrap kbd { display: none; } }

/* ===== modal ===== */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; visibility: hidden; transition: opacity 200ms ease; }
.modal.open { opacity: 1; visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(27,31,36,0.55); }
.modal-card {
  position: relative; background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-8);
  max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); max-height: 88vh; overflow-y: auto;
  transform: translateY(-16px) scale(0.97); opacity: 0;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), opacity 220ms ease;
}
.modal.open .modal-card { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .modal-card, .search-modal-card { transition: opacity 150ms ease; transform: none; }
}
.modal-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.modal-card > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .modal-close:hover { background: var(--color-surface-2); } }
.modal-success { display: none; text-align: center; padding-block: var(--space-6); }
.modal-success.show { display: block; }
.modal-success svg { width: 48px; height: 48px; color: var(--color-success); margin: 0 auto var(--space-4); }
.modal-order-summary { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-5); max-height: 120px; overflow-y: auto; }


/* ===== search + section actions ===== */
.section-head-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 480px) {
  .section-head-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .section-head-actions .btn { width: 100%; }
}
.cat-search-wrap { margin-bottom: var(--space-6); }
.cat-search { width: 100%; max-width: 480px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.cat-search:focus { border-color: var(--color-primary); }
.cat-empty-msg { grid-column: 1 / -1; text-align: center; padding: var(--space-16) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.cat-group-block { grid-column: 1 / -1; }
.cat-group-block + .cat-group-block { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); }
.cat-group-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.cat-group-head h3 { font-size: var(--text-lg); font-family: var(--font-display); font-weight: 600; color: var(--color-text); }
.cat-group-count { font-size: var(--text-xs); color: var(--color-text-faint); background: var(--color-surface-2); border-radius: var(--radius-full); padding: 2px 10px; }
.cat-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .cat-group-head h3 { font-size: var(--text-base); } }

/* ===== variant picker (category detail) — конфигуратор типоразмера, самый
   «денежный» узел страницы: выбор размера → цена → в заявку. Оформлен как
   отдельная приподнятая карточка вместо плоской формы. ===== */
.variant-picker {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 20px 20px 0 0; border-bottom: none; padding: var(--space-8);
  box-shadow: 0 1px 2px rgba(27,31,36,0.04), 0 16px 40px rgba(27,31,36,0.07);
}
.variant-picker-head { margin-bottom: var(--space-6); }
.variant-picker-head label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.variant-picker-head select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--color-surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23123F73" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right var(--space-5) center;
  background-size: 18px; border: 1.5px solid var(--color-border); border-radius: 14px;
  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-5);
  font-size: var(--text-base); font-weight: 600; font-family: var(--font-display); color: var(--color-text);
  cursor: pointer; transition: border-color var(--transition-interactive), background-color var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) { .variant-picker-head select:hover { border-color: var(--color-primary); } }
.variant-picker-head select:focus { border-color: var(--color-primary); background-color: var(--color-surface); outline: 3px solid var(--color-primary-highlight); outline-offset: 1px; }
.variant-spec { padding-top: var(--space-6); border-top: 1px solid var(--color-divider); margin-bottom: var(--space-6); }
.variant-dl { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: 0; }
.variant-dl > div dt { font-size: 11px; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.variant-dl > div dd { font-size: var(--text-base); font-weight: 700; font-family: var(--font-display); margin-top: 3px; color: var(--color-text); }
.variant-price-row { display: flex; align-items: baseline; }
.variant-price { font-size: var(--text-xl); font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; color: var(--color-primary); line-height: 1.2; }
.variant-price span { margin-left: var(--space-2); font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); font-family: var(--font-body); }
.variant-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-6); margin-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.qty-stepper { border-radius: var(--radius-full); }
.qty-stepper button { width: 36px; height: 36px; }
.qty-stepper input { width: 36px; height: 36px; font-weight: 600; font-family: var(--font-display); }
.variant-table-toggle { margin: 0 0 var(--space-6); }
.link-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-top: none;
  border-radius: 0 0 20px 20px; padding: var(--space-5) var(--space-8);
  font-size: var(--text-sm); color: var(--color-text); font-weight: 600; text-decoration: none;
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
.link-btn-caret { color: var(--color-primary); flex-shrink: 0; transition: transform 260ms cubic-bezier(0.16,1,0.3,1); }
.link-btn.is-open .link-btn-caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .link-btn:hover { background: var(--color-primary-highlight); color: var(--color-primary); } }

@media (max-width: 640px) {
  .variant-picker { padding: var(--space-6); }
  .variant-price { font-size: 1.75rem; }
  .link-btn { padding: var(--space-4) var(--space-6); }
}

.variant-table-toggle + div:not(:empty) { margin-top: var(--space-6); margin-bottom: var(--space-6); }


/* ===== карточка товара: упрощённый блок справа (цена + позвонить / расчёт) ===== */
.cat-detail-buybox .variant-picker { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.cat-detail-buybox .custom-cta.variant-picker { margin-top: 0; flex-direction: column; align-items: stretch; }
.cat-detail-buybox .custom-cta p { max-width: none; }
.cat-detail-buybox .custom-cta-actions { flex-direction: column; }
.cat-detail-buybox .custom-cta-actions .btn { width: 100%; justify-content: center; }
.variant-spec-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; padding: var(--space-6); }
.variant-spec-heading { font-size: var(--text-base); font-weight: 700; font-family: var(--font-display); margin-bottom: var(--space-4); }
.variant-price-block { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.variant-price { font-size: var(--text-lg); }
.variant-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: var(--space-4); margin-top: 0; border-top: 1px solid var(--color-divider); }
.variant-cta { width: 100%; justify-content: center; border-radius: 14px; padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }
.variant-meta { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.4; margin: 0; }
@media (max-width: 640px) { .variant-spec-panel { padding: var(--space-5); } }

/* ===== custom cta actions ===== */
.custom-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.detail-tools-row { margin-top: var(--space-6); }

/* ===== о компании: отзывы клиентов ===== */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.review-cta { margin-top: var(--space-10); padding: var(--space-8); background: var(--color-surface-2); border-radius: var(--radius-lg); text-align: center; }
.review-cta h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.review-cta p { color: var(--color-text-muted); max-width: 56ch; margin: 0 auto var(--space-5); }
.review-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.review-avatar { width: 44px; height: 44px; border-radius: 50%; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.review-text { font-size: var(--text-sm); color: var(--color-text); flex: 1; }
.review-author { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.review-author strong { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-text); }
.review-author span { color: var(--color-text-muted); }
.review-rating { display: flex; gap: var(--space-1); }
.review-star { font-size: 28px; line-height: 1; color: var(--color-border); transition: color var(--transition-interactive), transform var(--transition-interactive); }
.review-star.is-active { color: #E0A934; }
@media (hover: hover) and (pointer: fine) { .review-star:hover { color: #E0A934; } }
.review-star:active { transform: scale(0.9); }

/* ===== sketch tool ===== */
.sketch-card { max-width: 720px; }
.sketch-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.sketch-dim-field label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.sketch-dim-field input { width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); box-sizing: border-box; transition: border-color var(--transition-interactive); }
.sketch-dim-field input:focus { border-color: var(--color-primary); }
.sketch-dims-badge { font-size: var(--text-sm); font-weight: 600; font-family: var(--font-display); color: var(--color-primary); background: var(--color-primary-highlight); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; }

.sketch-shapes { margin-bottom: var(--space-4); }
.sketch-shapes-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.sketch-shapes-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sketch-shape-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-2); font-size: 11px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
@media (hover: hover) and (pointer: fine) { .sketch-shape-btn:hover { border-color: var(--color-primary); color: var(--color-text); } }
.sketch-shape-btn:active { transform: scale(0.94); }
.sketch-shape-btn.active { border-color: var(--color-primary); background: var(--color-primary-highlight); color: var(--color-primary); }
.sketch-shape-icon { width: 26px; height: 26px; color: currentColor; }
.sketch-shape-reset { border-style: dashed; }

@media (max-width: 640px) {
  .sketch-dims { grid-template-columns: 1fr 1fr; }
  .sketch-shape-btn { min-width: 56px; font-size: 10px; }
  .sketch-shape-icon { width: 22px; height: 22px; }
}
.sketch-toolbar { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-md); }
.sketch-colors { display: flex; align-items: center; gap: var(--space-2); }
.sketch-color { width: 26px; height: 26px; border-radius: var(--radius-full); border: 2px solid transparent; padding: 0; }
.sketch-color.active { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-surface); }
.sketch-colors input[type="color"] { width: 26px; height: 26px; border-radius: var(--radius-full); border: 1px solid var(--color-border); padding: 0; background: none; overflow: hidden; }
.sketch-size { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.sketch-size input[type="range"] { width: 100px; }

/* ===== подбор цвета покрытия (анодирование / RAL) ===== */
.color-card { max-width: 640px; }
.color-preview-wrap { margin-bottom: var(--space-5); position: relative; }
.color-preview-arrow {
  position: absolute; top: 88px; z-index: 4; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive);
}
.color-preview-arrow-prev { left: -4px; }
.color-preview-arrow-next { right: -4px; }
@media (hover: hover) and (pointer: fine) { .color-preview-arrow:hover { background: var(--color-surface-2); color: var(--color-text); } }
.color-preview-arrow:active { transform: scale(0.92); }
@media (max-width: 640px) { .color-preview-arrow-prev { left: -10px; } .color-preview-arrow-next { right: -10px; } }
/* Галерея-карусель: плитка по умолчанию + реальные 3D-фото изделий, каждое
   тонируется в выбранный цвет через mix-blend-mode. Пролистывается свайпом
   на тач-устройствах и перетаскиванием мышью на десктопе (см. common.js). */
.color-preview-carousel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
  margin: 0 calc(-1 * var(--space-8));
}
.color-preview-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.color-preview-carousel::-webkit-scrollbar { display: none; }
.color-preview-slide {
  flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: var(--space-5) var(--space-8) var(--space-3);
}
.color-preview-slide-label { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.color-preview-photo-wrap { position: relative; width: 100%; max-width: 260px; aspect-ratio: 3/2; border-radius: 12px; overflow: hidden; background: #fff; user-select: none; }
.color-preview-photo-wrap img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: contrast(0.82) brightness(1.08); }
.color-preview-photo-tint {
  position: absolute; inset: 0; background: var(--color-preview, #C7C9CC); mix-blend-mode: color;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.color-preview-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-2); }
.color-preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); transition: background var(--transition-interactive), transform var(--transition-interactive); }
.color-preview-dot.is-active { background: var(--color-primary); transform: scale(1.3); }
/* мини-«3D» пластина металла: наклонённая плоскость + сгенерированная из
   того же --color-preview тень-торец создают иллюзию объёма без картинки */
.color-preview-3d { position: relative; perspective: 900px; display: flex; justify-content: center; padding: var(--space-5) 0 var(--space-8); width: 100%; }
.color-preview-plate {
  --color-preview: #C7C9CC;
  width: 230px; height: 130px;
  position: relative;
  background: var(--color-preview);
  border-radius: 6px;
  transform: rotateX(55deg) rotateZ(-32deg);
  transform-style: preserve-3d;
  box-shadow: inset 0 0 50px rgba(255,255,255,0.28), inset 0 -26px 50px rgba(0,0,0,0.3), 0 30px 40px rgba(27,31,36,0.18);
  transition: background 180ms ease, transform 260ms cubic-bezier(0.16,1,0.3,1);
}
.color-preview-plate::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -18px; height: 18px;
  background: color-mix(in srgb, var(--color-preview) 55%, black);
  transform: rotateX(-90deg); transform-origin: top;
  border-radius: 0 0 6px 6px;
}
.color-preview-plate::after {
  content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
}
@media (hover: hover) and (pointer: fine) {
  .color-preview-3d:hover .color-preview-plate { transform: rotateX(50deg) rotateZ(-26deg); }
}
@media (prefers-reduced-motion: reduce) { .color-preview-plate { transition: none; } }
.color-preview-label { margin-top: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text); text-align: center; }
.color-swatch-group { margin-bottom: var(--space-4); }
.color-swatch-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.color-swatch-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.color-swatch-row-more { display: none; margin-top: var(--space-2); }
.color-swatch-row-more.open { display: flex; }
.color-ral-more-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-primary);
}
.color-ral-more-toggle svg { transition: transform 240ms cubic-bezier(0.16,1,0.3,1); }
.color-ral-more-toggle.is-open svg { transform: rotate(180deg); }
.color-swatch { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 2px solid var(--color-border); padding: 0; cursor: pointer; box-sizing: border-box; }
.color-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-highlight); }
.sketch-actions-mini { display: flex; gap: var(--space-2); margin-left: auto; }
.sketch-canvas-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-5); background: #fff; line-height: 0; }
#sketchCanvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }

@media (max-width: 640px) {
  .sketch-toolbar { gap: var(--space-3); }
  .sketch-actions-mini { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ===== admin panel ===== */
.admin-shell { max-width: 1080px; margin-inline: auto; padding: var(--space-10) var(--space-6) var(--space-24); }
.admin-banner { background: var(--color-primary-highlight); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); font-size: var(--text-sm); color: var(--color-text); margin-bottom: var(--space-8); display: flex; gap: var(--space-3); align-items: flex-start; }
.admin-banner svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.admin-head h1 { font-size: var(--text-xl); }
.admin-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.admin-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.admin-list-wrap { display: flex; flex-direction: column; min-width: 0; }
.admin-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; }
.admin-list-item { width: 100%; text-align: left; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 2px; }
@media (hover: hover) and (pointer: fine) { .admin-list-item:hover { background: var(--color-surface-2); } }
.admin-list-item.active { background: var(--color-primary-highlight); border-left: 3px solid var(--color-primary); }
.admin-list-item .t { font-size: var(--text-sm); font-weight: 600; }
.admin-list-item .s { font-size: var(--text-xs); color: var(--color-text-muted); }
.admin-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); min-width: 0; }
.admin-panel-empty { text-align: center; padding: var(--space-24) var(--space-4); color: var(--color-text-muted); }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); min-width: 0; }
.admin-grid-2 .field { min-width: 0; }
.admin-photo-preview { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); margin-bottom: var(--space-3); display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); font-size: var(--text-xs); }
.admin-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-variant-table { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); }
.admin-variant-table th { background: var(--color-surface-2); font-size: var(--text-xs); text-align: left; padding: var(--space-2) var(--space-3); }
.admin-variant-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-divider); }
.admin-variant-table input { width: 100%; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); font-size: var(--text-xs); }
.admin-variant-row-remove { color: var(--color-error); font-size: var(--text-xs); font-weight: 600; }
.admin-actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.admin-danger-zone { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.admin-danger-zone h4 { font-size: var(--text-sm); color: var(--color-error); margin-bottom: var(--space-3); }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .admin-list { max-height: 300px; }
}


/* ===== variant structural layout ===== */

/* ---- variant A: dashboard structural layout ---- */
.main-nav-pills { gap: var(--space-2); align-items: center; }
.main-nav-pills a { border: 1px solid transparent; border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); }
@media (hover: hover) and (pointer: fine) { .main-nav-pills a:hover { background: var(--color-surface-2); color: var(--color-text); } }
.main-nav-pills a.active { background: var(--color-primary-highlight); color: var(--color-primary); }
.main-nav-pills a.active::after { display: none; }

/* ---- nav item hover dropdowns: soft fade + slide, no click needed ---- */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { flex-shrink: 0; transition: transform 320ms cubic-bezier(0.16,1,0.3,1); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 248px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.16,1,0.3,1), transform 260ms cubic-bezier(0.16,1,0.3,1), visibility 260ms;
  z-index: 110;
}
/* bridges the gap between the link and the panel so hover doesn't drop between them */
.nav-dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-dropdown a {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible { background: var(--color-surface-2); color: var(--color-primary); transform: translateX(2px); }
.nav-dropdown-cta { margin-top: var(--space-1); border-top: 1px solid var(--color-divider); padding-top: var(--space-3) !important; font-weight: 600 !important; color: var(--color-primary) !important; }
/* the first and last pill sit near the header's edges — a centred dropdown
   there would spill off-screen, so it hangs from the near edge instead */
.nav-item:first-child .nav-dropdown { left: 0; transform: translate(0, 6px); }
.nav-item:first-child:hover .nav-dropdown, .nav-item:first-child:focus-within .nav-dropdown { transform: translate(0, 0); }
.nav-item:last-child .nav-dropdown { left: auto; right: 0; transform: translate(0, 6px); }
.nav-item:last-child:hover .nav-dropdown, .nav-item:last-child:focus-within .nav-dropdown { transform: translate(0, 0); }
@media (max-width: 860px) { .nav-dropdown { display: none; } }

/* full-bleed photo hero: text column over a diagonal scrim on the real
   production photo — the composition the brief asked to keep */
.hero-dash { position: relative; min-height: 600px; padding: 0; display: flex; align-items: flex-start; overflow: hidden; background: var(--color-ink); }
.hero-dash-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* one-time entrance: the photo arrives as four quarters flying in from the
   corners and snapping together, then fades out to hand off to the real
   (slider-driven) image underneath — same photo, same crop, so the seam is
   invisible the moment they land. Plays once on first paint only. */
.hero-assemble { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-assemble-piece { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.hero-assemble-piece img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@keyframes heroAssemble {
  0% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(var(--s, 1)); }
  55% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
/* six diagonal slices following the pile's own back-to-front composition —
   each one a clean clip of the identical photo, so they tile back together
   with zero seam; only their arrival is staggered, back corner first. */
.hero-assemble-piece-1 { clip-path: polygon(0% 0%, 26% 0%, 0% 26%); --tx: -34px; --ty: -26px; --s: 0.88; animation: heroAssemble 1.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-assemble-piece-2 { clip-path: polygon(26% 0%, 52% 0%, 0% 52%, 0% 26%); --tx: -24px; --ty: -18px; --s: 0.91; animation: heroAssemble 1.5s cubic-bezier(0.16,1,0.3,1) 90ms forwards; }
.hero-assemble-piece-3 { clip-path: polygon(52% 0%, 58% 0%, 58% 20%, 0% 78%, 0% 52%); --tx: -14px; --ty: -10px; --s: 0.94; animation: heroAssemble 1.5s cubic-bezier(0.16,1,0.3,1) 180ms forwards; }
.hero-assemble-piece-4 { clip-path: polygon(58% 20%, 58% 46%, 4% 100%, 0% 100%, 0% 78%); --tx: 10px; --ty: 10px; --s: 0.96; animation: heroAssemble 1.5s cubic-bezier(0.16,1,0.3,1) 270ms forwards; }
.hero-assemble-piece-5 { clip-path: polygon(58% 46%, 58% 72%, 30% 100%, 4% 100%); --tx: 18px; --ty: 14px; --s: 0.97; animation: heroAssemble 1.5s cubic-bezier(0.16,1,0.3,1) 360ms forwards; }
.hero-assemble-piece-6 { clip-path: polygon(58% 72%, 58% 100%, 30% 100%); --tx: 26px; --ty: 18px; --s: 0.98; animation: heroAssemble 1.5s cubic-bezier(0.16,1,0.3,1) 450ms forwards; }
@media (prefers-reduced-motion: reduce) { .hero-assemble-piece { animation: none; opacity: 0; } }

/* periodic metallic glint sweeping across the photo — light catching the
   aluminium rather than the objects themselves moving */
.hero-dash-shine {
  position: absolute; top: -20%; left: -60%; width: 55%; height: 140%; z-index: 1;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-18deg);
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: heroShineSweep 7s ease-in-out infinite;
  animation-delay: 2.2s;
}
@keyframes heroShineSweep {
  0%, 18% { left: -60%; opacity: 0; }
  32% { opacity: 1; }
  52%, 100% { left: 130%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-dash-shine { animation: none; opacity: 0; } }

.hero-dash-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(27,31,36,0.95) 0%, rgba(27,31,36,0.82) 42%, rgba(27,31,36,0.42) 72%, rgba(27,31,36,0.14) 100%); z-index: 1; }
.hero-dash-content { position: relative; z-index: 2; max-width: 760px; margin-inline: 0; padding-block: var(--space-16); padding-left: clamp(var(--space-6), 4vw, var(--space-12)); }
.hero-dash-content h1 {
  color: #fff;
  font-size: var(--text-3xl);
  line-height: 1.02;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
.hero-dash-content p.lede { color: rgba(255,255,255,0.85); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }

/* actions sit centred, stacked directly above the slide nav row, clear of
   the headline column — and the outline button gets a real backing so it
   never blends into the photo behind it */
.hero-actions-centered {
  position: absolute; z-index: 4; left: 0; right: 0; width: max-content; max-width: 100%; margin-inline: auto;
  bottom: calc(var(--space-5) + 34px + var(--space-4));
  margin-bottom: 0;
  /* at widths where the two buttons don't fit on one line but the layout is
     still "desktop" (above 640px), flex-wrap stacks them — without this,
     the shorter second button left-aligns inside the shrink-to-fit centered
     box instead of centering under the first, and looks visibly off-center */
  justify-content: center;
}
.hero-actions-centered .btn-outline {
  background: rgba(27,31,36,0.55); backdrop-filter: blur(4px);
  border-color: rgba(255,255,255,0.35); color: #fff;
}
@media (hover: hover) and (pointer: fine) { .hero-actions-centered .btn-outline:hover { background: rgba(27,31,36,0.8); border-color: #fff; color: #fff; } }
@media (max-width: 640px) {
  .hero-dash { flex-direction: column; }
  .hero-actions-centered {
    position: static; transform: none; left: auto; bottom: auto;
    margin-top: var(--space-6); margin-bottom: var(--space-6);
    flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: var(--space-3);
    align-items: center; align-self: stretch; width: 100%;
    padding-inline: clamp(var(--space-6), 4vw, var(--space-12));
    box-sizing: border-box;
  }
  .hero-actions-centered .btn { flex: none; width: min(260px, 100%); text-align: center; box-sizing: border-box; }
}

/* hero slider: background photo and headline/lede crossfade together on a
   timer, like the rotating hero banners on trade sites in this category */
.hero-dash-bg { transition: opacity 300ms ease; }
.hero-dash-bg.is-fading { opacity: 0; }
.hero-slide-copy { transition: opacity 300ms ease; }
.hero-slide-copy.is-fading { opacity: 0; }

/* nav cluster: just the dots now — clicking one jumps straight to that
   slide, so the separate arrow buttons were a redundant second control.
   Sits clear of the headline column above it, never flush with the edge. */
.hero-slide-nav { position: absolute; z-index: 4; bottom: var(--space-5); left: 0; right: 0; width: max-content; max-width: 100%; margin-inline: auto; display: flex; align-items: center; padding-inline: var(--space-4); }
@media (max-width: 640px) {
  .hero-slide-nav { position: static; transform: none; left: auto; bottom: auto; justify-content: center; align-self: stretch; width: 100%; margin: 0 0 var(--space-8); }
}

.hero-slide-dots { display: flex; align-items: center; }
/* Visible pill/dot is small, but the clickable box is a full 40px square —
   background-clip keeps the padding transparent so only the pill paints.
   box-sizing is set explicitly because the sitewide reset is border-box,
   which would otherwise make the padding eat into the 8px width instead
   of adding a hit-area around it. */
.hero-slide-dot {
  box-sizing: content-box;
  width: 8px; height: 8px;
  padding: 16px;
  margin: 0;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.4);
  background-clip: content-box;
  transition: background var(--transition-interactive);
}
@media (hover: hover) and (pointer: fine) { .hero-slide-dot:hover { background: rgba(255,255,255,0.7); background-clip: content-box; } }
.hero-slide-dot.is-active { background: var(--color-primary); background-clip: content-box; }

/* ===== persistent "site in development" notice — permanent, not dismissible;
   sits below floating chat/CTA controls, which reserve space for it via
   the --notice-h custom property set in common.js ===== */
.site-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(27,31,36,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.site-notice svg { flex-shrink: 0; width: 15px; height: 15px; color: rgba(255,255,255,0.75); }
.site-notice span { font-size: var(--text-xs); color: rgba(255,255,255,0.85); line-height: 1.4; }

@media (max-width: 860px) {
  .hero-dash-content { max-width: none; }
}

/* signature entrance: headline, lede, actions and stats rise into place one
   after another as the hero scrolls into view — one authored moment, not
   the whole block appearing at once */
.hero-dash-content h1.reveal,
.hero-dash-content .lede.reveal {
  transform: translateY(26px);
  transition: opacity 960ms cubic-bezier(0.16, 1, 0.3, 1), transform 960ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-actions-centered.reveal {
  transform: translateY(26px);
  transition: opacity 960ms cubic-bezier(0.16, 1, 0.3, 1), transform 960ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-actions-centered.reveal.in-view { transform: none; }
.hero-dash-content h1.reveal { transform: translateY(34px) scale(0.97); transform-origin: left bottom; }
.hero-dash-content .lede.reveal { transition-delay: 160ms; }
.hero-actions-centered.reveal { transition-delay: 300ms; }
@media (max-width: 640px) {
  .hero-actions-centered.reveal, .hero-actions-centered.reveal.in-view { transform: translateY(26px); }
  .hero-actions-centered.reveal.in-view { transform: none; }
}

.cat-layout { display: block; }
.cat-layout-title { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.cat-toolbar .cat-search-wrap { margin-bottom: 0; flex: 1 1 280px; }
.cat-toolbar .cat-search { max-width: none; }
@media (max-width: 640px) {
  .cat-toolbar { flex-direction: column; align-items: stretch; }
}


/* ===== variant catalog skin ===== */

.cat-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.cat-card { border-radius: 14px; position: relative; border-top: 3px solid var(--color-primary); }
.cat-card-media { aspect-ratio: 1/1; }
@media (hover: hover) and (pointer: fine) { .cat-card:hover { transform: translateY(-4px); } }
.cat-price-badge, .cat-count, table.prod-table td.code, .variant-dl dd, .hero-stat b { font-family: var(--font-display); letter-spacing: -0.01em; }
.cat-card h3 { letter-spacing: -0.01em; }
.step-num { font-family: var(--font-mono); }

/* ===================================================================== */
/* ===== multi-page build: inner page hero banner ===== */
/* ===================================================================== */
.page-hero { position: relative; background: var(--color-ink); color: #fff; padding-block: clamp(var(--space-12), 8vw, var(--space-20)) clamp(var(--space-10), 6vw, var(--space-16)); overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(200,205,212,0.28), transparent 45%),
    radial-gradient(circle at 92% 85%, rgba(200,205,212,0.18), transparent 50%);
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero-breadcrumb { font-size: var(--text-xs); color: rgba(255,255,255,0.55); margin-bottom: var(--space-5); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.page-hero-breadcrumb a { color: rgba(255,255,255,0.78); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .page-hero-breadcrumb a:hover { color: #fff; } }
.page-hero .hero-eyebrow { color: var(--color-primary); }
.page-hero h1 { color: #fff; max-width: 22ch; font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.page-hero p.lede { color: rgba(255,255,255,0.8); max-width: 58ch; font-size: var(--text-lg); font-weight: 400; margin: 0; }
.page-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

/* ===== advantages: dark animated-warp banner (deliberate exception to the
   flat/no-gradient system, by request — matches the referenced Paper.design
   concept) ===== */
.adv-warp { position: relative; overflow: hidden; background: var(--color-ink); padding-block: clamp(var(--space-20), 12vw, var(--space-32)); text-align: center; }
.adv-warp-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.adv-warp-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adv-warp-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,31,36,0.55) 0%, rgba(27,31,36,0.7) 100%); }
.adv-warp-content { position: relative; z-index: 1; }
.adv-warp-head { max-width: 620px; margin-inline: auto; margin-bottom: var(--space-12); }
.adv-warp-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.45);
  margin-bottom: var(--space-4);
}
.adv-warp-head p { color: rgba(255,255,255,0.75); font-size: var(--text-base); margin: 0; }

/* four readings as liquid-glass cards: frosted, opaque-ish fill, fully
   rounded, no border/outline (deliberate exception to the flat system) */
.adv-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); text-align: left; }
.adv-rail.reveal { opacity: 1; transform: none; }
.adv-reading {
  position: relative;
  flex: 1 1 220px;
  max-width: 260px;
  padding: var(--space-6) var(--space-5);
  border-radius: 28px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.adv-reading-value { display: block; text-align: center; font-family: var(--font-body); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-bottom: var(--space-1); }
.adv-reading h3 { text-align: center; font-size: var(--text-base); font-weight: 600; color: #fff; margin-bottom: var(--space-2); }
.adv-reading p { font-size: var(--text-sm); color: rgba(255,255,255,0.68); margin: 0; }
.adv-rail .adv-reading { opacity: 0; transform: translateY(18px); transition: opacity 500ms cubic-bezier(0.16,1,0.3,1), transform 500ms cubic-bezier(0.16,1,0.3,1); }
.adv-rail.in-view .adv-reading { opacity: 1; transform: translateY(0); }
.adv-rail .adv-reading + .adv-reading { transition-delay: 90ms; }
.adv-rail .adv-reading + .adv-reading + .adv-reading { transition-delay: 180ms; }
.adv-rail .adv-reading + .adv-reading + .adv-reading + .adv-reading { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .adv-rail .adv-reading { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 700px) {
  .adv-rail { flex-direction: column; align-items: stretch; }
  .adv-reading { max-width: none; }
}

/* ===== home: featured categories + about teaser ===== */
.section-cta-row { display: flex; justify-content: center; margin-top: var(--space-10); }

/* the "how it works" CTA sits right after the dark step cards — give the
   button itself (not a full-width bar) the matching dark fill, and pull it
   in close since the scroll-linked reveal above already used up its own
   runway (see .howto-scroll min-height) */
#howto-preview .section-cta-row { margin-top: var(--space-12); }
#howto-preview .section-cta-row .btn-outline { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
#howto-preview { padding-bottom: var(--space-6); }
@media (hover: hover) and (pointer: fine) {
  #howto-preview .section-cta-row .btn-outline:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
}
/* entrance tuned for a button-sized element (see animate skill: scale from
   0.95, never 0; strong ease-out UI curve; short duration) instead of the
   generic section-level blur+translateY the shared .reveal class uses */
#howto-preview .section-cta-row.reveal { opacity: 0; transform: scale(0.95); filter: none; transition: opacity 240ms cubic-bezier(0.23,1,0.32,1), transform 240ms cubic-bezier(0.23,1,0.32,1); }
#howto-preview .section-cta-row.reveal.in-view { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { #howto-preview .section-cta-row.reveal { opacity: 1; transform: none; } }
.home-about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-16); align-items: center; }
.home-about-photo { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 4/3; }
.home-about-photo img { width: 100%; height: 100%; object-fit: cover; }
.home-about h2 { margin-bottom: var(--space-4); }
.home-about p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.home-about .pill-list { margin-top: var(--space-2); margin-bottom: var(--space-6); }
@media (max-width: 860px) { .home-about { grid-template-columns: 1fr; gap: var(--space-8); } }
.home-about.flip { grid-template-columns: 1.1fr 0.9fr; }
.home-about.flip .home-about-photo { order: 2; }
@media (max-width: 860px) { .home-about.flip .home-about-photo { order: -1; } }

/* signature reveal: photo and copy converge from opposite sides instead of rising together as one block */
.home-about.reveal { opacity: 1; transform: none; }
.home-about.reveal .home-about-photo,
.home-about.reveal > *:not(.home-about-photo) {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.home-about.reveal .home-about-photo { transform: translateX(-28px); }
.home-about.reveal > *:not(.home-about-photo) { transform: translateX(28px); transition-delay: 120ms; }
.home-about.flip.reveal .home-about-photo { transform: translateX(28px); }
.home-about.flip.reveal > *:not(.home-about-photo) { transform: translateX(-28px); }
.home-about.reveal.in-view .home-about-photo,
.home-about.reveal.in-view > *:not(.home-about-photo) { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .home-about.reveal .home-about-photo,
  .home-about.reveal > *:not(.home-about-photo),
  .home-about.flip.reveal .home-about-photo,
  .home-about.flip.reveal > *:not(.home-about-photo) { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-about.reveal .home-about-photo, .home-about.reveal > *:not(.home-about-photo) { opacity: 1; transform: none; transition: none; }
}

/* ===== CTA banner ===== */
/* full-bleed photo CTA: the section itself (not a rounded card) carries the
   real production photo edge-to-edge, with a scrim for text legibility */
#cta { position: relative; overflow: hidden; padding: 0; }
.cta-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta-photo-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(27,31,36,0.6) 0%, rgba(27,31,36,0.78) 100%); }
#cta .wrap { position: relative; z-index: 2; }
.cta-banner { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); text-align: center; }
.cta-banner h2 { color: #fff; font-size: var(--text-xl); max-width: 34ch; margin-inline: auto; margin-bottom: var(--space-4); }
.cta-banner p { color: rgba(255,255,255,0.75); max-width: 54ch; margin-inline: auto; margin-bottom: var(--space-8); font-size: var(--text-base); }
.cta-banner-actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.cta-banner-actions .btn-outline { border-color: rgba(255,255,255,0.3); color: #fff; }
@media (hover: hover) and (pointer: fine) { .cta-banner-actions .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; } }

#about-teaser .btn-outline { background: var(--color-text); border-color: var(--color-text); color: #fff; }
@media (hover: hover) and (pointer: fine) { #about-teaser .btn-outline:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } }

#openSketchBtn.btn-outline { background: var(--color-text); border-color: var(--color-text); color: #fff; }
@media (hover: hover) and (pointer: fine) { #openSketchBtn.btn-outline:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } }

/* ===== reveal-on-scroll ===== */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 860ms cubic-bezier(0.16,1,0.3,1), transform 860ms cubic-bezier(0.16,1,0.3,1), filter 860ms cubic-bezier(0.16,1,0.3,1); }
.reveal.in-view { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; } }

/* staggered children: rows settle into place one after another instead of the whole block fading as one */
.steps-flow.reveal, .faq-list.reveal, .spec-list.reveal, .adv-list.reveal, .cat-grid.reveal { opacity: 1; transform: none; }
.steps-flow .step-item, .faq-list .faq-item, .spec-list .spec-row, .adv-list > div, .cat-grid.reveal .cat-card {
  opacity: 0; transform: translateY(14px); filter: blur(5px);
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1), filter 700ms cubic-bezier(0.16,1,0.3,1);
}
.steps-flow.in-view .step-item, .faq-list.in-view .faq-item, .spec-list.in-view .spec-row, .adv-list.in-view > div, .cat-grid.reveal.in-view .cat-card { opacity: 1; transform: none; filter: blur(0); }
.steps-flow .step-item:nth-child(2), .faq-list .faq-item:nth-child(2), .spec-list .spec-row:nth-child(2), .adv-list > div:nth-child(2), .cat-grid.reveal .cat-card:nth-child(2) { transition-delay: 70ms; }
.steps-flow .step-item:nth-child(3), .faq-list .faq-item:nth-child(3), .spec-list .spec-row:nth-child(3), .adv-list > div:nth-child(3), .cat-grid.reveal .cat-card:nth-child(3) { transition-delay: 140ms; }
.steps-flow .step-item:nth-child(4), .faq-list .faq-item:nth-child(4), .spec-list .spec-row:nth-child(4), .adv-list > div:nth-child(4), .cat-grid.reveal .cat-card:nth-child(4) { transition-delay: 210ms; }
.steps-flow .step-item:nth-child(5), .faq-list .faq-item:nth-child(5), .cat-grid.reveal .cat-card:nth-child(5) { transition-delay: 280ms; }
.cat-grid.reveal .cat-card:nth-child(6) { transition-delay: 350ms; }
.cat-grid.reveal .cat-card:nth-child(7) { transition-delay: 420ms; }
.cat-grid.reveal .cat-card:nth-child(8) { transition-delay: 490ms; }
.cat-grid.reveal .cat-card:nth-child(9) { transition-delay: 560ms; }
.cat-grid.reveal .cat-card:nth-child(10) { transition-delay: 630ms; }
.cat-grid.reveal .cat-card:nth-child(11) { transition-delay: 700ms; }
.cat-grid.reveal .cat-card:nth-child(12) { transition-delay: 770ms; }
@media (prefers-reduced-motion: reduce) {
  .steps-flow .step-item, .faq-list .faq-item, .spec-list .spec-row, .adv-list > div, .cat-grid.reveal .cat-card { opacity: 1; transform: none; filter: none; transition: none; }
}
/* restore a snappy hover-speed transition for transform/border-color on top of the slower reveal-entrance transition above */
.faq-item.faq-item {
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform var(--transition-interactive), filter 700ms cubic-bezier(0.16,1,0.3,1), border-color var(--transition-interactive);
}

/* ===== small stat row (used on about/how-to pages) ===== */
.mini-stats { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); }
.mini-stats .hero-stat { flex: 1; min-width: 140px; }

/* ===== FAQ accordion (how-to-order page) ===== */
.faq-list { display: flex; flex-direction: column; margin-top: var(--space-10); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; }
.faq-item { border-top: 1px solid var(--color-border); }
.faq-item:first-child { border-top: none; }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-5) var(--space-6); background: transparent; border: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
@media (hover: hover) and (pointer: fine) { .faq-question:hover h3 { color: var(--color-primary); } }
.faq-question h3 { font-size: var(--text-base); margin: 0; transition: color var(--transition-interactive); }
.faq-toggle-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-toggle-icon::before, .faq-toggle-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--color-primary); transform: translate(-50%, -50%); transition: transform 200ms ease; }
.faq-toggle-icon::before { width: 14px; height: 2px; }
.faq-toggle-icon::after { width: 2px; height: 14px; }
.faq-item.is-open .faq-toggle-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.16,1,0.3,1); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer p { margin: 0; padding: 0 var(--space-6) var(--space-5); font-size: var(--text-sm); color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .faq-answer { transition: none; } .faq-toggle-icon::before, .faq-toggle-icon::after { transition: none; } }

/* ===== process CTA card (how-to-order page) ===== */
.process-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; background: var(--color-primary-highlight); border-radius: var(--radius-lg); padding: var(--space-8); margin-top: var(--space-12); }
.process-cta p { max-width: 44ch; font-size: var(--text-sm); color: var(--color-text); margin: 0; }
.process-cta-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 900px) { .page-hero-actions .btn { flex: 1 1 auto; } }

/* ===== mobile platform fixes ===== */
/* real form fields (.field, catalog filters, sketch tool, admin panel) sit below
   16px on small screens via the fluid type scale, which makes iOS Safari zoom
   the whole page into the input on focus and never zoom back out on blur */
@media (pointer: coarse) {
  .field input, .field textarea, .field select,
  .qty-stepper input,
  .cat-sort-wrap select, .cat-sort-wrap-vertical select,
  .variant-picker-head select,
  .sketch-dim-field input,
  .admin-variant-table input,
  .cat-search {
    font-size: 16px;
  }
}

/* ===== chat assistant ===== */
.chat-fab {
  position: fixed; right: var(--space-6); bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px) + var(--notice-h, 0px));
  z-index: 170; width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); transition: transform 160ms cubic-bezier(0.16,1,0.3,1), background var(--transition-interactive);
}
.chat-fab svg { width: 24px; height: 24px; }
.chat-fab svg[hidden] { display: none; }
.chat-fab:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .chat-fab:hover { background: var(--color-primary-hover); transform: scale(1.06); } }
@keyframes chatFabPulse { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(74,85,96,0.001); } 50% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(74,85,96,0.18); } }
.chat-fab.pulse { animation: chatFabPulse 1.6s ease-in-out 3; }
@media (max-width: 480px) { .chat-fab { width: 50px; height: 50px; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px) + var(--notice-h, 0px)); } .chat-fab svg { width: 21px; height: 21px; } }

.chat-widget {
  position: fixed; right: var(--space-6); bottom: calc(var(--space-6) + 56px + var(--space-3) + env(safe-area-inset-bottom, 0px) + var(--notice-h, 0px));
  z-index: 171; width: min(376px, calc(100vw - 2 * var(--space-4)));
  max-height: min(600px, calc(100vh - 140px)); max-height: min(600px, calc(100dvh - 140px));
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; opacity: 0; visibility: hidden; transform: scale(0.95) translateY(10px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.16,1,0.3,1), visibility 240ms;
}
.chat-widget.open { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 480px) {
  .chat-widget { right: var(--space-3); left: var(--space-3); width: auto; bottom: calc(var(--space-3) + 50px + var(--space-3) + env(safe-area-inset-bottom, 0px) + var(--notice-h, 0px)); max-height: min(72vh, 560px); }
}
@media (prefers-reduced-motion: reduce) { .chat-widget { transition: opacity 150ms ease; transform: none; } }

.chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4); background: var(--color-primary); color: #fff; flex-shrink: 0; }
.chat-head-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.01em; }
.chat-head-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 2px; }
.chat-status-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: #6FCB7F; flex-shrink: 0; }
.chat-close { color: #fff; }
@media (hover: hover) and (pointer: fine) { .chat-close:hover { background: rgba(255,255,255,0.16); } }
.chat-close:active { transform: scale(0.9); }

.chat-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); overscroll-behavior: contain; background: var(--color-bg); }
.chat-msg { max-width: 84%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5; opacity: 0; transform: translateY(6px) scale(0.98); animation: chatMsgIn 260ms cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes chatMsgIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-msg { animation: none; opacity: 1; transform: none; } }
.chat-msg.bot { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); }
.chat-msg.user { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: var(--radius-sm); }
.chat-msg p { margin: 0 0 var(--space-2); }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg ul { margin: var(--space-2) 0 0; padding-left: 1.1em; }

.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); border-bottom-left-radius: var(--radius-sm); }
.chat-typing span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-text-faint); animation: chatTypingBounce 1.1s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-typing span { animation: none; opacity: 0.8; } }

.chat-quick-replies { display: flex; flex-wrap: wrap; gap: var(--space-2); align-self: flex-start; max-width: 100%; }
.chat-quick-btn { font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: var(--radius-full); padding: 5px var(--space-3); background: var(--color-surface); }
@media (hover: hover) and (pointer: fine) { .chat-quick-btn:hover { background: var(--color-primary); color: #fff; } }
.chat-quick-btn:active { transform: scale(0.95); }

.chat-cat-card { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2); background: var(--color-surface-2); border-radius: var(--radius-md); margin-top: var(--space-2); text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { .chat-cat-card:hover { background: var(--color-primary-highlight); } }
.chat-cat-card-icon { width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--color-primary-highlight); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-cat-card-icon svg { width: 18px; height: 18px; }
.chat-cat-card-body { min-width: 0; }
.chat-cat-card-title { display: block; font-size: var(--text-xs); font-weight: 600; }
.chat-cat-card-sub { display: block; font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-input-row { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--color-border); flex-shrink: 0; background: var(--color-surface); }
.chat-input-row input { flex: 1; min-width: 0; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.chat-input-row input:focus { border-color: var(--color-primary); }
.chat-send-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .chat-send-btn:hover { background: var(--color-primary-hover); } }
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn:disabled { opacity: 0.5; }


/* ===== телефон: каталог и быстрые услуги — по две карточки в ряд ===== */
@media (max-width: 640px) {
  .direction-grid, .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .direction-card-body { padding: var(--space-3); gap: 2px; }
  .direction-card-body h3 { font-size: var(--text-sm); line-height: 1.25; overflow-wrap: anywhere; }
  .direction-card-count { font-size: 11px; }
  .cat-card-content { padding: var(--space-3); }
  .cat-card h3 { font-size: var(--text-sm); line-height: 1.25; overflow-wrap: anywhere; }
  .cat-card p { display: none; }
  .quick-services-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .quick-service-card { flex: none; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-3); }
  .quick-service-media { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .quick-service-label { font-size: var(--text-sm); line-height: 1.25; }
  .quick-service-desc > span { font-size: 11px; line-height: 1.35; }
}

/* ===== карточка товара (редизайн): фото + презентабельный блок информации ===== */
.cat-detail-grid.pd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-6), 4vw, var(--space-12)); align-items: start; margin-bottom: var(--space-10); }
.pd .cat-detail-photo { position: sticky; top: calc(72px + var(--space-6)); aspect-ratio: 1 / 1; border: 0; border-radius: 28px; box-shadow: 0 24px 60px rgba(27,31,36,0.16), 0 2px 6px rgba(27,31,36,0.06); background: var(--color-surface-2); }
.pd-badge { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 6px 18px rgba(27,31,36,0.16); }
.pd-badge:empty { display: none; }

.pd-info { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.pd .cat-detail-head { display: block; margin: 0; }
.pd-kicker { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.pd-kicker::before { content: ''; width: 28px; height: 2px; background: var(--color-primary); }
.pd .cat-detail-title, .pd .cat-detail-head > h2 { }
.pd .cat-detail-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-text); margin: 0 0 var(--space-3); }
.pd .cat-detail-head p { font-size: var(--text-base); line-height: 1.55; color: var(--color-text-muted); max-width: 52ch; margin: 0; }

/* блок цены и кнопок */
.pd .cat-detail-buybox { position: static; padding: var(--space-6); border-radius: 24px; background: linear-gradient(145deg, #ffffff, var(--color-primary-highlight)); border: 1px solid var(--color-border); box-shadow: 0 16px 40px rgba(74,85,96,0.10); }
.pd .cat-detail-buybox .variant-picker { padding: 0; background: none; border: 0; box-shadow: none; }
.pd-price { display: flex; flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-divider); }
.pd-price-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); }
.pd .pd-price-value { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-primary); }
.pd-price-hint { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; max-width: 44ch; }
.pd-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pd-cta .btn { width: 100%; justify-content: center; min-height: 52px; border-radius: 14px; font-size: var(--text-sm); gap: var(--space-2); }
.pd-cta .btn svg { flex-shrink: 0; }

/* характеристики */
.pd-heading { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); margin: 0 0 var(--space-3); }
#catDetailSpecs > div > .pd-heading:not(:first-child) { margin-top: var(--space-6); }
.pd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: 0; }
.pd-spec { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.pd-spec dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); }
.pd-spec dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.15; color: var(--color-text); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-1); }
.pd-spec dd small { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); font-family: var(--font-body); }
.pd-spec-unit { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); font-family: var(--font-body); }
.pd-note { margin: 0; padding: var(--space-5); border-radius: 16px; background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65; }

/* преимущества */
.pd-perks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; }
.pd-perks li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); }
.pd-perks svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary); margin-top: 1px; }
.pd-perks span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: var(--color-text-muted); }
.pd-perks b { font-size: var(--text-sm); color: var(--color-text); margin-bottom: 2px; }

/* услуги (без цены): блок обращения в той же карточке */
.pd .cat-detail-buybox .custom-cta { background: none; padding: 0; margin: 0; border-radius: 0; flex-direction: column; align-items: stretch; gap: var(--space-4); }
.pd .cat-detail-buybox .custom-cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pd .cat-detail-buybox .custom-cta-actions .btn { min-height: 52px; border-radius: 14px; width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .cat-detail-grid.pd { grid-template-columns: 1fr; gap: var(--space-6); }
  .pd .cat-detail-photo { position: relative; top: 0; aspect-ratio: 4 / 3; border-radius: 22px; }
}
@media (max-width: 640px) {
  .pd .cat-detail-buybox { padding: var(--space-5); border-radius: 20px; }
  .pd-cta, .pd .cat-detail-buybox .custom-cta-actions { grid-template-columns: 1fr; }
  .pd-perks { grid-template-columns: 1fr; }
  .pd-specs { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

/* внутри карточки товара: без вводного блока и заголовка раздела; фото и шрифты компактнее */
body.is-detail .page-hero, body.is-detail #catalog .section-head { display: none; }
body.is-detail #catalog { padding-top: calc(72px + var(--space-6)) !important; }
.cat-detail-grid.pd { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(var(--space-5), 3vw, var(--space-10)); }
.pd .cat-detail-photo { max-width: 400px; border-radius: 22px; }
.pd .cat-detail-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); }
.pd .cat-detail-head p { font-size: var(--text-sm); }
.pd .pd-price-value { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); }
.pd-spec dd { font-size: var(--text-base); }
@media (max-width: 960px) {
  .cat-detail-grid.pd { grid-template-columns: 1fr; }
  .pd .cat-detail-photo { max-width: none; aspect-ratio: 16 / 10; max-height: 260px; }
}
@media (max-width: 640px) {
  .pd .cat-detail-head h2 { font-size: 1.625rem; }
  .pd .pd-price-value { font-size: 1.75rem; }
  .pd .cat-detail-photo { max-height: 220px; }
}

/* телефон/планшет: сначала название, затем фото (карточка), затем цена и описание */
@media (max-width: 960px) {
  .cat-detail-grid.pd .pd-info { display: contents; }
  .cat-detail-grid.pd .cat-detail-head { order: 1; }
  .cat-detail-grid.pd .cat-detail-photo { order: 2; }
  .cat-detail-grid.pd #catDetailSpecs { order: 3; }
  .cat-detail-grid.pd .cat-detail-buybox { order: 4; }
  .cat-detail-grid.pd #catDetailPerks { order: 5; }
}

#catDetailPerks .pd-perks { margin-top: var(--space-6); }
#catDetailPerks .pd-note + .pd-perks { margin-top: var(--space-5); }
#catDetailPerks .pd-heading { margin-top: 0; }

/* поиск внутри направления: иконка внутри поля, без «пустоты» на телефоне */
.cat-toolbar .cat-search-wrap { position: relative; }
.cat-toolbar .cat-search-wrap svg { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-faint); pointer-events: none; }
.cat-toolbar .cat-search { padding-left: calc(var(--space-4) + 30px); }
@media (max-width: 640px) {
  .cat-toolbar .cat-search-wrap { flex: 0 0 auto; }
  .cat-toolbar { gap: var(--space-3); margin-bottom: var(--space-5); }
}
@media (max-width: 640px) {
  .cat-card-foot { flex-wrap: wrap; gap: 2px var(--space-2); }
  .cat-price-badge { font-size: 12px; }
}

/* =====================================================================
   АЛЮМИНИЕВАЯ ТЕМА (2026-10)
   Весь сайт переведён из тёмно-синей гаммы в цвета алюминия: светлое
   матовое серебро, анодированный графит, шлифованная сталь. Блок стоит
   в конце файла, чтобы перекрывать старые «синие» значения точечно.
   ===================================================================== */
body { background-color: var(--color-bg); }

/* кнопки — анодированный графит с бликом, как торец профиля */
.btn-primary {
  background: linear-gradient(180deg, #5B6672 0%, #46505B 55%, #3C454F 100%);
  border-color: #3A434C; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 2px rgba(27,31,36,0.18);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: linear-gradient(180deg, #4E5864 0%, #39424B 60%, #30373F 100%); border-color: #2E353C; }
}
.btn-outline { background: var(--alu-gradient); border-color: var(--color-border); color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover { border-color: #9AA2AB; color: var(--color-text); background: linear-gradient(180deg,#FFFFFF 0%,#DDE1E6 100%); }
}

/* шапка поверх hero и после прокрутки */
.site-header { background: color-mix(in oklab, #F3F4F6 92%, transparent); border-bottom-color: var(--color-border); }
.site-header.is-over-hero { background: rgba(42,47,53,0.70); border-bottom-color: rgba(255,255,255,0.10); }

/* фотографии заказчика показываются как есть, без фильтров */
.hero-dash { background: var(--color-ink); }
.hero-dash-scrim { background: linear-gradient(105deg, rgba(34,38,43,0.93) 0%, rgba(34,38,43,0.78) 42%, rgba(34,38,43,0.38) 72%, rgba(34,38,43,0.10) 100%); }
.hero-actions-centered .btn-outline { background: rgba(42,47,53,0.45); }
@media (hover: hover) and (pointer: fine) { .hero-actions-centered .btn-outline:hover { background: rgba(42,47,53,0.8); } }
.adv-warp-scrim { background: linear-gradient(180deg, rgba(34,38,43,0.55) 0%, rgba(34,38,43,0.72) 100%); }
.cta-photo-scrim { background: linear-gradient(180deg, rgba(34,38,43,0.6) 0%, rgba(34,38,43,0.8) 100%); }
.service-quick-media-scrim { background: linear-gradient(0deg, rgba(34,38,43,0.82) 0%, rgba(34,38,43,0.25) 55%, transparent 100%); }
.overlay, .modal-backdrop { background: rgba(27,31,36,0.5); }
.search-modal-backdrop { background: rgba(27,31,36,0.6); }

/* тёмные секции — шлифованный графит */
#howto-preview, .site-footer, .page-hero, .adv-warp { background: var(--alu-brushed), var(--alu-dark-gradient); }
.page-hero::before { background: radial-gradient(circle at 12% 15%, rgba(255,255,255,0.10), transparent 45%), radial-gradient(circle at 92% 85%, rgba(255,255,255,0.06), transparent 50%) !important; }
.page-hero .hero-eyebrow { color: var(--color-metal-light); }
.site-footer { color: #D3D8DE; }
.footer-brand p, .footer-bottom a { color: #A9B0B8; }
.footer-col a, .footer-col button { color: #D3D8DE; }
.hero-visual-foot { color: #D3D8DE; }

/* карточки и таблицы */
.cat-icon-chip { background: linear-gradient(180deg,#F7F8F9,#E3E6EA); border: 1px solid var(--color-border); }
table.prod-table th { background: linear-gradient(180deg, #4A535D, #383F47); }
.cat-card-media { background: var(--color-surface-2); }
.pd .cat-detail-buybox { background: linear-gradient(145deg, #ffffff, #E7EAEE); box-shadow: 0 16px 40px rgba(27,31,36,0.08); }
@keyframes chatFabPulse { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(74,85,96,0.001); } 50% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(74,85,96,0.20); } }
::selection { background: rgba(74,85,96,0.22); }

/* =====================================================================
   БЛОК «РЫНОК АЛЮМИНИЯ» (главная): LME, курсы ЦБ, часы МСК
   ===================================================================== */
.market { padding-block: clamp(var(--space-8), 4vw, var(--space-12)); }
.market-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: 16px;
  background: var(--alu-brushed), linear-gradient(165deg, #FBFBFC 0%, #ECEEF1 45%, #E1E4E8 100%);
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px -24px rgba(27,31,36,0.28);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.market-panel::before { /* мягкий блик по диагонали, как на шлифованном листе */
  content: ''; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: rotate(8deg); pointer-events: none;
}
.market-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-6); }
.market-kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.market-kicker::before { content: ''; width: 28px; height: 2px; background: linear-gradient(90deg, #8E969F, #C9CED4); }
.market-title h2 { font-size: var(--text-xl); margin-top: var(--space-2); }
.market-clock {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: linear-gradient(180deg, #fff, #EEF0F3); box-shadow: inset 0 1px 0 #fff;
}
.market-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #3B9D5D; box-shadow: 0 0 0 0 rgba(59,157,93,0.5); animation: mkPulse 2s infinite; flex-shrink: 0; }
@keyframes mkPulse { 0% { box-shadow: 0 0 0 0 rgba(59,157,93,0.45); } 70% { box-shadow: 0 0 0 8px rgba(59,157,93,0); } 100% { box-shadow: 0 0 0 0 rgba(59,157,93,0); } }
.market-clock-time { font-family: var(--font-mono); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.market-clock-meta { display: flex; flex-direction: column; line-height: 1.25; font-size: var(--text-xs); color: var(--color-text-muted); }
.market-clock-meta #mkDate::first-letter { text-transform: uppercase; }
.market-clock-tz { color: var(--color-text-faint); }

.market-grid { position: relative; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); grid-template-areas: "lme rub rub" "lme c1 c2" "lme c3 c3"; }
.market-grid > .mk-card-lme { grid-area: lme; }
.market-grid > .mk-card-rub { grid-area: rub; }
.market-grid > .mk-card:nth-child(3) { grid-area: c1; }
.market-grid > .mk-card:nth-child(4) { grid-area: c2; }
.market-grid > .mk-card:nth-child(5) { grid-area: c3; }
@media (min-width: 1100px) {
  .market-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); grid-template-areas: "lme rub rub rub" "lme c1 c2 c3"; }
}
@media (max-width: 860px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lme lme" "rub rub" "c1 c2" "c3 c3"; }
}
@media (max-width: 420px) {
  .market-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lme" "rub" "c1" "c2" "c3"; }
}

.mk-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-5); border-radius: 12px; background: #fff; border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(27,31,36,0.05);
}
.mk-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, #C4CAD1, #EEF0F3 40%, #A9B0B8 100%); }
.mk-card-lme { background: var(--alu-brushed), var(--alu-dark-gradient); color: #EEF0F3; border-color: #2A2F35; gap: var(--space-3); }
.mk-card-lme::before { background: linear-gradient(90deg, #8E969F, #E6E9ED 45%, #8E969F); }
.mk-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mk-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.mk-card-lme .mk-label { color: #D3D8DE; }
.mk-badge { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; color: #23272C; background: linear-gradient(180deg, #F4F6F8, #BFC5CC); }
.mk-cur { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #39414A; background: linear-gradient(180deg, #F7F8F9, #D5DADF); border: 1px solid var(--color-border); }
.mk-date { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }
.mk-card-lme .mk-date { color: #A9B0B8; }
.mk-value { display: flex; align-items: baseline; gap: 4px; font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.mk-value-xl { font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem); color: #fff; }
.mk-unit, .mk-unit-pre { font-size: 0.5em; font-weight: 600; color: var(--color-text-muted); }
.mk-card-lme .mk-unit, .mk-card-lme .mk-unit-pre { color: #BFC5CC; }
.mk-unit-pre { align-self: flex-start; margin-top: 0.35em; }
.mk-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--radius-full); }
.mk-delta small { font-weight: 600; opacity: 0.8; }
.mk-delta-up { color: #23753F; background: #E3F2E8; }
.mk-delta-down { color: #3E5C78; background: #E3EBF3; }
.mk-delta-flat { color: var(--color-text-muted); background: var(--color-surface-2); }
.mk-card-lme .mk-delta-up { color: #9FE0B3; background: rgba(76,175,108,0.16); }
.mk-card-lme .mk-delta-down { color: #A9C3DC; background: rgba(120,160,200,0.16); }
.mk-card-lme .mk-delta-flat { color: #D3D8DE; background: rgba(255,255,255,0.08); }
.mk-spark { color: #DCE0E5; margin-top: var(--space-1); }
.mk-spark svg { width: 100%; height: 70px; display: block; }
.mk-spark-legend { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 11px; color: #A9B0B8; margin-top: 4px; }
.mk-sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.12); }
.mk-sub dt { font-size: var(--text-xs); color: #A9B0B8; }
.mk-sub dd { font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.mk-foot-line { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.market.is-loading .mk-value span[id] { opacity: 0.6; transition: opacity 200ms; }

.market-foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.market-foot p { max-width: 80ch; }
.market-note { flex-basis: 100%; order: 3; color: #8A5A2B; }
.market-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: linear-gradient(180deg, #fff, #E9ECEF); font-weight: 600; font-size: var(--text-xs); color: var(--color-text); }
@media (hover: hover) and (pointer: fine) { .market-refresh:hover { border-color: #9AA2AB; } }
.market-refresh.is-spinning svg { animation: mkSpin 0.9s linear infinite; }
@keyframes mkSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .market-head { align-items: flex-start; }
  .market-clock { width: 100%; }
  .mk-card { padding: var(--space-4); }
}
.mk-sub-light { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top-color: var(--color-divider); }
.mk-sub-light dt { color: var(--color-text-faint); }
.mk-sub-light dd { color: var(--color-text); font-size: var(--text-sm); }
.mk-trend-up { color: #23753F; }
.mk-trend-down { color: #A8352A; }
@media (max-width: 600px) { .mk-sub-light { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   КАТАЛОГ (kc-*): дерево разделов слева, список типоразмеров,
   карточка с чертежом сечения H/B/S
   ===================================================================== */
.page-hero-compact { padding-block: clamp(var(--space-16), 9vw, 7.5rem) clamp(var(--space-8), 4vw, var(--space-12)); }
.page-hero-compact h1 { max-width: 26ch; }
body.kc-deep .page-hero { display: none; }
body.kc-deep #catalog.kc { padding-top: calc(72px + var(--space-6)); }
.kc { padding-top: var(--space-8); }

.kc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-6); }
.kc-crumbs a { color: var(--color-text-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .kc-crumbs a:hover { color: var(--color-text); text-decoration: underline; } }
.kc-crumbs [aria-current] { color: var(--color-text); font-weight: 600; }
.kc-crumb-sep { color: var(--color-metal); }

.kc-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(var(--space-6), 3vw, var(--space-10)); align-items: start; }
.kc-side-toggle { display: none; }

/* ---- сайдбар ---- */
.kc-side { position: sticky; top: 88px; max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 14px; background: var(--alu-brushed), linear-gradient(180deg, #FBFBFC, #ECEEF1); scrollbar-width: thin; }
.kc-search { display: flex; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; overflow: hidden; }
.kc-search input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font-size: 15px; background: transparent; }
.kc-search input:focus { outline: none; }
.kc-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(74,85,96,0.15); }
.kc-search button { padding: 0 14px; font-weight: 700; font-size: var(--text-sm); color: #fff; background: linear-gradient(180deg, #5B6672, #3C454F); }
.kc-side-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); }
.kc-tree-list, .kc-tree-sub { list-style: none; }
.kc-tree-group + .kc-tree-group { border-top: 1px solid var(--color-divider); }
.kc-tree-row { display: flex; align-items: center; }
.kc-tree-link { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 4px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; line-height: 1.3; }
.kc-tree-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); }
.kc-tree-group.is-active > .kc-tree-row .kc-tree-link { color: #000; }
.kc-tree-group.is-active > .kc-tree-row .kc-tree-link svg { color: var(--color-text); }
.kc-tree-toggle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--color-text-muted); }
.kc-tree-toggle svg { transition: transform 200ms ease; }
.kc-tree-group.is-open .kc-tree-toggle svg { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) { .kc-tree-toggle:hover { background: rgba(0,0,0,0.05); } .kc-tree-link:hover { color: #000; } }
.kc-tree-sub { display: none; padding: 0 0 var(--space-2) 28px; }
.kc-tree-group.is-open .kc-tree-sub { display: block; }
.kc-tree-cat { display: flex; justify-content: space-between; gap: var(--space-2); padding: 5px 8px; border-radius: 6px; font-size: 13.5px; color: var(--color-text-muted); text-decoration: none; line-height: 1.35; }
.kc-tree-cat small { font-size: 11px; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .kc-tree-cat:hover { background: rgba(255,255,255,0.8); color: var(--color-text); } }
.kc-tree-cat.is-active { background: #fff; color: var(--color-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-primary), 0 1px 2px rgba(0,0,0,0.06); }
.kc-side-cta { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border-radius: 10px; background: var(--alu-brushed), var(--alu-dark-gradient); color: #D3D8DE; font-size: var(--text-xs); line-height: 1.45; }
.kc-side-cta b { color: #fff; font-size: var(--text-sm); }
.kc-side-cta a { color: #fff; font-weight: 700; font-size: var(--text-sm); margin-top: 4px; text-decoration: none; }

/* ---- общий заголовок ---- */
.kc-main { min-width: 0; }
.kc-main.is-entering { animation: kcIn 260ms ease both; }
@keyframes kcIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kc-head { margin-bottom: var(--space-6); }
.kc-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.15; }
.kc-lede { margin-top: var(--space-3); color: var(--color-text-muted); max-width: 70ch; }
.kc-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 70ch; padding-left: var(--space-3); border-left: 2px solid var(--color-metal); }
.kc-kicker { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.kc-head-cat { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-6); align-items: center; }
.kc-head-pic { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); background: #fff; }
.kc-head-pic img { width: 100%; height: 100%; object-fit: cover; }
.kc-stats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.kc-stats li { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-radius: 10px; border: 1px solid var(--color-border); background: var(--alu-gradient); font-size: var(--text-xs); color: var(--color-text-muted); min-width: 130px; }
.kc-stats b { font-size: var(--text-lg); color: var(--color-text); font-variant-numeric: tabular-nums; }
.kc-sub-h { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }

/* ---- уровень 0: направления ---- */
.kc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.kc-group-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .kc-group-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(27,31,36,0.4); border-color: #AEB5BD; } .kc-group-card:hover .kc-group-arrow { transform: translateX(3px); color: var(--color-text); } }
.kc-group-media { aspect-ratio: 16/10; background: var(--color-surface-2); overflow: hidden; }
.kc-group-media img { width: 100%; height: 100%; object-fit: cover; }
.kc-group-body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4); }
.kc-group-title { font-weight: 700; line-height: 1.25; }
.kc-group-meta { font-size: var(--text-xs); color: var(--color-text-faint); }
.kc-group-arrow { position: absolute; right: var(--space-4); bottom: var(--space-4); color: var(--color-metal); font-weight: 700; transition: transform 200ms ease, color 200ms ease; }

/* ---- уровень 1: разделы направления ---- */
.kc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); }
.kc-cat-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease; }
@media (hover: hover) and (pointer: fine) { .kc-cat-card:hover { transform: translateY(-2px); border-color: #AEB5BD; box-shadow: 0 14px 30px -18px rgba(27,31,36,0.4); } }
.kc-cat-media { position: relative; aspect-ratio: 4/3; background: linear-gradient(180deg, #F7F8F9, #E4E7EB); overflow: hidden; }
.kc-cat-media img { width: 100%; height: 100%; object-fit: cover; }
.kc-cat-media.is-empty { display: grid; place-items: center; }
.kc-cat-shape { position: absolute; left: var(--space-3); bottom: var(--space-3); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,0.92); border: 1px solid var(--color-border); color: var(--color-text); }
.kc-cat-media.is-empty .kc-cat-shape { position: static; width: 96px; height: 96px; background: transparent; border: 0; color: var(--color-primary); }
.kc-cat-shape svg { width: 70%; height: 70%; }
.kc-cat-body { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); flex: 1; }
.kc-cat-title { font-weight: 700; line-height: 1.25; }
.kc-cat-sub { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }
.kc-cat-meta { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* ---- уровень 2: список типоразмеров ---- */
.kc-siblings { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.kc-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--alu-gradient); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.kc-chip:hover { border-color: #9AA2AB; } }
.kc-chip.is-active { background: linear-gradient(180deg, #5B6672, #3C454F); border-color: #3A434C; color: #fff; }
.kc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-2); }
.kc-filter { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.kc-filter select { min-width: 110px; padding: 8px 30px 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23525A64' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; -webkit-appearance: none; font-size: 15px; font-variant-numeric: tabular-nums; }
.kc-filter-reset { padding: 8px 12px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.kc-found { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); align-self: center; }

.kc-items { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: #fff; }
.kc-items-head, .kc-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) 130px 120px 130px; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); }
.kc-items-head { background: linear-gradient(180deg, #4A535D, #383F47); color: #fff; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-block: 10px; }
.kc-item + .kc-item { border-top: 1px solid var(--color-divider); }
.kc-item { transition: background 160ms ease; }
@media (hover: hover) and (pointer: fine) { .kc-item:hover { background: #F7F8FA; } }
.kc-item-thumb { width: 76px; height: 64px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--color-divider); background: #fff; color: var(--color-text); }
.kc-item-thumb svg { width: 100%; height: 100%; }
.kc-item-thumb .kc-shape-icon { width: 60%; height: 60%; }
.kc-item-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kc-item-name > a { font-weight: 700; color: var(--color-text); text-decoration: none; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .kc-item-name > a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.kc-item-code { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.kc-item-mass, .kc-item-price { font-size: var(--text-sm); font-variant-numeric: tabular-nums; font-weight: 600; }
.kc-item-price { color: var(--color-text-muted); font-weight: 500; }
.kc-item-k { display: none; }
.kc-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--alu-gradient); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .kc-more:hover { background: linear-gradient(180deg, #5B6672, #3C454F); color: #fff; border-color: #3A434C; } }
.kc-empty { padding: var(--space-6); color: var(--color-text-muted); }

/* ---- баннер «не нашли размер» ---- */
.kc-custom { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; margin-top: var(--space-8); padding: var(--space-6); border-radius: 14px; background: var(--alu-brushed), var(--alu-dark-gradient); color: #D3D8DE; }
.kc-custom h3 { color: #fff; font-size: var(--text-lg); margin-bottom: 4px; }
.kc-custom p { font-size: var(--text-sm); max-width: 60ch; }
.kc-custom-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, #F4F6F8, #BFC5CC); color: #2A2F35; }
.kc-custom-icon svg { width: 30px; height: 30px; }
.kc-custom-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kc-custom .btn-primary { background: linear-gradient(180deg, #FFFFFF, #D5DAE0); color: #23272C; border-color: #C9CED4; }
.kc-custom .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }

/* ---- уровень 3: карточка типоразмера ---- */
.kc-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-5), 3vw, var(--space-10)); align-items: start; }
.kc-product-figure { border: 1px solid var(--color-border); border-radius: 12px; background: #fff; padding: var(--space-6); aspect-ratio: 1 / 0.92; display: flex; flex-direction: column; justify-content: center; }
.kc-product-figure .pd-drawing { width: 100%; height: auto; max-height: 100%; }
.kc-figure-cap { text-align: center; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }
.kc-product-icon { display: grid; place-items: center; color: var(--color-primary); }
.kc-product-icon svg { width: 55%; height: auto; }
.pd-dim-label { fill: #1B1F24; stroke: none; font: 700 19px var(--font-body); }
.kc-product-info { display: flex; flex-direction: column; gap: var(--space-3); }
.kc-product-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2; }
.kc-product-sizes { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-product-custom { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
@media (hover: hover) and (pointer: fine) { .kc-product-custom:hover { color: #000; } }
.kc-hotline { padding: var(--space-5); border-radius: 10px; background: var(--color-surface-2); border: 1px solid var(--color-divider); }
.kc-hotline-compact { text-align: center; }
.kc-hotline p { font-weight: 600; font-size: var(--text-sm); }
.kc-hotline-phone { display: inline-block; margin-top: 4px; font-size: var(--text-lg); font-weight: 800; color: var(--color-text); text-decoration: none; letter-spacing: 0.01em; }
.kc-hotline-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.kc-calc { padding: var(--space-4); border: 1px dashed #B9C0C8; border-radius: 10px; }
.kc-calc label { display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.kc-calc-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kc-calc input { width: 110px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font-variant-numeric: tabular-nums; }
.kc-calc-eq { color: var(--color-text-faint); }
.kc-calc output { font-weight: 800; font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.kc-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-2); }
.kc-product-actions .btn { min-width: 240px; padding-block: 14px; font-size: var(--text-base); }
.kc-terms { color: var(--color-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.kc-specs-wrap, .kc-others { margin-top: var(--space-10); }
.kc-specs-wrap h2, .kc-others h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.kc-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: #fff; }
.kc-specs > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3); padding: 10px var(--space-4); border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.kc-specs > div:nth-child(odd) { border-right: 1px solid var(--color-divider); }
.kc-specs dt { color: var(--color-text-muted); }
.kc-specs dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.kc-others-table { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; }
.kc-table { width: 100%; font-size: var(--text-sm); }
.kc-table th { text-align: left; padding: 10px var(--space-4); background: linear-gradient(180deg, #4A535D, #383F47); color: #fff; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; }
.kc-table td { padding: 9px var(--space-4); border-top: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; }
.kc-table td.code { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }
.kc-table a { color: var(--color-text); }
.kc-table tr.is-current td { background: #EEF0F3; }
.kc-info .prod-table-wrap { margin-bottom: var(--space-5); }
.kc-pack { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.kc-pack-card { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.kc-pack-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 4px 0 8px; }

/* ---- адаптив ---- */
@media (max-width: 1100px) {
  .kc-items-head, .kc-item { grid-template-columns: 64px minmax(0, 1fr) 110px 120px; }
  .kc-items-head span:nth-child(4), .kc-item-price { display: none; }
  .kc-item-thumb { width: 64px; height: 56px; }
}
@media (max-width: 960px) {
  .kc-layout { grid-template-columns: minmax(0, 1fr); }
  .kc-side-toggle { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--alu-gradient); font-weight: 700; font-size: var(--text-sm); }
  .kc-side { display: none; position: static; max-height: none; }
  .kc-side.is-open { display: flex; }
  .kc-product { grid-template-columns: minmax(0, 1fr); }
  .kc-head-cat { grid-template-columns: minmax(0, 1fr); }
  .kc-head-pic { display: none; }
}
@media (max-width: 640px) {
  .kc-items-head { display: none; }
  .kc-item { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "t n" "t m" "g g"; row-gap: var(--space-2); }
  .kc-item-thumb { grid-area: t; align-self: start; }
  .kc-item-name { grid-area: n; }
  .kc-item-mass { grid-area: m; font-weight: 500; }
  .kc-item-k { display: inline; color: var(--color-text-faint); margin-right: 6px; }
  .kc-item-go { grid-area: g; }
  .kc-specs { grid-template-columns: minmax(0, 1fr); }
  .kc-specs > div:nth-child(odd) { border-right: 0; }
  .kc-custom { grid-template-columns: minmax(0, 1fr); }
  .kc-product-actions .btn { width: 100%; min-width: 0; }
  .kc-filter { flex: 1 1 40%; }
  .kc-filter select { width: 100%; }
  .kc-found { margin-left: 0; flex-basis: 100%; }
  .kc-product-figure { padding: var(--space-3); }
}
.kc-side > * { flex-shrink: 0; }
section.kc-specs-wrap, section.kc-others { padding-block: 0; }
.kc-h-root { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
@media (max-width: 640px) {
  .kc-siblings { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--space-6) * -1); padding: 2px var(--space-6) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .kc-siblings::-webkit-scrollbar { display: none; }
  .kc-chip { flex-shrink: 0; white-space: nowrap; }
}

/* =====================================================================
   АКЦЕНТ «ПЕТРОЛЬ» (2026-10-25): алюминий + графит + бирюзовый петроль.
   Глубокий сине-зелёный петроль спокойно сочетается с холодным серебром
   и графитом: инженерный, современный вид, белый текст хорошо читается.
   Чтобы сменить акцент, достаточно поменять переменные --accent-*.
   ===================================================================== */
:root {
  --accent-1: #178591;      /* светлая часть градиента */
  --accent-2: #0F6670;      /* основной (контраст с белым текстом ≥ 4.5) */
  --accent-3: #0B525A;      /* hover / нажатие */
  --accent-on-dark: #63C3CC;/* акцент на графитовом фоне */
  --accent-soft: #E2F1F2;   /* подложка */
  --color-primary: var(--accent-2);
  --color-primary-hover: var(--accent-3);
  --color-primary-active: #083F45;
  --color-primary-highlight: var(--accent-soft);
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-1) 0%, var(--accent-2) 60%, #0C5961 100%);
  border-color: #0C5A62; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px -2px rgba(15,102,112,0.45);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: linear-gradient(180deg, #127580 0%, var(--accent-3) 100%); border-color: #094A51; }
}
.hero-actions-centered .btn-primary { border-color: #0C5A62; }

/* тёмные секции: медные акценты */
#howto-preview { --howto-accent: var(--accent-on-dark); }
.footer-col h3 { color: var(--accent-on-dark); }
.page-hero .hero-eyebrow { color: var(--accent-on-dark); }

/* каталог */
.kc-search button { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); }
.kc-search:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(15,102,112,0.15); }
.kc-chip.is-active { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); border-color: #0C5A62; }
.kc-tree-cat.is-active { box-shadow: inset 3px 0 0 var(--accent-2), 0 1px 2px rgba(0,0,0,0.06); }
.kc-tree-group.is-active > .kc-tree-row .kc-tree-link svg, .kc-tree-group.is-open > .kc-tree-row .kc-tree-link svg { color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .kc-more:hover { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); border-color: #0C5A62; } }
.kc-product-custom { color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .kc-product-custom:hover { color: var(--accent-3); } }
.kc-hotline-phone { color: var(--accent-2); }
.kc-hotline-compact { background: linear-gradient(180deg, #F5F6F8, #EBEDF0); border-left: 3px solid var(--accent-2); }
.kc-group-card:hover .kc-group-arrow, .kc-group-arrow { color: var(--accent-2); }
.kc-note { border-left-color: var(--accent-2); }
.kc-custom .btn-primary { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: #fff; border-color: #0C5A62; }
.kc-side-cta a { color: var(--accent-on-dark); }
.kc-stats li b { color: var(--color-text); }
.kc-stats li:first-child { border-top: 3px solid var(--accent-2); }

/* блок котировок */
.market-kicker { color: var(--accent-2); }
.market-kicker::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-on-dark)); }
.mk-card-lme::before { background: linear-gradient(90deg, var(--accent-2), var(--accent-on-dark) 50%, var(--accent-2)); }
.mk-spark { color: var(--accent-on-dark); }
.mk-card-rub::before { background: linear-gradient(90deg, var(--accent-2), #9FD6DB 60%, #D6DAE0); }
.market-refresh svg { color: var(--accent-2); }
::selection { background: rgba(23,133,145,0.22); }
:focus-visible { outline-color: var(--accent-2); }

/* вес убран — в списке 4 колонки */
.kc-items-head, .kc-item { grid-template-columns: 76px minmax(0, 1fr) 140px 140px; }
@media (max-width: 1100px) {
  .kc-items-head, .kc-item { grid-template-columns: 64px minmax(0, 1fr) 120px 130px; }
  .kc-items-head span:nth-child(3), .kc-item-price { display: block; }
}
@media (max-width: 640px) {
  .kc-item { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "t n" "t p" "g g"; }
  .kc-item-price { grid-area: p; }
}

/* слайдер: активная точка — полоска с прогрессом 10 секунд */
.hero-slide-dot { padding: 14px 6px; transition: width 300ms ease, background 200ms ease; position: relative; }
.hero-slide-dot.is-active { width: 34px; background: rgba(255,255,255,0.35); background-clip: content-box; }
.hero-slide-dot.is-active::after {
  content: ''; position: absolute; left: 6px; top: 14px; height: 8px; width: 0; border-radius: var(--radius-full);
  background: var(--accent-on-dark, #63C3CC);
  animation: heroDotFill var(--hero-slide-ms, 10000ms) linear forwards;
}
#hero.is-paused .hero-slide-dot.is-active::after { animation-play-state: paused; }
@keyframes heroDotFill { to { width: 34px; } }
@media (prefers-reduced-motion: reduce) { .hero-slide-dot.is-active::after { animation: none; width: 34px; } }
/* калькулятор теоретического веса */
.kc-calc { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.kc-calc-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--space-4); margin-bottom: var(--space-3); }
.kc-calc-title { font-weight: 800; font-size: var(--text-sm); }
.kc-calc-unit { font-size: var(--text-sm); color: var(--color-text-muted); }
.kc-calc-unit b { color: var(--color-text); font-variant-numeric: tabular-nums; }
.kc-calc-row label { flex-basis: 100%; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-faint); text-transform: none; letter-spacing: 0; margin: 0; }
.kc-calc output { color: var(--accent-2, var(--color-primary)); }
.kc-calc-hint { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.site-notice a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ── Слайдер: круглые точки (как в прежней версии), без полоски загрузки ── */
.hero-slide-dot { box-sizing: content-box; width: 8px; height: 8px; padding: 16px; transition: background 200ms ease, transform 200ms ease; }
.hero-slide-dot.is-active { width: 8px; background: var(--accent-on-dark); background-clip: content-box; transform: scale(1.25); }
.hero-slide-dot.is-active::after { content: none; animation: none; }

/* ── Рынок алюминия: тот же макет, оформление под стиль сайта ── */
.market-panel { background: var(--color-surface-2, #F1F3F5); border-radius: 20px; box-shadow: 0 18px 40px -28px rgba(27,31,36,0.35); }
.market-panel::before { content: none; }
.market-kicker { font-family: var(--font-body); letter-spacing: 0.1em; color: var(--accent-2); }
.market-kicker::before { content: none; }
.market-title h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.market-clock { background: #fff; box-shadow: 0 1px 2px rgba(27,31,36,0.06); }
.market-clock-time, .mk-value, .mk-sub dd, .mk-delta, .mk-foot-line { font-family: var(--font-display); }
.market-clock-time { font-weight: 800; }
.mk-card { border-radius: 16px; box-shadow: 0 1px 2px rgba(27,31,36,0.05), 0 10px 24px -18px rgba(27,31,36,0.3); }
.mk-card::before, .mk-card-lme::before, .mk-card-rub::before { content: none; }
.mk-card-lme { background: radial-gradient(120% 90% at 100% 0%, rgba(99,195,204,0.22), transparent 60%), linear-gradient(160deg, #3B424A 0%, #2A2F35 60%, #22262B 100%); border-color: #2A2F35; }
.mk-badge { font-family: var(--font-display); color: var(--accent-on-dark); background: rgba(99,195,204,0.14); border: 1px solid rgba(99,195,204,0.35); border-radius: 6px; }
.mk-cur { font-family: var(--font-display); color: var(--accent-2); background: rgba(15,102,112,0.1); border: 0; }
.market-refresh { background: #fff; font-family: var(--font-body); }

/* ── «Заказ за 5 шагов»: подложка в стиле героя — графит + бирюзовый чертёж ── */
#howto-preview {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(99,195,204,0.16), transparent 62%),
    linear-gradient(160deg, #343B43 0%, #2A2F35 55%, #22262B 100%);
}
#howto-preview::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(99,195,204,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,195,204,0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* ── «Почему заказывают у нас»: текст слева, фото профиля на подсвеченной витрине справа ── */
.adv-show {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: clamp(var(--space-12), 8vw, var(--space-24, 7rem));
  background:
    radial-gradient(60% 80% at 90% 50%, rgba(99,195,204,0.18), transparent 65%),
    linear-gradient(160deg, #343B43 0%, #2A2F35 55%, #22262B 100%);
}
.adv-show::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(99,195,204,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(99,195,204,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
.adv-show-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: center; }
.adv-show-copy h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.01em; color: #fff; margin: 0 0 var(--space-4); text-wrap: balance; }
.adv-show-lede { font-size: var(--text-lg); color: rgba(255,255,255,0.72); max-width: 40ch; margin: 0 0 var(--space-8); }
.adv-show-list { list-style: none; margin: 0; padding: 0; }
.adv-show-list li { display: grid; grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr); gap: var(--space-5); align-items: baseline; padding-block: var(--space-4); border-top: 1px solid rgba(255,255,255,0.14); }
.adv-show-list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.adv-show-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--accent-on-dark); font-variant-numeric: tabular-nums; }
.adv-show-list h3 { font-size: var(--text-base); font-weight: 700; color: #fff; margin: 0 0 2px; }
.adv-show-list p { font-size: var(--text-sm); color: rgba(255,255,255,0.66); margin: 0; }
.adv-show-stage { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #E9ECEF; box-shadow: 0 30px 60px -28px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08); text-decoration: none; }
.adv-show-stage img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms cubic-bezier(0.16,1,0.3,1); }
.adv-show-cap { position: absolute; left: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 14px; border-radius: var(--radius-full); background: rgba(34,38,43,0.88); color: #fff; font-size: var(--text-sm); font-weight: 700; }
.adv-show-cap svg { color: var(--accent-on-dark); }
@media (hover: hover) and (pointer: fine) { .adv-show-stage:hover img { transform: scale(1.03); } }
.adv-show-stage:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }
@media (max-width: 900px) {
  .adv-show-grid { grid-template-columns: minmax(0, 1fr); }
  .adv-show-stage { order: -1; }
  .adv-show-stage img { aspect-ratio: 16 / 10; }
  .adv-show::before { -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
}
@media (max-width: 520px) { .adv-show-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* ── Подвал: та же бирюзовая сетка, но глубже графит ── */
.site-footer {
  isolation: isolate;
  background:
    radial-gradient(55% 70% at 8% 100%, rgba(99,195,204,0.14), transparent 65%),
    linear-gradient(180deg, #262B31 0%, #1E2227 55%, #171A1E 100%);
}
.site-footer::before {
  z-index: -1; opacity: 1; mix-blend-mode: normal;
  background-image: linear-gradient(rgba(99,195,204,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(99,195,204,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}

/* ── Три разные подложки: «5 шагов» — тёмная сетка, «Почему заказывают у нас» — светлое серебро с точками, подвал — графит с линиями прессования ── */
.adv-show {
  color: var(--color-text);
  background:
    radial-gradient(60% 80% at 92% 50%, rgba(15,102,112,0.10), transparent 65%),
    linear-gradient(160deg, #F7F8F9 0%, #ECEFF2 55%, #E2E6EA 100%);
}
.adv-show::before {
  background-image: radial-gradient(rgba(42,47,53,0.16) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 75%);
}
.adv-show-copy h2 { color: var(--color-text); }
.adv-show-lede { color: var(--color-text-muted); }
.adv-show-list li { border-top-color: rgba(42,47,53,0.16); }
.adv-show-list li:last-child { border-bottom-color: rgba(42,47,53,0.16); }
.adv-show-value { color: var(--accent-2); }
.adv-show-list h3 { color: var(--color-text); }
.adv-show-list p { color: var(--color-text-muted); }
.adv-show-stage { box-shadow: 0 30px 60px -30px rgba(27,31,36,0.45), 0 0 0 1px rgba(42,47,53,0.08); }
@media (max-width: 900px) {
  .adv-show::before { -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
}

.site-footer {
  background:
    linear-gradient(90deg, transparent, rgba(99,195,204,0.55) 50%, transparent) top / 100% 1px no-repeat,
    radial-gradient(50% 60% at 50% 0%, rgba(99,195,204,0.10), transparent 70%),
    linear-gradient(180deg, #23282E 0%, #1A1E23 100%);
}
.site-footer::before {
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 9px);
  background-size: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}

/* ── Услуги завода: графитовые карточки с бирюзовой кромкой, блик по металлу, попап ── */
.quick-services-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 var(--space-5); }
.quick-service-card {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(120% 120% at 100% 0%, rgba(99,195,204,0.16), transparent 55%), linear-gradient(160deg, #3A424A 0%, #2A2F35 60%, #22262B 100%);
  border: 0; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(99,195,204,0.32), 0 1px 0 rgba(255,255,255,0.08) inset, 0 14px 28px -16px rgba(27,31,36,0.6);
  padding-right: calc(var(--space-5) + 28px);
}
.quick-service-card::before { /* блик, как свет по анодированному металлу */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.16) 50%, transparent 65%);
  transform: translateX(-120%);
}
.quick-service-card::after { /* стрелка «открыть» */
  content: ''; position: absolute; right: var(--space-4); top: var(--space-4); z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(99,195,204,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363C3CC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16 8M9 8h7v7'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), background-color 200ms ease;
}
.quick-service-media, .quick-service-body { position: relative; z-index: 2; }
.quick-service-media { border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.12); }
.quick-service-label { color: #fff; }
.quick-service-desc > span { color: rgba(255,255,255,0.7); }
@media (hover: hover) and (pointer: fine) {
  .quick-service-card:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(99,195,204,0.75), 0 1px 0 rgba(255,255,255,0.1) inset, 0 22px 36px -16px rgba(15,102,112,0.55); }
  .quick-service-card:hover::before { transform: translateX(120%); transition: transform 900ms cubic-bezier(0.16,1,0.3,1); }
  .quick-service-card:hover::after { transform: translate(2px,-2px); background-color: rgba(99,195,204,0.3); }
  .quick-service-card:hover .quick-service-media img { transform: scale(1.1); }
}
.quick-service-card:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 3px; }
.quick-service-card:active { transform: scale(0.98); }
.quick-service-card:active::before { transform: translateX(120%); transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
@media (prefers-reduced-motion: no-preference) {
  .quick-services-row.reveal .quick-service-card { opacity: 0; transform: translateX(-28px); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1), box-shadow 340ms cubic-bezier(0.16,1,0.3,1); }
  .quick-services-row.reveal.in-view .quick-service-card { opacity: 1; transform: none; }
  .quick-services-row.reveal.in-view .quick-service-card:nth-child(2) { transition-delay: 90ms, 90ms, 0ms; }
  .quick-services-row.reveal.in-view .quick-service-card:nth-child(3) { transition-delay: 180ms, 180ms, 0ms; }
  .quick-services-row.reveal.in-view .quick-service-card:nth-child(4) { transition-delay: 270ms, 270ms, 0ms; }
  @media (hover: hover) and (pointer: fine) { .quick-services-row.reveal.in-view .quick-service-card:hover { transition-delay: 0ms; transform: translateY(-6px); } }
}
@media (max-width: 640px) {
  .quick-service-card { padding-right: var(--space-3); }
  .quick-service-card::after { right: var(--space-2); top: var(--space-2); }
  .quick-services-title { font-size: var(--text-lg); }
}

/* попап: крестик поверх фото, кнопки по центру */
.service-quick-card .modal-close { z-index: 5; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: rgba(27,31,36,0.78); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.service-quick-card .modal-close svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .service-quick-card .modal-close:hover { background: var(--accent-2); border-color: #fff; } }
.service-quick-card .modal-close:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
.service-quick-actions { justify-content: center; }
.service-quick-actions .btn { flex: 1 1 0; min-width: 200px; max-width: 260px; }
@media (max-width: 640px) { .service-quick-actions .btn { max-width: none; width: 100%; flex: none; } }

/* попап: плотный чёрный градиент снизу фото — заголовок и подпись читаются на любом снимке */
.service-quick-media-scrim { background: linear-gradient(0deg, rgba(8,10,12,0.96) 0%, rgba(8,10,12,0.86) 28%, rgba(8,10,12,0.5) 58%, rgba(8,10,12,0.08) 85%, transparent 100%); }
.service-quick-media-text h3 { text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.service-quick-subtitle { color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }

/* карточки услуг: текст начинается с одной линии — заголовок занимает ровно две строки, описание под ним */
.quick-service-card { align-items: flex-start; }
.quick-service-body { align-self: stretch; }
.quick-service-label { display: flex; align-items: flex-start; min-height: calc(2 * 1.25em); line-height: 1.25; }
.quick-service-desc { margin-top: var(--space-2); }
@media (max-width: 640px) {
  .quick-service-card { align-items: stretch; }
  .quick-service-label { min-height: calc(2 * 1.25em); }
}

/* заголовок и описание — всегда на одном расстоянии; все названия в две строки, поэтому описания на одной линии */
.quick-service-label { display: block; min-height: 0; }
.quick-service-desc { margin-top: var(--space-2); }

/* ══ Каталог: единый язык — графит, бирюза, без глянца и полос ══ */
.page-hero-solid { background: #22262B; }
.page-hero-solid::before { display: none !important; }
.page-hero-solid h1 { color: #fff; }
.page-hero-solid p.lede { color: rgba(255,255,255,0.86); }

/* «Что вы ищете?» и статистика */
.kc-head .kc-stats { gap: 0; margin-top: var(--space-6); border: 1px solid var(--color-border); border-radius: 14px; background: #fff; overflow: hidden; }
.kc-stats li { flex: 1 1 150px; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: var(--space-4) var(--space-5); border-left: 1px solid var(--color-divider); }
.kc-stats li:first-child { border-top: 0; border-left: 0; }
.kc-stats b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.01em; color: var(--accent-2); }
@media (max-width: 640px) { .kc-stats li { flex: 1 1 45%; border-left: 0; border-top: 1px solid var(--color-divider); } .kc-stats li:nth-child(-n+2) { border-top: 0; } }

/* Левая панель: поиск и разделы */
.kc-side { background: #fff; border-radius: 16px; box-shadow: 0 10px 28px -20px rgba(27,31,36,0.35); }
.kc-search { border-radius: 12px; background: var(--color-surface-2, #F1F3F5); border-color: transparent; }
.kc-search:focus-within { background: #fff; border-color: var(--accent-2); }
.kc-search button { background: var(--accent-2); }
.kc-side-title { color: var(--color-text-muted); letter-spacing: 0.08em; }
.kc-tree-link svg { display: none; }
.kc-tree-link { padding: 10px 10px; border-radius: 10px; color: var(--color-text); }
.kc-tree-group + .kc-tree-group { border-top: 0; }
@media (hover: hover) and (pointer: fine) { .kc-tree-link:hover { background: var(--color-surface-2, #F1F3F5); } }
.kc-tree-group.is-active > .kc-tree-row .kc-tree-link { background: rgba(15,102,112,0.10); color: var(--accent-2); font-weight: 700; }
.kc-tree-sub { padding-left: var(--space-3); }
.kc-tree-cat { border-radius: 8px; }
.kc-tree-cat.is-active { background: var(--accent-2); color: #fff; box-shadow: none; }
.kc-tree-cat.is-active small { color: rgba(255,255,255,0.78); }
.kc-side-cta { background: #22262B; border-radius: 12px; }
.kc-side-toggle { background: #fff; border-radius: 12px; }

/* карточки разделов: без плашек-иконок на фото */
.kc-cat-media:not(.is-empty) .kc-cat-shape { display: none; }

/* «Не нашли нужный размер?» — сплошная подложка, телефон сплошной */
.kc-custom { background: #22262B; border-radius: 16px; }
.kc-custom-icon { background: rgba(99,195,204,0.14); color: var(--accent-on-dark); border: 1px solid rgba(99,195,204,0.35); }
.kc-custom .btn-outline { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
@media (hover: hover) and (pointer: fine) { .kc-custom .btn-outline:hover { background: #0C5A62; border-color: #0C5A62; } }

/* переключатель разделов направления вместо ряда чипов */
.kc-switch { display: flex; align-items: stretch; gap: var(--space-2); margin-bottom: var(--space-5); }
.kc-switch-step { flex: none; width: 48px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--color-border); color: var(--color-text); }
.kc-switch-step svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .kc-switch-step:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; } }
.kc-switch-box { position: relative; flex: 1 1 auto; min-width: 0; }
.kc-switch-btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l ." "n c"; column-gap: var(--space-3); align-items: center; text-align: left; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--color-border); }
.kc-switch-btn[aria-expanded="true"] { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(15,102,112,0.15); }
.kc-switch-label { grid-area: l; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.kc-switch-name { grid-area: n; font-weight: 800; font-size: var(--text-base); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-switch-btn > svg { grid-area: c; grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; color: var(--accent-2); transition: transform 200ms ease; }
.kc-switch-btn[aria-expanded="true"] > svg { transform: rotate(180deg); }
.kc-switch-panel { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); padding: var(--space-2); background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(27,31,36,0.45); }
.kc-switch-panel[hidden] { display: none; }
.kc-switch-find { width: 100%; padding: 10px 12px; margin-bottom: var(--space-2); border: 0; border-radius: 10px; background: var(--color-surface-2, #F1F3F5); font-size: 15px; }
.kc-switch-find:focus { outline: 2px solid var(--accent-2); outline-offset: 0; background: #fff; }
.kc-switch-list { list-style: none; margin: 0; padding: 0; max-height: min(52vh, 360px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.kc-switch-item { display: block; padding: 9px 12px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.kc-switch-item:hover { background: var(--color-surface-2, #F1F3F5); } }
.kc-switch-item.is-active { background: var(--accent-2); color: #fff; }
.kc-switch-btn:focus-visible, .kc-switch-step:focus-visible, .kc-switch-item:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.kc-chip { background: #fff; }
.kc-stats li:last-child b { font-size: var(--text-base); white-space: nowrap; }
.kc-switch-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* статистика: компактная тёмная плашка */
.kc-head .kc-stats { display: inline-flex; flex-wrap: nowrap; max-width: 100%; margin-top: var(--space-5); border: 0; border-radius: 12px; background: #22262B; box-shadow: 0 10px 24px -16px rgba(27,31,36,0.6), 0 0 0 1px rgba(99,195,204,0.28); overflow: hidden; }
.kc-stats li { flex: 0 1 auto; padding: 10px 18px; border-left: 1px solid rgba(255,255,255,0.12); font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,0.68); }
.kc-stats li:first-child { border-left: 0; }
.kc-stats b { font-size: var(--text-base); font-weight: 800; color: var(--accent-on-dark); }
.kc-stats li:last-child b { font-size: var(--text-sm); }
@media (max-width: 640px) {
  .kc-head .kc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .kc-stats li { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding: 10px 14px; }
  .kc-stats li:nth-child(-n+2) { border-top: 0; }
  .kc-stats li:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.12); }
}

/* направления и разделы — одинаковые карточки, по четыре в ряд */
.kc-groups, .kc-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1180px) { .kc-groups, .kc-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kc-groups, .kc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kc-group-card, .kc-cat-card { border-radius: 14px; }
.kc-group-media, .kc-cat-media { aspect-ratio: 4 / 3; }
.kc-group-body, .kc-cat-body { padding: var(--space-4); min-height: 132px; }
.kc-group-body { padding-right: var(--space-10); }
.kc-group-title, .kc-cat-title { font-size: var(--text-base); font-weight: 700; line-height: 1.25; }
.kc-group-meta, .kc-cat-meta { font-size: var(--text-xs); }
@media (max-width: 520px) {
  .kc-group-body, .kc-cat-body { padding: var(--space-3); min-height: 0; }
  .kc-group-body { padding-right: var(--space-8); }
  .kc-group-title, .kc-cat-title { font-size: var(--text-sm); }
  .kc-cat-sub { display: none; }
}

/* «Не нашли нужный размер?»: без иконки, кнопки обычной насыщенности */
.kc-custom { grid-template-columns: minmax(0, 1fr) auto; }
.kc-custom .btn { font-weight: 500; }
@media (max-width: 760px) { .kc-custom { grid-template-columns: minmax(0, 1fr); } }
.kc-group-body, .kc-cat-body { min-height: 150px; }
@media (max-width: 520px) { .kc-group-body, .kc-cat-body { min-height: 0; } }
.kc-group-title, .kc-cat-title, .kc-cat-sub { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.kc-group-title, .kc-cat-title { -webkit-line-clamp: 2; }
.kc-cat-sub { -webkit-line-clamp: 2; }
.kc-group-body, .kc-cat-body { min-height: 164px; }
@media (max-width: 520px) { .kc-group-body, .kc-cat-body { min-height: 0; } }
.kc-head .kc-stats li b { color: var(--accent-on-dark); }
@media (max-width: 640px) { .kc-stats li:last-child b { white-space: normal; font-size: var(--text-sm); } }

/* статистика: светлая плашка с бирюзовым контуром */
.kc-head .kc-stats { background: #fff; border: 1.5px solid var(--accent-2); box-shadow: 0 10px 24px -18px rgba(15,102,112,0.55); }
.kc-stats li { color: var(--color-text-muted); border-left-color: rgba(15,102,112,0.22); }
.kc-head .kc-stats li b { color: var(--accent-2); }
@media (max-width: 640px) {
  .kc-stats li { border-top-color: rgba(15,102,112,0.22); }
  .kc-stats li:nth-child(even) { border-left-color: rgba(15,102,112,0.22); }
}

/* «Не нашли нужный размер?»: две одинаковые кнопки, «Позвонить» — прозрачное стекло */
.kc-custom .btn { min-width: 200px; height: 50px; padding: 0 24px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; }
.kc-custom .btn-outline { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.32); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
@media (hover: hover) and (pointer: fine) { .kc-custom .btn-outline:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); } }
@media (max-width: 760px) { .kc-custom .btn { flex: 1 1 0; min-width: 0; } }
.kc-custom .btn { min-width: 220px; }
@media (max-width: 760px) { .kc-custom .btn { min-width: 0; } }

/* боковая панель: компактный блок «Не нашли» и запас снизу, чтобы он не прятался под плашкой уведомления */
.kc-side { max-height: calc(100dvh - 104px - 56px); padding-bottom: calc(var(--space-4) + 12px); }
.kc-side-cta { gap: 2px; padding: var(--space-3) var(--space-4); border-radius: 12px; font-size: 12px; }
.kc-side-cta b { font-size: 13px; }
.kc-side-cta a { margin-top: 2px; font-size: 13px; }
.kc-side::after { content: ''; flex: none; height: 56px; }
@media (max-width: 900px) { .kc-side::after { display: none; } }

/* ══ Список размеров: без чёрной шапки, строки-карточки, контурная кнопка ══ */
.kc-items { border: 0; background: transparent; gap: var(--space-2); overflow: visible; }
.kc-items-head { background: transparent; color: var(--color-text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; padding: 0 var(--space-4) var(--space-2); border-bottom: 1px solid var(--color-border); border-radius: 0; }
.kc-item { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; transition: border-color 160ms ease, box-shadow 200ms ease, transform 200ms ease; }
.kc-item + .kc-item { border-top: 1px solid var(--color-border); }
@media (hover: hover) and (pointer: fine) { .kc-item:hover { border-color: rgba(15,102,112,0.55); box-shadow: 0 12px 24px -18px rgba(15,102,112,0.55); } }
.kc-item-thumb { border: 0; border-radius: 10px; background: var(--color-surface-2, #F1F3F5); }
.kc-item-name > a { font-family: var(--font-display); font-size: var(--text-base); }
.kc-item-code { font-size: 12px; color: var(--color-text-muted); }
.kc-item-price { color: var(--color-text-muted); font-weight: 600; }
.kc-more { width: auto; min-width: 132px; padding: 9px 16px; border-radius: 10px; border: 1.5px solid var(--accent-2); background: transparent; color: var(--accent-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; box-shadow: none; }
.kc-more span { display: inline-block; transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) and (pointer: fine) {
  .kc-more:hover, .kc-item:hover .kc-more { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
  .kc-more:hover span { transform: translateX(3px); }
}
.kc-more:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (max-width: 760px) { .kc-more { width: 100%; } }

/* ══ Страница размера ══ */
.kc-product { gap: clamp(var(--space-6), 4vw, var(--space-12)); }
.kc-product-figure { border-radius: 20px; border: 1px solid var(--color-border); background: #fff; box-shadow: 0 18px 36px -28px rgba(27,31,36,0.4); }
.kc-figure-cap { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }
.kc-product-info { gap: var(--space-4); }
.kc-product-info .kc-kicker { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-full); background: rgba(15,102,112,0.10); color: var(--accent-2); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; }
.kc-product-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.kc-size-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kc-size-chips li { padding: 7px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--color-border); font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.kc-buy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: 16px; background: #fff; border: 1.5px solid var(--accent-2); box-shadow: 0 14px 30px -22px rgba(15,102,112,0.6); }
.kc-buy-price { display: flex; flex-direction: column; gap: 2px; }
.kc-buy-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.kc-buy-price b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.01em; color: var(--color-text); }
.kc-buy-price small { font-size: var(--text-xs); color: var(--color-text-muted); }
.kc-buy-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kc-buy-actions .btn { flex: 1 1 180px; height: 50px; padding: 0 20px; font-size: var(--text-sm); font-weight: 600; }
.kc-buy-actions .btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.kc-buy-actions .btn-outline { background: transparent; border: 1.5px solid var(--accent-2); color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) {
  .kc-buy-actions .btn-primary:hover { background: #0C5A62; border-color: #0C5A62; }
  .kc-buy-actions .btn-outline:hover { background: rgba(15,102,112,0.08); }
}
.kc-buy-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: var(--text-sm); }
.kc-buy-links .kc-product-custom { font-weight: 600; font-size: var(--text-sm); }
.kc-buy-links .kc-terms { color: var(--color-text-muted); }
.kc-calc { border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface-2, #F1F3F5); }
.kc-calc input { width: 120px; padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-text); font-family: var(--font-body); font-weight: 700; }
.kc-calc input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(15,102,112,0.15); }
.kc-calc output { font-family: var(--font-display); font-weight: 800; }

/* другие размеры раздела — без чёрной шапки, как список */
.kc-others-table { border-radius: 16px; border-color: var(--color-border); }
.kc-table th { background: var(--color-surface-2, #F1F3F5); color: var(--color-text-muted); letter-spacing: 0.08em; font-size: 11.5px; font-weight: 700; }
.kc-table td.code { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); }
.kc-table tr.is-current td { background: rgba(15,102,112,0.08); }
.kc-others h2, .kc-specs-wrap h2 { font-family: var(--font-display); font-weight: 800; }

/* «Весь каталог» — в шапке блока, справа от заголовка */
#featured-catalog .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-8); flex-wrap: wrap; }
.btn-catalog-all { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 10px; border: 1.5px solid var(--accent-2); background: transparent; color: var(--accent-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.btn-catalog-all span { display: inline-block; transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) and (pointer: fine) {
  .btn-catalog-all:hover { background: var(--accent-2); color: #fff; }
  .btn-catalog-all:hover span { transform: translateX(3px); }
}
.btn-catalog-all:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (max-width: 640px) { .btn-catalog-all { width: 100%; } }
.btn-catalog-all { background: var(--accent-2); border-color: var(--accent-2); color: #fff; box-shadow: 0 10px 22px -12px rgba(15,102,112,0.7); }
@media (hover: hover) and (pointer: fine) { .btn-catalog-all:hover { background: #0C5A62; border-color: #0C5A62; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(15,102,112,0.8); } }
.btn-catalog-all { transition: background 160ms ease, transform 200ms ease, box-shadow 200ms ease; }

/* кнопка-стекло на тёмных подложках */
.btn-glass, .page-hero .btn-outline { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.32); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .btn-glass:hover, .page-hero .btn-outline:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); color: #fff; } }
.page-hero-actions .btn { height: 50px; padding: 0 24px; font-size: var(--text-sm); font-weight: 600; }
.page-hero-actions .btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
@media (hover: hover) and (pointer: fine) { .page-hero-actions .btn-primary:hover { background: #0C5A62; border-color: #0C5A62; } }

/* «Доставка, оплата и сроки»: градиент графит → глубокий бирюзовый */
#terms { background: radial-gradient(70% 90% at 100% 0%, rgba(99,195,204,0.22), transparent 60%), linear-gradient(135deg, #2A2F35 0%, #1F4F56 60%, #0F6670 100%); }
#terms .spec-icon { background: rgba(99,195,204,0.16); border: 1px solid rgba(99,195,204,0.4); color: var(--accent-on-dark); }
#terms .section-head p, #terms .spec-row p { color: rgba(255,255,255,0.78); }

/* «Остались вопросы?» — кнопки в стиле сайта */
.process-cta { border-radius: 16px; background: rgba(15,102,112,0.08); border: 1px solid rgba(15,102,112,0.22); }
.process-cta p { font-weight: 600; }
.process-cta .btn { height: 50px; padding: 0 24px; font-size: var(--text-sm); font-weight: 600; min-width: 190px; }
.process-cta .btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.process-cta .btn-outline { background: transparent; border: 1.5px solid var(--accent-2); color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) {
  .process-cta .btn-primary:hover { background: #0C5A62; border-color: #0C5A62; }
  .process-cta .btn-outline:hover { background: var(--accent-2); color: #fff; }
}
@media (max-width: 640px) { .process-cta .btn { flex: 1 1 100%; } }

/* «Доставка, оплата и сроки»: три карточки, выплывают слева по очереди */
#terms .spec-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: 0; }
#terms .spec-row { position: relative; overflow: hidden; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); box-shadow: 0 0 0 1px rgba(99,195,204,0.32), inset 0 1px 0 rgba(255,255,255,0.12), 0 16px 30px -20px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#terms .spec-row h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-2); }
#terms .spec-icon { width: 48px; height: 48px; border-radius: 14px; }
@media (max-width: 900px) { #terms .spec-list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  #terms .spec-list.reveal .spec-row { opacity: 0; transform: translateX(-32px); filter: none; transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
  #terms .spec-list.reveal.in-view .spec-row { opacity: 1; transform: none; }
  #terms .spec-list.reveal.in-view .spec-row:nth-child(2) { transition-delay: 120ms; }
  #terms .spec-list.reveal.in-view .spec-row:nth-child(3) { transition-delay: 240ms; }
}

/* «Работали с нами?»: тёмная панель, текст слева, кнопка справа */
.review-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4) var(--space-10);
  margin-top: var(--space-10); padding: clamp(var(--space-6), 3.5vw, var(--space-10)); text-align: left; border-radius: 20px;
  background: radial-gradient(60% 120% at 100% 50%, rgba(99,195,204,0.22), transparent 65%), linear-gradient(135deg, #343B43 0%, #2A2F35 55%, #22262B 100%);
  box-shadow: 0 0 0 1px rgba(99,195,204,0.28), 0 24px 44px -28px rgba(27,31,36,0.6);
}
.review-cta h3 { grid-column: 1; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.01em; margin: 0; }
.review-cta p { grid-column: 1; max-width: 58ch; margin: 0; color: rgba(255,255,255,0.74); }
.review-cta .btn-review { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.btn-review { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 12px; border: 1px solid var(--accent-on-dark); background: var(--accent-on-dark); color: #1B1F24; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; box-shadow: 0 14px 26px -14px rgba(99,195,204,0.8); transition: transform 200ms ease, background 160ms ease, box-shadow 200ms ease; }
.btn-review svg { transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) and (pointer: fine) { .btn-review:hover { background: #8AD5DC; border-color: #8AD5DC; transform: translateY(-2px); } .btn-review:hover svg { transform: translateX(3px); } }
.btn-review:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .review-cta { grid-template-columns: minmax(0, 1fr); }
  .review-cta .btn-review { grid-column: 1; grid-row: auto; width: 100%; }
}

/* ══ Этапы производства: графитовая панель, шкала с узлами ══ */
#production-steps {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  background: radial-gradient(60% 100% at 100% 0%, rgba(99,195,204,0.20), transparent 62%), linear-gradient(145deg, #343B43 0%, #2A2F35 55%, #22262B 100%);
  box-shadow: 0 0 0 1px rgba(99,195,204,0.26), 0 24px 44px -28px rgba(27,31,36,0.6);
}
#production-steps .terms-heading { text-align: left; color: #fff; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; margin-bottom: var(--space-8); }
#production-steps .steps-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); margin-top: 0; }
#production-steps .steps-flow::before, #production-steps .steps-flow::after { display: block; top: 22px; left: 22px; right: 0; height: 2px; }
#production-steps .steps-flow::before { background: rgba(255,255,255,0.16); }
#production-steps .steps-flow::after { background: var(--accent-on-dark); transform: scaleX(0); transform-origin: left; transition: transform 1100ms cubic-bezier(0.16,1,0.3,1) 200ms; }
#production-steps .steps-flow.in-view::after { transform: scaleX(1); }
#production-steps .step-item { text-align: left; }
#production-steps .step-num { margin: 0 0 var(--space-5); width: 44px; height: 44px; background: #2A2F35; border: 2px solid var(--accent-on-dark); color: var(--accent-on-dark); font-family: var(--font-display); font-weight: 800; box-shadow: 0 0 0 6px #2A2F35; }
#production-steps .step-item:last-child .step-num { background: var(--accent-on-dark); color: #1B1F24; }
#production-steps .step-item h3 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-2); }
#production-steps .step-item p { color: rgba(255,255,255,0.72); font-size: var(--text-sm); line-height: 1.5; }
@media (max-width: 1000px) {
  #production-steps .steps-flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  #production-steps .steps-flow::before, #production-steps .steps-flow::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  #production-steps .steps-flow::after { transform: scaleY(0); transform-origin: top; }
  #production-steps .steps-flow.in-view::after { transform: scaleY(1); }
  #production-steps .step-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; }
  #production-steps .step-num { grid-row: 1 / span 2; margin: 0; }
  #production-steps .step-item h3 { align-self: end; }
}
@media (prefers-reduced-motion: reduce) { #production-steps .steps-flow::after { transform: none; transition: none; } }

/* ══ Этапы производства v2: два столбца, крупные номера, чипы сплавов ══ */
#production-steps .steps-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: clamp(var(--space-8), 5vw, var(--space-16)); row-gap: 0; }
#production-steps .steps-flow::before, #production-steps .steps-flow::after { display: none; }
#production-steps .step-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--space-5); align-items: start; padding-block: var(--space-6); border-top: 1px solid rgba(255,255,255,0.16); }
#production-steps .step-item:nth-child(3), #production-steps .step-item:nth-child(5) { border-bottom: 1px solid rgba(255,255,255,0.16); }
#production-steps .step-num { grid-row: 1 / span 3; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; justify-content: flex-start; align-items: flex-start; font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; line-height: 1; letter-spacing: -0.02em; color: var(--accent-on-dark); }
#production-steps .step-item:last-child .step-num { background: none; color: var(--accent-on-dark); }
#production-steps .step-item h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--space-2); }
#production-steps .step-item p { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 44ch; }
.alloy-chips { grid-column: 2; list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.alloy-chips li { padding: 4px 10px; border-radius: 8px; background: rgba(99,195,204,0.14); border: 1px solid rgba(99,195,204,0.35); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  #production-steps .steps-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  #production-steps .step-item:nth-child(3) { border-bottom: 0; }
  #production-steps .step-item:nth-child(5) { border-bottom: 1px solid rgba(255,255,255,0.16); }
  #production-steps .step-item { grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-4); padding-block: var(--space-5); }
  #production-steps .step-num { font-size: 2.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  #production-steps .steps-flow.reveal .step-item { opacity: 0; transform: translateX(-24px); filter: none; transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
  #production-steps .steps-flow.reveal.in-view .step-item { opacity: 1; transform: none; }
  #production-steps .steps-flow.reveal.in-view .step-item:nth-child(2) { transition-delay: 100ms; }
  #production-steps .steps-flow.reveal.in-view .step-item:nth-child(3) { transition-delay: 200ms; }
  #production-steps .steps-flow.reveal.in-view .step-item:nth-child(4) { transition-delay: 300ms; }
  #production-steps .steps-flow.reveal.in-view .step-item:nth-child(5) { transition-delay: 400ms; }
}
#production-steps .step-item { display: block; position: relative; padding-left: 84px; }
#production-steps .step-num { position: absolute; left: 0; top: var(--space-6); grid-row: auto; }
.alloy-chips { grid-column: auto; }
@media (max-width: 860px) {
  #production-steps .step-item { padding-left: 68px; }
  #production-steps .step-num { top: var(--space-5); }
}

/* ══ «О компании → Производство»: фото со статистикой, факты и применение ══ */
.ab-photo { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: clamp(var(--space-8), 5vw, var(--space-12)); box-shadow: 0 24px 44px -30px rgba(27,31,36,0.55); }
.ab-photo > img { display: block; width: 100%; aspect-ratio: 16 / 7; min-height: 320px; object-fit: cover; }
.ab-stats { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; background: rgba(27,31,36,0.74); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.12); }
.ab-stat { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: 2px; }
.ab-stat + .ab-stat { border-left: 1px solid rgba(255,255,255,0.16); }
.ab-stat b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--accent-on-dark); font-variant-numeric: tabular-nums; }
.ab-stat span { font-size: var(--text-xs); color: rgba(255,255,255,0.8); }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--space-8), 5vw, var(--space-16)); align-items: start; }
.ab-main h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 var(--space-4); }
.ab-lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 54ch; margin: 0 0 var(--space-8); }
.ab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); margin: 0; }
.ab-facts > div { padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.ab-facts dt { font-weight: 800; font-size: var(--text-base); color: var(--accent-2); margin-bottom: var(--space-1); }
.ab-facts dd { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.ab-use { padding: clamp(var(--space-5), 2.5vw, var(--space-8)); border-radius: 16px; background: #fff; border: 1px solid var(--color-border); box-shadow: 0 14px 30px -24px rgba(27,31,36,0.4); }
.ab-use h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.ab-use ul { list-style: none; margin: 0; padding: 0; }
.ab-use li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-top: 1px solid var(--color-divider); font-size: var(--text-sm); color: var(--color-text); }
.ab-use li::before { content: ''; position: absolute; left: 0; top: 1.25em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
@media (max-width: 900px) {
  .ab-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-photo > img { aspect-ratio: 4 / 3; min-height: 0; }
  .ab-stats { position: static; border-radius: 0; background: #22262B; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .ab-stat { padding: var(--space-4) var(--space-3); }
  .ab-stat span { font-size: 11.5px; }
}
@media (max-width: 560px) { .ab-facts { grid-template-columns: minmax(0, 1fr); } }

/* ══ Формы сайта: единый стиль (контакты, окно заявки, отзыв) ══ */
.form-card { border-radius: 20px; border: 1px solid var(--color-border); background: #fff; padding: clamp(var(--space-5), 3vw, var(--space-8)); box-shadow: 0 18px 36px -28px rgba(27,31,36,0.45); }
.form-card > h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: var(--text-xl) !important; }
.field { margin-bottom: var(--space-4); }
.field label { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--color-text); margin-bottom: 6px; }
.field input:not([type="file"]):not([type="checkbox"]), .field textarea, .field select {
  height: 50px; padding: 0 16px; background: #fff; color: var(--color-text);
  border: 1.5px solid #C9CFD6; border-radius: 12px; font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #8A929B; }
@media (hover: hover) and (pointer: fine) { .field input:not([type="file"]):not([type="checkbox"]):hover, .field textarea:hover, .field select:hover { border-color: #9AA2AB; } }
.field input:not([type="file"]):not([type="checkbox"]):focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(15,102,112,0.14); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-error); box-shadow: 0 0 0 4px rgba(190,50,40,0.10); }

/* файл: зона со светло-бирюзовой заливкой и контурной кнопкой */
.field input[type="file"] { display: block; width: 100%; padding: 14px 16px; border: 1.5px dashed rgba(15,102,112,0.55); border-radius: 14px; background: rgba(15,102,112,0.05); color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .field input[type="file"]:hover { background: rgba(15,102,112,0.09); border-color: var(--accent-2); } }
.field input[type="file"]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.field input[type="file"]::file-selector-button { height: 40px; margin-right: var(--space-4); padding: 0 18px; border: 1.5px solid var(--accent-2); border-radius: 10px; background: #fff; color: var(--accent-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .field input[type="file"]::file-selector-button:hover { background: var(--accent-2); color: #fff; } }
.field-hint { font-size: 12px; color: var(--color-text-muted); }

/* галочка согласия */
form .field-consent { align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
form .field-consent input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid #9AA2AB; border-radius: 6px; background: #fff; cursor: pointer; display: inline-grid; place-content: center; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
form .field-consent input[type="checkbox"]::after { content: ''; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform 140ms cubic-bezier(0.16,1,0.3,1); }
form .field-consent input[type="checkbox"]:checked { background: var(--accent-2); border-color: var(--accent-2); }
form .field-consent input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
form .field-consent input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(15,102,112,0.2); }
form .field-consent label { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
form .field-consent label a { color: var(--accent-2); font-weight: 600; }

/* кнопка отправки */
form button[type="submit"].btn-primary, form .btn-block.btn-primary { height: 54px; padding: 0 24px; border-radius: 12px; border: 1px solid var(--accent-2); background: var(--accent-2); color: #fff; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; box-shadow: 0 12px 24px -14px rgba(15,102,112,0.8); transition: background 160ms ease, transform 200ms ease, box-shadow 200ms ease; }
@media (hover: hover) and (pointer: fine) { form button[type="submit"].btn-primary:hover { background: #0C5A62; border-color: #0C5A62; transform: translateY(-1px); } }
form button[type="submit"].btn-primary:active { transform: scale(0.99); }
form button[type="submit"].btn-primary:disabled { opacity: 0.7; cursor: progress; transform: none; }
form button[type="submit"].btn-primary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.form-status { font-size: var(--text-sm); }
@media (max-width: 480px) {
  .field input[type="file"] { padding: 10px 12px; font-size: 12px; }
  .field input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: 0 14px; font-size: 13px; }
}

/* ══ Курсы: четыре валюты; на телефоне две колонки ══ */
.market-grid > .mk-card:nth-child(6) { grid-area: c4; }
.market-grid { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); grid-template-areas: "lme rub rub" "lme c1 c2" "lme c3 c4"; }
@media (min-width: 1100px) {
  .market-grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); grid-template-areas: "lme rub rub rub rub" "lme c1 c2 c3 c4"; }
}
@media (max-width: 860px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lme rub" "c1 c2" "c3 c4"; gap: var(--space-3); }
}
@media (max-width: 420px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lme rub" "c1 c2" "c3 c4"; }
}
@media (max-width: 600px) {
  .market-panel { padding: var(--space-4); }
  .mk-card { padding: var(--space-3); gap: 6px; }
  .mk-card-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mk-label { font-size: 12.5px; line-height: 1.25; flex-wrap: wrap; }
  .mk-date { font-size: 11px; white-space: normal; }
  .mk-value { font-size: 1.45rem; }
  .mk-value-xl { font-size: 1.9rem; }
  .mk-card .mk-sub { display: none; }
  .mk-delta { font-size: 11.5px; padding: 2px 6px; flex-wrap: wrap; }
  .mk-badge { font-size: 10px; }
}

/* ══ Мобильная версия ══ */
/* «Разделы и поиск»: крупная бирюзовая кнопка под заголовком, липнет к верху при прокрутке */
@media (max-width: 900px) {
  .kc-side-toggle { position: sticky; top: 72px; z-index: 60; width: 100%; height: 54px; justify-content: center; gap: 10px; margin: var(--space-5) 0 var(--space-5); padding: 0 20px; border: 1px solid var(--accent-2); border-radius: 14px; background: var(--accent-2); color: #fff; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; box-shadow: 0 12px 24px -12px rgba(15,102,112,0.85); }
  .kc-side-toggle svg { width: 20px; height: 20px; }
  .kc-side-toggle:active { transform: scale(0.99); }
  .kc-side-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
  body.kc-side-open { overflow: hidden; }
  body.kc-side-open .kc-side-toggle { position: fixed; top: 72px; left: var(--space-4); right: var(--space-4); width: auto; z-index: 96; margin: 0; background: #0C5A62; }
  .kc-side.is-open { position: fixed; z-index: 95; top: 0; left: 0; right: 0; bottom: 0; max-height: none; border: 0; border-radius: 0; padding: 136px var(--space-4) calc(var(--space-6) + 56px); overflow: auto; overscroll-behavior: contain; box-shadow: none; }
  .kc-side::after { display: none; }
}

/* «Профиль по чертежу» и «Позвонить» не выходят за рамки */
@media (max-width: 760px) {
  .kc-custom { padding: var(--space-5); }
  .kc-custom-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .kc-custom .btn { width: 100%; min-width: 0; white-space: normal; text-align: center; }
}

/* главная, «Почему заказывают у нас»: на телефоне без фото и ссылки на каталог */
@media (max-width: 900px) { .adv-show-stage { display: none; } }

/* отзывы: две колонки на телефоне */
@media (max-width: 640px) {
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .review-card { padding: var(--space-3); }
  .review-card p, .review-card blockquote { font-size: 13px; line-height: 1.45; }
}
@media (max-width: 600px) {
  .mk-value, .mk-value-xl { flex-wrap: nowrap; white-space: nowrap; }
  .mk-value-xl { font-size: 1.75rem; }
  .mk-unit, .mk-unit-pre { font-size: 0.55em; }
}
@media (max-width: 760px) { .kc-custom .btn { flex: none; height: auto; min-height: 50px; padding-block: 12px; } }

/* ══ Курсы на телефоне: одинаковая иерархия карточек, часы в две строки ══ */
@media (max-width: 600px) {
  .market-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); width: 100%; padding: 10px 14px; border-radius: 14px; }
  .market-clock-time { font-size: 1.35rem; line-height: 1.1; }
  .market-clock-meta { flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 12px; line-height: 1.35; }
  .market-clock-tz::before { content: '·'; margin-right: 6px; color: var(--color-text-faint); }

  .mk-card { padding: 12px; gap: 6px; }
  .mk-card-top { gap: 4px; }
  .mk-label { min-height: 2.5em; align-items: flex-start; font-size: 12.5px; line-height: 1.25; gap: 6px; }
  .mk-label .mk-cur { flex: none; }
  .mk-date { font-size: 11px; line-height: 1.25; color: var(--color-text-muted); }
  .mk-card > div[id$="Delta"] { margin-top: auto; align-self: flex-start; max-width: 100%; }
  .mk-delta { white-space: nowrap; flex-wrap: nowrap; gap: 3px; font-size: 11.5px; padding: 3px 8px; }
  .mk-delta small { font-size: 10px; }
  .mk-card-lme .mk-label { min-height: 2.5em; }
}
@media (max-width: 600px) {
  .tz-city { display: none; }
  .mk-card-top { min-height: 62px; justify-content: flex-start; }
  .mk-label { min-height: 0; }
}
@media (max-width: 600px) { .mk-card-top { min-height: 80px; } }


/* шторка «Разделы и поиск»: кнопка «Вернуться в каталог» статична вверху шторки */
@media (max-width: 900px) {
  .kc-side.is-open { padding-top: 72px; padding-bottom: calc(var(--space-6) + 56px); }
  body.kc-side-open .kc-side .kc-side-toggle { position: sticky; top: 0; left: auto; right: auto; width: 100%; z-index: 5; margin: 0 0 var(--space-4); background: #0C5A62; box-shadow: 0 10px 20px -10px rgba(12,90,98,0.8); }
}

/* шторка: кнопка — неподвижная шапка, прокручивается только список */
.kc-side-scroll { display: contents; }
@media (max-width: 900px) {
  .kc-side.is-open { display: flex; flex-direction: column; gap: var(--space-4); overflow: hidden; padding: 72px var(--space-4) 0; }
  body.kc-side-open .kc-side .kc-side-toggle { position: static; flex: none; width: 100%; margin: 0; }
  .kc-side.is-open .kc-side-scroll { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--space-6) + 64px); scrollbar-width: thin; }
  .kc-side.is-open .kc-side-scroll > * { flex-shrink: 0; }
  html:has(body.kc-side-open) { overflow: hidden; }
}
@media (max-width: 900px) {
  body.kc-side-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
}

/* ══ Чертежи INVISIBLE: картинка вместо автоматической схемы ══ */
.kc-drawing-img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.kc-item-thumb .kc-thumb-img { width: 100%; height: 100%; object-fit: contain; padding: 3px; background: #fff; border-radius: 8px; }
.kc-product-desc { margin: var(--space-2) 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; max-width: 60ch; }

/* ===== мобильная версия: правки v150 ===== */
@media (max-width: 640px) {
  /* названия направлений переносим по слогам, а не рвём слово посередине («Общестроительн / ые») */
  .direction-card-body h3, .cat-card h3 { overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
  /* точки слайдера: 9 штук не помещались в ширину и уходили под кнопку чата */
  .hero-slide-dots { max-width: calc(100% - 70px); flex-wrap: wrap; row-gap: 2px; }
  .hero-slide-dot { padding: 12px 6px; }
  /* плашка внизу экрана — компактнее, чтобы занимала меньше места */
  .site-notice { gap: 6px; padding: 6px 12px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .site-notice svg { display: none; }
  .site-notice span { font-size: 11.5px; line-height: 1.35; }
}
@media (max-width: 380px) {
  .direction-card-body h3, .cat-card h3 { font-size: 13px; }
}
/* страницы разделов (profil/) и статей (stati/) на телефоне */
.page-hero .geo-crumbs { margin-top: 10px; }
@media (max-width: 640px) {
  .geo-wrap .geo-table { font-size: 13px; }
  .geo-wrap .geo-table th, .geo-wrap .geo-table td { padding: 6px 8px; }
  .geo-wrap .geo-table-wrap { -webkit-overflow-scrolling: touch; box-shadow: inset -12px 0 10px -10px rgba(0,0,0,.18); }
}
@media (max-width: 640px) {
  /* поиск: метка раздела не должна съедать название товара */
  .search-result-badge { display: none; }
  .search-result-title { white-space: normal; overflow: visible; text-overflow: clip; }
  /* баннер cookie: на телефоне занимал полэкрана */
  .cookie-banner { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cookie-banner-inner { gap: 10px; }
  .cookie-banner-inner p { font-size: 12.5px; line-height: 1.45; }
  .cookie-banner-actions .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; }
}
@media (max-width: 640px) {
  .cookie-banner-actions { flex-wrap: nowrap; }
  .cookie-banner-actions .btn { padding-left: 10px; padding-right: 10px; }
  /* таблица размеров на страницах разделов: на телефоне без длинного названия — шифр и размеры помещаются в экран */
  .geo-wrap .geo-table .geo-name { display: none; }
}
/* подпись под чертежом — кнопка «Напишите нам — и мы пришлём вам чертёж» */
.kc-cap-btn { display: block; margin: var(--space-3) auto 0; padding: 6px 10px; border-radius: 8px; background: none; border: 0; color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: center; }
.kc-cap-btn:hover { background: var(--color-surface-2); }
/* карточка товара: фото + чертёж */
.kc-gallery { justify-content: flex-start; aspect-ratio: auto; }
.kc-fig-pane { display: flex; flex-direction: column; justify-content: center; min-height: 260px; }
.kc-fig-pane[hidden] { display: none; }
.kc-photo-img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 10px; }
.kc-fig-thumbs { display: flex; gap: 10px; margin-top: var(--space-3); justify-content: center; }
.kc-fig-thumb { width: 86px; padding: 4px; border: 2px solid var(--color-border); border-radius: 10px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--color-text-muted); }
.kc-fig-thumb img { width: 100%; height: 56px; object-fit: contain; }
.kc-fig-thumb.is-active { border-color: var(--color-primary); color: var(--color-text); }
/* чертёж на весь экран */
.kc-product-figure .kc-drawing-img, .kc-product-figure .kc-photo-img { cursor: zoom-in; }
.kc-noscroll, .kc-noscroll body { overflow: hidden; }
.kc-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(15,18,22,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 8px 16px; }
.kc-lightbox-scroll { width: 100%; max-height: calc(100vh - 110px); overflow: auto; -webkit-overflow-scrolling: touch; display: flex; justify-content: center; touch-action: pan-x pan-y pinch-zoom; }
.kc-lightbox-scroll img { display: block; width: min(100%, 1485px); height: auto; background: #fff; border-radius: 6px; cursor: zoom-in; margin: auto; }
.kc-lightbox.is-zoomed .kc-lightbox-scroll { justify-content: flex-start; }
.kc-lightbox.is-zoomed .kc-lightbox-scroll img { width: 1485px; max-width: none; cursor: zoom-out; }
.kc-lightbox-close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.kc-lightbox-hint { color: rgba(255,255,255,.7); font-size: 13px; margin: 10px 0 0; text-align: center; }
/* миниатюра чертежа в списке размеров — крупнее, чтобы чертёж читался */
.kc-items-head, .kc-item { grid-template-columns: 104px minmax(0, 1fr) 140px 140px; }
.kc-item-thumb { width: 104px; height: 84px; }
@media (max-width: 1100px) { .kc-items-head, .kc-item { grid-template-columns: 96px minmax(0, 1fr) 120px 130px; } .kc-item-thumb { width: 96px; height: 78px; } }
@media (max-width: 640px) {
  .kc-item { grid-template-columns: 88px minmax(0, 1fr); }
  .kc-item-thumb { width: 88px; height: 72px; }
}
.kc-item-thumb:has(.kc-thumb-img) { display: block; overflow: hidden; }
.kc-item-thumb .kc-thumb-img { display: block; box-sizing: border-box; }
/* раздел «на стадии заполнения» */
.kc-wip { max-width: 760px; margin: var(--space-6) auto var(--space-8); padding: clamp(24px, 4vw, 44px); text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: 22px; box-shadow: 0 24px 48px -36px rgba(27,31,36,.45); }
.kc-wip-icon { width: 76px; height: 76px; margin: 0 auto var(--space-4); border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-highlight, #e3f1f1); color: var(--color-primary); }
.kc-wip-icon svg { width: 44px; height: 44px; }
.kc-wip-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kc-wip h2 { margin: var(--space-3) 0 var(--space-3); font-size: clamp(24px, 3.2vw, 32px); }
.kc-wip-lead { font-size: var(--text-lg, 18px); color: var(--color-text); max-width: 56ch; margin: 0 auto var(--space-2); }
.kc-wip p { color: var(--color-text-muted); max-width: 56ch; margin-left: auto; margin-right: auto; }
.kc-wip-list { list-style: none; padding: 0; margin: var(--space-5) auto; max-width: 460px; text-align: left; display: grid; gap: 10px; }
.kc-wip-list li { position: relative; padding-left: 30px; }
.kc-wip-list li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.kc-wip-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); }
.kc-wip-note { font-size: var(--text-sm); margin-top: var(--space-4); }
@media (max-width: 640px) { .kc-wip-actions .btn { width: 100%; } }

/* ══ Мобильная оптимизация: тап-зоны, поля ввода, лёгкие эффекты ══ */
/* кнопки — не выделяются долгим нажатием */
button, .btn, .icon-btn, .kc-more { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* поля: 16 px и больше, чтобы iOS не увеличивал страницу при фокусе */
@media (max-width: 900px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea { font-size: 16px; }
}

/* тап-зоны не меньше 44×44 */
@media (max-width: 900px), (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .city-picker-btn { min-height: 44px; }
  .brand { min-height: 44px; }
  .kc-more { min-height: 44px; }
  .kc-filters select, .kc-filter select, .field select { min-height: 44px; }
  .field-consent { min-height: 44px; }
  .cookie-banner-actions .btn { min-height: 44px; }
  .footer-col a, .footer-col button { padding-block: 11px; margin-bottom: 0; }
  /* текстовые ссылки: зона нажатия шире видимой, вёрстка не меняется */
  .kc-crumbs a, .page-hero-breadcrumb a, a.legal-back, .kc-terms, .kc-product-custom, .kc-item-name > a, .kc-tree-cat { position: relative; }
  .kc-crumbs a::after, .page-hero-breadcrumb a::after, a.legal-back::after, .kc-terms::after, .kc-product-custom::after, .kc-item-name > a::after { content: ''; position: absolute; inset: -13px -6px; }
}

/* cookie-баннер на телефоне компактнее и учитывает «чёлку» снизу */
@media (max-width: 600px) {
  body .cookie-banner { padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  body .cookie-banner .cookie-banner-inner { gap: var(--space-3); }
  body .cookie-banner .cookie-banner-inner p { font-size: 13px; line-height: 1.4; }
  body .cookie-banner .cookie-banner-actions { gap: var(--space-2); flex-wrap: nowrap; }
  body .cookie-banner .cookie-banner-actions .btn { flex: 1 1 0; min-height: 44px; padding-inline: var(--space-2); font-size: 13px; white-space: nowrap; }
}

/* тяжёлые эффекты — только там, где устройство тянет */
@media (max-width: 700px) {
  .hero-dash-shine { display: none; }
  .btn-glass, .page-hero .btn-outline, .kc-custom .btn-outline, #terms .spec-row, .ab-stats { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn-glass, .page-hero .btn-outline, .kc-custom .btn-outline { background: rgba(255,255,255,0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dash-bg, .hero-slide-copy { transition: none; }
  .hero-dash-shine { display: none; }
}
@media (max-width: 900px), (pointer: coarse) {
  .header-actions .icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 640px) { .city-picker-btn { width: 44px; } .header-actions { gap: 0; } }
@media (max-width: 900px), (pointer: coarse) {
  .kc-filter select, .kc-filters select { font-size: 16px; min-height: 44px; }
  .kc-filter-reset { min-height: 44px; padding-inline: var(--space-3); }
}
@media (max-width: 900px), (pointer: coarse) {
  .legal-req-box a { position: relative; }
  .legal-req-box a::after { content: ''; position: absolute; inset: -13px -6px; }
}

/* курсы на телефоне: плашка изменения всегда внутри карточки */
@media (max-width: 600px) {
  .mk-card > div[id$="Delta"] { max-width: 100%; }
  .mk-delta { max-width: 100%; flex-wrap: wrap; row-gap: 0; column-gap: 3px; font-size: 10.5px; line-height: 1.3; padding: 3px 7px; border-radius: 12px; }
  .mk-delta small { font-size: 9.5px; white-space: nowrap; }
}

/* ===== выбор размера в карточке (v161) ===== */
.kc-picker { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: 16px; }
.kc-pk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: var(--space-3); }
.kc-pk-head b { font-family: var(--font-display); font-size: var(--text-base); }
.kc-pk-head span { font-size: var(--text-xs); color: var(--color-text-muted); }
.kc-pk-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--color-border); }
.kc-pk-n { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.kc-pk-body { min-width: 0; }
.kc-pk-label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); margin: 3px 0 8px; }
.kc-pk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kc-pk-tab { border: 0; background: var(--color-surface-2, #eef0f3); color: var(--color-text); padding: 6px 12px; border-radius: 999px; font: 600 var(--text-xs)/1.2 var(--font-body); cursor: pointer; }
.kc-pk-tab small { opacity: .6; font-weight: 600; }
.kc-pk-tab.is-current { background: var(--color-primary); color: #fff; }
.kc-pk-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; padding: 2px; }
.kc-pk-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font: 700 var(--text-sm)/1.1 var(--font-body); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.kc-pk-chip small { font-size: 10px; font-weight: 600; color: var(--color-text-faint, #999); }
.kc-pk-chip:hover { border-color: var(--color-primary); }
.kc-pk-chip.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kc-pk-chip.is-current small { color: rgba(255,255,255,.8); }
.kc-pk-cur { margin: 8px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.kc-others details > summary { cursor: pointer; list-style: none; }
.kc-others details > summary::-webkit-details-marker { display: none; }
.kc-others details > summary h2 { display: inline; }
.kc-others details > summary::after { content: ' ▾'; color: var(--color-primary); font-weight: 800; }
.kc-others details[open] > summary::after { content: ' ▴'; }
.kc-others details[open] > summary { margin-bottom: var(--space-4); }
@media (max-width: 640px) { .kc-picker { padding: 12px; } .kc-pk-chips { max-height: 180px; } }

/* ===== диапазоны размеров и сгруппированный список (v162) ===== */
.kc-ranges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--space-3); }
.kc-ranges-l { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); margin-right: 4px; }
.kc-range { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); padding: 7px 13px; border-radius: 999px; font: 600 var(--text-sm)/1.1 var(--font-body); cursor: pointer; }
.kc-range small { font-size: 11px; color: var(--color-text-faint, #999); font-weight: 600; }
.kc-range:hover { border-color: var(--color-primary); }
.kc-range.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kc-range.is-current small { color: rgba(255,255,255,.8); }
.kc-item-group .kc-item-price { font-weight: 700; }
.kc-grid-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.kc-grid-h { font-size: var(--text-sm); font-weight: 800; color: var(--color-text); margin: var(--space-4) 0 var(--space-2); }
.kc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.kc-grid-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; text-decoration: none; color: var(--color-text); transition: border-color .15s, box-shadow .15s; }
.kc-grid-tile b { font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.kc-grid-tile small { font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }
.kc-grid-tile:hover { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(14,116,121,.12); }
@media (max-width: 640px) { .kc-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; } .kc-grid-tile { padding: 8px 9px; } }

/* ===== живой поиск сверху каталога (v163) ===== */
.kc-topsearch { display: flex; align-items: center; gap: 10px; padding: 0 14px; margin: 0 0 var(--space-5); background: #fff !important; border: 1px solid var(--color-border) !important; border-radius: 14px; box-shadow: 0 2px 10px rgba(16,24,40,.04); }
.kc-topsearch svg { color: var(--color-text-muted); flex-shrink: 0; }
.kc-topsearch input { padding: 13px 0 !important; font-size: 16px !important; }
.kc-topsearch:focus-within { border-color: var(--accent-2, var(--color-primary)) !important; box-shadow: 0 0 0 3px rgba(15,102,112,0.12); }
/* поиск в левой панели каталога: не сжимать (раньше схлопывался до 2px) */
.kc-side .kc-search { flex-shrink: 0; min-height: 46px; margin-bottom: var(--space-3); }
.kc-side .kc-search input { padding: 12px 14px; font-size: 15px; }