/* NYCKEL Shop — Enterprise Industrial Catalog */
:root {
    --orange: #F46B1B;
    --orange-hover: #e05a0a;
    --orange-light: #fff4ed;
    --dark: #1a1a1a;
    --gray-900: #212121;
    --gray-800: #333;
    --gray-700: #404040;
    --gray-600: #555;
    --gray-500: #6B7280;
    --gray-400: #999;
    --gray-300: #ccc;
    --gray-200: #e5e5e5;
    --gray-100: #f5f5f5;
    --white: #fff;
    --green: #16a34a;
    --green-light: #f0fdf4;
    --red: #dc2626;
    --blue: #2563eb;
    --gray-50: #fafafa;
    --primary: #F46B1B;
    /* #2298 q2 v2 (21.10.2026): палитра стиля (утв. Константином 16.09.2026). Белая подпись на --nk-orange — только
       крупная (--nk-cta-fs, 700): кнопки-призывы >=40px. Мелкий белый текст — на --nk-orange-700 (5.18:1),
       наведение/нажатие мелких — --nk-orange-dark (7.31:1). Наведение крупных — --orange-hover #e05a0a (3.73:1). */
    --nk-orange: #F46B1B;
    --nk-orange-700: #C2410C;
    --nk-orange-dark: #9A3412;
    --nk-orange-50: #FFF4ED;
    --nk-cta-fs: 19px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow: 0 2px 8px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --shadow-xl: 0 12px 40px rgba(0,0,0,.14);
    --max-w: 1660px; /* 02.07.2026: ширина центральной колонки как у Walmart (было 1320) — курс project_storefront_walmart_structure_direction */
    --transition: .2s ease;
    --transition-smooth: .3s cubic-bezier(.4,0,.2,1);

    /* Steel palette (product page) */
    --steel-50: #fafafa;
    --steel-100: #f4f4f5;
    --steel-200: #e4e4e7;
    --steel-300: #d4d4d8;
    --steel-400: #a1a1aa;
    --steel-500: #71717a;
    --steel-600: #52525b;
    --steel-700: #3f3f46;
    --steel-800: #27272a;
    --steel-900: #18181b;
    --steel-orange: #f97316;
    --steel-orange-hover: #ea580c;
    --steel-orange-50: #fff7ed;
    --steel-orange-100: #ffedd5;
    --steel-orange-700: #c2410c;
    --steel-green-50: #f0fdf4;
    --steel-green-500: #22c55e;
    --steel-green-600: #16a34a;
    --steel-blue-50: #eff6ff;
    --steel-blue-600: #2563eb;

    /* Fonts */
    --font-ui: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* #2747 (28.10.2026): один шрифт на витрине — заголовки и цифры тем же Golos, что и текст.
       Имена переменных оставлены: на них ~55 ссылок в shop.css и шаблонах. */
    --font-display: var(--font-ui);
    --font-mono: var(--font-ui);

    /* === Engineered-Industrial layer === */
    --paper: #ffffff;          /* clean white page surface */
    --paper-2: #f7f7f8;        /* very light neutral tint for alt sections only */
    --ink: #15181c;            /* near-black with a cool steel cast */
    --ink-2: #1f242b;          /* steel for the hero / dark surfaces */
    --orange-deep: #d8480d;    /* darker safety-orange for gradients/edges */
    --line: #e7e2db;           /* warm hairline border */
    --line-strong: #d8d1c7;
    /* Blueprint grid used as atmosphere on dark surfaces */
    --grid-line: rgba(255,255,255,.045);
    --grid-size: 26px;
    --shadow-tactile: 0 1px 0 var(--line-strong), 0 1px 2px rgba(20,24,28,.04);
    --shadow-lift: 0 14px 30px -12px rgba(20,24,28,.28), 0 4px 10px -6px rgba(20,24,28,.12);
}

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

body {
    font-family: var(--font-ui);
    color: var(--gray-800);
    background: var(--paper);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .section__title, .hero h1 {
    font-family: var(--font-display);
    letter-spacing: -.018em;
}

a { color: var(--orange); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange-hover); }
img { max-width: 100%; height: auto; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--gray-500); font-size: .875rem; }

/* ===== HEADER ===== */
.header { background: var(--paper); position: sticky; top: 0; z-index: 100; }

/* #2843 (28.10.2026): шапка как вариант B (docs/work/business_page_26102026/home_variants) — светлая полоса
   36px, тёмная «Каталог» (стиль в base.html), поиск с «Искать», подписи словами, строка разделов .srow. */
.header__top {
    background: #F4F4F4;
    color: #55585C;
    font-size: 13px;
    letter-spacing: 0;
}
.header__top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
}
.header__info { display: flex; gap: 22px; align-items: center; white-space: nowrap; }
.header__city { display: inline-flex; align-items: center; gap: 4px; color: #141414; font-weight: 600; cursor: pointer; white-space: nowrap; }
.header__pin { flex: none; }
.header__city:hover { color: var(--orange-hover); }
.header__accent { color: inherit; }
/* #2843: «Доставка…» и «НДС 22%» — ссылки цвета полосы; при наведении оранжевые с подчёркиванием */
.header__info a:not(.header__city) { color: #55585C; }
.header__info a:not(.header__city):hover, .header__contacts a:hover { color: var(--orange-hover); text-decoration: underline; }
.header__contacts { display: flex; gap: 22px; white-space: nowrap; }
.header__contacts a { color: #55585C; }
/* федеральный номер в полосе только на 769–1279 (там .header__phone спрятан), иначе он словом в строке */
.header__phone-top--fed { display: none; }

.header__main {
    background: var(--paper);
    border-bottom: 1px solid #E6E6E6;
}
.header__main-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 68px;
}

/* Logo */
.header__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: linear-gradient(155deg, var(--orange) 0%, var(--orange-deep) 100%);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -1px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(216,72,13,.3);
}
.logo-mark--light { background: rgba(255,255,255,.12); box-shadow: none; }
/* #2843: знак в шапке плоский (подвал .logo-mark--light не трогаем) */
.header__logo .logo-mark { background: var(--orange); box-shadow: none; }
.logo-text {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Search */
.search-bar {
    flex: 1;
    max-width: 640px;
    position: relative;
}
.search-bar input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 112px 0 14px; /* #2843: справа место под «Искать» */
    border: 1.5px solid #CFCFCF;
    border-radius: var(--radius);
    font-size: .9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    background: var(--white);
}
.search-bar input::placeholder { color: var(--gray-400); }
.search-bar input:focus {
    border-color: var(--orange);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(244,107,27,.14);
}
/* #2843: кнопка словом «Искать» во всю высоту поля, у правого края */
.search-bar button {
    position: absolute;
    right: 0;
    top: 0;
    height: 44px;
    background: var(--orange);
    border: none;
    cursor: pointer;
    padding: 0 22px;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--white);
    font: 700 15px/1 var(--font-ui, inherit);
    white-space: nowrap;
    transition: background var(--transition);
}
.search-bar button:hover { background: var(--orange-hover); }

.suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: none;
    z-index: 200;
    overflow-y: auto;
    max-height: 480px;
}
.suggestions.active { display: block; }
.sug-section { border-bottom: 1px solid var(--gray-200); }
.sug-section:last-child { border-bottom: none; }
.sug-label {
    padding: 8px 16px 4px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-400);
}
.sug-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    color: var(--gray-800);
    transition: background var(--transition);
    gap: 12px;
}
.sug-item:hover, .sug-item.sug-active { background: var(--orange-light); }
.sug-cat-name, .sug-series-name { font-weight: 500; }
.sug-count { color: var(--gray-400); font-size: .82rem; white-space: nowrap; }
.sug-meta { color: var(--gray-500); font-size: .82rem; white-space: nowrap; }
.sug-product { flex-direction: column; align-items: flex-start; gap: 2px; }
.sug-product-name { font-size: .92rem; line-height: 1.3; }
.sug-product-meta { display: flex; gap: 10px; font-size: .8rem; color: var(--gray-500); flex-wrap: wrap; }
.sug-brand { color: var(--gray-500); }
.sug-article { color: var(--gray-400); }
.sug-price { color: var(--orange); font-weight: 600; }
.sug-all {
    display: block;
    padding: 10px 16px;
    text-align: center;
    color: var(--orange);
    font-weight: 600;
    font-size: .9rem;
    border-top: 1px solid var(--gray-200);
    transition: background var(--transition);
}
.sug-all:hover, .sug-all.sug-active { background: var(--orange-light); }

