/* ==========================================================================
   MAX-PROM — оформление главной страницы
   Собрано по утверждённому макету: кремовый фон, тёмный герой во всю ширину,
   технические подписи капителью и все числа моноширинным шрифтом.

   Главная подключает только этот файл, без style.css, поэтому шапка и подвал
   описаны здесь целиком.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */
:root {
    --cream:  #F6F4F2;
    --well:   #EEEBE7;
    --ink:    #141414;
    --body:   #232323;
    --ash:    #8C8C8C;
    --hair:   #D8D3CE;
    --line-d: #2E2E2E;
    --ash-d:  #7E7A75;
    --mute-d: #B9B4AE;

    --wrap: 1312px;

    --ff:   Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ff-c: "IBM Plex Sans Condensed", Inter, sans-serif;
    --ff-m: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Акцент задаётся темой ниже.
       --ember      заливка кнопок и плашек
       --ember-ink  текст поверх заливки
       --ember-text акцентный текст на кремовом: отдельный токен, потому что
                    жёлтая заливка как текст на светлом фоне нечитаема
       --ember-hi   индикаторы наличия и свечение */
    --ember:      #C2410C;
    --ember-ink:  #FFFFFF;
    --ember-text: #C2410C;
    --ember-hi:   #E8622A;
}

[data-accent="orange"] { --ember:#C2410C; --ember-ink:#fff; --ember-text:#C2410C; --ember-hi:#E8622A; }
[data-accent="mono"]   { --ember:#141414; --ember-ink:#fff; --ember-text:#141414; --ember-hi:#5A5A5A; }
[data-accent="red"]    { --ember:#B42318; --ember-ink:#fff; --ember-text:#A81E14; --ember-hi:#E0402C; }
[data-accent="blue"]   { --ember:#1D4ED8; --ember-ink:#fff; --ember-text:#1A44BC; --ember-hi:#4B7BFF; }
[data-accent="green"]  { --ember:#15803D; --ember-ink:#fff; --ember-text:#136B34; --ember-hi:#27A85A; }

/* Жёлтые: заливка с чёрным текстом, акцентный текст — тёмная охра. */
[data-accent="y-signal"] { --ember:#FFCC00; --ember-ink:#141414; --ember-text:#8A6A00; --ember-hi:#FFCC00; }
[data-accent="y-amber"]  { --ember:#F5A300; --ember-ink:#141414; --ember-text:#8A5D00; --ember-hi:#FFB524; }
[data-accent="y-ochre"]  { --ember:#B8860B; --ember-ink:#fff;    --ember-text:#8A6408; --ember-hi:#E0A81E; }
[data-accent="y-lime"]   { --ember:#D6D000; --ember-ink:#141414; --ember-text:#6E6A00; --ember-hi:#EAE43A; }
/* Жёлтый живёт только на тёмном, светлые секции остаются монохромными. */
[data-accent="y-dark"]   { --ember:#141414; --ember-ink:#fff;    --ember-text:#141414; --ember-hi:#FFCC00; }

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    background: var(--cream);
    color: var(--body);
    font-family: var(--ff);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Зерно поверх плоских заливок: убирает ощущение пустой цифровой плашки. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--ff-m); }
.plate {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 12px;
    font-weight: 500;
    color: var(--ash);
}

.btn {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 13px;
    font-weight: 500;
    padding: 13px 24px;
    border-radius: 3px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid transparent;
}
.btn-ember { background: var(--ember); color: var(--ember-ink); }
.btn-ember:hover { filter: brightness(.92); }
.btn-ghost { border-color: #454545; color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 9px 15px; font-size: 11.5px; }

/* --------------------------------------------------------------------------
   3. Шапка
   -------------------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--hair); background: var(--cream); position: relative; z-index: 50; }
.bar { display: flex; align-items: center; gap: 38px; height: 64px; }
.logo {
    font-family: var(--ff-c);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    flex: none;
}
.logo b { color: var(--ember-text); }
.bar nav { display: flex; gap: 20px; flex: 0 1 auto; min-width: 0; }
.bar nav a {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    color: var(--body);
    white-space: nowrap;
}
.bar nav a:hover { color: var(--ember-text); }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: 20px; flex: none; }
.tel { font-family: var(--ff-m); font-size: 14px; color: var(--ink); white-space: nowrap; }
/* Телефон и бургер живут только в мобильном меню — на десктопе телефон стоит справа. */
.bar nav .nav-tel { display: none; }
.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   4. Герой
   -------------------------------------------------------------------------- */
/* Полоса во всю ширину: тёмная половина слева, светлая витрина справа.
   Текст внутри тёмной половины прижат вправо, чтобы попасть в колонку .wrap. */
.hero {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    border-bottom: 1px solid var(--hair);
}
.hero-ink {
    background: var(--ink);
    padding: 70px 64px 62px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-ink .in { max-width: 600px; margin-left: auto; padding-left: 32px; width: 100%; }

.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.led {
    width: 7px;
    height: 7px;
    background: var(--ember-hi);
    border-radius: 50%;
    box-shadow: 0 0 9px var(--ember-hi);
    flex: none;
}
.eyebrow span {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    color: var(--mute-d);
}

.hero h1 {
    font-weight: 300;
    font-size: 57px;
    line-height: 1.04;
    letter-spacing: -.022em;
    color: #fff;
}
.hero h1 em { font-style: normal; color: var(--ash); }
.hsub { margin-top: 22px; color: var(--mute-d); font-size: 16px; max-width: 440px; }

/* Сетка, а не flex: четыре равные колонки гарантируют одну строку при любой
   длине значений, тогда как flex по содержимому переносил последнюю ячейку. */
.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
    border-top: 1px solid var(--line-d);
}
/* Вокруг разделителя одинаковые поля с обеих сторон; первая ячейка прижата
   к левому краю колонки — по ней выровнены абзац и кнопки. */
.facts div { padding: 17px 20px 0; border-right: 1px solid var(--line-d); }
.facts div:first-child { padding-left: 0; }
.facts div:last-child { border-right: 0; padding-right: 0; }
.facts .v { font-family: var(--ff-m); font-size: 20px; color: #fff; line-height: 1; white-space: nowrap; }
.facts .k {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 10.5px;
    color: var(--ash-d);
    margin-top: 7px;
    white-space: nowrap;
}
.hcta { display: flex; gap: 11px; margin-top: 36px; flex-wrap: wrap; }

.hero-glass {
    background: var(--well);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    position: relative;
}
/* Габариты корпусов расходятся вшестеро (0,40–2,36), поэтому ограничение
   и по высоте, и по ширине: иначе вертикальные шкафы уходят за кадр. */
.hero-glass img {
    max-width: 100%;
    max-height: 320px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(20, 20, 20, .2));
}
.tagpos { position: absolute; left: 40px; bottom: 32px; }
.tagpos .m { font-family: var(--ff-m); font-size: 13px; color: var(--ink); }

/* --------------------------------------------------------------------------
   5. Секции
   -------------------------------------------------------------------------- */
.sec { padding: 60px 0 70px; }
.sechead { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 14px; }
.sechead h2 { font-weight: 400; font-size: 30px; letter-spacing: -.015em; color: var(--ink); }
.sechead .n { font-family: var(--ff-m); font-size: 13px; color: var(--ash); margin-bottom: 6px; white-space: nowrap; }
.sechead .more {
    margin-left: auto;
    color: var(--ember-text);
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 6px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.chip {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11.5px;
    color: var(--body);
    border: 1px solid var(--hair);
    padding: 7px 13px;
    border-radius: 3px;
    background: #fff;
    white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip-d {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11.5px;
    color: #D6D2CD;
    border: 1px solid #3A3A3A;
    padding: 7px 12px;
    border-radius: 3px;
    white-space: nowrap;
}
.chip-d:hover { border-color: var(--ember-hi); color: #fff; }

/* --------------------------------------------------------------------------
   6. Сетка источников
   -------------------------------------------------------------------------- */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--hair);
    border: 1px solid var(--hair);
}
.card { background: var(--cream); display: flex; flex-direction: column; position: relative; }
/* Колодец выше макетных 150 px: 44% корпусов вертикальные, в низком кадре
   они ужимаются до узкой полоски. */
.card .wl {
    background: var(--well);
    height: 182px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-bottom: 1px solid var(--hair);
}
.card .wl img {
    max-height: 146px;
    max-width: 90%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(20, 20, 20, .16));
}
.card .bd { padding: 17px 19px 19px; display: flex; flex-direction: column; flex: 1; }
/* Обозначения набираются как в паспорте: капитель превратила бы «НПгрСН»
   в «НПГРСН». */
.model {
    font-family: var(--ff-c);
    font-weight: 600;
    letter-spacing: .05em;
    font-size: 15px;
    color: var(--ink);
}
.desc { font-size: 12.5px; color: var(--ash); margin-top: 4px; }
.readout { display: flex; margin-top: 15px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.readout div { flex: 1; padding: 10px 0 9px; border-right: 1px solid var(--hair); }
.readout div:last-child { border-right: 0; padding-left: 11px; }
.readout .v { font-family: var(--ff-m); font-size: 18px; color: var(--ink); line-height: 1; }
.readout .v u { text-decoration: none; font-size: 11.5px; color: var(--ash); margin-left: 2px; }
.readout .k {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 9.5px;
    color: var(--ash);
    margin-top: 5px;
}
.foot { display: flex; align-items: flex-end; margin-top: auto; padding-top: 16px; }
.price { font-family: var(--ff-m); font-size: 19px; color: var(--ink); white-space: nowrap; }
.price u { text-decoration: none; font-size: 12.5px; color: var(--ash); }
.stock { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.stock i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember-hi); box-shadow: 0 0 7px var(--ember-hi); flex: none; }
.stock span {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 9.5px;
    color: var(--ash);
    white-space: nowrap;
}
.card:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); z-index: 2; }
.card:hover .model { color: var(--ember-text); }

/* --------------------------------------------------------------------------
   7. Полоса нагревателей
   -------------------------------------------------------------------------- */
.band {
    background: var(--ink);
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    padding: 40px 44px 42px;
}
.band h3 { font-weight: 300; font-size: 29px; color: #fff; letter-spacing: -.015em; line-height: 1.15; }
.band p { color: var(--mute-d); margin-top: 13px; font-size: 14.5px; max-width: 400px; }
.blinks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.bfoot { margin-top: 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.spec { border-top: 1px solid var(--line-d); }
.spec-cap {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 10.5px;
    color: var(--ash-d);
    padding-bottom: 9px;
}
.spec .r { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-d); gap: 16px; }
.spec .r .k {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    color: var(--ash-d);
    width: 230px;
    flex-shrink: 0;
}
.spec .r .v { font-family: var(--ff-m); font-size: 14.5px; color: #fff; }

/* Снимки линейки: белый фон исходников не годится на тёмной полосе,
   поэтому они вынесены отдельной светлой лентой под ней. */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-top: 0; }
.shot { background: var(--cream); }
/* Белый фон, а не бежевый: снимки нагревателей — JPEG на белом,
   на бежевом колодце они читались бы как наклеенные прямоугольники. */
.shot .wl {
    background: #fff;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-bottom: 1px solid var(--hair);
}
.shot .wl img { max-height: 120px; max-width: 92%; width: auto; object-fit: contain; }
.shot .bd { padding: 13px 16px 16px; }
.shot h4 {
    font-family: var(--ff-c);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
    color: var(--ink);
}
.shot p { font-size: 12.5px; color: var(--ash); margin-top: 4px; line-height: 1.45; }
.shot:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.shot:hover h4 { color: var(--ember-text); }

/* --------------------------------------------------------------------------
   8. Применение
   -------------------------------------------------------------------------- */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--hair); }
.app { padding: 18px 0; border-bottom: 1px solid var(--hair); display: flex; gap: 14px; align-items: baseline; }
.app .num { font-family: var(--ff-m); font-size: 11.5px; color: var(--ember-text); flex-shrink: 0; }
.app h3 { font-weight: 500; font-size: 15px; color: var(--ink); }
.app p { font-size: 13px; color: var(--ash); margin-top: 3px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   9. Вопросы
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hair); }
.q { border-bottom: 1px solid var(--hair); padding: 19px 0; }
.qh { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; }
.qh .num { font-family: var(--ff-m); font-size: 11.5px; color: var(--ash); flex: none; }
.qh h3 { font-weight: 400; font-size: 17px; color: var(--ink); }
.qh .pl { margin-left: auto; font-family: var(--ff-m); color: var(--ash); font-size: 17px; flex: none; }
.q.open .qh h3 { color: var(--ember-text); }
.qa { display: none; padding: 12px 0 2px 46px; max-width: 900px; color: var(--body); font-size: 14.5px; }
.q.open .qa { display: block; }

/* --------------------------------------------------------------------------
   10. Призыв и подвал
   -------------------------------------------------------------------------- */
.cta { background: var(--ink); padding: 58px 0; margin-top: 64px; }
.cta .wrap { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.cta h2 { font-weight: 300; font-size: 32px; line-height: 1.15; color: #fff; letter-spacing: -.015em; max-width: 560px; }
.cta p { color: var(--mute-d); margin-top: 12px; max-width: 520px; font-size: 15px; }
.cta .act { margin-left: auto; display: flex; gap: 11px; flex-shrink: 0; flex-wrap: wrap; }

.site-footer { background: #0E0E0E; padding: 42px 0 38px; }
.fgrid { display: flex; gap: 64px; align-items: flex-start; flex-wrap: wrap; }
.fgrid .logo { color: #fff; }
.fcol h5, .fcol p {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 10.5px;
    color: #6E6A65;
    margin-bottom: 11px;
}
.fcol a, .fcol span { display: block; color: var(--mute-d); font-size: 14px; margin-bottom: 6px; }
.fcol a:hover { color: #fff; }
.fcol .mono { color: #fff; }
.fbot { border-top: 1px solid #232323; margin-top: 34px; padding-top: 20px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fbot span { font-size: 12.5px; color: #6E6A65; }

/* ==========================================================================
   КАТАЛОГ
   ========================================================================== */

/* Хлебные крошки ---------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 16px 0 0; }
.crumbs a, .crumbs span {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    color: var(--ash);
}
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: #C4BFB9; }
.crumbs .cur { color: var(--ink); }

/* Заголовок каталога ------------------------------------------------------ */
.chead { display: flex; align-items: flex-end; gap: 16px; padding: 14px 0 22px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.chead h1 { font-weight: 300; font-size: 38px; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.chead .cnt { font-family: var(--ff-m); font-size: 14px; color: var(--ash); margin-bottom: 7px; white-space: nowrap; }
.chead .tools { margin-left: auto; display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.cdesc { color: var(--body); font-size: 14.5px; max-width: 90ch; padding-top: 16px; }

.sel {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11.5px;
    color: var(--ink);
    border: 1px solid var(--hair);
    background: #fff;
    padding: 9px 14px;
    border-radius: 3px;
}

/* Переключатель вида ------------------------------------------------------ */
.vsw { display: flex; border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; background: #fff; }
.vsw button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px;
    color: var(--ash);
    border-right: 1px solid var(--hair);
}
.vsw button:last-child { border-right: 0; }
.vsw button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.vsw svg { display: block; }

/* Подкатегории ------------------------------------------------------------ */
.subcats { display: flex; flex-wrap: wrap; gap: 7px; padding: 18px 0 0; }
.chip .n { font-family: var(--ff-m); font-size: 10.5px; color: var(--ash); margin-left: 6px; }

/* Раскладка --------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: 262px 1fr; gap: 38px; padding: 26px 0 60px; align-items: start; }

/* Боковые фильтры. Разметка модуля products_filter не меняется — переодеваем
   его классы, чтобы не трогать логику SEO-URL и seo-filters.js. */
.filters > p {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
}
.filter-group { border-bottom: 1px solid var(--hair); padding: 16px 0; }
.filter-group > p {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    font-weight: 500;
    color: var(--ash);
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.filter-unit { font-family: var(--ff-m); font-size: 10px; color: #C4BFB9; }

.price-inputs, .range-inputs { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.price-inputs input, .range-inputs input {
    font-family: var(--ff-m);
    font-size: 13px;
    width: 100%;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--hair);
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
}
.price-inputs input:focus, .range-inputs input:focus { outline: none; border-color: var(--ink); }
.price-filter button, .range-filter button {
    margin-top: 9px;
    width: 100%;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    padding: 9px 12px;
    border: 1px solid var(--hair);
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
}
.price-filter button:hover, .range-filter button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.checkbox-list, .select-list, .manufacturer-list { display: block; margin-top: 4px; }
.checkbox-item, .select-item, .manufacturer-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--body);
    cursor: pointer;
}
.checkbox-item input, .select-item input, .manufacturer-item input {
    width: 14px;
    height: 14px;
    accent-color: var(--ember);
    flex-shrink: 0;
    margin: 0;
}
.checkbox-item:hover, .select-item:hover, .manufacturer-item:hover { color: var(--ink); }
.checkbox-item .count, .select-item .count, .manufacturer-item .count {
    margin-left: auto;
    font-family: var(--ff-m);
    font-size: 11.5px;
    color: var(--ash);
}
/* Значения только из подразделов: свёрнуты под «Другие напряжения». */
.select-more { margin-top: 12px; }
.select-more summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--body);
    cursor: pointer;
    list-style: none;
}
.select-more summary::-webkit-details-marker { display: none; }
.select-more summary::before { content: '+'; width: 14px; text-align: center; font-family: var(--ff-m); color: var(--ash); }
.select-more[open] summary::before { content: '−'; }
.select-more summary:hover { color: var(--ink); }
.select-more summary .count { margin-left: auto; font-family: var(--ff-m); font-size: 11.5px; color: var(--ash); }
.filter-reset { padding-top: 18px; }
.filter-reset .btn {
    display: block;
    text-align: center;
    border: 1px solid var(--hair);
    color: var(--ash);
    background: #fff;
}
.filter-reset .btn:hover { border-color: var(--ink); color: var(--ink); }

/* Панель над списком ------------------------------------------------------ */
.ltop { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ltop .found { font-family: var(--ff-m); font-size: 13px; color: var(--ash); }

/* Список товаров: одна разметка, два вида ---------------------------------
   Карточки и таблица различаются только раскладкой, поэтому DOM не дублируется:
   подписи показателей в режиме карточек берутся из data-k через ::after. */
.thead {
    display: none;
    grid-template-columns: var(--cols);
    gap: 12px;
    align-items: center;
    padding: 0 16px 9px;
    border-bottom: 1px solid var(--ink);
}
.thead div {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 10px;
    color: var(--ash);
}
.thead .r { text-align: right; }

.pcontent { --cols: 56px 1fr 78px 78px 72px 84px 182px; min-width: 0; }
[data-view="rows"] .thead { display: grid; }
/* Заголовок «Цена» встаёт над числом, а не над кнопкой корзины. */
[data-view="rows"] .thead div:last-child { padding-right: 42px; }

/* Вид «карточки» */
[data-view="cards"] .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
[data-view="cards"] .list .it { background: var(--cream); display: flex; flex-direction: column; padding: 0; }
[data-view="cards"] .list .it-img {
    background: var(--well);
    height: 182px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-bottom: 1px solid var(--hair);
}
[data-view="cards"] .list .it-img img { max-height: 146px; max-width: 90%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(20, 20, 20, .16)); }
[data-view="cards"] .list .it-name {
    font-family: var(--ff-c);
    font-weight: 600;
    letter-spacing: .05em;
    font-size: 15px;
    color: var(--ink);
    padding: 17px 19px 0;
}
[data-view="cards"] .list .it-sub {
    display: block;
    font-family: var(--ff);
    font-weight: 400;
    letter-spacing: normal;
    font-size: 12.5px;
    color: var(--ash);
    padding: 4px 0 0;
}
[data-view="cards"] .list .it-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 15px 19px 0;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}
[data-view="cards"] .list .it-v { padding: 10px 0 9px; border-right: 1px solid var(--hair); }
[data-view="cards"] .list .it-v:nth-child(even) { border-right: 0; padding-left: 11px; }
[data-view="cards"] .list .it-v:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
[data-view="cards"] .list .it-v::after {
    content: attr(data-k);
    display: block;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 9.5px;
    color: var(--ash);
    margin-top: 5px;
}
[data-view="cards"] .list .it-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 15px 19px 18px;
}
[data-view="cards"] .list .it-price { font-family: var(--ff-m); font-size: 19px; color: var(--ink); white-space: nowrap; }
[data-view="cards"] .list .it:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); z-index: 2; }
[data-view="cards"] .list .it:hover .it-name { color: var(--ember-text); }

/* Вид «список» */
[data-view="rows"] .list { display: block; border-top: 0; }
[data-view="rows"] .list .it {
    display: grid;
    grid-template-columns: var(--cols);
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--hair);
    background: var(--cream);
}
[data-view="rows"] .list .it:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
[data-view="rows"] .list .it:hover .it-name { color: var(--ember-text); }
[data-view="rows"] .list .it-img { background: var(--well); height: 56px; display: flex; align-items: center; justify-content: center; padding: 6px; }
[data-view="rows"] .list .it-img img { max-height: 44px; max-width: 100%; width: auto; object-fit: contain; }
[data-view="rows"] .list .it-name {
    font-family: var(--ff-c);
    font-weight: 600;
    letter-spacing: .04em;
    font-size: 14.5px;
    color: var(--ink);
}
[data-view="rows"] .list .it-sub { display: none; }
[data-view="rows"] .list .it-specs { display: contents; }
[data-view="rows"] .list .it-v { font-family: var(--ff-m); font-size: 15px; color: var(--ink); text-align: right; }
[data-view="rows"] .list .it-v::after { content: none; }
/* Строка с другим набором показателей, чем в заголовке, подписывает ячейки сама. */
[data-view="rows"] .list .it-v.own-k::after {
    content: attr(data-k);
    display: block;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 9px;
    color: var(--ash);
    margin-top: 3px;
}
[data-view="rows"] .list .it-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; overflow: hidden; }
[data-view="rows"] .list .it-cart { padding: 0; width: 30px; height: 30px; justify-content: center; }
[data-view="rows"] .list .it-cart em { display: none; }
[data-view="rows"] .list .it-price { font-family: var(--ff-m); font-size: 16px; color: var(--ink); white-space: nowrap; }

/* Кликается вся карточка: ::after названия растянут на .it, кнопка корзины выше слоя. */
.it { color: inherit; position: relative; }
.it-name::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.it-cart {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--hair);
    border-radius: 3px;
    background: #fff;
    color: var(--ash);
}
.it-cart em {
    font-style: normal;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10.5px;
}
.it-cart:hover { border-color: var(--ember); background: var(--ember); color: var(--ember-ink); }
.it-cart.done { border-color: var(--ink); background: var(--ink); color: #fff; }
.it-v u { text-decoration: none; font-size: 11.5px; color: var(--ash); margin-left: 2px; }
.it-v.na { color: var(--ash); }
.it-price u { text-decoration: none; font-size: 12.5px; color: var(--ash); }
.it-price.ask { font-size: 13.5px; color: var(--ash); }

/* Пагинация --------------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.pager a {
    font-family: var(--ff-m);
    font-size: 13px;
    padding: 8px 12px;
    border: 1px solid var(--hair);
    border-radius: 3px;
    color: var(--body);
    background: #fff;
}
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager a.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pager .gap { font-family: var(--ff-m); font-size: 13px; color: var(--mut); padding: 0 2px; }
.pager .info {
    margin-left: auto;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    color: var(--ash);
}

.empty { border: 1px solid var(--hair); background: #fff; padding: 40px; text-align: center; color: var(--ash); }
.empty b { display: block; color: var(--ink); font-size: 17px; font-weight: 500; margin-bottom: 6px; }

/* SEO-текст ---------------------------------------------------------------
   Колоночный поток, а не grid: у текста 60+ блоков подряд, и в сетке они
   раскладываются по строкам, разрывая порядок чтения. */
.seotext {
    border-top: 1px solid var(--hair);
    padding-top: 28px;
    margin-top: 10px;
    max-width: 1080px;
    columns: 2;
    column-gap: 52px;
}
/* Короткий текст в двух колонках не набирается: абзацы не рвутся, и вторая
   колонка остаётся пустой. Такие тексты идут одной колонкой. */
.seotext.solo { columns: 1; max-width: 78ch; }
.seotext > * { break-inside: avoid; }
.seotext h2 { column-span: all; font-weight: 400; font-size: 22px; color: var(--ink); margin-bottom: 16px; }
.seotext h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    color: var(--ink);
    margin: 18px 0 8px;
    break-after: avoid;
}
.seotext h4 {
    font-family: var(--ff-c);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin: 14px 0 6px;
    break-after: avoid;
}
.seotext h3:first-child, .seotext h4:first-child { margin-top: 0; }
.seotext p, .seotext li { font-size: 14px; color: var(--body); margin-bottom: 10px; }
/* Ссылки в тексте подчёркиваем, но не трогаем чипы «Похожих подборок». */
.seotext p a:not(.chip), .seotext li a:not(.chip) {
    color: var(--ember-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.seotext p a:not(.chip):hover, .seotext li a:not(.chip):hover { text-decoration-thickness: 2px; }
.seotext ul, .seotext ol { padding-left: 18px; margin-bottom: 12px; }
.seotext ul { list-style: disc; }
.seotext strong { font-weight: 600; color: var(--ink); }
.seotext table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.seotext th, .seotext td { border: 1px solid var(--hair); padding: 7px 9px; text-align: left; }
.seotext th { font-family: var(--ff-c); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--ash); }
.related { column-span: all; border-top: 1px solid var(--hair); margin-top: 22px; padding-top: 18px; }
.related h3 { margin-top: 0; }
.related-list { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; }
.related-list li { margin: 0; }

/* Кнопка показа фильтров нужна только на узком экране. */
.fbtn { display: none; }

@media (max-width: 1180px) {
    .layout { grid-template-columns: 1fr; gap: 24px; }
    [data-view="cards"] .list { grid-template-columns: repeat(2, 1fr); }
    .pcontent { --cols: 52px 1fr 68px 68px 64px 76px 168px; }
}

@media (max-width: 900px) {
    /* Таблица на узком экране нечитаема: скрипт принудительно включает карточки,
       поэтому правила вида «список» здесь не нужны. */
    .vsw { display: none; }
    .fbtn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--hair);
        border-radius: 3px;
        background: #fff;
        padding: 9px 14px;
        font-family: var(--ff-c);
        text-transform: uppercase;
        letter-spacing: .07em;
        font-size: 11.5px;
        color: var(--ink);
    }
    .fbtn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
    .layout > aside { display: none; }
    .layout > aside.open { display: block; }
    .chead h1 { font-size: 28px; }
    .seotext { columns: 1; }
}

@media (max-width: 640px) {
    [data-view="cards"] .list { grid-template-columns: 1fr; }
    .chead { gap: 10px; }
    .chead .tools { width: 100%; margin-left: 0; }
    .chead .tools .sel { margin-left: auto; }
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА
   ========================================================================== */

.plyt { display: grid; grid-template-columns: 1.04fr .96fr; gap: 48px; padding: 22px 0 12px; align-items: start; }

/* Галерея ----------------------------------------------------------------- */
.pmain {
    position: relative;
    background: var(--well);
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    width: 100%;
    cursor: zoom-in;
}
/* Часть фотографий снята на белом фоне: умножение сажает этот фон в колодец,
   у снимков с прозрачностью изменений почти нет. */
.pmain img, .pthumbs img { mix-blend-mode: multiply; }
.pmain img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 22px 40px rgba(20, 20, 20, .18)); }
.pmain .zoom { position: absolute; right: 16px; bottom: 13px; }
.pmain .made {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--ink);
    color: #fff;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 9.5px;
    padding: 5px 10px;
}
.pnoimg {
    background: var(--well);
    height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 12px;
    color: var(--ash);
}
.pthumbs { display: flex; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-top: 0; }
.pthumbs button { flex: 1; height: 82px; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--well); }
.pthumbs button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.pthumbs img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; }

/* Просмотр оригинала: оригиналы тяжёлые, поэтому грузятся только по клику. */
.plight { position: fixed; inset: 0; z-index: 300; background: rgba(14, 14, 14, .93); display: flex; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.plight img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.plight .x { position: absolute; top: 18px; right: 24px; color: #fff; font-family: var(--ff-m); font-size: 26px; line-height: 1; opacity: .7; }
.plight .x:hover { opacity: 1; }

/* Правая колонка ---------------------------------------------------------- */
.pinfo .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.pinfo .eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember-hi); box-shadow: 0 0 8px var(--ember-hi); flex: none; }
.pinfo h1 { font-weight: 400; font-size: 31px; line-height: 1.14; letter-spacing: -.01em; color: var(--ink); }
.pinfo h1 small { display: block; font-weight: 400; font-size: 15px; line-height: 1.45; color: var(--ash); margin-top: 8px; }

.pkeys { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
/* Вокруг разделителя одинаковые поля с обеих сторон; первая ячейка прижата
   к левому краю колонки — по ней выровнены заголовок и блок заказа. */
.pkeys div { padding: 13px 16px 12px; border-right: 1px solid var(--hair); }
.pkeys div:first-child { padding-left: 0; }
.pkeys div:last-child { border-right: 0; }
.pkeys .v { font-family: var(--ff-m); font-size: 19px; line-height: 1; color: var(--ink); }
.pkeys .v u { text-decoration: none; font-size: 11.5px; color: var(--ash); margin-left: 2px; }
.pkeys .v.na { color: var(--ash); }
.pkeys .k {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 9.5px;
    color: var(--ash);
    margin-top: 6px;
}

.pbuy { border: 1px solid var(--hair); background: #fff; padding: 20px 22px; margin-top: 22px; }
.pbuy .top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.pbuy .price { font-family: var(--ff-m); font-size: 31px; line-height: 1; color: var(--ink); }
.pbuy .price u { text-decoration: none; font-size: 17px; color: var(--ash); }
.pbuy .price.ask { font-size: 21px; color: var(--ash); }
.pbuy .stock { margin-left: auto; }
/* Индикатор горит только для позиций со склада, срок поставки — серым. */
.stock.wait i { background: #C4BFB9; box-shadow: none; }
.pbuy .note { flex-basis: 100%; font-size: 12.5px; color: var(--ash); }
.pbuy .acts { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.pbuy .acts .add-to-cart.done { background: var(--ink); border-color: var(--ink); color: #fff; }
.pmicro { display: flex; gap: 0 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--hair); }
.pmicro div { flex: 1; min-width: 128px; font-size: 12.5px; line-height: 1.4; color: var(--ash); padding-right: 12px; }
.pmicro b { display: block; font-weight: 500; font-size: 13px; color: var(--ink); }
.phint { margin-top: 18px; line-height: 1.75; }
.phint a { color: var(--ember-text); border-bottom: 1px solid currentColor; }

/* Секции под галереей ----------------------------------------------------- */
.psec { padding: 44px 0 0; }
.psec > h2 { font-weight: 400; font-size: 25px; letter-spacing: -.01em; color: var(--ink); margin-bottom: 16px; }

.pspecs { columns: 2; column-gap: 52px; border-top: 1px solid var(--ink); padding-top: 4px; }
.psr { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.psr .k { font-size: 13.5px; color: var(--ash); }
.psr .dots { flex: 1; border-bottom: 1px dotted #CFC9C3; margin: 0 2px 4px; min-width: 14px; }
.psr .v { font-family: var(--ff-m); font-size: 13.5px; color: var(--ink); text-align: right; }

.pdesc { max-width: 860px; font-size: 14.5px; color: var(--body); }
.pdesc p { margin-bottom: 11px; }
.pdesc ul, .pdesc ol { margin: 0 0 11px 20px; list-style: disc; }
.pdesc ol { list-style: decimal; }
.pdesc li { margin-bottom: 4px; }
.pdesc a, .qa a, .app p a, .ptip span a { color: var(--ember-text); text-decoration: underline; text-underline-offset: 2px; }

.ptip { display: flex; gap: 14px; align-items: baseline; border-left: 2px solid var(--ember); background: #fff; padding: 16px 20px; margin-top: 18px; max-width: 860px; }
.ptip b {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11px;
    font-weight: 600;
    color: var(--ember-text);
    white-space: nowrap;
}
.ptip span { font-size: 14px; color: var(--body); }

/* Условия поставки -------------------------------------------------------- */
.pterms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; border-top: 1px solid var(--hair); }
.pterms section { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.pterms h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}
.pterms p { font-size: 13.5px; color: var(--ash); margin-bottom: 6px; line-height: 1.5; }

/* Соседние модели --------------------------------------------------------- */
.psibs { --scols: 56px 1fr 78px 78px 78px 70px 150px 104px; border-top: 1px solid var(--ink); }
.sibhead { display: grid; grid-template-columns: var(--scols); gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--hair); }
.sibhead div {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 10px;
    color: var(--ash);
}
.sibhead .r { text-align: right; }
.sib {
    display: grid;
    grid-template-columns: var(--scols);
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--hair);
    position: relative;
    color: inherit;
}
.sib:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.sib:hover .nm { color: var(--ember-text); }
.sib .th { background: var(--well); height: 56px; display: flex; align-items: center; justify-content: center; padding: 6px; }
.sib .th img { max-height: 44px; max-width: 100%; width: auto; object-fit: contain; }
.sib .nm {
    display: block;
    font-family: var(--ff-c);
    font-weight: 600;
    letter-spacing: .04em;
    font-size: 14.5px;
    color: var(--ink);
}
.sib .sub { display: block; font-size: 12.5px; color: var(--ash); margin-top: 2px; }
.sib .v { font-family: var(--ff-m); font-size: 15px; color: var(--ink); text-align: right; }
.sib .v u { text-decoration: none; font-size: 11.5px; color: var(--ash); margin-left: 2px; }
.sib .v.na { color: var(--ash); }
.sib .pr { font-family: var(--ff-m); font-size: 16px; color: var(--ink); text-align: right; white-space: nowrap; }
.sib .pr u { text-decoration: none; font-size: 12.5px; color: var(--ash); }
.sib .pr.ask { font-size: 13.5px; color: var(--ash); }
.sib .open { justify-self: end; }

@media (max-width: 1180px) {
    .plyt { gap: 34px; }
    .pmain, .pnoimg { height: 360px; }
    /* Третий показатель уходит первым: ток и напряжение важнее мощности. */
    .psibs { --scols: 56px 1fr 74px 74px 66px 140px 100px; }
    .sib .v3, .sibhead .v3 { display: none; }
}

@media (max-width: 900px) {
    .plyt { grid-template-columns: 1fr; gap: 30px; padding-top: 18px; }
    .pinfo h1 { font-size: 26px; }
    .pspecs { columns: 1; }
    .pterms { grid-template-columns: 1fr; }
    .psibs { --scols: 52px 1fr 116px; }
    .sib .v, .sib .open, .sibhead { display: none; }
}

@media (max-width: 640px) {
    .pmain, .pnoimg { height: 280px; padding: 24px; }
    .pthumbs button { height: 64px; }
    .pkeys { grid-template-columns: repeat(2, 1fr); }
    .pkeys div:nth-child(2) { border-right: 0; }
    .pkeys div:nth-child(3), .pkeys div:nth-child(4) { border-top: 1px solid var(--hair); }
    .pkeys div:nth-child(3) { padding-left: 0; }
    .pbuy { padding: 18px; }
    .pbuy .acts .btn { flex: 1; text-align: center; }
    .psec > h2 { font-size: 21px; }
}

/* ==========================================================================
   КОРЗИНА
   Разметку выпадающей панели и страницы строит JS (cart.js, cart-page.js),
   поэтому имена классов здесь заданы им, а не шаблонами.
   ========================================================================== */

.hcart { position: relative; flex: none; }
.cart-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--hair);
    border-radius: 3px;
    color: var(--ink);
    background: #fff;
}
.cart-icon-wrapper:hover { border-color: var(--ink); }
.cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--ember);
    color: var(--ember-ink);
    font-family: var(--ff-m);
    font-size: 11px;
    line-height: 1;
    align-items: center;
    justify-content: center;
}

.cart-dropdown {
    position: absolute;
    top: calc(100% + 13px);
    right: 0;
    width: 372px;
    background: #fff;
    border: 1px solid var(--hair);
    box-shadow: 0 18px 44px rgba(20, 20, 20, .14);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s;
    z-index: 60;
}
.cart-dropdown.show { opacity: 1; transform: none; }
.cart-empty {
    padding: 34px 20px;
    text-align: center;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11.5px;
    color: var(--ash);
}
.cart-items { max-height: 340px; overflow-y: auto; }
.cart-item { display: grid; grid-template-columns: 52px 1fr 22px; gap: 12px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--hair); }
.cart-item-image { background: var(--well); height: 52px; display: flex; align-items: center; justify-content: center; }
.cart-item-image img { max-width: 100%; max-height: 44px; object-fit: contain; }
.cart-item-image .no-image { font-size: 18px; opacity: .35; }
.cart-item-name { display: block; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.cart-item-name:hover { color: var(--ember-text); }
.cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cart-item-qty { display: flex; align-items: center; border: 1px solid var(--hair); border-radius: 3px; }
.cart-qty-btn { width: 24px; height: 24px; color: var(--ash); font-size: 14px; line-height: 1; }
.cart-qty-btn:hover { color: var(--ink); }
.cart-item-qty span { font-family: var(--ff-m); font-size: 12.5px; min-width: 20px; text-align: center; }
.cart-item-price { font-family: var(--ff-m); font-size: 13.5px; color: var(--ink); }
.cart-remove { width: 22px; height: 22px; color: #C4BFB9; align-self: start; }
.cart-remove::before { content: '×'; font-size: 19px; line-height: 1; }
.cart-remove:hover { color: var(--ink); }
.cart-footer { padding: 15px; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 13px; }
.cart-total span {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    color: var(--ash);
}
.cart-total strong { font-family: var(--ff-m); font-weight: 400; font-size: 19px; color: var(--ink); }
.cart-checkout, .cart-footer .btn { display: block; text-align: center; background: var(--ember); color: var(--ember-ink); border-color: var(--ember); }
.cart-checkout:hover { filter: brightness(.92); }

.cart-notification {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 200;
    background: var(--ink);
    color: #fff;
    padding: 14px 20px;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    box-shadow: 0 14px 32px rgba(20, 20, 20, .28);
    animation: cart-toast .22s ease-out;
}
.cart-notification.hide { opacity: 0; transition: opacity .3s; }
@keyframes cart-toast { from { opacity: 0; transform: translateY(10px); } }

/* Страница корзины -------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 38px; align-items: start; padding-bottom: 60px; }
.cart-items-list { border-top: 1px solid var(--ink); }
.cart-page-item {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--hair);
}
.cart-page-item-image { background: var(--well); height: 84px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.cart-page-item-image img { max-width: 100%; max-height: 68px; object-fit: contain; }
/* Названия в корзине приходят целиком, включая описание модели, поэтому здесь
   не капитель, как в карточках каталога, — иначе три строки капса. */
.cart-page-item-details h3 { font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--ink); }
.cart-page-item-details h3 a:hover { color: var(--ember-text); }
.cart-page-item-price { font-family: var(--ff-m); font-size: 13px; color: var(--ash); margin-top: 6px; }
.cart-page-item-controls { display: flex; align-items: center; gap: 20px; }
.quantity-control { display: flex; align-items: center; border: 1px solid var(--hair); border-radius: 3px; background: #fff; }
.quantity-control .qty-btn { width: 30px; height: 32px; color: var(--ash); font-size: 15px; }
.quantity-control .qty-btn:hover { color: var(--ink); }
.quantity-control input {
    width: 44px;
    height: 32px;
    border: 0;
    border-left: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    text-align: center;
    font-family: var(--ff-m);
    font-size: 13.5px;
    color: var(--ink);
    background: transparent;
    -moz-appearance: textfield;
}
.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-page-item-total { font-family: var(--ff-m); font-size: 17px; color: var(--ink); min-width: 116px; text-align: right; }
.remove-btn { color: #C4BFB9; display: flex; align-items: center; }
.remove-btn:hover { color: var(--ink); }

.cart-summary, .order-form { border: 1px solid var(--hair); background: #fff; padding: 22px; }
.order-form { margin-top: 14px; }
.cart-summary h2, .order-form h2 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    padding-bottom: 13px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 15px;
}
.summary-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.summary-row span { font-size: 14px; color: var(--ash); }
.summary-row strong { font-family: var(--ff-m); font-weight: 400; font-size: 15px; color: var(--ink); }
.summary-row.total { border-top: 1px solid var(--hair); padding-top: 13px; margin-top: 13px; margin-bottom: 0; }
.summary-row.total strong { font-size: 24px; }

.form-group { margin-bottom: 13px; }
.form-group label {
    display: block;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px;
    color: var(--ash);
    margin-bottom: 6px;
}
.form-group input, .form-group textarea {
    width: 100%;
    font-family: var(--ff);
    font-size: 14px;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--hair);
    border-radius: 3px;
    padding: 10px 12px;
    resize: vertical;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.btn-block { display: block; width: 100%; }
.order-form .btn-primary { background: var(--ember); color: var(--ember-ink); border-color: var(--ember); }
.order-form .btn-primary:hover { filter: brightness(.92); }
.form-note { font-size: 12px; color: var(--ash); margin-top: 12px; line-height: 1.5; }

.empty-cart, .order-success { text-align: center; border: 1px solid var(--hair); background: #fff; padding: 64px 24px; margin-bottom: 60px; }
.empty-cart h2, .order-success h2 { font-weight: 400; font-size: 26px; color: var(--ink); margin-bottom: 10px; }
.empty-cart p, .order-success p { color: var(--ash); margin-bottom: 8px; }
.empty-cart .btn, .order-success .btn { display: inline-block; margin-top: 18px; border-color: var(--ink); color: var(--ink); }
.empty-cart .btn:hover, .order-success .btn:hover { background: var(--ink); color: #fff; }
.empty-cart-icon, .success-icon {
    font-family: var(--ff-m);
    font-size: 30px;
    color: var(--ember-text);
    margin-bottom: 14px;
}
.cart-loading { padding: 60px; text-align: center; color: var(--ash); }

@media (max-width: 1180px) {
    .cart-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .cart-dropdown { width: min(340px, calc(100vw - 32px)); }
    .cart-page-item { grid-template-columns: 68px 1fr; }
    .cart-page-item-controls { grid-column: 1 / -1; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   10б. Текстовые страницы: статьи, доставка, гарантия, о компании, контакты
   -------------------------------------------------------------------------- */
.phead { padding: 14px 0 26px; border-bottom: 1px solid var(--hair); }
.phead h1 { font-weight: 300; font-size: 38px; line-height: 1.08; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; }
.phead .lead { margin-top: 16px; max-width: 74ch; font-size: 17px; line-height: 1.6; color: #4A4A4A; }
.phead .tmeta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.phead .tmeta span {
    font-family: var(--ff-m);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--ash);
}

/* Колонка текста и липкое оглавление. */
.tlyt { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 56px; align-items: start; padding: 34px 0 8px; }
.tlyt.solo { grid-template-columns: minmax(0, 1fr); }

.toc { position: sticky; top: 22px; border-top: 1px solid var(--ink); padding-top: 12px; }
.toc h2 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    font-weight: 500;
    color: var(--ash);
    margin-bottom: 8px;
}
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; border-bottom: 1px solid var(--hair); }
.toc a { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--body); line-height: 1.4; }
.toc a::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--ff-m);
    font-size: 10.5px;
    color: var(--ash);
    padding-top: 2px;
}
.toc a:hover { color: var(--ember-text); }

/* Типографика длинного текста.
   Ширину ограничивает не колонка, а сам текст: плитки и таблицы должны
   занимать всю ширину, а строка чтения — оставаться короткой. */
.prose { max-width: 1000px; color: var(--body); font-size: 15.5px; line-height: 1.68; }
.prose > p, .prose > ul, .prose > ol, .prose > h2, .prose > h3, .prose > h4,
.prose > blockquote, .prose > .tldr { max-width: 76ch; }
.prose > * + * { margin-top: 15px; }
.prose h2 {
    font-weight: 400;
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ink);
    border-top: 1px solid var(--hair);
    padding-top: 26px;
    margin-top: 40px;
    scroll-margin-top: 20px;
}
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 28px;
    scroll-margin-top: 20px;
}
.prose h4 { font-weight: 600; font-size: 15.5px; color: var(--ink); margin-top: 22px; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 10px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--ember-text); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { text-decoration-thickness: 2px; }