/* Header actions */
/* #2843: справа словами (14px/600), номер 8 800 жирный; иконки — только для 769–1100 */
.header__actions {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
/* :where — нулевой вес, чтобы ступени ниже (.header__phone { display: none }) по-прежнему прятали ссылки */
:where(.header__actions > a) { display: inline-flex; align-items: center; gap: 6px; }
.header__actions > a { color: #141414; text-decoration: none; } /* цвет — с весом выше общего a { оранжевый } */
/* #4011 (10.11.2026): наведение — только у устройств с мышью; на телефоне после касания «Корзина» залипала оранжевой */
@media (hover: hover) { .header__actions > a:hover { color: var(--orange-hover); } }
.header__actions > a, .header__call, #catmenu-btn { -webkit-tap-highlight-color: transparent; }
.header__phone { font-weight: 700; }
/* #2843: под номером мелкая строка (видна только ≥1280 — ниже номер прячут ступени #1696); высота строки 68 не меняется */
.header__phone-txt { display: flex; flex-direction: column; line-height: 1.2; }
.header__phone-note { font-size: 12px; font-weight: 400; color: #6B7280; } /* 4.8:1 на белом */
.header__call { display: none; } /* трубка — только ≤768 */
.header__cart {
    position: relative;
    border-radius: var(--radius);
    transition: background var(--transition);
}
@media (min-width: 1101px) {
    .header__actions svg { display: none; }
}
.cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--nk-orange-700);
    color: var(--white);
    font-size: .75rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
/* #2843: при слове «Корзина» счётчик — кружок справа от слова (≥1101) или над его концом (≤768), текст не закрывает;
   на 769–1100 (иконка без подписи) — над иконкой, как было (блок #1696 ниже) */
.header__cart .cart-badge { position: static; font-size: 11px; }

/* ===== #2843 (28.10.2026): строка разделов под шапкой — не липкая (липкая высота шапки остаётся ~105px) ===== */
.srow { background: var(--paper); border-bottom: 1px solid #E6E6E6; }
.srow-in { display: flex; align-items: center; gap: 26px; }
/* на мыши: сколько влезает в одну строку, лишние переносятся на вторую и срезаются; «Для бизнеса» вне списка — не уходит */
.srow-list { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 20px; height: 48px; overflow: hidden; }
.srow a, .srow button { font: 500 14px/48px var(--font-ui, inherit); color: #141414; white-space: nowrap; text-decoration: none; }
.srow a:hover, .srow button:hover { color: var(--orange-hover); }
/* #2843: «Для бизнеса» — светлая оранжевая плашка с портфелем; тёмный текст на #FFF4ED — контраст ~17:1 */
.srow .srow-biz { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
    background: var(--nk-orange-50, #FFF4ED); color: #141414; font-weight: 600; line-height: 20px; }
.srow .srow-biz:hover { color: var(--orange-deep, #C2410C); }
.srow-x { display: none; }
.srow .srow-city { background: none; border: 0; padding: 0; cursor: pointer; }
/* палец и телефон: лента листается вбок, без переноса и без полосы прокрутки */
@media (pointer: coarse), (max-width: 768px) {
    .srow-in { gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .srow-in::-webkit-scrollbar { display: none; }
    .srow-list { flex: none; flex-wrap: nowrap; height: auto; overflow: visible; column-gap: 20px; }
    .srow a, .srow button { line-height: 44px; }
}
/* телефон: хвост ленты — «Заявка списком», «Войти»/«Кабинет», «Город» (в строке 1 их нет) */
@media (max-width: 768px) {
    .srow-in { padding: 0 16px; }
    .srow-x { display: inline-block; flex: none; }
}

/* ===== MAIN ===== */
.main { min-height: 60vh; padding-bottom: 48px; }

/* ===== HERO ===== */
.hero {
    position: relative;
    padding: 76px 0 68px;
    color: var(--white);
    background:
        radial-gradient(110% 130% at 88% -10%, rgba(244,107,27,.22) 0%, rgba(244,107,27,0) 46%),
        linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 60%, #2a3038 100%);
    overflow: hidden;
}
/* Blueprint grid atmosphere */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    -webkit-mask-image: linear-gradient(105deg, #000 30%, transparent 78%);
            mask-image: linear-gradient(105deg, #000 30%, transparent 78%);
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__content { max-width: 740px; }
.hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.04;
    margin-bottom: 18px;
    letter-spacing: -.03em;
    text-transform: none; /* #2298 q5 */
    animation: heroUp .6s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1::before {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    background: var(--orange);
    border-radius: 2px;
    margin-bottom: 22px;
}
.hero__subtitle {
    font-size: 1.125rem;
    color: rgba(255,255,255,.74);
    margin-bottom: 34px;
    line-height: 1.6;
    max-width: 560px;
    animation: heroUp .6s cubic-bezier(.2,.7,.2,1) .08s both;
}
.hero__cta { display: flex; gap: 12px; margin-bottom: 48px; flex-wrap: wrap;
    animation: heroUp .6s cubic-bezier(.2,.7,.2,1) .16s both; }
.hero__stats {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.14);
    animation: heroUp .6s cubic-bezier(.2,.7,.2,1) .24s both;
}
.hero__stat-num {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: -.01em;
}
.hero__stat-label {
    font-size: .8125rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: 2px;
}
@keyframes heroUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero__subtitle, .hero__cta, .hero__stats, .hero__trust { animation: none; }
}
/* Hero trust row — конкретные B2B-выгоды (язык снабженца-юрлица) */
.hero__trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: -28px 0 0;  /* #2301: ниже галочек больше ничего нет */
    padding: 0;
    animation: heroUp .6s cubic-bezier(.2,.7,.2,1) .2s both;
}
.hero__trust li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: rgba(255,255,255,.82);
}
.hero__trust li::before {
    content: "";
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background:
        var(--orange)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / 10px no-repeat;
}

/* #2301 (21.10.2026): три крупные цифры убраны из разметки — повторяли подзаголовок и галочки.
   Компьютер (от 1024 px): галочки hero__trust — правой колонкой-карточкой, без пустой половины. */
@media (min-width: 1024px) {
    .hero { padding: 64px 0 60px; }
    .hero__content { max-width: none; display: grid;
        grid-template-columns: minmax(0, 740px) minmax(360px, 460px);
        justify-content: space-between; column-gap: 64px; align-items: center; }
    .hero h1, .hero__subtitle, .hero__cta { grid-column: 1; }
    .hero__cta { margin-bottom: 0; }
    .hero__trust { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; gap: 16px; margin: 0;
        padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
        background: rgba(255,255,255,.04); }
    .hero__trust li { font-size: 1rem; gap: 12px; }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .01em;
    cursor: pointer;
    border: none;
    transition: all var(--transition);
    text-decoration: none;
    gap: 8px;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primary {
    background: var(--nk-orange-700);
    color: var(--white);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(216,72,13,.22);
}
.btn--primary:hover {
    background: var(--nk-orange-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -4px rgba(216,72,13,.4);
}
.btn--primary:active { transform: translateY(0); background: var(--nk-orange-dark); }
.btn--accent {
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 2px 4px rgba(244,107,27,.15);
}
.btn--accent:hover {
    background: var(--orange-hover);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244,107,27,.25);
}
.btn--accent:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(244,107,27,.15); }
.btn--outline {
    background: transparent;
    color: var(--gray-700);
    border: 1.5px solid var(--line-strong);
}
.btn--outline:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }
/* On dark hero, outline button reads on the steel background */
.hero .btn--outline { color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn--outline:hover { border-color: var(--orange); color: var(--orange); background: rgba(255,255,255,.04); }
.btn--sm { padding: 6px 14px; font-size: .8125rem; }
/* таблица серии: мелкая «В корзину» 13px — белое только на тёмном фирменном (3.01 → 5.18) */
.series-table .btn--accent { background: var(--nk-orange-700); }
.series-table .btn--accent:hover { background: var(--nk-orange-dark); }
.btn--lg { padding: 14px 28px; font-size: 1rem; }
.btn--full { width: 100%; }
.btn--added { background: var(--green) !important; }
/* #2298 q2 v2: крупные кнопки-призывы — фон фирменный #F46B1B, подпись --nk-cta-fs / 700.
   Специфичность поднята на ступень над правилами шаблонов (font:700 13-16px …), семейство шрифта шаблона сохраняется. */
.product-card__footer .btn--add-to-cart.btn--accent, .cl2 .product-card__footer .btn--add-to-cart.btn--accent, .brd2 .product-card__footer .btn--add-to-cart.btn--accent,
.hero__cta .btn--primary,
.pv2 .pv2-cta .pv2-cta-add, .pv2 .pv2-mbuy button.ma, button.cl2-apply,
.ct2 .cart-summary a.btn--primary, .ct2 .empty-state a.btn {
    font-size: var(--nk-cta-fs);
    font-weight: 700;
}
.hero__cta .btn--primary { line-height: 1.55rem; } /* высота кнопки та же: строка 24.8px, как при 16px */
.product-card__footer .btn--add-to-cart.btn--accent { padding-top: 8px; padding-bottom: 8px; line-height: 22px; } /* 38px, как было */
.hero__cta .btn--primary { background: linear-gradient(160deg, var(--nk-orange) 0%, var(--orange-deep) 100%); }
.hero__cta .btn--primary:hover { background: var(--orange-hover); }
.hero__cta .btn--primary:active { background: var(--orange-deep); }
/* шаблонный --accent (oklch(0.64 0.20 47) = #e75800) на крупных — фирменный; наведение #e05a0a */
.cl2 .product-card__footer .btn--add-to-cart, .brd2 .product-card__footer .btn--add-to-cart,
.pv2 .pv2-cta-add, .pv2 .pv2-mbuy .ma, .ct2 .cart-summary .btn--primary, .ct2 .empty-state .btn, .cl2-apply {
    --accent: var(--nk-orange);
    --accent-d: var(--orange-hover);
}
.cl2 .product-card__footer .btn--add-to-cart:hover, .brd2 .product-card__footer .btn--add-to-cart:hover,
.pv2 .pv2-mbuy .ma:hover, .ct2 .cart-summary .btn--primary:hover, .ct2 .empty-state .btn:hover, .cl2-apply:hover {
    --accent: var(--orange-hover);
}
/* степпер количества — мелкий текст (15-16px), тёмный фирменный */
.pv2 .pv2-step { --accent: var(--nk-orange-700); }
/* «Каталог» в шапке: с #2843 (28.10.2026) размер задаёт .header .catmenu-btn в base.html (15px/600, тёмная, на всех
   ширинах) — правило ниже им перебито и держится только для кнопки вне шапки, если такая появится */
@media (min-width: 561px) {
    button.catmenu-btn { font-size: var(--nk-cta-fs); font-weight: 700; }
}

/* ===== SECTION ===== */
.section { padding: 44px 0; }
@media (max-width: 768px) { .section { padding: 30px 0; } } /* 02.07: собраннее ритм секций, особенно на телефоне */
.section__title {
    font-size: 1.75rem; /* #2747: как «Каталог товаров» (.cats-h h2 — 28px/700); телефон — 1.375rem ниже */
    font-weight: 700;
    margin-bottom: 28px;
    color: var(--ink);
    text-transform: none; /* #2298 q5: заголовки разделов — обычный регистр; капс только у мелких надзаголовков */
    letter-spacing: -.018em;
    line-height: 1.15; /* на телефоне заголовок рядом с «Весь каталог» переносится — без этого строки расходились на 34px */
    display: flex;
    align-items: center;
    gap: 14px;
}
.section__title::before { /* #2747: черта убрана — у «Каталог товаров» и у ВИ её нет */
    content: none;
    width: 26px;
    height: 4px;
    background: var(--orange);
    border-radius: 2px;
    flex: 0 0 auto;
}
.section--features { background: var(--paper); border-top: 1px solid var(--line); }

/* ===== B2B BLOCK ===== */
.section--b2b { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.b2b-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}
.b2b-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-tactile);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.b2b-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--line-strong); }
.b2b-icon {
    width: 46px;
    height: 46px;
    background: linear-gradient(155deg, var(--orange) 0%, var(--orange-deep) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 16px;
}
.b2b-icon svg {
    width: 22px;
    height: 22px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.b2b-icon--banner {
    background: rgba(255,255,255,.15);
    margin-bottom: 0;
}
.b2b-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
}
.b2b-card__text {
    font-size: .875rem;
    color: var(--gray-500);
    line-height: 1.5;
}
.b2b-cta { text-align: center; }
.b2b-banner {
    position: relative;
    background:
        radial-gradient(120% 160% at 90% -20%, rgba(255,255,255,.10) 0%, transparent 50%),
        linear-gradient(155deg, var(--nk-orange-700) 0%, var(--nk-orange-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 34px 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    box-shadow: 0 16px 32px -16px rgba(216,72,13,.5);
}
.b2b-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 100%);
            mask-image: linear-gradient(100deg, transparent 40%, #000 100%);
    pointer-events: none;
}
.b2b-banner__content, .b2b-banner__btn { position: relative; z-index: 1; }
.b2b-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.b2b-banner__icon { display: none; }
.b2b-banner__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}
.b2b-banner__desc {
    font-size: .9rem;
    color: rgba(255,255,255,.94);
    line-height: 1.5;
}
.b2b-banner__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--nk-orange-700);
    font-weight: 700;
    font-size: .9375rem;
    text-decoration: none;
    transition: background var(--transition);
    white-space: nowrap;
}
.b2b-banner__btn:hover { background: var(--nk-orange-50); color: var(--nk-orange-dark); }

/* ===== CATEGORIES GRID ===== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.cat-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-tactile);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    color: var(--gray-800);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.cat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), var(--orange-deep));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.cat-card:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--gray-800);
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.cat-card__icon { color: var(--orange); }
.cat-card__count {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 600;
    color: var(--gray-600);
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 3px 10px;
    border-radius: 6px;
}
.cat-card__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -.01em;
}
.cat-card__subs {
    font-size: .8125rem;
    color: var(--gray-500);
    line-height: 1.5;
    flex: 1;
}
.cat-card__arrow {
    color: var(--gray-400);
    margin-top: 12px;
    transition: color var(--transition), transform var(--transition);
}
.cat-card:hover .cat-card__arrow {
    color: var(--orange);
    transform: translateX(4px);
}
.cat-card--compact { padding: 20px; }
.cat-card--compact .cat-card__name { font-size: 1rem; }

/* Staggered reveal for the home category grid */
.categories-grid .cat-card { animation: catReveal .5s cubic-bezier(.2,.7,.2,1) both; }
.categories-grid .cat-card:nth-child(1){animation-delay:.02s}
.categories-grid .cat-card:nth-child(2){animation-delay:.06s}
.categories-grid .cat-card:nth-child(3){animation-delay:.10s}
.categories-grid .cat-card:nth-child(4){animation-delay:.14s}
.categories-grid .cat-card:nth-child(5){animation-delay:.18s}
.categories-grid .cat-card:nth-child(6){animation-delay:.22s}
.categories-grid .cat-card:nth-child(7){animation-delay:.26s}
.categories-grid .cat-card:nth-child(8){animation-delay:.30s}
@keyframes catReveal { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .categories-grid .cat-card { animation: none; } }

/* Единый «нарисованный» формат категорий: иконка-бейдж на фирменном фоне */
.cat-card__badge {
    position: relative;
    margin: -24px -24px 16px;            /* в край карточки поверх padding 24px */
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, var(--orange-light) 0%, #ffffff 72%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.cat-card__badge::before {                /* лёгкая чертёжная сетка (как в hero) */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(216,72,13,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(216,72,13,.06) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
            mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
    pointer-events: none;
}
.cat-card__glyph {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    box-shadow: 0 8px 18px -8px rgba(216,72,13,.4), inset 0 0 0 1px var(--line);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}
.cat-card--badge:hover .cat-card__glyph {
    transform: translateY(-4px);
    box-shadow: 0 14px 26px -10px rgba(216,72,13,.5), inset 0 0 0 1px var(--line);
}
.cat-card__glyph svg { width: 40px; height: 40px; stroke-width: 1.6; }
.cat-card__glyph--custom { width: 50px; height: 50px; }

/* Кастомные анимированные иконки категорий (сварщик и т.п.) */
.weld-icon { display: inline-block; color: #2b3340; line-height: 0; }
.weld-icon .weld-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.weld-icon .weld-core { fill: var(--weld-spark, #ff7a18); }
.weld-icon .weld-hot { fill: var(--weld-hot, #fff3d6); }
.weld-icon .weld-arc-group { opacity: 0; transition: opacity .2s ease; }
.weld-icon .weld-spark { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cat-card:hover .weld-icon .weld-arc-group,
.weld-icon.is-active .weld-arc-group {
    opacity: 1;
    filter: drop-shadow(0 0 2px var(--weld-spark, #ff7a18)) drop-shadow(0 0 4px var(--weld-spark, #ff7a18));
    animation: weld-flicker .22s steps(2) infinite;
}
.cat-card:hover .weld-icon .weld-spark,
.weld-icon.is-active .weld-spark { animation: spark-fly .7s ease-out infinite; }
@keyframes weld-flicker { 0%,100%{opacity:1} 25%{opacity:.45} 50%{opacity:.9} 75%{opacity:.6} }
@keyframes spark-fly {
    0% { opacity:0; transform: translate(0,0) scale(1); }
    15% { opacity:1; }
    100% { opacity:0; transform: translate(var(--tx), var(--ty)) scale(.35); }
}
@media (prefers-reduced-motion: reduce) {
    .cat-card:hover .weld-icon .weld-arc-group, .weld-icon.is-active .weld-arc-group { animation: none; opacity: 1; }
    .cat-card:hover .weld-icon .weld-spark, .weld-icon.is-active .weld-spark { animation: none; opacity: 0; }
}

/* Компактная фото-плитка подкатегории (страницы категорий) */
.cat-card--compact.cat-card--photo { padding: 20px; }
.cat-card--compact .cat-card__photo { height: 120px; margin: -20px -20px 12px; }
.cat-card--compact .cat-card__photo img { max-width: 80%; max-height: 80%; }

/* Фото-категория: фото-баннер вместо иконки (превью «как у ВсеИнструменты») */
.cat-card__photo {
    position: relative;
    margin: -24px -24px 14px;            /* в край карточки поверх padding 24px */
    height: 156px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.cat-card__photo img {
    max-width: 84%;
    max-height: 84%;
    object-fit: contain;
    transition: transform var(--transition-smooth);
}
.cat-card--photo:hover .cat-card__photo img { transform: scale(1.06); }
/* #2295: обрезанные копии (catimg_fit) — крупнее исходника (84/80 %), но с полем 4 %: на 100 % фото упирались в край рамки */
.cat-card__photo img[src*="/static/img/cat/"] { max-width: 92%; max-height: 92%; width: 92%; height: 92%; object-fit: contain; }
.cat-card__count--onphoto {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--shadow-sm);
}

/* ===== FEATURES ===== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
}
.feature { text-align: center; padding: 24px 16px; }
.feature__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-light);
    border-radius: 14px;
    color: var(--orange);
}
.feature h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.feature p { color: var(--gray-500); font-size: .875rem; }

/* ===== BREADCRUMBS ===== */
.breadcrumbs {
    font-size: .8125rem;
    color: var(--gray-500);
    margin: 24px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.breadcrumbs a { color: var(--gray-500); }
.breadcrumbs a:hover { color: var(--orange); }
.breadcrumbs__sep { color: var(--gray-300); margin: 0 2px; }

/* ===== CATALOG HEADER ===== */
.catalog-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 16px;
}
.catalog-header h1 { font-size: 1.75rem; font-weight: 700; }
.catalog-header__count {
    font-size: .875rem;
    color: var(--gray-500);
}
.catalog-brands {
    font-size: .875rem;
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* ===== CHIPS ===== */
.subcats-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
/* «Виды» — компактные плитки подкатегорий по спросу (показываются и при наличии товаров) */
.subcats-row--kinds { gap: 10px; margin: 4px 0 22px; }
.subcat-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 15px;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; background: var(--white, #fff);
    text-decoration: none; color: var(--steel-800, #1f2937); font-size: .92rem; font-weight: 600;
    transition: border-color .15s, box-shadow .15s; }
.subcat-chip:hover { border-color: var(--orange, #ea580c); box-shadow: 0 2px 8px rgba(234,88,12,.12); }
.subcat-chip__count { font-size: .8rem; font-weight: 500; color: var(--steel-500, #64748b); }

/* Subtype cards (конструкция) */
.subtypes-row {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 20px;
}
.subtype-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 18px; border-radius: 10px;
    background: var(--white); border: 2px solid var(--gray-200);
    text-decoration: none; color: var(--gray-700);
    transition: border-color .2s, box-shadow .2s;
    min-width: 90px;
}
.subtype-card:hover { border-color: var(--orange); box-shadow: 0 2px 8px rgba(232,82,26,.12); }
.subtype-card--active { border-color: var(--orange); background: #fff5f0; }
.subtype-card__icon { color: var(--orange); margin-bottom: 4px; }
.subtype-card__name { font-weight: 600; font-size: .9rem; }
.subtype-card__count { font-size: .75rem; color: var(--gray-500); margin-top: 2px; }
.chip {
    background: var(--white);
    border: 1px solid var(--gray-200);
    padding: 8px 16px;
    border-radius: 24px;
    font-size: .875rem;
    color: var(--gray-700);
    transition: all var(--transition);
}
.chip:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: var(--orange-light);
    text-decoration: none;
}
.chip__count { color: var(--gray-400); font-size: .75rem; }

/* ===== CATALOG TOOLBAR ===== */
.catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.toolbar__sort {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .875rem;
    color: var(--gray-500);
}
.toolbar__sort a {
    color: var(--gray-600);
    padding: 6px 12px;
    border-radius: 6px;
    transition: all var(--transition);
}
.toolbar__sort a.active {
    background: var(--orange);
    color: var(--white);
}
.toolbar__sort a:hover:not(.active) { background: var(--gray-200); text-decoration: none; }
.toolbar__filter select {
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .875rem;
    font-family: inherit;
    background: var(--white);
    cursor: pointer;
}
.toolbar__price-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    color: var(--gray-500);
}
.toolbar__price-filter input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .875rem;
    font-family: inherit;
    text-align: center;
}
.toolbar__price-filter input:focus { outline: none; border-color: var(--orange); }

/* ===== PRODUCTS GRID ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
/* Главная: лента «в наличии» */
.section--rail { background: var(--white); }
.rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}
.rail__head .section__title { margin-bottom: 0; }
.rail__all {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: .9rem;
    color: #C2410C;
    white-space: nowrap;
}
.rail__all:hover { color: var(--orange); }
.products-grid--rail { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .products-grid--rail { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .products-grid--rail { grid-template-columns: repeat(2, 1fr); } }
.product-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-tactile);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    overflow: hidden;
}
.product-card:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
    transform: translateY(-3px);
}
.product-card__link {
    display: block;
    text-decoration: none;
    color: var(--gray-800);
}
.product-card__img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding: 16px;
    background: var(--white);
}
.product-card__noimg {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
}
.product-card__body { padding: 16px; flex: 1; }
.product-card__brand {
    font-size: .75rem;
    color: #C2410C;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
}
.product-card__name {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 6px 0;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__article { font-family: var(--font-mono); font-size: .75rem; color: #6B7280; }
.brand-tags { margin: 32px 0 24px; }
.brand-tags__title { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; color: var(--gray-700); }
.brand-tags__list { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-tag { display: flex; align-items: center; justify-content: center; min-width: 120px; height: 48px; padding: 8px 16px; border: 1px solid var(--gray-200); border-radius: 8px; text-decoration: none; color: var(--gray-700); font-size: .9rem; font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.brand-tag:hover { border-color: var(--accent, #2563eb); box-shadow: 0 2px 8px rgba(37,99,235,.12); }
.brand-tag__logo { height: 28px; width: auto; max-width: 100px; object-fit: contain; }
.brand-tags--logos .brand-tag { background: var(--white); height: 60px; min-width: 132px; padding: 10px 18px; }
.brand-tags--logos .brand-tag__logo { height: 34px; max-width: 108px; }
.brand-tags--logos .brand-tag:hover { border-color: var(--orange); box-shadow: var(--shadow); }
/* Вордмарк-плейсхолдер для брендов без картинки-логотипа — чтобы у каждого был «логотип» */
.brand-tags--logos .brand-tag__name {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: .82rem;
    color: var(--gray-600);
    text-align: center;
    line-height: 1.15;
}
.brand-tag__name { white-space: nowrap; }
.product-card__specs { list-style: none; padding: 0; margin: 8px 0 0; font-size: .8rem; color: var(--gray-500); }
.product-card__specs li { padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card__spec-name { color: var(--gray-400); }
.product-card__footer {
    padding: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
/* Бейдж наличия (склад/под заказ) */
.stock-badge {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}
.stock-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.stock-badge--in { color: #15803D; }
.stock-badge--in .stock-badge__dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-light); }
.stock-badge--order { color: var(--blue); }
.stock-badge--order .stock-badge__dot { background: var(--blue); box-shadow: 0 0 0 3px var(--steel-blue-50); }
.stock-badge--check { color: var(--gray-500); }
.stock-badge--check .stock-badge__dot { background: var(--gray-400); }
.product-card__vat { font-size: .75rem; font-weight: 500; color: var(--gray-500); white-space: nowrap; }
.product-card__price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    white-space: nowrap;
}
.product-card__price--request {
    font-size: .8125rem;
    color: var(--gray-500);
    font-weight: 500;
}
/* «Последняя цена» (19.09.2026): старая цена товара без наличия — серая, не для покупки */
.product-card__price--last {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    color: var(--gray-500);
    white-space: normal;
}
.product-card__price--last .product-card__price-cap { font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--gray-500); }
.product-card__price--last .product-card__price-val { font-size: 1.05rem; font-weight: 700; color: var(--gray-500); }

/* ===== PRODUCT DETAIL ===== */
.product-detail {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 36px;
    margin: 16px 0 40px;
}
/* min-width:0 — иначе grid-колонки не сжимаются ниже min-content, и лента
   миниатюр галереи (.gal__thumbs, overflow-x:auto, фикс. 68px на 10+ фото)
   распирает страницу шире экрана (горизонтальный скролл на телефоне). */
.product-detail > * { min-width: 0; }
.product-detail__gallery {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition-smooth);
}
.product-detail__gallery:hover {
    box-shadow: var(--shadow-md);
}
.gallery__main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}
.gallery__main-img {
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
    transition: transform var(--transition-smooth);
}
.gallery__main-img:hover {
    transform: scale(1.02);
}
.gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.gallery__thumb {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-smooth);
    background: var(--white);
    padding: 2px;
}
.gallery__thumb:hover { border-color: var(--orange); box-shadow: 0 2px 8px rgba(244,107,27,.15); transform: translateY(-1px); }
.gallery__thumb--active { border-color: var(--orange); box-shadow: 0 2px 8px rgba(244,107,27,.2); }
.gallery__placeholder {
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
    border-radius: var(--radius-lg);
    border: 2px dashed var(--gray-200);
}
.gallery__placeholder svg { opacity: .4; }

.product-detail__info { display: flex; flex-direction: column; gap: 20px; }
.product-detail__brand {
    font-size: .75rem;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    padding: 4px 12px;
    background: var(--orange-light);
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}
.product-detail__title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dark);
    letter-spacing: -.01em;
}
.product-detail__sku { color: var(--gray-400); font-size: .8125rem; letter-spacing: .3px; }

.product-detail__price-card {
    background: linear-gradient(135deg, #fff8f3 0%, var(--orange-light) 100%);
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(244,107,27,.18);
    box-shadow: 0 2px 12px rgba(244,107,27,.08);
}
.price-card__price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.price-card__price--request { color: var(--gray-600); font-size: 1.375rem; font-weight: 700; }
.price-card__currency { font-size: 1.75rem; color: var(--orange); font-weight: 700; }
.price-card__rrp {
    font-size: .875rem;
    color: var(--gray-400);
    text-decoration: line-through;
    margin-top: 6px;
}
.price-card__note {
    font-size: .8125rem;
    color: var(--gray-500);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(244,107,27,.1);
}

.product-detail__cart-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* QTY control */
.qty-control { display: flex; align-items: center; }
.qty-control__btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all var(--transition-smooth);
    color: var(--gray-700);
}
.qty-control__btn:hover { background: var(--gray-100); border-color: var(--gray-400); transform: scale(1.05); }
.qty-control__btn:active { transform: scale(0.95); }
.qty-control input {
    width: 56px;
    height: 44px;
    text-align: center;
    border: 1.5px solid var(--gray-200);
    margin: 0 4px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 8px;
}
.qty-control--sm .qty-control__btn { width: 30px; height: 30px; font-size: 1rem; }
.qty-control--sm input { width: 42px; height: 30px; font-size: .875rem; }

/* Benefits */
.product-detail__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--gray-100);
    padding-top: 12px;
}
.benefit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--gray-600);
    font-weight: 500;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--gray-200);
}
.benefit:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.benefit svg {
    flex-shrink: 0;
    color: var(--primary);
    width: 14px;
    height: 14px;
}

/* Best Price Button */
.product-detail__best-price {
    margin-top: 8px;
}
.btn--best-price {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: var(--white);
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-smooth);
    border-radius: var(--radius-lg);
    padding: 14px 24px;
}
.btn--best-price:hover {
    background: linear-gradient(135deg, #15803d, #166534);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22,163,74,.3);
}
.btn--best-price:active {
    transform: translateY(0);
}
.best-price__hint {
    text-align: center;
    font-size: .8125rem;
    color: var(--gray-500);
    margin-top: 6px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal--open { display: flex; }
.modal__backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
}
.modal__content {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 460px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}
.modal__content--zoom {
    max-width: 90vw;
    padding: 12px;
    background: transparent;
    box-shadow: none;
}
.modal__content--zoom img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius);
}
.modal__close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--gray-400);
    cursor: pointer;
    line-height: 1;
    z-index: 1;
}
.modal__close:hover { color: var(--gray-800); }
.modal__subtitle {
    color: var(--gray-500);
    margin-bottom: 20px;
    font-size: .9375rem;
}
.modal__form { display: flex; flex-direction: column; gap: 14px; }
.modal__form .form-group { display: flex; flex-direction: column; gap: 4px; }
.modal__form label { font-size: .8125rem; font-weight: 600; color: var(--gray-600); }
.modal__form input, .modal__form textarea, .modal__form select {
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color var(--transition);
}
.modal__form input:focus, .modal__form textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(244,107,27,.1);
}
.modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 24px 0;
}
.modal__success h3 { color: #16a34a; }
.modal__success p { color: var(--gray-500); }

/* Key specs preview — mini dashboard */
.product-detail__key-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
}
.key-spec {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .8125rem;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-100);
    transition: all var(--transition-smooth);
}
.key-spec:hover {
    border-color: var(--gray-200);
    box-shadow: var(--shadow-sm);
}
.key-spec__name { color: var(--gray-400); font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }
.key-spec__value { font-weight: 700; color: var(--dark); font-size: .9375rem; }