.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose li { position: relative; padding-left: 22px; margin-top: 7px; }
.prose ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 7px;
    height: 1px;
    background: var(--ember);
}
.prose ol { counter-reset: pl; }
.prose ol > li { counter-increment: pl; }
.prose ol > li::before {
    content: counter(pl) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--ff-m);
    font-size: 12.5px;
    color: var(--ash);
}
.prose li > ul, .prose li > ol { margin-top: 6px; }

.prose table, .specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 18px;
}
.prose th, .prose td, .specs-table th, .specs-table td {
    border-bottom: 1px solid var(--hair);
    padding: 10px 12px 10px 0;
    text-align: left;
    vertical-align: top;
}
.prose th, .specs-table th {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 11px;
    font-weight: 500;
    color: var(--ash);
    border-bottom-color: var(--ink);
}
.prose td:last-child, .specs-table td:last-child { padding-right: 0; }

.prose blockquote {
    border-left: 2px solid var(--ember);
    background: #fff;
    padding: 16px 20px;
    margin-top: 20px;
    color: var(--body);
}

/* Врезка с быстрым ответом. */
.tldr { background: #fff; border: 1px solid var(--hair); border-left: 2px solid var(--ember); padding: 20px 22px; }
.tldr h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ember-text);
    margin: 0 0 10px;
}
.tldr ul { margin-top: 0; }
.tldr li:first-child { margin-top: 0; }