/* Delivery mini */
.product-detail__delivery-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    font-size: .8125rem;
    color: var(--gray-600);
}
.delivery-mini__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-100);
    transition: all var(--transition);
}
.delivery-mini__item:hover {
    border-color: var(--gray-200);
    background: var(--white);
}
.delivery-mini__item svg { flex-shrink: 0; color: var(--orange); }

/* Product nav (anchor navigation) — polished tab bar */
.product-nav {
    display: flex;
    gap: 2px;
    padding: 6px;
    border-bottom: none;
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 10;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.product-nav__link {
    padding: 12px 24px;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 600;
    color: var(--gray-500);
    text-decoration: none;
    transition: all var(--transition-smooth);
    position: relative;
}
.product-nav__link:hover {
    background: var(--gray-50);
    color: var(--gray-800);
}
.product-nav__link--active {
    background: var(--orange);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(244,107,27,.3);
}
.product-nav__link--active:hover {
    background: var(--orange-hover);
    color: var(--white);
}

/* Delivery grid */
.delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.delivery-card {
    padding: 28px 24px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--white);
    transition: all var(--transition-smooth);
    position: relative;
}
.delivery-card:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 20px rgba(244,107,27,.08);
    transform: translateY(-2px);
}
.delivery-card__icon {
    margin-bottom: 16px;
    color: var(--orange);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--orange-light);
    border-radius: 14px;
    margin-left: auto;
    margin-right: auto;
}
.delivery-card__icon svg { display: block; }
.delivery-card__title { font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--dark); }
.delivery-card__text { font-size: .8125rem; color: var(--gray-500); line-height: 1.6; }

@media (max-width: 640px) {
    .product-detail__key-specs { grid-template-columns: 1fr; }
    .product-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
    .product-nav__link { white-space: nowrap; padding: 10px 16px; font-size: .8125rem; }
    .delivery-grid { grid-template-columns: 1fr 1fr; }
    .product-section { padding: 24px 20px; }
    .product-section h2 { font-size: 1.25rem; }
}

/* Advantages list — premium feel */
.advantages-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.advantages-list__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--gray-700);
    padding: 16px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-smooth);
}
.advantages-list__item:hover {
    background: var(--white);
    border-color: var(--orange);
    box-shadow: 0 2px 12px rgba(244,107,27,.06);
    transform: translateX(2px);
}
.advantages-list__item svg {
    flex-shrink: 0;
    margin-top: 2px;
    width: 22px;
    height: 22px;
    padding: 3px;
    background: var(--orange-light);
    border-radius: 50%;
    stroke: var(--orange);
}
@media (max-width: 640px) {
    .advantages-list { grid-template-columns: 1fr; }
}

/* Specs info blocks (brand, packaging, completeness) */
.specs-info-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}
.specs-info-card {
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    transition: all var(--transition-smooth);
}
.specs-info-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--gray-200);
}
.specs-info-card__title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--gray-900);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--orange-light);
}
.specs-info-card__row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: .8125rem;
}
.specs-info-card__label { color: var(--gray-400); }
.specs-info-card__value { font-weight: 600; color: var(--gray-800); }
.specs-info-card__text { font-size: .875rem; color: var(--gray-700); line-height: 1.6; }

/* Product sections */
.product-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 36px;
    margin-bottom: 24px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-smooth);
}
.product-section:hover {
    box-shadow: var(--shadow);
}
.product-section h2 {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--dark);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gray-100);
    letter-spacing: -.01em;
}
.product-section__content { line-height: 1.8; color: var(--gray-700); font-size: .9375rem; }

/* FAQ — smooth accordion */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-smooth);
    background: var(--white);
}
.faq-item:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.faq-item[open] {
    border-color: var(--orange);
    box-shadow: 0 2px 12px rgba(244,107,27,.06);
}
.faq-item summary {
    padding: 18px 20px;
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition);
    color: var(--dark);
}
.faq-item summary:hover {
    background: var(--gray-50);
}
.faq-item[open] summary {
    background: var(--orange-light);
    color: var(--orange);
}
.faq-item summary::after {
    content: '+';
    font-size: 1.375rem;
    color: var(--gray-400);
    transition: all var(--transition-smooth);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-100);
    flex-shrink: 0;
    font-weight: 400;
}
.faq-item[open] summary::after {
    content: '\2212';
    background: var(--orange);
    color: var(--white);
    transform: rotate(180deg);
}
.faq-item__answer {
    padding: 0 20px 18px;
    color: var(--gray-600);
    font-size: .875rem;
    line-height: 1.7;
    animation: faqSlide .25s ease-out;
}
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.faq-item summary::-webkit-details-marker { display: none; }

.specs-table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; }
.specs-table tr { border-bottom: 1px solid var(--gray-100); transition: background var(--transition); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table tr:nth-child(even) { background: var(--gray-50); }
.specs-table tr:hover { background: var(--orange-light); }
.specs-table td { padding: 13px 16px; font-size: .875rem; }
.specs-table__name { color: var(--gray-500); width: 40%; font-weight: 400; }
.specs-table__value { font-weight: 600; color: var(--dark); }

/* ===== SERIES COMPARISON ===== */
.series-section { margin-top: 24px; }
.series-section h2 { margin-bottom: 16px; }
.series-scroll {
    overflow-x: auto;
    margin: 0 -28px;
    padding: 0 28px 8px;
}
.series-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    font-size: .875rem;
}
.series-table th {
    background: var(--gray-100);
    padding: 10px 4px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--gray-600);
    white-space: nowrap;
    border-bottom: 2px solid var(--gray-200);
}
.series-table th:first-child {
    text-align: left;
}
.series-table td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
}
.series-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}
.series-table__col-name { min-width: 200px; max-width: 280px; }
.series-table__col-name a { color: var(--gray-800); font-weight: 500; }
.series-table__col-name a:hover { color: var(--orange); }
.series-table__current {
    background: var(--orange-light);
}
.series-table__current td:first-child {
    border-left: 3px solid var(--orange);
}
.col-icon {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.col-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}
.col-icon[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    z-index: 100;
}
.col-icon-wrap {
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #e8521a;
}
.col-icon-wrap svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Video player */
.product-video { margin-top: 1.5rem; }
.video-player__wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16/9;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.video-player__poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    transition: background .3s;
}
.video-player__poster:hover {
    background: linear-gradient(135deg, #1a1a2e 0%, #1a2940 50%, #134a80 100%);
}
.video-player__poster:hover .video-player__play-btn svg circle {
    fill: rgba(232,82,26,.85);
}
.video-player__play-btn {
    transition: transform .2s;
}
.video-player__poster:hover .video-player__play-btn {
    transform: scale(1.1);
}
.video-player__label {
    color: #fff;
    font-size: .9rem;
    margin-top: 12px;
    opacity: .8;
    letter-spacing: .02em;
}
.video-player__iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* Category video block (полезное видео о категории) */
.cat-videos { margin-top: 34px; }
.cat-videos__title {
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 16px;
}
.cat-videos__grid {
    display: grid;
    /* auto-fit (а не auto-fill): ролики растягиваются на ВСЮ ширину страницы,
       вровень с товарной сеткой, без пустой колонки справа */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.cat-video__wrapper { cursor: pointer; max-width: none; }
/* 1–2 ролика — не растягивать на всю ширину гигантами, ограничить и прижать влево */
.cat-videos--n1 .cat-videos__grid,
.cat-videos--n2 .cat-videos__grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 360px));
    justify-content: start;
}
/* постер полупрозрачный, чтобы миниатюра ролика просвечивала */
.cat-video .video-player__poster {
    background: linear-gradient(135deg, rgba(26,26,46,.45), rgba(15,52,96,.45));
}
.cat-video .video-player__poster:hover {
    background: linear-gradient(135deg, rgba(26,26,46,.25), rgba(19,74,128,.25));
}
.cat-video .video-player__label { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cat-video__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}
.cat-video__meta { margin-top: 10px; }
.cat-video__title {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-video__sub {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--ink-2);
    margin-top: 4px;
}
@media (max-width: 640px) { .cat-videos__grid { grid-template-columns: 1fr; } }

.series-table__price {
    font-weight: 700;
    white-space: nowrap;
    color: var(--dark);
}
.series-badge {
    display: inline-block;
    background: #C2410C; /* #2298: белый 12px на #F46B1B — 3.0:1, на #C2410C — 5.2:1 */
    color: var(--white);
    font-size: .75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .series-scroll { margin: 0 -16px; padding: 0 16px 8px; }
    .series-table { font-size: .8125rem; }
    .series-table th, .series-table td { padding: 8px; }
    .series-table__col-name { min-width: 150px; }
}

/* ===== CART ===== */
.cart {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.cart__items {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    overflow: hidden;
}
.cart-item {
    display: grid;
    grid-template-columns: 72px 1fr 100px 120px 100px 40px;
    gap: 12px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-100);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__img img { width: 60px; height: 60px; object-fit: contain; border-radius: 6px; }
.cart-item__noimg { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--gray-100); border-radius: 6px; }
.cart-item__name { font-weight: 600; font-size: .875rem; color: var(--gray-800); }
.cart-item__name:hover { color: var(--orange); }
.cart-item__brand { font-size: .75rem; color: var(--gray-500); }
.cart-item__sku { font-size: .75rem; color: var(--gray-400); }
.cart-item__price { font-weight: 600; white-space: nowrap; }
.cart-item__subtotal { font-weight: 700; white-space: nowrap; }
.cart-item__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 4px;
    border-radius: 4px;
    transition: all var(--transition);
}
.cart-item__remove:hover { color: var(--red); background: #fef2f2; }

.cart-summary {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 24px;
    position: sticky;
    top: 100px;
}
.cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: .875rem;
    color: var(--gray-600);
    margin-bottom: 12px;
}
.cart-summary__total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 16px 0;
    border-top: 1px solid var(--gray-200);
    margin-bottom: 8px;
}
.cart-summary__note { font-size: .8125rem; color: var(--gray-500); margin-bottom: 16px; }
.cart-summary .btn { margin-bottom: 8px; }

/* ===== CHECKOUT ===== */
.checkout-form {
    max-width: 640px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--gray-200);
}
.form-section { margin-bottom: 28px; }
.form-section h2 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--dark);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.checkout-form label { display: block; font-size: .8125rem; font-weight: 600; color: var(--gray-700); }
.checkout-form input, .checkout-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: .9375rem;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.checkout-form input:focus, .checkout-form textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(244,107,27,.1);
}
.checkout-note {
    background: var(--orange-light);
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--gray-700);
    margin-bottom: 20px;
    border-left: 3px solid var(--orange);
}

/* ===== ALERTS ===== */
.alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: .875rem;
}

/* ===== SUCCESS ===== */
.success-page { text-align: center; padding: 80px 0; }
.success-page__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-page h1 { font-size: 1.5rem; margin-bottom: 12px; }
.success-page p { margin-bottom: 8px; }
.success-page .btn { margin-top: 24px; }

/* ===== PAGE TITLE ===== */
.page-title { font-size: 1.75rem; font-weight: 700; margin: 24px 0 16px; color: var(--dark); }
.results-count { color: var(--gray-500); margin-bottom: 20px; }

/* ===== PAGINATION ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.pagination__pages {
    display: flex;
    flex-wrap: wrap;        /* на узких экранах (320px) номера страниц переносятся, а не вылезают */
    justify-content: center;
    gap: 4px;
}
.pagination__pages a, .pagination__pages span {
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 500;
}
.pagination__pages a {
    color: var(--gray-700);
    background: var(--white);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}