/* Ссылки на подборки каталога. */
.plinks { border-top: 1px solid var(--hair); }
.prose .plinks li { padding: 0; margin: 0; border-bottom: 1px solid var(--hair); }
.prose .plinks li::before { display: none; }
.plinks a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 0;
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
}
.plinks a::after { content: "→"; margin-left: auto; color: var(--ash); font-family: var(--ff-m); }
.plinks a:hover { color: var(--ember-text); }
.plinks a:hover::after { color: var(--ember-text); }

/* Плитки: способы доставки, оплаты, преимущества. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 20px; }
.tile { background: var(--cream); padding: 22px 22px 24px; }
.tile h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
}
.tile p, .tile li { font-size: 14px; line-height: 1.55; }
.tile .num { font-family: var(--ff-m); font-size: 11.5px; color: var(--ember-text); display: block; margin-bottom: 10px; }

/* Ряд чисел: сроки, гарантия, показатели. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--ink); margin-top: 20px; }
.kpi { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--hair); }
.kpi b { display: block; font-family: var(--ff-m); font-size: 22px; font-weight: 400; color: var(--ink); }
.kpi span {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ash);
}

/* Блок «смотрите также». */
.tnext { border-top: 1px solid var(--hair); margin-top: 44px; padding-top: 22px; }
.tnext h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ash);
    margin: 0 0 12px;
}
.tnext ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); list-style: none; }
.prose .tnext li { background: var(--cream); padding: 0; margin: 0; }
.prose .tnext li::before { display: none; }
.tnext li a { display: block; padding: 16px 18px; color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.45; }
.tnext li a b { display: block; font-weight: 500; margin-bottom: 4px; }
.tnext li a span { color: var(--ash); font-size: 13px; }
.tnext li a:hover { background: #fff; }
.tnext li a:hover b { color: var(--ember-text); }

/* Подпись под материалом. */
.ameta { border-top: 1px solid var(--hair); margin-top: 34px; padding-top: 16px; font-size: 13px; color: var(--ash); }
.ameta p + p { margin-top: 6px; }
.ameta strong { color: var(--body); font-weight: 500; }

/* Карточки контактов. */
.ccards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 26px; }
.ccard { background: var(--cream); padding: 22px; }
.ccard h3 {
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 11px;
    font-weight: 500;
    color: var(--ash);
    margin-bottom: 8px;
}
.ccard a, .ccard p { font-size: 16px; color: var(--ink); display: block; }
.ccard a:hover { color: var(--ember-text); }
.ccard .sub { margin-top: 6px; font-size: 13px; color: var(--ash); }

/* Список материалов раздела. */
.alist { border-top: 1px solid var(--ink); margin-top: 12px; }
.arow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 210px; gap: 22px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.arow .num { font-family: var(--ff-m); font-size: 11.5px; color: var(--ash); }
.arow h2 { font-weight: 400; font-size: 19px; color: var(--ink); line-height: 1.3; }
.arow p { margin-top: 6px; font-size: 14px; color: var(--ash); line-height: 1.5; max-width: 70ch; }
.arow .go {
    justify-self: end;
    font-family: var(--ff-c);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 11.5px;
    color: var(--ash);
}
.arow:hover h2 { color: var(--ember-text); }
.arow:hover .go { color: var(--ink); }

/* Страница 404 и пустой поиск. */
.tempty { padding: 90px 0 110px; text-align: center; }
.tempty .code { font-family: var(--ff-m); font-size: 13px; color: var(--ash); letter-spacing: .1em; }
.tempty h1 { font-weight: 300; font-size: 40px; line-height: 1.1; color: var(--ink); margin: 14px 0 12px; }
.tempty p { font-size: 15.5px; color: #4A4A4A; max-width: 52ch; margin: 0 auto; }
.tempty .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* Поиск. */
.sform { display: flex; gap: 10px; margin-top: 20px; max-width: 620px; }
.sform input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 3px;
    font-family: var(--ff);
    font-size: 15px;
    color: var(--body);
    outline: none;
}
.sform input:focus { border-color: var(--ink); }