.pagination__pages a:hover {
    border-color: var(--orange);
    color: var(--orange);
    text-decoration: none;
}
.pagination__current {
    background: var(--nk-orange-700) !important;
    color: var(--white) !important;
}
.pagination__dots { color: #6B7280; }
.pagination__btn {
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 600;
    color: var(--nk-orange-700);
    background: var(--white);
    border: 1px solid var(--gray-200);
    transition: all var(--transition);
}
.pagination__btn:hover { border-color: var(--orange); text-decoration: none; }

/* ===== EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 80px 0;
}
.empty-state__icon { margin-bottom: 20px; }
.empty-state h1, .empty-state h2 {
    color: var(--dark);
    margin-bottom: 8px;
    font-weight: 700;
}
.empty-state .btn { margin-top: 20px; }

/* ===== CATEGORY DESCRIPTION ===== */
.category-description {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-top: 32px;
    border: 1px solid var(--gray-200);
    font-size: .875rem;
    line-height: 1.8;
    color: var(--gray-600);
}
.category-description p { margin-bottom: 12px; }

/* ===== FOOTER ===== */
.footer {
    background: var(--gray-900);
    color: var(--gray-400);
    padding: 48px 0 0;
    margin-top: 48px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.footer__brand-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 1px;
}
.footer__about p { font-size: .875rem; margin-bottom: 8px; }
.footer__legal { margin-top: 12px; font-size: .8125rem; color: #B8BDC3; }
.footer h4 {
    color: var(--white);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em; /* #2298 q5: надзаголовок колонки — разрядка как у .hero__stat-label */
    margin-bottom: 16px;
}
.footer ul { list-style: none; }
.footer li { font-size: .875rem; margin-bottom: 8px; }
.footer a { color: var(--gray-400); transition: color var(--transition); }
.footer a:hover { color: var(--orange); }
.footer__bottom {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: .8125rem;
    color: #B8BDC3;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .cart { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
}

@media (max-width: 768px) {
    .header__top { display: none; }
    .header__main-inner { gap: 12px; height: 60px; }
    .header__phone span { display: none; }
    /* удобный тач-таргет: иконка телефона была 20×20 — мелко для пальца */
    .header__actions { gap: 4px; }
    .header__phone { padding: 10px; border-radius: var(--radius); }
    /* #2843: на телефоне логотип знак+текст (вариант m2): знак 36, текст 18 */
    .header__logo .logo-mark { width: 36px; height: 36px; font-size: 1.3rem; border-radius: 8px; }
    .header__logo .logo-text { font-size: 18px; }
    .hero { padding: 28px 0; }  /* #2301: был 40 */
    .hero h1::before { margin-bottom: 16px; }
    .hero__subtitle { margin-bottom: 20px; }
    .hero h1 { font-size: 1.75rem; }
    .hero__cta { flex-direction: column; gap: 10px; margin-bottom: 40px; }
    .hero__trust { margin-top: -20px; gap: 8px; }
    .product-detail { grid-template-columns: 1fr; }
    .cart-item {
        grid-template-columns: 60px 1fr auto;
        grid-template-rows: auto auto;
    }
    .cart-item__price, .cart-item__subtotal { font-size: .875rem; }
    .form-row { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .product-card__img { height: 160px; padding: 12px; }
    .product-card__body { padding: 12px; }
    .product-card__footer { padding: 12px; }
    .b2b-grid { grid-template-columns: 1fr 1fr; }
    .b2b-banner { flex-direction: column; padding: 24px; text-align: center; }
    .b2b-banner__content { flex-direction: column; align-items: center; }
    .categories-grid { grid-template-columns: 1fr 1fr; }
    .footer__grid { grid-template-columns: 1fr; gap: 24px; }
    .catalog-header { flex-direction: column; gap: 4px; }
    .catalog-toolbar { flex-direction: column; align-items: flex-start; }
    .section__title { font-size: 1.375rem; }
    .page-title { font-size: 1.375rem; margin: 16px 0 12px; }
}

@media (max-width: 480px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .product-card__img { height: 130px; }
    .product-card__name { font-size: .8125rem; } /* число строк — одно правило внизу файла */
    .b2b-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: 1fr; }
}

/* ===== LEGAL PAGES ===== */
.legal-content {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    padding: 32px;
    margin-bottom: 24px;
    line-height: 1.8;
    color: var(--gray-700);
}
.legal-content h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--dark);
}
.legal-content h2:first-of-type { margin-top: 8px; }
.legal-content ul, .legal-content ol {
    padding-left: 24px;
    margin: 8px 0;
}
.legal-content li { margin-bottom: 4px; }
.legal-date { color: var(--gray-400); font-size: .8125rem; margin-bottom: 16px; }
.legal-notice {
    background: var(--orange-light);
    border-left: 4px solid var(--orange);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: .9375rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 999;
    box-shadow: 0 -4px 12px rgba(0,0,0,.08);
    font-size: .875rem;
}
.cookie-banner__text { color: var(--gray-600); }
.cookie-banner__text a { text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ===== CHECKBOX ===== */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .875rem;
    color: var(--gray-600);
    margin: 16px 0;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.checkbox-label a { text-decoration: underline; }

@media (max-width: 768px) {
    /* #1662 (14.10.2026): на телефоне плашка компактная — текст 13px, две кнопки в ряд по 44px; над липкой покупкой её поднимает base.html (_shopBottomStack) */
    .cookie-banner { flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 13px; line-height: 1.3; text-align: left; }
    .cookie-banner__text { flex: 1 1 100%; }
    .cookie-banner__actions { flex: 1 1 100%; }
    .cookie-banner__actions .btn { flex: 1 1 0; min-height: 44px; padding: 0 10px; justify-content: center; }
    .legal-content { padding: 20px; }
}

/* ===== SMART SEARCH ===== */
.smart-search-info {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: .875rem;
    color: var(--gray-700);
}
.smart-search-badge {
    display: inline-block;
    background: #16a34a;
    color: white;
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    text-transform: uppercase;
}
.smart-search-hint {
    background: var(--orange-light);
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 16px;
    font-size: .875rem;
}
.smart-search-hint a { font-weight: 600; }

/* ===== STOCK STATUS — colored badges ===== */
.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 700;
    margin: 12px 0 4px;
    padding: 8px 16px;
    border-radius: 100px;
    letter-spacing: .2px;
}
.stock-status--in_stock {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.stock-status--out_of_stock {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.stock-status--unknown, .stock-status--stale {
    color: var(--gray-600);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

/* ===== REQUEST BUTTON — large, orange, attention-grabbing ===== */
.btn--request {
    background: linear-gradient(135deg, var(--orange) 0%, #e85a0a 100%);
    color: var(--white);
    border: none;
    font-weight: 700;
    font-size: 1.125rem;
    width: 100%;
    padding: 16px 32px;
    border-radius: var(--radius-lg);
    transition: all var(--transition-smooth);
    text-transform: none;
    letter-spacing: .3px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(244,107,27,.25);
}
.btn--request::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition: left .5s ease;
}
.btn--request:hover::before {
    left: 100%;
}
.btn--request:hover {
    background: linear-gradient(135deg, #e85a0a 0%, #d14e04 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244,107,27,.35);
    color: var(--white);
}
.btn--request:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(244,107,27,.3);
}

/* ===== SPECS TOGGLE ===== */
.specs-toggle {
    margin-top: 16px;
    font-weight: 600;
    color: var(--orange);
    border-color: var(--orange);
    transition: all var(--transition-smooth);
}
.specs-toggle:hover {
    background: var(--orange);
    color: var(--white);
    border-color: var(--orange);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(244,107,27,.2);
}

/* ===== SIMILAR / RELATED PRODUCTS CAROUSEL ===== */
.carousel-wrap {
    position: relative;
}
.carousel-wrap .products-grid--similar {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Скрыть скроллбар */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.carousel-wrap .products-grid--similar::-webkit-scrollbar { display: none; }
.products-grid--similar .product-card {
    min-width: calc((100% - 60px) / 6); /* 6 карточек в ряд */
    max-width: calc((100% - 60px) / 6);
    flex-shrink: 0;
    scroll-snap-align: start;
}
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 36px;
    height: 36px;
    background: var(--white);
    border: 1px solid var(--steel-200);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: .15s ease;
}
.carousel-arrow:hover {
    border-color: var(--orange-500);
    box-shadow: 0 2px 12px rgba(249,115,22,.15);
}
.carousel-arrow svg {
    width: 16px;
    height: 16px;
    stroke: var(--steel-600);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.carousel-arrow:hover svg { stroke: var(--orange-500); }
.carousel-arrow--left { left: -12px; }
.carousel-arrow--right { right: -12px; }
.carousel-arrow[disabled] { opacity: .3; pointer-events: none; }

@media (max-width: 1100px) {
    .products-grid--similar .product-card {
        min-width: calc((100% - 36px) / 4);
        max-width: calc((100% - 36px) / 4);
    }
}
@media (max-width: 768px) {
    .products-grid--similar .product-card {
        min-width: 160px;
        max-width: 180px;
    }
    .carousel-arrow { display: none; }
}

/* ===== RELATED TABS (cross-sell) ===== */
.related-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: 0;
}
.related-tabs__btn {
    padding: 10px 20px;
    font-size: .875rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-500);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
}
.related-tabs__btn:hover { color: var(--dark); }
.related-tabs__btn--active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}
.related-panel { display: none; }
.related-panel--active { display: block; }

/* ===== MOBILE STICKY BUTTON ===== */
@media (max-width: 768px) {
    .product-detail__cart-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 12px 16px;
        box-shadow: 0 -4px 12px rgba(0,0,0,.1);
        z-index: 90;
        display: flex;
        gap: 8px;
    }
    .product-detail__cart-actions .qty-control { flex-shrink: 0; }
    .product-detail__cart-actions .btn--request { flex: 1; }
    .product-section.faq-section { padding-bottom: 80px; }
}

/* ===== CATALOG LAYOUT WITH SIDEBAR ===== */
.catalog-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
}
.catalog-layout--no-sidebar {
    grid-template-columns: 1fr;
}
.catalog-main { min-width: 0; }

/* Sidebar filters */
.catalog-sidebar {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 16px;
    position: sticky;
    top: 80px;
}
.filter-group {
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-group__header {
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    padding: 10px 8px;
    color: var(--dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.filter-group__icon::after { content: '+'; font-size: 1.1rem; color: var(--gray-400); }
.filter-group--open .filter-group__icon::after { content: '\2212'; }
.filter-group__options {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 8px;
    display: none;
}
.filter-group--open .filter-group__options {
    display: block;
}
.filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    padding: 4px 0;
    cursor: pointer;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 28px;
}
.filter-option--active { font-weight: 600; color: var(--dark); }
.filter-option input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; }
.filter-option__count { color: var(--gray-400); font-size: .75rem; }

/* Active filter tags */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.active-filters__label { font-size: .8125rem; color: var(--gray-500); }
.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--orange-light);
    border: 1px solid #fed7aa;
    border-radius: 20px;
    font-size: .8125rem;
    color: var(--gray-800);
    text-decoration: none;
}
.active-filter-tag:hover { background: #fed7aa; }
.active-filter-tag__x { color: var(--orange); font-weight: 700; }
.active-filters__clear {
    font-size: .75rem;
    color: var(--gray-500);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .filter-group { padding-bottom: 8px; margin-bottom: 8px; }
}
@media (max-width: 480px) {
    .catalog-sidebar { grid-template-columns: 1fr; }
}

/* Brand page */
.brand-series { margin: 24px 0; }
.brand-series__title { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; }
.brand-series__grid { display: flex; flex-wrap: wrap; gap: 10px; }
.series-chip {
    display: inline-flex; flex-direction: column; gap: 2px;
    padding: 10px 16px; border: 1px solid var(--orange); border-radius: 20px;
    color: var(--gray-800); transition: all var(--transition);
}
.series-chip:hover { background: var(--orange); color: var(--white); }
.series-chip__name { font-weight: 600; font-size: .92rem; }
.series-chip__meta { font-size: .78rem; color: var(--gray-500); }
.series-chip:hover .series-chip__meta { color: rgba(255,255,255,.8); }

.brand-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 24px; }
.brand-nav__label { font-size: .85rem; color: var(--gray-500); margin-right: 4px; }
.brand-nav__link {
    font-size: .85rem; color: var(--gray-600); padding: 4px 10px;
    border: 1px solid var(--gray-200); border-radius: 14px;
    transition: all var(--transition); white-space: nowrap;
}
.brand-nav__link:hover { border-color: var(--orange); color: var(--orange); }
.brand-nav__link--active { background: var(--orange); color: var(--white); border-color: var(--orange); }
.brand-nav__count { font-size: .75rem; color: var(--gray-400); }

/* =====================================================
   PRODUCT PAGE V2 — 3-column industrial layout
   Prefixes: .pcard, .pgrid, .gal, .scol, .bcol, .pnav, .psec
   ===================================================== */

/* --- Product Card Container --- */
.pcard {
    margin: 16px 0 0;
    font-family: var(--font-ui);
}
.pcard__h1 {
    font-family: var(--font-ui);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--steel-900);
    letter-spacing: -.01em;
    margin-bottom: 8px;
}
.pcard__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .8125rem;
    color: var(--steel-400);
    margin-bottom: 20px;
}
.pcard__article {
    font-family: var(--font-mono);
    font-size: .8125rem;
}
.pcard__article-val {
    color: var(--steel-600);
    font-weight: 600;
}
.pcard__meta-sep { color: var(--steel-300); }
.pcard__brand-link {
    color: var(--steel-orange);
    font-weight: 600;
    font-family: var(--font-ui);
}
.pcard__brand-link:hover { color: var(--steel-orange-hover); }

/* --- 3-Column Grid --- */
.pgrid {
    display: grid;
    grid-template-columns: 1fr 280px 320px;
    gap: 24px;
    align-items: start;
    margin-bottom: 32px;
}

/* --- Gallery (Left Column) --- */
.gal {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--steel-200);
    padding: 20px;
    min-width: 0;        /* чтобы лента миниатюр (overflow-x:auto) не распирала колонку */
}
.gal__thumbs { min-width: 0; max-width: 100%; }
.gal__main {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--steel-50);
}
.gal__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform var(--transition-smooth);
}
.gal__img:hover { transform: scale(1.03); }
.gal__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    background: var(--steel-100);
    border-radius: var(--radius);
}
.gal__placeholder svg { opacity: .35; }
.gal__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.gal__thumb {
    width: 68px;
    height: 68px;
    object-fit: contain;
    border: 2px solid var(--steel-200);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
    background: var(--white);
    padding: 3px;
}
.gal__thumb:hover { border-color: var(--steel-orange); }
.gal__thumb--active { border-color: var(--steel-orange); box-shadow: 0 0 0 2px rgba(249,115,22,.2); }

/* --- Specs Column (Middle) --- */
.scol {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Карточка-панель — чтобы средняя колонка не «висела в воздухе»
       рядом с фото и блоком покупки, когда характеристик мало. */
    background: var(--white);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-lg);
    padding: 20px;
}

/* --- Variant selector (размер / цвет / класс) --- */
.vsel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--steel-200);
}
.vsel__label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--steel-500);
    margin-bottom: 7px;
}
.vsel__opts { display: flex; flex-wrap: wrap; gap: 7px; }
.vsel__opt {
    display: inline-flex;
    align-items: center;
    min-width: 38px;
    justify-content: center;
    padding: 7px 12px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--steel-700);
    background: var(--white);
    border: 1.5px solid var(--steel-300);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}
.vsel__opt:hover {
    border-color: var(--steel-orange);
    color: var(--steel-orange-hover);
    text-decoration: none;
}
.vsel__opt--active {
    color: #fff;
    background: var(--steel-orange);
    border-color: var(--steel-orange);
    cursor: default;
}
.vsel__opt--oos {
    color: var(--steel-400);
    border-style: dashed;
}
.vsel__opt--oos:hover { color: var(--steel-orange-hover); }
.scol__brand-pill {
    display: inline-block;
    width: fit-content;
    font-family: var(--font-ui);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--steel-orange);
    background: var(--steel-orange-50);
    border: 1px solid var(--steel-orange-100);
    padding: 5px 14px;
    border-radius: 100px;
}
.scol__specs {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}
.scol__specs tr {
    border-bottom: 1px solid var(--steel-100);
}
.scol__specs tr:last-child { border-bottom: none; }
.scol__spec-name {
    padding: 8px 8px 8px 0;
    color: var(--steel-400);
    font-weight: 400;
    white-space: nowrap;
}
.scol__spec-val {
    padding: 8px 0;
    font-weight: 600;
    color: var(--steel-800);
    text-align: right;
    font-family: var(--font-mono);
    font-size: .8125rem;
}
.scol__all-specs-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-orange);
}
.scol__all-specs-link:hover { color: var(--steel-orange-hover); }

/* Key-specs infographic tiles (Ozon/ВсеИнструменты-style, built from key_specs) */
/* Ключевые характеристики — чистый список «Название — Значение» (спецлист), зебра-строки */
.scol__specgrid {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius);
    overflow: hidden;
}
.scol__spectile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    min-width: 0;
    border-bottom: 1px solid var(--steel-100);
}
.scol__spectile:last-child { border-bottom: none; }
.scol__spectile:nth-child(even) { background: var(--steel-50); }
.scol__spectile-name {
    order: 1;
    flex: 1 1 auto;
    font-size: .8125rem;
    color: var(--steel-500);
    line-height: 1.3;
}
.scol__spectile-val {
    order: 2;
    flex: 0 0 auto;
    text-align: right;
    font-weight: 600;
    font-size: .875rem;
    color: var(--steel-900);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.scol__consumables {
    margin-top: auto;
    background: var(--steel-blue-50);
    border: 1px solid #dbeafe;
    border-radius: var(--radius);
    padding: 14px;
}
.scol__consumables-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-800);
    margin-bottom: 4px;
}
.scol__consumables-title svg { color: var(--steel-blue-600); flex-shrink: 0; }
.scol__consumables-hint {
    font-size: .75rem;
    color: var(--steel-500);
    margin-bottom: 6px;
}
.scol__consumables-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-blue-600);
}

/* --- Buy Column (Right) --- */
.bcol {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--steel-200);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px;
}

/* Компактная моб. панель покупки — на десктопе скрыта */
.mbuy { display: none; }

/* Price box */
.bcol__price-box {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--steel-100);
}
.bcol__old-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.bcol__old-price-val {
    font-size: .875rem;
    color: var(--steel-400);
    text-decoration: line-through;
    font-family: var(--font-mono);
}
.bcol__discount-badge {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
}
.bcol__price {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--steel-900);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.bcol__price--request {
    font-family: var(--font-ui);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--steel-500);
}
.bcol__currency {
    font-size: 1.5rem;
    color: var(--steel-orange);
    font-weight: 600;
}
.bcol__price-note {
    font-size: .75rem;
    color: var(--steel-400);
    margin-top: 6px;
}

/* Actions */
.bcol__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bcol__qty {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.bcol__qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--steel-200);
    background: var(--white);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel-600);
    transition: all var(--transition);
}
.bcol__qty-btn:hover { border-color: var(--steel-400); background: var(--steel-50); }
.bcol__qty input {
    width: 48px;
    height: 36px;
    text-align: center;
    border: 1px solid var(--steel-200);
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 600;
    font-family: var(--font-mono);
}
.bcol__cart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--steel-orange);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 14px rgba(249,115,22,.25);
}
.bcol__cart-btn:hover {
    background: var(--steel-orange-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(249,115,22,.35);
}
.bcol__cart-btn:active { transform: translateY(0); }
.bcol__cart-btn svg { flex-shrink: 0; }

.bcol__invoice-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    color: var(--steel-700);
    border: 1.5px solid var(--steel-300);
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.bcol__invoice-btn:hover {
    border-color: var(--steel-orange);
    color: var(--steel-orange);
}
.bcol__invoice-btn svg { flex-shrink: 0; }

/* Stock */
.bcol__stock {
    padding: 12px;
    border: 1px solid var(--steel-200);
    border-radius: 8px;
    margin-top: 12px;
}
.bcol__stock-head {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--steel-400);
    font-weight: 600;
    margin-bottom: 8px;
}
.bcol__stock-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--steel-400);
    font-weight: 600;
    margin-bottom: 8px;
}
.bcol__stock-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--steel-700);
    padding: 4px 0;
}
.bcol__stock-row--near {
    background: #f0fdf4;
    border-radius: 6px;
    padding: 4px 8px;
    margin: 0 -8px;
}
.bcol__stock-city { flex: 1; }
.bcol__stock-info {
    margin-left: auto;
    font-weight: 600;
    font-size: .75rem;
    color: var(--steel-600);
}
.bcol__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bcol__stock-dot--green { background: var(--steel-green-500); box-shadow: 0 0 6px rgba(34,197,94,.4); }
.bcol__stock-dot--yellow { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,.4); }
.bcol__stock-dot--gray { background: var(--steel-300); }
/* Город клиента + остаток по городу (Шаг 1) */
.bcol__city { margin: 8px 0 12px; }
.bcol__city-form { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bcol__city-label { color: #6b7280; font-size: 14px; }
.bcol__city-select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; background: #fff; cursor: pointer; }
.bcol__city-stock { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.bcol__city-stock--in { color: #16a34a; }
.bcol__city-stock--order { color: #b45309; }
.bcol__stock-label {
    margin-left: auto;
    font-weight: 600;
    font-size: .75rem;
}
.bcol__stock-label--green { color: var(--steel-green-600); }
.bcol__stock-label--yellow { color: #ca8a04; }
.bcol__stock-label--gray { color: var(--steel-400); }

/* Delivery */
.bcol__delivery {
    padding: 12px;
    border: 1px solid var(--steel-200);
    border-radius: 8px;
    margin-top: 12px;
}
.bcol__save {
    display: inline-block;
    font-size: .9rem;
    font-weight: 700;
    color: var(--green);
    background: var(--green-light);
    padding: 2px 9px;
    border-radius: 6px;
    margin-top: 6px;
}
.bcol__delivery-eta {
    font-size: .9rem;
    color: var(--green);
    margin: 2px 0 8px;
}
.bcol__delivery-eta b { font-weight: 700; }
.bcol__delivery-head {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--steel-400);
    font-weight: 600;
    margin-bottom: 8px;
}
.bcol__delivery-best {
    background: #f0fdf4;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-green-600);
    margin-bottom: 8px;
}
.bcol__delivery-row {
    font-size: .8125rem;
    color: var(--steel-600);
    padding: 6px 0;
    border-top: 1px solid var(--steel-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.bcol__delivery-tk { font-weight: 600; color: var(--steel-800); }
.bcol__delivery-days { color: var(--steel-400); font-size: .75rem; }
.bcol__delivery-cost { font-family: var(--font-mono); font-weight: 600; color: var(--steel-700); white-space: nowrap; }
.bcol__delivery-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--steel-400);
    font-weight: 600;
    margin-bottom: 8px;
}
.bcol__delivery-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: .8125rem;
}
.bcol__delivery-opt:last-child { margin-bottom: 0; }
.bcol__delivery-opt svg {
    flex-shrink: 0;
    color: var(--steel-orange);
    margin-top: 2px;
}
.bcol__delivery-name {
    font-weight: 600;
    color: var(--steel-800);
    font-size: .8125rem;
}
.bcol__delivery-detail {
    color: var(--steel-500);
    font-size: .75rem;
}

/* Trust badges */
.bcol__trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--steel-100);
}
.bcol__trust-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.bcol__trust-row svg {
    flex-shrink: 0;
    color: var(--steel-orange);
    margin-top: 1px;
}
.bcol__trust-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.bcol__trust-txt b {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--steel-700, #2a2a3a);
}
.bcol__trust-txt span {
    font-size: .75rem;
    color: var(--steel-500);
}
.bcol__trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--steel-500);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.bcol__trust-item svg {
    flex-shrink: 0;
    color: var(--steel-orange);
    width: 14px;
    height: 14px;
}

/* --- Sticky Section Nav --- */
.pnav {
    display: flex;
    gap: 4px;
    padding: 6px;
    position: sticky;
    top: 68px;
    background: var(--white);
    z-index: 10;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}
.pnav__tab {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-500);
    text-decoration: none;
    transition: all var(--transition-smooth);
    cursor: pointer;
}
.pnav__tab:hover {
    background: var(--steel-50);
    color: var(--steel-800);
}
.pnav__tab--active {
    background: var(--steel-orange);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(249,115,22,.3);
}
.pnav__tab--active:hover {
    background: var(--steel-orange-hover);
    color: var(--white);
}

/* Sections wrapper box */
.sec-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--steel-200);
    overflow: hidden;
    margin-top: 24px;
}
.sec-box > .psec {
    margin-bottom: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--steel-100);
}
.sec-box > .psec:last-child { border-bottom: none; }
.sec-box > .pnav { margin-bottom: 0; }

/* --- Sections --- */
.psec {
    background: var(--white);
    border-radius: 0;
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid var(--steel-200);
}
.psec__heading {
    font-family: var(--font-ui);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--steel-900);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--steel-100);
}

/* Two-column layout: desc left, specs right */
.psec__two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}
.psec__desc-col { min-width: 0; }
.psec__desc-col h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--steel-800);
    margin-bottom: 12px;
}
.psec__description {
    line-height: 1.8;
    color: var(--steel-600);
    font-size: .9375rem;
    margin-bottom: 24px;
}
.psec__seo-text {
    line-height: 1.8;
    color: var(--steel-600);
    font-size: .9375rem;
    margin-bottom: 24px;
}
.psec__seo-text p { margin-bottom: 12px; }
.psec__seo-text p:last-child { margin-bottom: 0; }

/* Advantages */
.psec__advantages {
    margin-bottom: 24px;
}
.psec__advantages ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.psec__advantages li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--steel-700);
    padding: 14px 16px;
    background: var(--steel-50, #f8f8fa);
    border-radius: 8px;
    border: 1px solid var(--steel-200, #e4e4ea);
}
.psec__advantages li svg { flex-shrink: 0; margin-top: 2px; }

/* Info cards */
.psec__info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--steel-100);
}
.psec__info-card {
    padding: 16px;
    background: var(--steel-50);
    border-radius: var(--radius);
    border: 1px solid var(--steel-100);
}
.psec__info-card-title {
    font-weight: 700;
    font-size: .875rem;
    color: var(--steel-800);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--steel-orange-50);
}
.psec__info-card-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: .8125rem;
}
.psec__info-card-row span:first-child { color: var(--steel-400); }
.psec__info-card-row span:last-child { font-weight: 600; color: var(--steel-700); }
.psec__info-card-text {
    font-size: .8125rem;
    color: var(--steel-600);
    line-height: 1.6;
}

/* Specs right column */
.psec__specs-col {
    min-width: 0;
}
.psec__specs-col h3 {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--steel-800);
    margin-bottom: 12px;
}
.psec__specs-table {
    width: 100%;
    border-collapse: collapse;
}
.psec__specs-table tr {
    border-bottom: 1px solid var(--steel-100);
    transition: background var(--transition);
}
.psec__specs-table tr:last-child { border-bottom: none; }
.psec__specs-table tr:nth-child(even) { background: var(--steel-50); }
.psec__specs-table tr:hover { background: var(--steel-orange-50); }
.psec__spec-name {
    padding: 10px 12px 10px 0;
    font-size: .8125rem;
    color: var(--steel-400);
    width: 45%;
}
.psec__spec-val {
    padding: 10px 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-800);
}
.psec__specs-toggle {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--steel-orange);
    background: transparent;
    border: 1.5px solid var(--steel-orange);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
.psec__specs-toggle:hover {
    background: var(--steel-orange);
    color: var(--white);
}