@media (max-width: 1180px) {
    .tlyt { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .toc { position: static; }
    .toc ol { columns: 2; column-gap: 32px; }
}

@media (max-width: 640px) {
    .phead h1 { font-size: 30px; }
    .phead .lead { font-size: 15.5px; }
    .prose { font-size: 15px; }
    .prose h2 { font-size: 22px; margin-top: 32px; padding-top: 20px; }
    .toc ol { columns: 1; }
    .tnext ul { grid-template-columns: 1fr; }
    .arow { grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
    .arow .go { display: none; }
    .tempty { padding: 60px 0 70px; }
    .tempty h1 { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   11. Переключатель акцента (временный, для выбора палитры)
   -------------------------------------------------------------------------- */
/* Слева внизу: справа сидит виджет нейротехнолога. */
.acc-pick { position: fixed; left: 16px; bottom: 16px; z-index: 300; font-family: var(--ff); }
.acc-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .55);
    background: var(--ember);
    box-shadow: 0 2px 10px rgba(20, 20, 20, .3);
    opacity: .4;
    transition: opacity .16s, transform .16s;
    padding: 0;
}
.acc-toggle:hover { opacity: 1; transform: scale(1.1); }
.acc-panel {
    display: none;
    position: absolute;
    left: 0;
    bottom: 38px;
    width: 206px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 3px;
    box-shadow: 0 12px 34px rgba(20, 20, 20, .2);
    padding: 12px;
}
.acc-pick.open .acc-panel { display: block; }
.acc-panel > p:first-child {
    margin: 0 0 10px;
    font-family: var(--ff-c);
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ash);
    font-weight: 600;
}
.acc-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.acc-list button { height: 28px; border: 1px solid var(--hair); border-radius: 2px; padding: 0; }
.acc-list button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.acc-name { margin: 10px 0 0; font-size: 12px; color: var(--body); text-align: center; min-height: 16px; }

/* --------------------------------------------------------------------------
   12. Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .grid, .shots { grid-template-columns: repeat(2, 1fr); }
    .apps { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 44px; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--hair);
        border-radius: 3px;
        background: #fff;
        color: var(--ink);
        flex: none;
    }
    .nav-toggle:hover,
    .nav-toggle[aria-expanded="true"] { border-color: var(--ink); }
    .nav-toggle-ico,
    .nav-toggle-ico::before,
    .nav-toggle-ico::after {
        display: block;
        width: 16px;
        height: 1.5px;
        background: currentColor;
    }
    .nav-toggle-ico { position: relative; }
    .nav-toggle-ico::before,
    .nav-toggle-ico::after {
        content: "";
        position: absolute;
        left: 0;
    }
    .nav-toggle-ico::before { top: -5px; }
    .nav-toggle-ico::after { top: 5px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-ico { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-ico::before {
        top: 0;
        transform: rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-ico::after {
        top: 0;
        transform: rotate(-45deg);
    }
    /* Закрытое меню — display:none, чтобы не перекрывать страницу и не ломать ширину. */
    .bar nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--cream);
        border-bottom: 1px solid var(--hair);
        padding: 8px 32px 16px;
        z-index: 51;
        min-width: 0;
    }
    .site-header.is-nav-open .bar nav { display: flex; }
    .bar nav a {
        display: block;
        padding: 12px 0;
        font-size: 13px;
        white-space: normal;
        border-bottom: 1px solid var(--hair);
    }
    .bar nav a:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-ink { padding: 48px 32px 44px; }
    .hero-ink .in { max-width: none; margin: 0; padding-left: 0; }
    .hero-glass { padding: 36px; min-height: 320px; }
    .band { grid-template-columns: 1fr; gap: 32px; padding: 32px 28px 34px; }
    .cta .wrap { display: block; }
    .cta .act { margin-top: 24px; }
    .fgrid { gap: 36px; }
}