/* Series comparison table */
.psec--series {}
.psec__series-scroll {
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px 8px;
}
.psec__series-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
    font-size: .8125rem;
}
.psec__series-table thead tr {
    background: var(--steel-700);
}
.psec__series-table th {
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: .75rem;
    color: var(--steel-300);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.psec__series-table th:first-child { text-align: left; }
.psec__series-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--steel-100);
    vertical-align: middle;
}
.psec__series-table td:not(:first-child) { text-align: center; }
.psec__series-col-name {
    min-width: 200px;
    max-width: 280px;
}
.psec__series-col-name a {
    color: var(--steel-700);
    font-weight: 500;
}
.psec__series-col-name a:hover { color: var(--steel-orange); }
.psec__series-current {
    background: var(--steel-orange-50);
}
.psec__series-current td:first-child {
    border-left: 3px solid var(--steel-orange);
}
.psec__series-badge {
    display: inline-block;
    background: #C2410C; /* #2298: было --steel-orange, белый 12px — 2.8:1 */
    color: var(--white);
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.psec__series-price {
    font-family: var(--font-mono);
    font-weight: 700;
    white-space: nowrap;
    color: var(--steel-800);
}
.psec__series-stock { white-space: nowrap; }
.psec__stock { font-size: 12px; font-weight: 600; white-space: nowrap; }
.psec__stock--in { color: #16a34a; }
.psec__stock--order { color: var(--steel-500, #64748b); }

/* FAQ */
.psec__faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.psec__faq-item {
    border: 1px solid var(--steel-200);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition-smooth);
}
.psec__faq-item:hover { border-color: var(--steel-300); }
.psec__faq-item[open] {
    border-color: var(--steel-orange);
    box-shadow: 0 2px 12px rgba(249,115,22,.06);
}
.psec__faq-q {
    padding: 16px 18px;
    font-weight: 600;
    font-size: .9375rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--steel-800);
    transition: background var(--transition);
}
.psec__faq-q:hover { background: var(--steel-50); }
.psec__faq-item[open] .psec__faq-q {
    background: var(--steel-orange-50);
    color: var(--steel-orange);
}
.psec__faq-q::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--steel-400);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--steel-100);
    flex-shrink: 0;
    transition: all var(--transition-smooth);
}
.psec__faq-item[open] .psec__faq-q::after {
    content: '\2212';
    background: var(--steel-orange);
    color: var(--white);
}
.psec__faq-q::-webkit-details-marker { display: none; }
.psec__faq-a {
    padding: 0 18px 16px;
    color: var(--steel-600);
    font-size: .875rem;
    line-height: 1.7;
    animation: faqSlide .25s ease-out;
}

/* Delivery grid in section */
.psec__delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.psec__delivery-card {
    padding: 24px 20px;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius);
    text-align: center;
    transition: all var(--transition-smooth);
}
.psec__delivery-card:hover {
    border-color: var(--steel-orange);
    box-shadow: 0 4px 16px rgba(249,115,22,.06);
    transform: translateY(-2px);
}
.psec__delivery-icon {
    margin: 0 auto 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--steel-orange-50);
    border-radius: 12px;
    color: var(--steel-orange);
}
.psec__delivery-card-title {
    font-weight: 700;
    font-size: .9375rem;
    margin-bottom: 6px;
    color: var(--steel-800);
}
.psec__delivery-card-text {
    font-size: .8125rem;
    color: var(--steel-500);
    line-height: 1.5;
}

/* --- Responsive: Product Page V2 --- */
@media (max-width: 1100px) {
    .pgrid {
        grid-template-columns: 1fr 280px;
    }
    .bcol {
        grid-column: 1 / -1;
        position: static;
    }
    .psec__two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pgrid {
        grid-template-columns: 1fr;
    }
    .pcard__h1 { font-size: 1.25rem; }
    /* Блок цены целиком — в обычном потоке (прокручивается вместе со страницей),
       чтобы не закрывать экран. Покупка вынесена в компактную панель .mbuy. */
    .bcol {
        position: static;
        max-height: none;
        overflow-y: visible;
        box-shadow: none;
        z-index: auto;
        top: auto;
    }
    /* Липкая панель покупки внизу: цена + количество (1-я строка),
       «В корзину» + «Счёт» (2-я строка). Крупные тач-таргеты. */
    .mbuy {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 95;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--white);
        border-top: 1px solid var(--steel-200);
        box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    }
    .mbuy__row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .mbuy__row2 { display: flex; gap: 8px; }
    .mbuy__price { font-size: 1.375rem; font-weight: 700; color: var(--steel-900); white-space: nowrap; }
    .mbuy__cur { color: var(--orange); }
    .mbuy__price--req { font-size: 1.0625rem; font-weight: 700; }
    .mbuy__qty { display: flex; align-items: center; border: 1px solid var(--steel-200); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
    .mbuy__qty-btn { width: 44px; height: 44px; border: none; background: var(--steel-50); font-size: 1.375rem; line-height: 1; color: var(--steel-700); cursor: pointer; }
    .mbuy__qty-btn:active { background: var(--steel-100); }
    .mbuy__qty-val { min-width: 42px; text-align: center; font-weight: 700; font-size: 1.0625rem; }
    .mbuy__cart { flex: 2 1 0; min-height: 50px; font-size: 1.0625rem; }
    .mbuy__invoice {
        flex: 1 1 0; min-height: 50px; border: 1px solid var(--steel-300);
        background: var(--white); color: var(--steel-700); border-radius: var(--radius);
        font-weight: 600; font-size: 1rem; cursor: pointer; white-space: nowrap;
    }
    .mbuy__invoice:active { background: var(--steel-50); }
    .mbuy__invoice--wide { width: 100%; }
    .bcol__stock,
    .bcol__delivery,
    .bcol__trust { display: none; }
    .bcol__price { font-size: 1.5rem; }
    .bcol__actions { flex-direction: row; gap: 8px; }
    .bcol__qty { margin-bottom: 0; }
    .bcol__cart-btn { flex: 1; padding: 12px 16px; }
    .bcol__invoice-btn { display: none; }
    .scol__consumables { display: none; }
    .pnav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
        top: 60px;
    }
    .pnav__tab {
        white-space: nowrap;
        padding: 8px 14px;
        font-size: .75rem;
    }
    .psec { padding: 20px 16px; }
    .psec__heading { font-size: 1.0625rem; }
    .psec__advantages ul { grid-template-columns: 1fr; }
    .psec__delivery-grid { grid-template-columns: 1fr 1fr; }
    /* Add bottom padding for fixed bcol */
    /* #2301: отступ под липкую покупку — только странице товара (тело и подвал); был на КАЖДОМ
       .container (+120 px под каждой секцией главной и листингов на телефоне). */
    /* селекторы с :has — отдельными правилами: браузер без :has отбросил бы весь список */
    .pv2-wrap > .container { padding-bottom: 120px; }
    body:has(.pv2-mbuy) .footer > .container { padding-bottom: 120px; }
    /* #2301: полоса сравнения (.cmp-bar есть в DOM только при ≥1 товаре) и плашка cookie (body.ck-up,
       высота в --ck-h — ставит _shopBottomStack в base.html) лежат поверх низа — подвалу запас под них. */
    body.ck-up .footer > .container { padding-bottom: max(120px, calc(var(--ck-h, 0px) + 16px)); }
    body:has(.cmp-bar) .footer > .container { padding-bottom: max(120px, calc(var(--ck-h, 0px) + 16px)); }
    /* НО не шапке: .header__main-inner тоже .container — иначе 120px пустоты
       в липком хедере съедали верх экрана на телефоне (D5169). */
    .header__main-inner { padding-bottom: 0; }
}

@media (max-width: 480px) {
    .psec__delivery-grid { grid-template-columns: 1fr; }
}