@media (max-width: 640px) {
    .wrap { padding: 0 20px; }
    .sec { padding: 44px 0 50px; }
    .grid, .shots, .apps { grid-template-columns: 1fr; }
    .hero h1 { font-size: 33px; }
    .hero-glass img { max-height: 240px; }
    .facts { grid-template-columns: repeat(2, 1fr); }
    .facts div:nth-child(2) { border-right: 0; padding-right: 0; }
    .facts div:nth-child(3) { padding-left: 0; }
    .facts div:nth-child(3), .facts div:nth-child(4) { padding-top: 14px; }
    .sechead { flex-wrap: wrap; gap: 8px; }
    .sechead .more { margin-left: 0; }
    .sechead h2, .cta h2, .band h3 { font-size: 24px; }
    .tel { display: none; }
    .bar { gap: 14px; }
    .bar .right { gap: 8px; }
    .bar .right .btn { padding: 10px 14px; font-size: 11.5px; }
    .bar nav { padding-left: 20px; padding-right: 20px; }
    .site-header.is-nav-open .bar nav .nav-tel {
        display: block;
        font-family: var(--ff-m);
        text-transform: none;
        letter-spacing: 0;
        font-size: 15px;
        color: var(--ink);
        padding-top: 14px;
        border-bottom: 0;
    }
    .spec .r { flex-direction: column; gap: 3px; }
    .spec .r .k { width: auto; }
}