/* ===== Сравнение товаров ===== */
.product-card { position: relative; }
.product-card__compare {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--steel-200, #e4e4e7); background: #fff; border-radius: 8px;
    color: var(--steel-400, #a1a1aa); cursor: pointer; transition: .15s; padding: 0;
}
.product-card__compare:hover { color: var(--orange, #F46B1B); border-color: var(--orange, #F46B1B); }
.product-card__compare.is-active { background: var(--orange, #F46B1B); color: #fff; border-color: var(--orange, #F46B1B); }
.cmp-bar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
    display: flex; align-items: center; gap: 14px; background: #1a1a1a; color: #fff;
    padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: .9rem;
}
.cmp-bar__go { background: var(--nk-orange-700, #C2410C); color: #fff; padding: 7px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.cmp-bar__hint { color: #aaa; }
.cmp-bar__clr { background: none; border: none; color: #bbb; cursor: pointer; font-size: .82rem; }
/* #2351 (21.10.2026): низ экрана на ЛЮБОЙ ширине. Плашка cookie (высота --ck-h, пока видна) и липкая покупка
   (--mb-h) — их ставит _shopBottomStack в base.html; полоса сравнения встаёт НАД ними (была под плашкой
   z-index 999 и поверх покупки), подвалу — запас на всю стопку (на 1440 плашка закрывала строку копирайта,
   на 769–980 у карточки товара запаса под липкую покупку не было вовсе — правило ниже было только до 768).
   Без скрипта переменные пусты = 0, вид прежний. :has — отдельными правилами (браузер без :has отбросил бы
   весь список). Откат — удалить этот блок. */
.cmp-bar { bottom: calc(18px + var(--ck-h, 0px) + var(--mb-h, 0px)); }
body:has(.cmp-bar) { --cmp-h: 72px; }
body.ck-up .footer > .container { padding-bottom: calc(var(--ck-h, 0px) + var(--mb-h, 0px) + var(--cmp-h, 0px) + 16px); }
body:has(.cmp-bar) .footer > .container { padding-bottom: calc(var(--ck-h, 0px) + var(--mb-h, 0px) + var(--cmp-h, 0px) + 16px); }
@media (max-width: 768px) {
    /* телефон: полоса во всю ширину слева от кнопки чата (по центру она залезала под чат на 48 px) */
    .cmp-bar { left: 12px; right: 72px; transform: none; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
    body:has(.cmp-bar) { --cmp-h: 110px; }
}
@media (max-width: 980px) {
    body:has(.pv2-mbuy) .footer > .container { padding-bottom: max(120px, calc(var(--ck-h, 0px) + var(--mb-h, 0px) + var(--cmp-h, 0px) + 16px)); }
}
.cmp__h1 { font-size: 1.5rem; font-weight: 700; margin: 12px 0; }
.cmp__empty { padding: 36px 0; color: #666; }
.cmp__empty p { margin-bottom: 16px; }
.cmp__toggle { display: inline-flex; gap: 8px; align-items: center; margin: 6px 0 14px; font-size: .9rem; cursor: pointer; }
.cmp__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__table { border-collapse: collapse; font-size: .875rem; }
.cmp__table th, .cmp__table td { border: 1px solid var(--steel-200, #e4e4e7); padding: 10px 12px; vertical-align: top; text-align: left; }
.cmp__corner { background: #fafafa; font-weight: 600; color: #777; }
.cmp__pname { background: #fafafa; font-weight: 600; color: #555; position: sticky; left: 0; min-width: 150px; }
.cmp__head { min-width: 200px; position: relative; background: #fff; }
.cmp__prod { display: block; text-decoration: none; color: inherit; }
.cmp__img { width: 130px; height: 130px; object-fit: contain; display: block; margin: 0 auto 8px; }
.cmp__name { font-weight: 600; font-size: .9rem; display: block; line-height: 1.3; }
.cmp__art { font-size: .75rem; color: #999; font-family: var(--font-mono, monospace); margin: 4px 0; }
.cmp__remove { position: absolute; top: 4px; right: 4px; border: none; background: #f0f0f0; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; color: #666; line-height: 1; font-size: 16px; }
.cmp__cart { margin-top: 8px; width: 100%; background: var(--nk-orange-700, #C2410C); color: #fff; border: none; border-radius: 8px; padding: 8px; font-weight: 700; cursor: pointer; }
.cmp__val--diff { background: #fff7ed; }

/* Фасет-диапазон (ползунок «от/до» вместо чекбоксов для числовых свойств) */
.filter-range { display: flex; align-items: center; gap: 6px; padding: 4px 2px; flex-wrap: wrap; }
.filter-range input {
    width: 62px; padding: 6px 8px; border: 1px solid var(--gray-200);
    border-radius: var(--radius); font-size: .8125rem; font-family: inherit; text-align: center;
}
.filter-range input:focus { outline: none; border-color: var(--orange); }
.filter-range > span { color: var(--gray-400, #9ca3af); }
.filter-range .btn { padding: 5px 10px; }

/* ============================================================
   МОБИЛЬНАЯ СТРУКТУРА в духе Walmart (02.07.2026, курс «структура
   Walmart, наш бренд» — см. память project_storefront_walmart_structure_direction).
   Только узкие экраны; десктоп не затрагивается.
   ============================================================ */
/* Шапка: две строки — лого/каталог/иконки сверху, поиск на всю ширину снизу.
   Убирает горизонтальный скролл на телефоне (был +165px из-за .header__actions). */
/* #2843 (28.10.2026, вариант m2): строка 1 — логотип | трубка 40×40, «Каталог», «Корзина» словом; строка 2 — поиск.
   Боковой отступ 16px: прежнее «padding: 10px 0» снимало отступ .container, логотип и поиск липли к краю. */
@media (max-width: 768px) {
    /* ширина строки 1 на 390: логотип 143 + трубка 40 + «Каталог» 80 + «Корзина» 61 + зазоры 3×8 = 348 из 358 */
    .header__main-inner { flex-wrap: wrap; height: auto; row-gap: 12px; padding: 12px 16px; gap: 8px; }
    .header__logo { order: 1; margin-right: auto; gap: 8px; }
    .header__call { order: 2; display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 40px; height: 40px; color: #141414; border-radius: var(--radius); }
    #catmenu-btn, .catmenu-btn { order: 3; }
    .header__actions { order: 4; gap: 2px; }
    .search-bar { order: 5; flex-basis: 100%; max-width: none; }
    .header__phone { display: none; } /* звонок — трубкой .header__call */
    .header__act { display: none; } /* «Войти», «Заявка списком» — в хвосте ленты разделов .srow */
    .header__actions svg { display: none; } /* «Корзина» словом */
    .header__actions a { margin-right: 0 !important; }
    /* счётчик над концом слова: строка 1 на 390 без запаса по ширине — кружок не должен её удлинять */
    .header__cart .cart-badge { position: absolute; top: -9px; right: -12px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
    .search-bar input { padding-right: 90px; }
    .search-bar button { padding: 0 14px; font-size: 14px; }
}
/* узкие телефоны: на 369–389 (375) текст логотипа мельче, ≤368 (360) остаётся знак — иначе «Корзина» уходит на вторую строку */
@media (max-width: 389px) {
    .header__logo .logo-text { font-size: 16px; }
}
@media (max-width: 368px) {
    .header__logo .logo-text { display: none; }
}
/* #1696 (14.10.2026): на 769–1279 шапка в одну строку не влезала — .header__actions 519px
   с flex-shrink:0 раздувал страницу до 950. Прячем ступенями, без обрыва; 1280+ на мыши не меняется. */
@media (min-width: 769px) and (max-width: 1279px) {
    .header__phone { display: none; } /* номер виден в верхней полоске .header__top */
    .header__phone-top--fed { display: inline; } /* #2843: в полосе оба номера — федеральный не теряется */
}
@media (min-width: 769px) and (max-width: 1100px) {
    .header__main-inner { gap: 16px; }
    .header__actions { gap: 4px; }
    .header__actions .qo-header-link, .header__cart-word { display: none; } /* иконки без подписей, имя в title */
    .header__actions a { margin-right: 0 !important; }
    .header__actions > a:not(.header__cart) { padding: 10px; }
    /* #2843: счётчик над иконкой корзины, как до слова «Корзина» */
    .header__cart { padding: 8px; }
    .header__cart .cart-badge { position: absolute; top: 0; right: 0; }
}
/* палец: кнопки шапки не меньше 44×44 */
@media (min-width: 769px) and (pointer: coarse) {
    .header__actions > a { min-width: 44px; min-height: 44px; justify-content: center; box-sizing: border-box; }
}
/* #1696: на 769–1100 верхняя полоска рвалась в 3–4 строки, номер «+7 (495) / 190-70- / 53» — а блок выше
   прячет телефон из шапки, считая номер видимым здесь. Оставляем город, «Оригинальная…», почту и номер.
   ВНИМАНИЕ: :nth-child(n+3) завязан на порядок детей .header__info в base.html (#2843: город, акцент, далее
   скрываемое — разделителей «|» больше нет, было n+4). */
@media (min-width: 769px) and (max-width: 1100px) {
    .header__info > :nth-child(n+3) { display: none; } /* «с НДС» есть у цен, в корзине и подвале */
    .header__info, .header__contacts a { white-space: nowrap; }
    /* наведение у иконок без подписи — как у .header__cart (#2843: инлайн-стилей у ссылок больше нет) */
    .header__actions > a:not(.header__cart):hover { background: var(--gray-100); color: var(--orange) !important; border-radius: var(--radius); }
}
@media (min-width: 769px) and (max-width: 900px) {
    .header__contacts a[href^="mailto:"] { display: none; }
}
/* Ряд «Часто заказывают» = свайп-карусель на телефоне (следующая карточка выглядывает). */
@media (max-width: 760px) {
    .products-grid--rail {
        display: flex; grid-template-columns: none;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 10px;
    }
    .products-grid--rail::-webkit-scrollbar { height: 4px; }
    .products-grid--rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
    .products-grid--rail > * { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ============================================================
   КАРТОЧКА ТОВАРА — причёсана в духе Walmart (02.07.2026, курс
   project_storefront_walmart_structure_direction). Только CSS, бренд не тронут.
   Всё — переопределения поверх базовых .product-card правил (идут раньше в файле).
   ============================================================ */
.product-card { height: 100%; border-radius: 16px; border-color: var(--line); box-shadow: 0 1px 2px rgba(20,24,28,.05); }
.product-card:hover { box-shadow: 0 14px 30px rgba(20,24,28,.11); transform: translateY(-4px); border-color: var(--line-strong); }
.product-card__link { display: flex; flex-direction: column; flex: 1; } /* тянет тело, футер прижат вниз → ровная высота в ряду */
.product-card__img, .product-card__noimg { height: 190px; background: #f7f8fa; } /* единая высота; серый остаётся у «нет фото» */
.product-card__img { background: #fff; } /* #2747 (28.10.2026): фото на белом, как карточка */
.product-card__img { transition: transform .28s ease; }
.product-card:hover .product-card__img { transform: scale(1.045); } /* мягкий зум */
.product-card__body { padding: 16px 16px 12px; }
.product-card__name { -webkit-line-clamp: 3; font-size: .9rem; min-height: 2.5em; } /* имя до 3 строк (06.10.2026: при 2 строках обрезано 43% на 1366px, при 3 — 5%) */
/* Футер: бейдж наличия → крупная цена → кнопка во всю ширину.
   flex-wrap:nowrap + сброс stock-badge flex-basis обязательны — иначе в колоночной
   раскладке цена/кнопка уезжают во «вторую колонку» и обрезаются в узких карточках. */
.product-card__footer { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 10px; padding-top: 12px; }
.product-card__footer .stock-badge { flex-basis: auto; margin-bottom: 0; }
.product-card__footer > * { min-width: 0; }
.product-card__price { font-size: 1.2rem; white-space: normal; line-height: 1.2; }
.product-card__footer .btn--add-to-cart { width: 100%; padding: 11px 14px; font-weight: 700; border-radius: 10px; }

/* ============================================================
   Лента «Часто заказывают» на десктопе = листаемая карусель со стрелками
   (02.07, курс project_storefront_walmart_structure_direction). Полоса прокрутки
   скрыта — управляют стрелки (мышь) и свайп/трекпад (тач). Моб. карусель — выше.
   ============================================================ */
@media (min-width: 761px) {
    .products-grid--rail { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; scroll-behavior: smooth; scrollbar-width: none; }
    .products-grid--rail::-webkit-scrollbar { height: 0; }
    .products-grid--rail > * { flex: 0 0 calc((100% - 16px * 4) / 5.4); scroll-snap-align: start; } /* ~5.4 карточки, следующая выглядывает */
}
.rail-wrap { position: relative; }
.rail-arrow { position: absolute; top: 36%; z-index: 6; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; box-shadow: 0 8px 22px rgba(20,24,28,.16); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); transition: opacity .15s, background .15s, color .15s; }
.rail-arrow:hover { background: var(--ink); color: #fff; }
.rail-arrow--prev { left: -18px; }
.rail-arrow--next { right: -18px; }
.rail-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .rail-arrow { display: none; } } /* на телефоне — свайп, без стрелок */

/* #1178 (06.10.2026): плитка товара на телефоне — строка списка: фото слева, название целиком, характеристики, подвал двумя ярусами. Откат — удалить блок до конца файла. */
@media (max-width:768px){
  /* колонка не уже 340px: иначе текст рядом с фото сжимается (бренд с боковой панелью, 601–700) */
  body .products-grid:not(.products-grid--rail){grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px}
  body .products-grid:not(.products-grid--rail) > .product-card{display:flex;flex-direction:column;height:auto;position:relative;border-radius:12px;overflow:hidden}
  body .products-grid:not(.products-grid--rail) > .product-card:hover{transform:none}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__link{flex:1 0 auto;display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 12px 0}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__img,
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__noimg{width:104px;height:104px;aspect-ratio:auto;padding:6px;border-radius:8px;object-fit:contain;transform:none;box-sizing:border-box}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__body{padding:0;min-width:0;display:flex;flex-direction:column;gap:4px}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__brand{font-size:12px;margin:0}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__article{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__name{display:block;-webkit-line-clamp:unset;overflow:visible;min-height:0;max-height:none;font-size:14px;line-height:1.35;font-weight:500;margin:0;overflow-wrap:anywhere}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__specs{display:block;margin:2px 0 0;padding:0}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__specs li{display:block;white-space:normal;overflow:visible;text-overflow:clip;background:none;border:0;border-radius:0;padding:1px 0;font-size:12px;line-height:1.35;font-weight:400;color:var(--ink2, #4b5563);overflow-wrap:anywhere}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__compare{top:84px;left:84px;right:auto;width:32px;height:32px}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer .btn--add-to-cart,
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer a.btn--outline{height:44px;min-height:44px;width:auto;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;white-space:nowrap}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__price{font-size:18px;line-height:1.2;flex:1 1 auto;min-width:0;white-space:normal}
  body .products-grid:not(.products-grid--rail) > .product-card .stock-badge{flex-basis:100%;margin:0;font-size:12px}
}
/* V4: строка списка, подвал во всю ширину двумя ярусами: слева наличие над ценой, справа кнопка на оба яруса */
@media (max-width:768px){
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 12px 12px;margin-top:10px;border-top:1px solid var(--line, #eceef1)}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer .stock-badge{grid-column:1;grid-row:1}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer .product-card__price{grid-column:1;grid-row:2}
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer .btn--add-to-cart,
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer a.btn--outline{grid-column:2;grid-row:1 / span 2;min-width:128px}
}
/* без строки наличия (поиск, серия) цена встаёт по центру подвала, а не во второй ярус под пустым первым */
@media (max-width:768px){
  body .products-grid:not(.products-grid--rail) > .product-card .product-card__footer:not(:has(.stock-badge)) .product-card__price{grid-row:1 / span 2}
}

/* ===== #2836 (28.10.2026): главная «вариант B» — светлый баннер .hb* и плитки разделов .tl* (вид 2).
   Перенесено 1:1 из утверждённого превью (inject.js). Сетки — minmax(0,1fr): без этого на 390 вылезало 398 px.
   Старые .hero* / .cat-card* не тронуты — на них живут страницы разделов. ===== */
.hb{padding:24px 0 8px}
.hb-box{background:#F4F4F4;border-radius:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;min-height:380px;overflow:hidden}
.hb-box--solo{grid-template-columns:minmax(0,1fr);min-height:0}
.hb-txt{padding:48px 0 48px 56px;min-width:0}
.hb-txt h1{font-family:"Golos Text",Arial,sans-serif;font-size:44px;line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#1a1a1a;max-width:520px;margin:0}
.hb-txt p{margin:18px 0 28px;font-size:17px;line-height:1.5;color:#555;max-width:470px}
.hb-btn{display:inline-flex;align-items:center;height:52px;padding:0 30px;border-radius:10px;background:#F26B1D;color:#fff;font-weight:700;font-size:16px;text-decoration:none}
.hb-btn:hover{color:#fff;filter:brightness(.95)}
.hb-ph{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:20px 28px;height:400px;padding:28px 48px 28px 0}
.hb-p{margin:0;display:flex;flex-direction:column;min-height:0;min-width:0;text-decoration:none;color:inherit}
.hb-p0{grid-row:1/3}
.hb-p img{flex:1;min-height:0;width:100%;object-fit:contain;mix-blend-mode:multiply}
.hb-cap{font-size:12px;line-height:1.35;color:#555;padding-top:6px;display:flex;flex-direction:column;gap:2px;min-width:0}
.hb-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-pr{font-weight:700;color:#1a1a1a;font-size:14px}
.hb-pr small{font-weight:400;color:#888;font-size:12px}
.tl-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tl-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tl{display:flex;flex-direction:column;background:#F4F4F4;border-radius:12px;padding:14px 14px 10px;aspect-ratio:1/1;text-decoration:none;color:#1a1a1a;transition:background .15s;min-width:0}
.tl:hover{background:#EDEDED;color:#1a1a1a}
.tl-nm{font-family:"Golos Text",Arial,sans-serif;font-weight:700;font-size:15px;line-height:1.25;min-height:2.5em}
.tl-im{flex:1;min-height:0;margin-top:8px;display:flex;align-items:flex-end;justify-content:center}
.tl-im img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.tl--icon .tl-im{align-items:center}
.tl-glyph{display:inline-flex;color:#9ca3af}
.tl-glyph svg{width:56px;height:56px}
.cats-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 20px}
.cats-h h2{font-family:"Golos Text",Arial,sans-serif;font-size:28px;font-weight:700;margin:0}
.cats-h a{color:#1a1a1a;font-weight:600;font-size:15px}
@media(max-width:1199px){.tl-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){
  .hb{padding-top:12px}
  .hb-box{grid-template-columns:minmax(0,1fr);min-height:0;border-radius:12px}
  .hb-txt{padding:24px 20px 4px}
  .hb-box--solo .hb-txt{padding-bottom:24px}
  .hb-txt h1{font-size:26px}
  .hb-txt p{font-size:15px;margin:10px 0 18px}
  .hb-btn{width:100%;justify-content:center;height:50px}
  .hb-ph{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;height:auto;padding:16px 20px 20px;gap:12px}
  .hb-p0{grid-row:auto}
  .hb-p img{flex:none;height:130px}
  .hb-p2{display:none}
  .tl-grid,.tl-grid--4{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .tl-nm{font-size:14px}
  .cats-h h2{font-size:22px}
}

/* #2747 (28.10.2026): цены — цифры одной ширины (tnum есть в Golos), чтобы столбцы сумм не гуляли.
   html body — сильнее правил шаблонов: их font: … сбрасывает font-variant-numeric. */
html body .product-card__price, html body .price-card__price, html body .cart-summary__total,
html body .mbuy__price, html body .pv2-bigprice, html body .cart-item__price, html body .cart-item__subtotal,
html body .co2-recap-item .sm, html body .co2-recap-total { font-variant-numeric: tabular-nums; }