/* ============ ООО «ЭЛИС» — стили главной (из макета _mockup/index.html) ============ */

:root {
    --brand: #155E9F;          /* основной синий */
    --brand-2: #12B8D8;        /* акцентный голубой (точечно) */
    --brand-dark: #0F3557;     /* тёмно-синий */
    --brand-hover: #1677D2;    /* hover/active */
    --brand-soft: #EEF6FC;     /* светлый голубой фон */
    --brand-line: #2F6FA3;     /* линии иллюстраций (основные) */
    --brand-line-2: #7EA6C7;   /* линии иллюстраций (второстепенные) */
    --ink: #101828;            /* основной текст */
    --ink-2: #475467;          /* вторичный текст */
    --muted: #667085;          /* третичный текст */
    --nav: #344054;            /* обычные пункты меню */
    --line: #D8E2EC;           /* обводки и разделители */
    --bg: #F7FAFD;             /* фон страницы */
    --surface: #FFFFFF;        /* фон блоков */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --header-height: 130px;  /* высота липкого .header (header-top + nav); уточнить в DevTools */
    --shadow-sm: 0 2px 8px rgba(16, 24, 40, .05);
    --shadow: 0 12px 32px rgba(16, 24, 40, .08);
    --shadow-brand: 0 10px 26px rgba(21, 94, 159, .18);
    --gradient: linear-gradient(120deg, var(--brand-dark) 0%, var(--brand) 100%);
    --t: .3s cubic-bezier(.2, .7, .3, 1);
    --danger: #B91C1C;          /* ошибки валидации — контраст к белому ~6.5:1 (WCAG AA), приёмка §5.1 */
    --danger-soft: rgba(185, 28, 28, .14);
    --tap: 44px;                /* минимальная тач-цель */
    --space-2: 8px;  --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 40px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
    font-family: 'Inter', Arial, sans-serif;
    color: var(--ink-2);
    background: var(--bg);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo-text { font-family: 'Manrope', sans-serif; color: var(--ink); }

a { color: inherit; }
::selection { background: var(--brand); color: #fff; }

:focus-visible {
    outline: 2px solid rgba(22, 119, 210, .5);
    outline-offset: 2px;
    border-radius: 4px;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Нижний отступ контента до футера на внутренних страницах, где .container —
   прямой ребёнок #content (content-page, catalog, product, documents). Главную
   не затрагивает: там .container всегда внутри full-width <section>, а последняя
   .cta-strip сливается с тёмным футером без зазора. */
#content > .container { padding-bottom: 64px; }

/* ============ HEADER ============ */
.header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
    .header { background: #fff; }
}

.header-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px; max-width: 1240px; margin: 0 auto;
}

.logo { display: flex; align-items: center; gap: 14px; }
.logo-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--gradient);
    display: grid; place-items: center;
    box-shadow: var(--shadow-brand);
}
.logo-icon svg { width: 60%; height: 60%; }
.logo-mark { height: 56px; width: auto; display: block; }
.logo-text { font-size: 16px; font-weight: 800; letter-spacing: .3px; line-height: 1.1; }
.logo-text span {
    display: block; font-size: 10px; font-weight: 500; letter-spacing: 1.2px;
    color: var(--muted); text-transform: uppercase; margin-top: 3px;
    font-family: 'Inter', sans-serif;
}

.header-phones { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.header-phones a {
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
    display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end;
    transition: color var(--t);
}
.header-phones a:hover { color: var(--brand); }
.header-phones a i { color: var(--brand); font-size: 13px; }

/* Правый блок шапки: телефоны (десктоп) + кнопки поиска/бургера. .header-top —
   space-between, поэтому блок прижат к правому краю; на мобильных телефоны скрыты,
   остаются только кнопки. Поиск/бургер всегда в одной строке с логотипом. */
.header-top-right { display: flex; align-items: center; gap: 28px; }

.nav { border-top: 1px solid var(--line); background: rgba(255,255,255,.6); }
.nav-container {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
}
.nav-menu { display: flex; list-style: none; gap: 4px; }
.nav-menu a {
    display: block; padding: 16px 18px; text-decoration: none;
    font-size: 14px; font-weight: 600; color: var(--ink-2);
    position: relative; transition: color var(--t);
}
.nav-menu a::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 10px;
    height: 2px; background: var(--brand-hover); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.nav-menu a:hover, .nav-menu a.active { color: var(--brand-hover); }
.nav-menu a:hover::after, .nav-menu a.active::after { transform: scaleX(1); }

/* Выпадающее подменю (Каталог продукции / Контрактное производство).
   Десктоп: показывается по hover и focus-within (доступность с клавиатуры). */
.nav-menu .has-submenu { position: relative; }
.nav-menu .submenu {
    position: absolute; top: 100%; left: 0;
    min-width: 280px; margin: 0; padding: 8px;
    list-style: none; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--t), transform var(--t), visibility 0s linear var(--t);
    z-index: 50;
}
.nav-menu .has-submenu:hover > .submenu,
.nav-menu .has-submenu:focus-within > .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity var(--t), transform var(--t), visibility 0s;
}
.nav-menu .submenu a {
    display: block; padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.nav-menu .submenu a::after { display: none; }
.nav-menu .submenu a:hover { background: rgba(21,94,159,.07); color: var(--brand-hover); }
.nav-chev { font-size: 10px; margin-left: 6px; transition: transform var(--t); }
.nav-menu .has-submenu:hover .nav-chev { transform: rotate(180deg); }
.submenu-toggle { display: none; }

.nav-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
    width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink-2); font-size: 16px; cursor: pointer;
    display: grid; place-items: center; transition: all var(--t);
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-sm); }
.mobile-menu-btn { display: none; }

/* Затемнение под мобильным меню: создаётся в JS (ребёнок body, не хедера —
   иначе попало бы в stacking-контекст хедера и перекрыло гамбургер). По умолчанию
   display:none; показывается только в @media ниже, где и сам гамбургер активен. */
.menu-backdrop {
    display: none; position: fixed; inset: 0; z-index: 990; /* < хедера (1000), > контента */
    background: rgba(11, 22, 34, .45);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t), visibility 0s linear var(--t);
}

/* ============ HERO ============ */
.hero {
    position: relative; overflow: hidden;
    background: var(--surface); /* бесшовный вариант 2a: чистый белый под фото, стык не читается */
}
.hero::before {
    content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image:
        linear-gradient(rgba(120,150,180,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,150,180,.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000, transparent 90%);
}
.hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px;
    align-items: center; padding: 80px 0 90px;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand-soft); color: var(--brand);
    border: 1px solid var(--line);
    padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 600;
    margin-bottom: 22px;
}
.hero-badge i { font-size: 11px; }
.hero h1 {
    font-size: clamp(32px, 4.5vw, 52px); font-weight: 800; line-height: 1.08;
    letter-spacing: -.02em; margin-bottom: 22px;
}
.hero h1 .grad {
    background: linear-gradient(120deg, var(--brand-dark), var(--brand-line)); -webkit-background-clip: text;
    background-clip: text; color: transparent;
}
.hero p { font-size: 17px; color: var(--ink-2); max-width: 520px; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-stat .num {
    font-family: 'Manrope', sans-serif; font-size: 32px; font-weight: 800;
    color: var(--ink); line-height: 1;
}
.hero-stat .num span { color: var(--brand); }
.hero-stat .lbl { font-size: 13px; color: var(--muted); margin-top: 6px; }

.hero-visual { position: relative; }
.hero-card {
    position: relative; background: transparent; border: none; border-radius: 0;
    box-shadow: none; padding: 0; overflow: visible;
}
/* бесшовный вариант: ::after (градиентное пятно) убран — без карточки оно повисло бы в воздухе */
.hero-image { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 0; }
.hero-chip {
    position: absolute; background: #fff; border: 1px solid var(--line);
    border-radius: 14px; box-shadow: var(--shadow); padding: 12px 16px;
    display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600;
    color: var(--ink);
}
.hero-chip i { color: var(--brand); }
.hero-chip.c1 { top: -18px; left: -18px; animation: float 5s ease-in-out infinite; }
.hero-chip.c2 { bottom: -18px; right: -10px; animation: float 6s ease-in-out infinite .5s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ============ SECTIONS ============ */
.section { padding: 80px 0; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
}
.section-title { font-size: clamp(26px, 3.5vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.section-subtitle { color: var(--ink-2); font-size: 16px; margin-top: 16px; }

/* ============ PRODUCTS ============ */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.product-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 28px; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    position: relative; overflow: hidden; text-decoration: none; color: inherit; /* теперь может быть <a> */
}
.product-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--gradient); transform: scaleX(0); transform-origin: left;
    transition: transform var(--t);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.product-card:hover::before { transform: scaleX(1); }
.product-illustration {
    height: 150px; margin-bottom: 22px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-soft), #E4EEF7);
    display: grid; place-items: center; border: 1px solid var(--line);
}
.product-illustration svg { max-width: 78%; max-height: 78%; }
.product-illustration img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.product-illustration:has(img) { height: auto; aspect-ratio: 4 / 3; } /* фото вместо фиксированной высоты */
.product-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.product-card ul { list-style: none; }
.product-card ul li {
    position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; color: var(--ink-2);
}
.product-card ul li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 1px; color: var(--brand); font-size: 11px;
}

/* ============ CATALOG ============ */
.catalog-section { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.catalog-item {
    /* вертикальная всегда: фото сверху во всю ширину, контент снизу (как .product-card).
       Прежде горизонтальная (фото 150px слева + контент справа) — убрано совсем (бывш. G5/G6). */
    display: flex; flex-direction: column; gap: 22px; padding: 24px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform var(--t), box-shadow var(--t); text-decoration: none; color: inherit; /* теперь может быть <a> */
}
.catalog-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.catalog-img {
    width: 100%; height: 150px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-soft), #DDE9F2); display: grid; place-items: center;
    border: 1px solid var(--line); position: relative; overflow: hidden;
}
.catalog-img::after {
    content: ''; position: absolute; inset: 0; opacity: .5;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);
}
.catalog-img i { font-size: 42px; color: var(--brand); z-index: 1; }
.catalog-img img { width: 100%; height: 100%; object-fit: cover; }
.catalog-img:has(img) { height: auto; aspect-ratio: 4 / 3; } /* фото вместо фиксированной высоты (как .product-illustration) */
.catalog-img:has(img)::after { display: none; } /* убрать диагональный паттерн, когда есть фото */
.catalog-content h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.catalog-content ul { list-style: none; margin-bottom: 8px; }
.catalog-content ul li {
    position: relative; padding-left: 18px; margin-bottom: 7px; font-size: 13.5px; color: var(--ink-2);
}
.catalog-content ul li::before {
    content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--brand);
}
.catalog-content p { font-size: 13.5px; color: var(--muted); margin-top: 8px; font-style: italic; }
.catalog-buttons { display: flex; justify-content: center; gap: 16px; margin-top: 48px; flex-wrap: wrap; }
.extra-products { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Новинки производства — своя 3-колоночная сетка карточек (не общий .catalog-grid:
   тот переопределён ниже в §CATALOG SECTION и используется catalog-section.php /
   content-page.php — здесь мы его не трогаем). */
.novelties-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Гарантии качества — стрип trust-бейджей под кнопками каталога (главная). */
.quality-guarantees {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 40px; padding: 24px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.qg-item {
    display: flex; align-items: center; gap: 12px; justify-content: center;
    font-size: 15px; font-weight: 600; color: var(--ink-2); text-align: center;
}
.qg-item i { font-size: 26px; color: var(--brand); flex: none; }
.qg-item svg { width: 30px; height: 30px; flex: none; }   /* inline-SVG преимуществ (вместо FA) */

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px;
    border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none;
    cursor: pointer; border: none; transition: all var(--t); font-family: 'Manrope', sans-serif;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(21,94,159,.28); }
.btn-ghost { background: #fff; color: var(--brand-dark); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand-hover); color: var(--brand-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-white { background: #fff; color: var(--brand); }
.btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.btn:disabled { opacity: .65; cursor: not-allowed; transform: none !important; }

/* ============ CONTRACT ============ */
.contract-section {
    background:
        radial-gradient(700px 400px at 90% 10%, rgba(21,94,159,.05), transparent 60%),
        var(--bg);
}
.contract-intro { text-align: center; max-width: 900px; margin: 0 auto 56px; font-size: 16px; color: var(--ink-2); }
/* max-width убран: раньше сетка была зажата в 960px и секция «Контрактное производство»
   была у́же соседних (products-grid/novelties-grid идут на всю ширину .container 1240px).
   Теперь фичи занимают весь контейнер, как и остальные секции. */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-item {
    display: flex; gap: 22px; align-items: flex-start; padding: 28px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: transform var(--t), box-shadow var(--t);
}
.feature-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-icon {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px;
    background: linear-gradient(135deg, rgba(21,94,159,.10), rgba(21,94,159,.05));
    display: grid; place-items: center; color: var(--brand); font-size: 26px;
}
.feature-icon svg { width: 36px; height: 36px; }   /* inline-SVG фич контрактного производства (вместо фото/FA) */
.feature-icon--photo { width: 96px; height: 96px; background: none; padding: 0; overflow: hidden; }
.feature-icon--photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-content h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.feature-content p { font-size: 14px; color: var(--ink-2); }
.feature-note {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    font-size: 12.5px; color: var(--brand); font-weight: 600;
}

/* ============ INFO / ABOUT / CONTACT ============ */
.info-section { background: var(--surface); border-top: 1px solid var(--line); }
.info-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin: 0 auto 64px; }
.info-card {
    display: flex; gap: 22px; align-items: center; padding: 28px;
    border-radius: var(--radius); color: #fff;
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
    box-shadow: var(--shadow-brand); position: relative; overflow: hidden;
}
.info-card:nth-child(2) { background: linear-gradient(135deg, var(--ink) 0%, #1E3247 100%); box-shadow: var(--shadow); }
.info-card::after {
    content: ''; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px;
    border-radius: 50%; background: rgba(255,255,255,.08);
}
.info-card-icon {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px;
    background: rgba(255,255,255,.16); display: grid; place-items: center;
    font-size: 28px; color: #fff;
}
.info-card-content h3 { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.info-card-content p { font-size: 14px; color: rgba(255,255,255,.85); }
.price-tag {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
    background: rgba(255,255,255,.2); padding: 6px 12px; border-radius: 100px;
    font-size: 14px; color: #fff; font-weight: 700;
}

/* Две колонки естественной высоты (align-items: start): форма не растягивается под
   высоту колонки контактов, верхние края карточек строго на одной линии. */
.info-main { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

/* Единая карточка двух колонок (форма / контакты): общий padding-top ⇒ верхние края и
   заголовки «Форма связи» / «Контакты» на одной горизонтали. Форма — акцент (тень + брендовая обводка). */
.form-block, .contacts-block {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm);
}
.form-block { box-shadow: var(--shadow); border-color: var(--brand-line); }

/* Одинаковые размер/line-height/margin заголовков обеих колонок ⇒ базовые линии совпадают
   поверх общего padding-top (жёсткое требование ТЗ §3.1). */
.form-block h3, .contacts-block h3 {
    line-height: 34px; margin: 0 0 22px; font-size: 22px; font-weight: 800;
}

/* Правая колонка: контакты сверху, под ними карта фиксированной min-height (340px).
   margin:0 / max-width:none гасят утечку из базового .contacts-block (страница /contacts/),
   иначе верх карточки съезжает на 16px ниже формы и она обрезается по max-width:720px. */
.info-main .contacts-block { display: flex; flex-direction: column; margin: 0; max-width: none; }
/* Левая колонка — обычный поток: поля и кнопка идут друг за другом без растяжки
   (кнопка больше не прижимается к низу карточки). margin-top у .form-submit задаёт
   общее правило ниже. */

/* ============ REASONS / ПРЕИМУЩЕСТВА (горизонтальный блок 5 карточек, §2) ============ */
.reasons-section { background: var(--bg); }
.reasons-grid {
    list-style: none; counter-reset: reason; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: stretch;
}
.reason-card {
    counter-increment: reason; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.reason-num {
    width: 32px; height: 32px; border-radius: 50%; background: var(--brand);
    color: #fff; font-weight: 800; font-family: 'Manrope', sans-serif; font-size: 15px;
    display: grid; place-items: center; margin-bottom: 14px; flex-shrink: 0;
}
.reason-num::before { content: counter(reason); }
.reason-text { font-size: 16px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* Form (карточку .form-block задаёт общее правило выше + акцентная тень) */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.form-optional { color: var(--muted); font-weight: 500; }
.form-group input, .form-group textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 11px;
    font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); background: #fff;
    transition: border-color var(--t), box-shadow var(--t);
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--brand-hover); box-shadow: 0 0 0 3px rgba(22,119,210,.12);
}
.form-group textarea { resize: vertical; min-height: 96px; }
.form-group.has-error input,
.form-group.has-error textarea {
    border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft);
}
.form-error { font-size: 13px; color: var(--danger); margin-top: 5px; }
.form-error:empty { display: none; }
.form-counter { font-size: 12px; color: var(--muted); margin-top: 5px; }
.form-counter.is-max { color: var(--danger); font-weight: 600; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-submit { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.form-submit .btn { flex: 1; min-height: 48px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.form-success { text-align: center; padding: 28px 8px; color: var(--ink-2); }
.form-success i { font-size: 44px; color: var(--brand); display: block; margin-bottom: 14px; }
.form-success strong { color: var(--ink); font-size: 18px; display: block; margin-bottom: 4px; }
.form-success p { font-size: 15px; }

/* Contacts */
.contact-item { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.contact-item > i {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px;
    background: linear-gradient(135deg, rgba(21,94,159,.10), rgba(21,94,159,.05));
    color: var(--brand); font-size: 24px; display: grid; place-items: center;
}
.contact-item div { font-size: 14px; color: var(--ink-2); }
.contact-item div strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; font-weight: 700; }
.contact-item a { color: var(--brand); text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }
.contact-item--phone a { font-size: 18px; font-weight: 700; } /* телефон на 2–4px крупнее текста */
.contact-item address { font-style: normal; }
.map-container {
    margin-top: 22px; height: 180px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brand-soft), #DDE9F2); display: grid; place-items: center;
    border: 1px solid var(--line); position: relative; overflow: hidden; cursor: pointer;
}
.map-container::before {
    content: ''; position: absolute; inset: 0; opacity: .6;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(180,210,230,.3) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(180,210,230,.3) 20px);
}
.map-container i { font-size: 38px; color: var(--brand); z-index: 1; }
.map-container span {
    position: absolute; bottom: 14px; z-index: 1; font-size: 12px; font-weight: 600;
    color: var(--brand); background: #fff; padding: 5px 12px; border-radius: 100px;
    box-shadow: var(--shadow-sm);
}

/* ============ CONTACT MAP (Яндекс.Карта из site-settings.map_embed) ============ */
.contact-map-wrap {
    margin: 48px 0 24px;
}
.contact-map-wrap > h2 {
    margin: 0 0 18px;
}
.contact-map {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    background: var(--brand-soft);
    line-height: 0; /* убираем зазор под <script>-обёрткой Яндекса */
}
.contact-map iframe,
.contact-map > * {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}
@media (max-width: 720px) {
    .contact-map-wrap { margin: 32px 0 16px; }
    .contact-map { border-radius: var(--radius-sm); }
    .contact-map iframe,
    .contact-map > * { aspect-ratio: 4 / 3; }
}

/* Инлайн-карта в колонке 3 секции контактов (узкая колонка ⇒ фиксированная высота вместо 16/9). */
.contact-map-wrap--inline { margin: 24px 0 0; position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.contact-map-wrap--inline .contact-map { flex: 1 1 auto; min-height: 340px; }
/* !important перебивает инлайн height=400, который Яндекс.Конструктор ставит на injected
   iframe — иначе карта фиксируется на 400px и не тянется (flex-grow) по высоте колонки (§3.3). */
.contact-map-wrap--inline .contact-map iframe,
.contact-map-wrap--inline .contact-map > * { aspect-ratio: auto; height: 100% !important; min-height: 340px; }
.contact-map-route {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none;
    flex: 0 0 auto; /* ссылка маршрута не сжимается и всегда видна (§3.3, замечание приёмки) */
}
.contact-map-route:hover { text-decoration: underline; }
/* Блокировка прокрутки карты на тач-устройствах: оверлей «тап для активации» (создаётся в main.js). */
.contact-map-lock {
    position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-md);
    display: grid; place-items: center; cursor: pointer; padding: 12px;
    background: linear-gradient(135deg, rgba(21,94,159,.10), rgba(21,94,159,.04));
}
.contact-map-lock span {
    background: var(--surface); color: var(--brand); padding: 8px 14px; border-radius: 100px;
    font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) {
    /* одна колонка — карте не во что расти, фиксируем высоту (§3.4: ≥240px) */
    .contact-map-wrap--inline { flex: 0 0 auto; min-height: 0; }
    .contact-map-wrap--inline .contact-map { flex: 0 0 auto; min-height: 240px; }
    .contact-map-wrap--inline .contact-map iframe,
    .contact-map-wrap--inline .contact-map > * { height: 240px; min-height: 240px; }
}

/* ============ CTA STRIP ============ */
.cta-strip {
    background:
        radial-gradient(600px 300px at 20% 0%, rgba(21,94,159,.18), transparent 60%),
        linear-gradient(120deg, var(--brand-dark), var(--ink));
    color: #fff; text-align: center; padding: 64px 24px; position: relative; overflow: hidden;
}
.cta-strip h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 14px; }
.cta-strip p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 28px; font-size: 16px; }

/* ============ FOOTER ============ */
.footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 56px 24px 28px; }
.footer-grid {
    max-width: 1240px; margin: 0 auto; display: grid;
    grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    align-items: start; /* выравнивание верхов трёх колонок по одной линии */
}
.footer h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-text span { color: rgba(255,255,255,.5); }
.footer-brand p { font-size: 13.5px; margin-top: 14px; max-width: 320px; }

/* Навигация — тач-цель каждой ссылки ≥44px по высоте. */
.footer-nav ul { list-style: none; }
.footer-nav ul li { margin: 0; }
.footer-nav ul li a {
    display: block; padding: 11px 0; color: rgba(255,255,255,.6);
    text-decoration: none; font-size: 14px; line-height: 1.3; transition: color var(--t);
}
.footer-nav ul li a:hover,
.footer-nav ul li a:focus-visible { color: var(--brand-2); outline: none; }
.footer-nav ul li a[aria-current="page"] { color: rgba(255,255,255,.45); pointer-events: none; }

/* Контакты — сгруппированы (телефоны / e-mail / адрес) с приглушёнными подписями. */
.footer-contacts .fc-group { margin-bottom: 18px; }
.footer-contacts .fc-group:last-child { margin-bottom: 0; }
.footer-contacts .fc-label {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255,255,255,.4); margin-bottom: 6px;
}
.footer-contacts a, .footer-contacts .fc-line {
    display: block; padding: 3px 0; color: rgba(255,255,255,.78);
    text-decoration: none; font-size: 14px; transition: color var(--t);
}
.footer-contacts a:hover { color: var(--brand-2); }
.footer address { font-style: normal; }

.footer-bottom {
    max-width: 1240px; margin: 0 auto; padding-top: 24px; font-size: 13px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* Адаптив блока преимуществ (§2.3): 5 в ряд → 3+2 (планшет) → вертикальный список (телефон).
   На телефоне карточка горизонтальная: кружок слева, текст справа. */
@media (max-width: 1199px) {
    .reasons-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .reasons-grid { grid-template-columns: 1fr; gap: 16px; }
    .reason-card { flex-direction: row; align-items: flex-start; gap: 14px; }
    .reason-num { margin-bottom: 0; }
}

/* ============ TOAST ============ */
.toast-wrap {
    position: fixed; top: 24px; right: 24px; z-index: 5000;
    display: flex; flex-direction: column; gap: 12px;
}
.toast {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand);
    border-radius: 12px; box-shadow: var(--shadow); padding: 14px 18px;
    display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 360px;
    font-size: 14px; color: var(--ink); font-weight: 500;
    transform: translateX(120%); opacity: 0; transition: all .4s cubic-bezier(.2,.7,.3,1);
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left-color: #22c55e; }
.toast.success i { color: #22c55e; }
.toast.error { border-left-color: var(--danger); }
.toast.error i { color: var(--danger); }
.toast i { font-size: 20px; color: var(--brand); }

/* ============ SEARCH OVERLAY ============ */
.search-overlay {
    position: fixed; inset: 0; z-index: 4000; background: rgba(11,22,34,.5);
    backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center;
    padding-top: calc(var(--header-height) + 12px);
}
.search-overlay.show { display: flex; }
.search-box {
    position: relative; /* контекст для выпадающего списка .search-suggest */
    width: min(720px, 92vw); background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 12px; display: flex; gap: 10px; align-items: center;
}
.search-box input {
    flex: 1; border: none; outline: none; font-size: 17px; padding: 12px; color: var(--ink);
    font-family: 'Inter', sans-serif;
}
/* Гасим нативную декорацию × очистки у type="search" ТОЛЬКО в оверлее (рядом стоит явный
   .fa-xmark — иначе два крестика). Семантику type="search" (мобильные клавиатуры) не трогаем.
   WebKit/Blink-only: Chrome/Edge/Safari/Samsung. Firefox нативный × не рисует вовсе. */
.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-box .icon-btn { border: none; }

/* ---- автодополнение поиска (.search-suggest) ---- */
.search-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10;
    margin: 0; padding: 6px; list-style: none;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: var(--shadow); max-height: 60vh; overflow-y: auto;
}
.search-suggest li {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border-radius: var(--radius-sm); cursor: pointer;
}
.search-suggest li:hover,
.search-suggest li.active { background: var(--brand-soft); }
.ss-thumb {
    width: 44px; height: 33px; object-fit: cover; border-radius: 6px;
    flex-shrink: 0; background: var(--bg); /* плейсхолдер, пока грузится миниатюра */
}
.ss-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ss-title {
    color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* Футер «Показать все результаты (N)» в конце списка подсказок — ссылка на полную выдачу. */
.search-suggest li.ss-more {
    justify-content: center; gap: 8px; margin-top: 4px; padding-top: 10px; padding-bottom: 10px;
    border-top: 1px solid var(--line);
    color: var(--brand); font-weight: 600; font-size: 14px;
}
.search-suggest li.ss-more i { font-size: 13px; }

/* ============ SCROLL ANIM ============ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-chip { animation: none; }
    /* мобильное меню и backdrop появляются/исчезают мгновенно, без сдвига */
    .nav-menu, .menu-backdrop { transition: none; transform: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 70px; }
    .hero-visual { max-width: 520px; justify-self: center; } /* было 340 — на 768px карточка терялась */
    .hero-card { aspect-ratio: 4 / 3; height: auto; } /* ландшафтный кадр под обрезку */
    .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 60% 78%; } /* режем воздух сверху, держим продукцию */
    /* catalog-grid/extra-products/features-grid убраны — им своя ступенька на 860px (G4).
       products-grid: 4→2 на 1100, здесь → 1 (G3); остальное коллапсирует в 1 колонку. */
    .products-grid, .info-top, .info-main, .footer-grid {
        grid-template-columns: 1fr;
    }
    .nav-menu {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; background: #fff; padding: 8px;
        box-shadow: var(--shadow); border-top: 1px solid var(--line); gap: 0;
        /* анимация появления вместо display-свотча; display:flex приходит с десктопа (стр. 108) */
        opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
        transition: opacity var(--t), transform var(--t), visibility 0s linear var(--t);
    }
    .nav-menu.active {
        opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
        transition: opacity var(--t), transform var(--t), visibility 0s;
    }
    /* backdrop проявляется только в мобильном диапазоне (гамбургер активен) */
    .menu-backdrop.show {
        display: block; opacity: 1; visibility: visible;
        transition: opacity var(--t), visibility 0s;
    }
    .nav-menu a {
        padding: 14px 16px; border-radius: 10px;
        -webkit-tap-highlight-color: transparent; /* убираем нативный хайлайт тапа */
    }
    .nav-menu a::after { display: none; }
    /* На тач :hover залипает после тапа → голубая заливка держалась, пока панель
       закрывалась анимацией. Поэтому фон hover — только устройствам с мышью (hover:hover);
       мгновенный feedback тапа даёт :active, текущий пункт подсвечен через .active. */
    .nav-menu a.active { background: rgba(21,94,159,.07); }
    .nav-menu a:active { background: rgba(21,94,159,.10); }
    @media (hover: hover) {
        .nav-menu a:hover { background: rgba(21,94,159,.07); }
    }
    .mobile-menu-btn { display: grid; }
    .header-phones { display: none; }
    /* .nav-actions перенесены в .header-top-right → на мобильных .nav-container пуст,
       а .nav-menu выпадает (position:absolute) прямо из-под первой строки. Линию и
       фон второй полосы убираем — иначе она занимала бы место пустой строкой. */
    .nav { border-top: 0; background: transparent; }
    .nav-container { position: relative; }
    /* Подменю на мобильном: свёрнуто, раскрывается тапом по .submenu-toggle */
    .nav-menu .has-submenu { display: flex; flex-wrap: wrap; align-items: stretch; }
    .nav-menu .has-submenu > a { flex: 1 1 auto; min-width: 0; }
    .submenu-toggle {
        display: grid; place-items: center; flex: 0 0 44px; width: 44px;
        border: 0; border-radius: 10px; background: transparent;
        color: var(--ink-2); cursor: pointer;
        transition: background var(--t), color var(--t);
    }
    .submenu-toggle, .icon-btn { -webkit-tap-highlight-color: transparent; }
    .submenu-toggle:active { background: rgba(21,94,159,.10); }
    @media (hover: hover) {
        .submenu-toggle:hover { background: rgba(21,94,159,.07); color: var(--brand-hover); }
    }
    .submenu-toggle i { font-size: 12px; transition: transform var(--t); }
    .submenu-toggle.is-open i { transform: rotate(180deg); }
    .nav-menu .submenu {
        position: static; flex-basis: 100%; min-width: 0; padding: 0 0 4px 14px;
        border: 0; border-radius: 0; box-shadow: none;
        opacity: 1; visibility: visible; transform: none; transition: none;
        display: none;
    }
    .nav-menu .submenu.open { display: block; }
    .nav-menu .submenu a { padding: 12px 14px; font-weight: 500; color: var(--muted); }
    .nav-menu .submenu a:active { background: rgba(21,94,159,.10); }
    @media (hover: hover) {
        .nav-menu .submenu a:hover { background: rgba(21,94,159,.07); color: var(--brand-hover); }
    }
    .nav-chev { display: none; }
    /* страница товара — одна колонка */
    .product-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .product-sidebar { position: static; }
}
@media (max-width: 768px) {
    .section { padding: 56px 0; }
    .catalog-content ul, .product-card ul { text-align: left; display: inline-block; }
    .catalog-buttons { flex-direction: column; align-items: stretch; }
    .info-card { flex-direction: column; text-align: center; }
    .hero-stats { gap: 24px; }
}

/* На узких экранах убираем текстовую надпись рядом со знаком («ООО «ЭЛИС» / слоган):
   остаётся только логотип-знак, а поиск и бургер прижаты к правому краю. */
@media (max-width: 600px) {
    .logo-text { display: none; }
}

/* ============ HOME: фото-карточки + адаптив сеток (§4D/§4G) ============ */
/* G1: флекс-контент должен сжиматься — иначе длинные слова/сумма ширин растягивают
   карточку и выталкивают/обрезают соседей («Соответстви…», наложение карточек). */
.catalog-content, .feature-content { min-width: 0; flex: 1 1 auto; }
/* G2: перенос длинных неразрывных слов во всех текстовых элементах карточек. */
.catalog-content h3, .catalog-content li, .catalog-content p,
.product-card h3, .product-card li,
.feature-content h3, .feature-content p { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); } /* 4→2 на планшете (G3) */
}
@media (max-width: 600px) {
    .products-grid { grid-template-columns: 1fr; } /* 4→2→1: одна колонка на телефоне */
}
@media (max-width: 860px) {
    /* каталог/контрактное держат 2 колонки до 860px, ниже — 1 (G4) */
    .catalog-grid, .extra-products, .features-grid { grid-template-columns: 1fr; }
    /* .catalog-item уже вертикальная на всех ширинах (фото сверху — в базовых правилах).
       Здесь вертикализуем только широкий .feature-item (контрактное производство, ≈550px). */
    .feature-item { flex-direction: column; text-align: center; align-items: center; }
    /* фото во всю ширину вертикального .feature-item (.catalog-img уже 100% в базе) */
    .feature-icon--photo { width: 100%; height: 180px; }
}

/* === Новинки + Гарантии качества: каскад по убыванию ширины === */
/* ВАЖНО: 600px-блок обязан идти ПОСЛЕ 860px (ниже по файлу). На 320px срабатывают
   оба media-запроса; при равной специфичности побеждает последний → если 600px
   окажется выше, останется repeat(2,1fr) и на телефоне будет 2 колонки. */
@media (max-width: 860px) {
    .novelties-grid { grid-template-columns: repeat(2, 1fr); } /* 3→2 на планшете */
}
@media (max-width: 600px) {
    .novelties-grid { grid-template-columns: 1fr; }           /* →1 на телефоне */
    /* Гарантии стопкой. Иконки прижаты влево + фикс. ширина — иначе из-за разной длины
       подписей (базовый justify-content:center) они стоят не друг под другом, а криво. */
    .quality-guarantees { grid-template-columns: 1fr; gap: 14px; }
    .qg-item { justify-content: flex-start; text-align: left; }
    .qg-item i { width: 30px; text-align: center; }   /* колонка иконок на одной вертикали */
}

/* ============ BREADCRUMBS ============ */
.breadcrumbs {
    margin: 24px 0 16px;
    font-size: 14px;
    color: var(--muted, #6c7a8c);
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before {
    content: '›';
    margin-right: 8px;
    color: var(--line, #d8dee6);
}
.breadcrumbs a {
    color: var(--accent, #155e9f);
    text-decoration: none;
}
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current="page"] {
    color: var(--muted, #6c7a8c);
}

/* ============ PAGE HEADER (catalog/about/etc) ============ */
.page-header {
    padding: 24px 0 8px;
}
.page-header h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
    margin: 0 0 12px;
}

/* Контактный блок на отдельной странице (content-page /contacts/ и т.п.).
   В home.php используется тот же класс внутри сетки — там свои стили. */
.contacts-block {
    margin: 16px 0 40px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    max-width: 720px;
}
@media (max-width: 720px) {
    .contacts-block { padding: 20px; margin: 12px 0 28px; }
}

/* ============ CONTACTS LAYOUT (страница /contacts/) ============
   Двухколоночная раскладка: слева — карточки контактов (адрес/телефоны/e-mail/
   режим работы/реквизиты), справа — форма обратной связи (липкая на десктопе). */
.contacts-layout {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 32px;
    align-items: start;
    margin: 32px 0 0;
}
.contacts-main { min-width: 0; } /* защита от переполнения grid-элементом */
.contacts-aside {
    align-self: start;
    position: sticky;
    top: calc(var(--header-height) + 24px); /* под липким хедером */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
}
.contacts-aside > h2 { font-size: 22px; font-weight: 800; margin-bottom: 22px; }
/* Внутри сетки убираем собственный max-width карточки контактов — ширина задаётся колонкой. */
.contacts-layout .contacts-block { max-width: none; margin: 0; }
/* Широкая карточка (реквизиты) — контент в столбец, на всю ширину колонки. */
.contacts-layout .contact-item--wide { flex-direction: column; align-items: flex-start; }
.contacts-layout .contact-item--wide > div { width: 100%; }
.company-details { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
/* Список режима работы (рендерится хелпером elis_features() → <ul><li>). */
.contact-item ul { list-style: none; margin: 4px 0 0; padding: 0; }
.contact-item li { margin-bottom: 3px; }

@media (max-width: 980px) {
    .contacts-layout { grid-template-columns: 1fr; gap: 24px; }
    .contacts-aside { position: static; }
}
@media (max-width: 720px) {
    .contacts-layout { margin-top: 20px; gap: 16px; }
    .contacts-aside { padding: 22px; }
}

/* ============ Чекбокс согласия 152-ФЗ (форма обратной связи) ============ */
.form-consent { margin-bottom: 18px; }
/* Специфичность (0,2,0) — перебивает общее .form-group label { display:block }
   (стр. 451, (0,1,1)), иначе flex не применяется и чекбокс с текстом идут
   inline-потоком. Без этого мобильное .form-group input { min-height:44px }
   (стр. 1982) раздувает чекбокс до 44px — квадрат отрисовывается вверху, текст
   по baseline вниз → галочка «висит над строкой». */
.form-consent .checkbox-label {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 13px; line-height: 1.5; color: var(--ink-2); cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 18px; height: 18px; min-height: 0; /* обнуляем 44px тап-таргет с мобильного правила */
    margin-top: 3px; /* центр квадрата по первой строке текста лейбла (приёмка §5.3) */
    accent-color: var(--brand); flex-shrink: 0; cursor: pointer;
}
.checkbox-label a { color: var(--brand); text-decoration: underline; }
.checkbox-label a:hover { color: var(--brand-hover); }
.catalog-intro, .documents-intro, .content-body, .product-body {
    color: var(--text, #1a2330);
    line-height: 1.7;
    font-size: 16px;
}
.catalog-intro p, .documents-intro p, .content-body p, .product-body p { margin: 0 0 14px; }
.catalog-intro a:not(.btn), .documents-intro a:not(.btn), .content-body a:not(.btn), .product-body a:not(.btn) { color: var(--accent, #155e9f); }

/* ============ Типографика и таблицы контентных страниц (.content-body) ============ */
.content-body h2 {
    font-size: 26px; font-weight: 800; color: var(--ink);
    line-height: 1.3; margin: 36px 0 16px;
}
.content-body h2:first-child { margin-top: 0; }
.content-body h3 {
    font-size: 20px; font-weight: 700; color: var(--ink);
    line-height: 1.35; margin: 28px 0 12px;
}
.content-body h4 {
    font-size: 17px; font-weight: 700; color: var(--ink);
    margin: 22px 0 10px;
}
.content-body ul, .content-body ol { margin: 0 0 16px; padding-left: 22px; }
.content-body li { margin: 0 0 8px; line-height: 1.65; }
.content-body li:last-child { margin-bottom: 0; }
.content-body li > ul, .content-body li > ol { margin: 8px 0 0; }

/* список с галочками (markup уже использует <ul class="check">) */
.content-body ul.check { list-style: none; padding-left: 0; margin-bottom: 16px; }
.content-body ul.check > li { position: relative; padding-left: 30px; }
.content-body ul.check > li::before {
    content: "\2714"; position: absolute; left: 0; top: 0;
    color: var(--brand); font-weight: 800; font-size: 15px; line-height: 1.65;
}

/* таблицы в контенте */
.table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 0 20px; border: 1px solid var(--line);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.content-body table {
    width: 100%; border-collapse: collapse; background: var(--surface);
    font-size: 15px; line-height: 1.6;
}
.content-body table th, .content-body table td {
    padding: 14px 16px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line);
}
.content-body table thead th {
    background: var(--brand-soft); color: var(--ink); font-weight: 700;
    font-size: 14px; border-bottom: 2px solid var(--brand-line);
    white-space: nowrap;
}
.content-body table tbody tr:nth-child(even) td { background: #F5F8FC; }   /* zebra */
.content-body table tbody tr:last-child td { border-bottom: none; }
.content-body table td ul { margin: 0; padding-left: 18px; }
.content-body table td li { margin-bottom: 5px; line-height: 1.55; }
.content-body table td li:last-child { margin-bottom: 0; }

/* блок цены / CTA в контенте */
.price-block {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
    padding: 24px 28px; margin: 20px 0 24px;
    background: var(--brand-soft);
    border: 1px solid #D7E7F5; border-left: 4px solid var(--brand);
    border-radius: var(--radius-md);
}
.price-block__main { display: flex; flex-direction: column; gap: 2px; }
.price-block__label { color: var(--ink-2); font-size: 15px; }
.price-block__value {
    font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800;
    color: var(--brand); line-height: 1.1;
}
.price-block__cta { margin-left: auto; }
.price-block__note { flex-basis: 100%; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.price-block__note a { color: var(--brand); }
@media (max-width: 600px) {
    .price-block { flex-direction: column; align-items: stretch; }
    .price-block__cta { margin-left: 0; }
}

/* ============ CATALOG SECTION (обзор разделов) ============ */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.catalog-card {
    display: block;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.catalog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 32, 60, .08);
    border-color: var(--accent, #155e9f);
}
.catalog-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e8f0fb, #d3e2f7);
    color: var(--accent, #155e9f);
    display: grid;
    place-items: center;
    font-size: 26px;
    margin-bottom: 16px;
}
.catalog-card h3 { margin: 0 0 8px; font-size: 20px; }
.catalog-card p {
    margin: 0 0 12px;
    color: var(--muted, #6c7a8c);
    font-size: 14px;
    line-height: 1.5;
}
.catalog-card-meta {
    font-size: 13px;
    color: var(--accent, #155e9f);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.catalog-card-arrow { transition: transform .15s ease; }
.catalog-card:hover .catalog-card-arrow { transform: translateX(4px); }
.catalog-card--empty { opacity: .6; }
.catalog-card--empty:hover { transform: none; box-shadow: none; }
/* обложка карточки раздела (Wave 2 W2.1) — когда загружено фото category_image */
.catalog-card--cover { padding: 0; overflow: hidden; }
.catalog-card-cover { line-height: 0; }
.catalog-card-cover img { width: 100%; height: 160px; object-fit: cover; display: block; }
.catalog-card--cover h3,
.catalog-card--cover p,
.catalog-card--cover .catalog-card-meta { padding-left: 24px; padding-right: 24px; }
.catalog-card--cover h3 { padding-top: 20px; }
.catalog-card--cover p { margin: 0 0 12px; }
.catalog-card--cover .catalog-card-meta { padding-bottom: 24px; }

/* ============ CATALOG HERO (L2, Wave 2 W2.5) ============ */
.catalog-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    margin: 24px 0 8px;
    padding: 28px 32px;
    background: linear-gradient(135deg, #e8f0fb, #f4f8ff);
    border: 1px solid #d3e2f7;
    border-radius: 18px;
}
.catalog-hero-icon {
    width: 84px; height: 84px;
    border-radius: 20px;
    background: linear-gradient(135deg, #155e9f, #2563eb);
    color: #fff;
    display: grid; place-items: center;
    font-size: 38px;
}
.catalog-hero-content h1 { margin: 0 0 8px; font-size: 28px; }
.catalog-hero-content .catalog-intro { margin-top: 8px; }
.catalog-hero-content .catalog-intro p:last-child { margin-bottom: 0; }
/* реальное фото-обложка (когда редактор загрузит category_image) */
.catalog-hero--image {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #0f203c;
    min-height: 220px;
}
.catalog-hero-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.catalog-hero--image .catalog-hero-content { position: relative; z-index: 1; grid-column: 1 / -1; padding: 36px 40px; }
.catalog-hero--image .catalog-hero-content h1 { color: #fff; }
.catalog-hero--image .catalog-hero-content,
.catalog-hero--image .catalog-hero-content .catalog-intro { color: #fff; }
@media (max-width: 600px) {
    .catalog-hero { grid-template-columns: 1fr; padding: 22px 20px; gap: 16px; }
    .catalog-hero-icon { width: 64px; height: 64px; font-size: 30px; border-radius: 16px; }
    .catalog-hero-content h1 { font-size: 23px; }
}

/* ============ CATALOG CATEGORY (список товаров) ============ */
.catalog-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0;
}
.catalog-list-item {
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
}
.catalog-list-item h3 { margin: 0 0 8px; font-size: 19px; overflow-wrap: anywhere; }
.catalog-list-item h3 a { color: inherit; text-decoration: none; }
.catalog-list-item h3 a:hover { color: var(--accent, #155e9f); }
.catalog-list-summary {
    overflow-wrap: anywhere; /* длинные русские слова в узкой мобильной колонке */
    margin: 0 0 10px;
    color: var(--muted, #6c7a8c);
    font-size: 14px;
    line-height: 1.5;
}
.catalog-list-more { margin: 0; font-size: 14px; }
.catalog-list-more a { color: var(--accent, #155e9f); text-decoration: none; font-weight: 600; }
.catalog-list-more a:hover { text-decoration: underline; }

.empty { color: var(--muted, #6c7a8c); font-style: italic; }

.back-link {
    margin: 24px 0 0;
    font-size: 14px;
}
.back-link a {
    color: var(--accent, #155e9f);
    text-decoration: none;
    font-weight: 600;
}
.back-link a:hover { text-decoration: underline; }

/* ============ PRODUCT (карточка товара) ============ */
.product-header h1 { margin-bottom: 8px; }
.product-sku {
    margin: 0;
    color: var(--muted, #6c7a8c);
    font-size: 14px;
}
.product-sku span { font-family: ui-monospace, monospace; }

.product-summary {
    background: linear-gradient(135deg, #f0f6ff, #e6efff);
    border-left: 4px solid var(--accent, #155e9f);
    padding: 16px 20px;
    border-radius: 8px;
    margin: 24px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text, #1a2330);
}

.product-features, .product-specs {
    margin: 32px 0;
}
.product-features h2, .product-specs h2 {
    font-size: 22px;
    margin: 0 0 16px;
}
.product-features ul {
    padding-left: 20px;
    line-height: 1.7;
}
.product-features li { margin-bottom: 6px; }

.specs {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}
.specs th, .specs td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line, #e8edf3);
    font-size: 15px;
}
.specs tr:last-child th, .specs tr:last-child td { border-bottom: none; }
.specs th {
    width: 40%;
    background: #f7f9fc;
    font-weight: 600;
    color: var(--text, #1a2330);
}
/* группировка строк ТТХ (Wave 2 W2.4) — заголовок-разделитель группы */
.specs--grouped .specs-group th {
    width: auto;
    background: linear-gradient(135deg, #155e9f, #2563eb);
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.specs--grouped .specs-group + tr td,
.specs--grouped .specs-group + tr th { border-top: none; }

.product-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 32px 0 16px;
}

/* двухколоночный макет товара: галерея слева, sticky-сайдбар справа */
.product-top {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    align-items: start;
    margin: 8px 0 40px;
}
.product-top--no-gallery { grid-template-columns: 1fr; }
.product-gallery-col { min-width: 0; }
.product-sidebar {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0; /* grid-элемент: разрешить сжиматься под длинные токены (№ сертификата и т.п.) */
    overflow-wrap: anywhere;
}
.product-sidebar .product-summary { margin: 0; }
.product-sidebar .product-actions { margin: 0; }

/* Кнопка «Где купить?» — на всю ширину блока .product-actions (=> сайдбара на
   десктопе, всего контейнера на мобиле), контент по центру. Ширина явно, чтобы
   inline-flex-кнопка не схлопывалась под контент на узких экранах (где неявное
   растягивание flex-родителя нестабильно). box-sizing:border-box — глобально. */
.product-buy-btn { width: 100%; justify-content: center; }

/* Блок «Скачать документацию»: простые ссылки — иконка, название, вес файла */
.product-docs-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #6c7a8c);
    margin: 0 0 10px;
}
.product-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #1a2330);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.35;
    transition: border-color var(--t), color var(--t), box-shadow var(--t);
}
.product-doc:hover {
    border-color: var(--brand-hover, #155e9f);
    color: var(--brand-hover, #155e9f);
    box-shadow: var(--shadow-sm);
}
.product-doc > .fa-file-pdf {
    font-size: 20px;
    color: #d23f3f;
    flex-shrink: 0;
}
.product-doc-name { flex: 1 1 auto; min-width: 0; }
.product-doc-size {
    font-size: 12px;
    color: var(--muted, #6c7a8c);
    white-space: nowrap;
    flex-shrink: 0;
}
.product-details { margin-top: 8px; }

/* Узкие экраны: галерея и сайдбар товара — в один столбец.
   Блок @media(max-width:992px) в шапке файла (RESPONSIVE) объявлен РАНЬШЕ
   этой секции PRODUCT, поэтому при равной специфичности он проигрывает
   базовому .product-top. Рабочее переопределение держим здесь, ниже базы. */
@media (max-width: 600px) {
    .product-top { grid-template-columns: 1fr; gap: 24px; }
    .product-sidebar { position: static; }
}

/* ============ CONTENT-PAGE (О компании, Контрактное) ============ */
.content-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin: 32px 0;
}
.feature-card {
    padding: 24px 20px;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
    text-align: center;
}
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e8f0fb, #d3e2f7);
    color: var(--accent, #155e9f);
    display: grid;
    place-items: center;
    font-size: 24px;
    margin: 0 auto 12px;
}
.feature-card h3 { font-size: 17px; margin: 0 0 8px; }
.feature-card p {
    margin: 0;
    color: var(--muted, #6c7a8c);
    font-size: 14px;
    line-height: 1.5;
}
.content-contact {
    margin: 40px 0 0;
}
.content-contact h2 { font-size: 22px; margin: 0 0 16px; }

/* ============ DOCUMENTS PAGE ============ */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 24px 0;
}
.document-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 14px;
}
.document-item > .fa-file-pdf {
    font-size: 28px;
    color: #d23f3f;
    flex-shrink: 0;
}
.document-meta { flex-grow: 1; min-width: 0; }
.document-title {
    font-weight: 600;
    color: var(--text, #1a2330);
    margin-bottom: 4px;
}
.document-info {
    font-size: 13px;
    color: var(--muted, #6c7a8c);
    display: flex;
    gap: 12px;
}
.document-ext {
    background: #f7f9fc;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .document-item { flex-wrap: wrap; }
    .document-item .btn { width: 100%; }
}

/* ============ CATALOG LIST ITEM (с превью товара) ============ */
.catalog-list-item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 22px;
    align-items: center;
    position: relative;
    transition: transform var(--t, .3s), box-shadow var(--t, .3s), border-color var(--t, .3s);
}
.catalog-list-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: transparent;
}
/* вся карточка кликабельна: оверлей тянется от ссылки «Подробнее» */
.catalog-list-more { position: relative; z-index: 1; }
.catalog-list-item .stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}
.catalog-list-item .stretched-link:focus-visible::after {
    outline: 2px solid var(--brand, #155e9f);
    outline-offset: -4px;
    border-radius: 14px;
}
.catalog-list-sku {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--muted, #667085);
}
.catalog-list-sku span { font-family: ui-monospace, monospace; }
/* ключевые ТТХ в карточке списка (Wave 2 W2.3). Обёртка .catalog-list-spec
   держит пару dt/dd; в режиме "Список" это grid auto 1fr (капсула-таблица),
   в режиме "Сетка" переопределяется в пилюлю overlay-правилами ниже. */
.catalog-list-specs {
    display: flex; flex-direction: column; gap: 4px;   /* межстрочный отступ пар */
    margin: 8px 0 12px;
    padding: 12px 14px;
    background: #f7f9fc;
    border: 1px solid #e8edf3;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}
.catalog-list-spec { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; }
.catalog-list-specs dt { color: var(--muted, #6c7a8c); font-weight: 500; }
.catalog-list-specs dd {
    margin: 0; font-weight: 600; color: var(--ink, #101828);
    min-width: 0; /* разрешить grid-треку 1fr сжиматься под ширину ячейки */
    overflow-wrap: anywhere; /* перенос длинных неразрываемых значений («495x285x85мм») */
}

/* Кнопка копирования артикула (.copy-sku) — общая для карточки товара и списка категории */
.copy-sku {
    display: inline-flex; align-items: center;
    margin-left: 6px; padding: 2px 6px;
    border: 1px solid var(--line, #e3e8ef); background: #fff;
    border-radius: 6px; color: var(--muted, #6c7a8c);
    cursor: pointer; font-size: 12px; line-height: 1;
    vertical-align: middle;
    transition: color .15s, border-color .15s, background .15s;
}
.copy-sku:hover { color: var(--accent, #155e9f); border-color: var(--accent, #155e9f); }
.copy-sku:focus-visible { outline: 2px solid var(--accent, #155e9f); outline-offset: 1px; }
.copy-sku:active { background: var(--bg, #f4f7fb); }
.catalog-list-media {
    display: block;
    width: 160px;
    flex-shrink: 0;
}
.product-card-img {
    display: block;
    width: 160px;
    height: 120px;
    border-radius: 12px;
    object-fit: contain;
    border: 1px solid var(--line, #e2e8f0);
    background: linear-gradient(135deg, var(--brand-soft, #eef6fc), #dde9f2);
    box-sizing: border-box;
}
.product-card-img.placeholder {
    display: grid;
    place-items: center;
    color: var(--brand-line-2, #7ea6c7);
    background: linear-gradient(135deg, var(--brand-soft, #eef6fc), #dde9f2);
    font-size: 40px;
}
.catalog-list-body { min-width: 0; }
@media (max-width: 600px) {
    .catalog-list-item { grid-template-columns: 100px 1fr; gap: 14px; }
    .catalog-list-media, .product-card-img { width: 100px; height: 76px; }
}

/* ============ CATALOG VIEW: СЕТКА / СПИСОК (переключатель вида) ============
   ЕДИНАЯ карточка (.catalog-list-item) перестраивается CSS. Вид хранится в localStorage
   и выставляется инлайн-скриптом (catalog-category.php) как data-catalog-view="grid|list"
   на <html>. Один <img> на товар (нет двойной загрузки), одна ссылка, микроразметка один раз.
   Режим «Список» — базовые правила (применяются всегда). Режим «Сетка» (по умолчанию) —
   селекторы html:not([data-catalog-view="list"]) поверх, с большей специфичностью.
   Без JS атрибута нет → :not(...) совпадает → виден вид «Сетка» (default). */

/* Элементы «сетки» скрыты по умолчанию; в режиме «Список» остаются скрытыми. */
.catalog-list-link-sku,
.catalog-list-type,
.catalog-list-docs { display: none; }

/* Тулбар скрыт, пока JS не выставил data-catalog-view (без JS кнопки мертвы — не показываем). */
.catalog-toolbar { display: none; justify-content: flex-end; margin: 4px 0 0; }
html[data-catalog-view] .catalog-toolbar { display: flex; }
.catalog-view-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.catalog-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); min-width: 44px; padding: 6px 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.catalog-view-btn:hover { color: var(--brand); background: var(--brand-soft); }
.catalog-view-btn[aria-pressed="true"] { color: var(--brand); background: var(--brand-soft); border-color: #b6d2e8; }
.catalog-view-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Поверх растянутой ссылки заголовка (её ::after, z-index:0) — клики по кнопке/иконкам PDF
   идут в них, а не в карточку. «Подробнее →» — декоративный <span> (pointer-events:none). */
.catalog-list-item .copy-sku,
.catalog-list-doc { position: relative; z-index: 1; }
.catalog-list-more { pointer-events: none; }
.catalog-list-more-text { color: var(--brand); font-weight: 600; }

/* Режим «Список»: источник фото без crop, поэтому cover заполняет 160×120 (как раньше). */
html[data-catalog-view="list"] .product-card-img { object-fit: cover; }

/* ============ РЕЖИМ «СЕТКА» (по умолчанию) ============ */
/* Контейнер: 3 колонки ≥1280px, 2 — 768–1279px, 1 — <768px (мобильные — всегда в колонку). */
html:not([data-catalog-view="list"]) .catalog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0; align-items: stretch; }
@media (max-width: 1279px) { html:not([data-catalog-view="list"]) .catalog-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { html:not([data-catalog-view="list"]) .catalog-list { grid-template-columns: 1fr; } }

/* Карточка: вертикальный flex, радиус 12, без внутренних отступов (фото в край). */
html:not([data-catalog-view="list"]) .catalog-list-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: 12px; overflow: hidden; }
html:not([data-catalog-view="list"]) .catalog-list-item:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, .08); border-color: transparent; }

/* Фото: бокс 4:3, contain, мягкий фон + отступ 16px. aspect-ratio резервирует место (нет CLS).
   height:auto обязателен: @media(max-width:600px) ниже задаёт .catalog-list-media{height:76px}
   (наследие списочного макета). Без этой перекрышки обёртка остаётся 76px, а фото в сетке при
   полной ширине = 4:3 (≥160px) → фото вылезает из обёртки вниз, и flex-колонка кладёт текст
   поверх фото (баг ≤425px). Специфичность (0,2,1) бьёт то 76px-правило (0,1,0). */
html:not([data-catalog-view="list"]) .catalog-list-media { display: block; width: 100%; height: auto; }
/* Фото само задаёт бокс 4:3 (aspect-ratio на <img>, как в .related-card) — это надёжнее, чем
   aspect-ratio на контейнере-flex-элементе + процентная высота img (на части движков высота
   не вычислялась → медиа схлопывалась, фото вылезало под текст). Вписывание — object-fit:contain. */
html:not([data-catalog-view="list"]) .product-card-img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: contain; padding: 16px; box-sizing: border-box; background: linear-gradient(135deg, var(--brand-soft), #dde9f2); border: 0; border-radius: 0; }
html:not([data-catalog-view="list"]) .product-card-img.placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; padding: 16px; box-sizing: border-box; background: linear-gradient(135deg, var(--brand-soft), #dde9f2); font-size: 44px; color: var(--brand-line-2); border: 0; }

/* Тело: растёт, чтобы футер был прижат книзу. */
html:not([data-catalog-view="list"]) .catalog-list-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 0; }

/* Заголовок: в сетке показываем артикул, полный title прячем. */
html:not([data-catalog-view="list"]) .catalog-list-link-sku { display: inline; }
html:not([data-catalog-view="list"]) .catalog-list-link-name { display: none; }
html:not([data-catalog-view="list"]) .catalog-list-title { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
html:not([data-catalog-view="list"]) .catalog-list-link { color: inherit; text-decoration: none; }
html:not([data-catalog-view="list"]) .catalog-list-link:hover { color: var(--brand); }

/* Тип изделия (до 2 строк). */
html:not([data-catalog-view="list"]) .catalog-list-type { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: -2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

/* В сетке прячем «артикул-строку» с копированием и саммари (артикул уже в заголовке). */
html:not([data-catalog-view="list"]) .catalog-list-sku,
html:not([data-catalog-view="list"]) .catalog-list-summary { display: none; }

/* режим "Сетка": ключевые ТТХ — компактные пилюли.
   Специфичность overlay (0,2,1) перекрывает базовый .catalog-list-spec (0,1,0)
   независимо от порядка правил — не менять селектор без перерасчёта каскада. */
html:not([data-catalog-view="list"]) .catalog-list-specs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 6px 0 0; padding: 0;
    background: none; border: 0; border-radius: 0;
    font-size: 12.5px; line-height: 1.4;
}
html:not([data-catalog-view="list"]) .catalog-list-spec {
    display: inline-flex; align-items: baseline; gap: 0.4em;
    padding: 4px 10px;
    background: var(--brand-soft, #eef6fc);
    border: 1px solid var(--line, #d8e2ec);
    border-radius: 999px;
    max-width: 100%;
}
html:not([data-catalog-view="list"]) .catalog-list-spec dt {
    color: var(--muted, #667085); font-weight: 500;
    white-space: nowrap; /* метки короткие — перенос внутри метки хуже переноса значения */
}
html:not([data-catalog-view="list"]) .catalog-list-spec dt::after { content: ":"; }
html:not([data-catalog-view="list"]) .catalog-list-spec dd {
    margin: 0; font-weight: 600; color: var(--ink, #101828);
    min-width: 0; overflow-wrap: anywhere;
}
/* страховка: PHP даёт ≤4 ТТХ (getKeySpecs(4,…)); правило — на случай повышения лимита.
   Единый лимит для всех брейкпоинтов, включая мобильный: минимум 4 пилюли (требование заказчика). */
html:not([data-catalog-view="list"]) .catalog-list-spec:nth-child(n + 5) { display: none; }

/* Иконки PDF — отдельные ссылки, target="_blank" (z-index:1 задан выше). */
html:not([data-catalog-view="list"]) .catalog-list-docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
html:not([data-catalog-view="list"]) .catalog-list-doc { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--brand); font-size: 17px; line-height: 1; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
html:not([data-catalog-view="list"]) .catalog-list-doc:hover { background: var(--brand-soft); border-color: #b6d2e8; color: var(--brand-dark); }
html:not([data-catalog-view="list"]) .catalog-list-doc:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* На тач-экранах — таргет 44px. */
@media (pointer: coarse) { html:not([data-catalog-view="list"]) .catalog-list-doc { width: 44px; height: 44px; font-size: 18px; } }

/* Футер карточки: иконки PDF и «Подробнее →» на ОДНОЙ строке, прижаты книзу
   (margin:auto 0 0 в flex-колонке тела). Документы — слева, «Подробнее» — справа
   (margin-left:auto). z-index:1 у .catalog-list-doc задан выше → клики по PDF идут в
   них, а не в растянутую ссылку карточки; .catalog-list-more — декорация (pointer-events:none).
   Боковой padding НУЛЕВОЙ: футер лежит внутри .catalog-list-body, который уже даёт
   боковые отступы (18px десктоп / 14px мобила) — иначе иконки получали двойной отступ
   слева и уезжали вправо от заголовка/ТТХ. */
html:not([data-catalog-view="list"]) .catalog-list-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: auto 0 0; padding: 10px 0 14px; }
html:not([data-catalog-view="list"]) .catalog-list-more { margin-left: auto; padding: 0; font-size: 14px; }

/* Узкие карточки (2 колонки 480–600px и 1 колонка <480px): плотнее отступы и типографика,
   чтобы содержимое не «плыло» в узкой колонке. */
@media (max-width: 600px) {
    html:not([data-catalog-view="list"]) .catalog-list { gap: 16px; }
    html:not([data-catalog-view="list"]) .catalog-list-title { font-size: 17px; }
    html:not([data-catalog-view="list"]) .product-card-img,
    html:not([data-catalog-view="list"]) .product-card-img.placeholder { padding: 12px; }
    html:not([data-catalog-view="list"]) .catalog-list-body { padding: 14px 14px 0; gap: 6px; }
    /* ≤600px: все 4 пилюли остаются видны (лимит — общий nth-child(n+5) выше),
       на узком экране только уплотняем: */
    html:not([data-catalog-view="list"]) .catalog-list-specs { font-size: 12px; gap: 5px; }
    html:not([data-catalog-view="list"]) .catalog-list-spec { padding: 3px 9px; }
    html:not([data-catalog-view="list"]) .catalog-list-actions { padding: 8px 0 12px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============ PRODUCT GALLERY (страница товара) ============ */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.product-main-img-btn {
    display: block;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
    width: 100%;
}
.product-main-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: contain;
    background: var(--brand-soft, #eef6fc);
}
.product-main-caption {
    margin: 8px 2px 0;
    font-size: 13px;
    color: var(--muted, #6c7a8c);
}
.product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.product-thumb {
    padding: 0;
    border: 2px solid var(--line, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    transition: border-color var(--t);
}
.product-thumb img {
    display: block;
    width: 96px;
    height: 72px;
    object-fit: cover;
}
.product-thumb:hover { border-color: var(--brand-hover, #1677d2); }
.product-thumb.active { border-color: var(--brand, #155e9f); }

/* ============ LIGHTBOX ============ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(11, 22, 34, .9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.lightbox-caption {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    max-width: 640px;
    text-align: center;
    margin: 0;
}
.lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--t);
}
.lightbox-close:hover { background: rgba(255, 255, 255, .32); }

/* ============ CATALOG PAGER (пагинация списка категории) ============ */
.catalog-pager { margin: 32px 0 8px; }
.MarkupPagerNav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.MarkupPagerNav li { list-style: none; }
.MarkupPagerNav li a {
    display: inline-block;
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line, #d8e2ec);
    border-radius: 8px;
    background: #fff;
    color: var(--text, #1a2330);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background var(--t, .3s), color var(--t, .3s), border-color var(--t, .3s);
}
.MarkupPagerNav li a:hover {
    background: var(--brand-soft, #eef6fc);
    border-color: var(--brand, #155e9f);
    color: var(--brand, #155e9f);
}
.MarkupPagerNav li.MarkupPagerNavOn a {
    background: var(--brand, #155e9f);
    border-color: var(--brand, #155e9f);
    color: #fff;
}
.MarkupPagerNav li.MarkupPagerNavSeparator,
.MarkupPagerNav li.MarkupPagerNavSeparator a {
    background: none;
    border: none;
    color: var(--muted, #667085);
}

/* ============ PRODUCT PAGER (prev/next/назад к категории) ============ */
.product-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line, #d8e2ec);
}
.pp-back {
    font-size: 14px;
    color: var(--brand, #155e9f);
    text-decoration: none;
    font-weight: 600;
}
.pp-back:hover { text-decoration: underline; }
.pp-siblings { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-prev, .pp-next {
    font-size: 13px;
    color: var(--muted, #667085);
    text-decoration: none;
    padding: 6px 10px;
    border: 1px solid var(--line, #d8e2ec);
    border-radius: 8px;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--t, .3s), border-color var(--t, .3s);
}
.pp-prev:hover, .pp-next:hover {
    color: var(--brand, #155e9f);
    border-color: var(--brand, #155e9f);
}

/* ============ PRODUCT RELATED (похожие товары) ============ */
.product-related { margin: 40px 0 16px; }
.product-related h2 { font-size: 22px; margin: 0 0 16px; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line, #d8e2ec);
    border-radius: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t, .3s), box-shadow var(--t, .3s), border-color var(--t, .3s);
}
.related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: transparent;
}
.related-card img, .related-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: linear-gradient(135deg, var(--brand-soft, #eef6fc), #dde9f2);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 6px;
}
.related-img.placeholder {
    display: grid;
    place-items: center;
    color: var(--brand-line-2, #7ea6c7);
    font-size: 32px;
}
.related-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
@media (max-width: 720px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .related-grid { grid-template-columns: 1fr; }
}

/* ============ ПРОЧЕЕ ============ */
.specs tbody tr:nth-child(even) td { background: #fbfdff; }

/* ============ DEALERS (страница /dealers/, блок на content-page) ============ */
.dealers-section { margin-top: 12px; padding-top: 0; /* нейтрализуем padding-top:56/80px от базового .section — на /dealers/ секция идёт сразу под H1; padding-bottom оставляем (зазор перед футером). compact — отдельное правило ниже */ }
.dealers-section .section-title { margin-bottom: 16px; }
.dealers-index { margin: 0 0 32px; line-height: 1.8; }
.dealers-index p { margin: 0.25rem 0; }
.dealers-index a { color: var(--brand, #155E9F); text-decoration: none; }
.dealers-index a:hover { text-decoration: underline; }
.dealers-country {
    font-family: 'Manrope', sans-serif;
    margin: 32px 0 16px;
    font-size: 1.35rem;
    color: var(--ink, #101828);
}
.dealers-city {
    font-family: 'Manrope', sans-serif;
    margin: 24px 0 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink, #101828);
    /* html { scroll-padding-top: 120px } уже задан глобально (строка 29),
       так что якорь из URL-хеша приземляется ниже хедера автоматически */
}
.dealers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dealer-card {
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--line, #D8E2EC);
    border-radius: var(--radius-sm, 10px);
    padding: 20px;
}
.dealer-company {
    font-family: 'Manrope', sans-serif;
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #101828);
}
.dealer-card p {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2, #475467);
}
.dealer-emails a, .dealer-website a {
    color: var(--brand, #155E9F);
    text-decoration: none;
    word-break: break-all;
}
.dealer-emails a:hover, .dealer-website a:hover { text-decoration: underline; }
.section-intro { color: var(--ink-2, #475467); margin: 0 0 24px; line-height: 1.7; }

/* --- compact-блок «Где купить» на L2 (категория) и L3 (товар) --- */
.dealers-section--compact { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.dealers-section--compact .dealers-country { margin: 20px 0 12px; font-size: 1.15rem; }
.dealers-section--compact .dealers-city { margin: 16px 0 8px; font-size: 1rem; }
.dealers-section--compact .dealers-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dealers-section--compact .dealer-card { padding: 14px 16px; }
.dealers-more { margin: 8px 0 0; }
.dealers-more a {
    display: inline-block;
    color: var(--brand, #155E9F);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--line, #D8E2EC);
    border-radius: var(--radius-sm, 10px);
    padding: 8px 16px;
    transition: background var(--t, .3s), border-color var(--t, .3s);
}
.dealers-more a:hover { background: var(--brand-soft, #eef6fc); border-color: var(--brand, #155E9F); }

/* ============ SEARCH (/search/) ============ */
.search-head { margin-bottom: 20px; }
.search-head h1 { margin-bottom: 12px; }
.search-form { display: flex; gap: 10px; max-width: 620px; }
.search-form input[type="search"] {
    flex: 1; padding: 12px 16px; font: inherit; color: var(--ink);
    border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface);
}
.search-form input[type="search"]:focus { outline: none; border-color: var(--brand); }
.search-form button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; font: inherit; font-weight: 700;
    color: #fff; background: var(--brand); border: none; border-radius: var(--radius-sm);
    cursor: pointer; transition: background var(--t);
}
.search-form button:hover { background: var(--brand-hover); }

.search-meta { color: var(--muted); margin: 16px 0 24px; }
.search-meta strong { color: var(--ink); }

.search-empty {
    margin: 8px 0 24px; padding: 32px 20px; text-align: center;
    color: var(--muted); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}

.search-section { margin-bottom: 36px; }
.search-section > h2 { margin-bottom: 16px; }

/* Вторичные результаты (разделы/контент/документы) — компактный список */
.search-extra { list-style: none; margin: 0; padding: 0; }
.search-extra li {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.search-extra li:last-child { border-bottom: none; }
.search-extra-type {
    flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--brand-dark);
    background: var(--brand-soft); border-radius: 999px; padding: 3px 10px;
}
.search-extra a { font-weight: 600; color: var(--brand); text-decoration: none; }
.search-extra a:hover { text-decoration: underline; }

/* ============================================================
   MOBILE FIXES (июль 2026) — адаптивная вёрстка телефона.
   Все правила только внутри медиазапросов; десктоп не меняется.
   Проблемы: 1) посимвольный перенос значений ТТХ, 2) посимвольный
   перенос заголовков, 3) пропорции карточки списка, 4) высокий hero.
   ============================================================ */
@media (max-width: 768px) {
    /* Problem 2 — убираем посимвольный перенос заголовков/описаний.
       overflow-wrap наследуется от .product-sidebar (anywhere) → H1 дробится
       по буквам. break-word рвёт только длинное неразрываемое слово как
       крайний случай (никогда не посимвольно). */
    .catalog-list-item h3,
    .catalog-list-summary,
    .product-header h1,
    .product-summary { overflow-wrap: break-word; }

    /* Адаптивная типографика. У .product-header h1 нет базового font-size
       (наследует ~32px браузера) — clamp задаёт размер только на мобильных;
       десктоп не затронут. */
    .product-header h1 { font-size: clamp(22px, 6vw, 30px); }
    .catalog-list-item h3 { font-size: 17px; }

    /* Problem 1 — ключевые ТТХ в карточке списка: фикс. 55/45 с shrinkable-треками.
       Было auto 1fr → auto-колонка (длинная метка) съедала ширину, 1fr значения
       схлопывался в 0, и overflow-wrap:anywhere рвал значение по символам. */
    .catalog-list-spec { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
    /* break-word рвёт только токен, который всё ещё не влезает (не посимвольно);
       hyphens:manual явно отключает автеннирование (без случайных дефисов). */
    .catalog-list-specs dd { overflow-wrap: break-word; hyphens: manual; }

    /* Problem 1b — полноценная <table> ТТХ на странице товара: fixed-layout,
       чтобы width:40% на th соблюдался и длинные значения переносились по
       словам, а не вызывали горизонтальный скролл. colspan="2" у group-строк
       не страдает. На 320px колонка td ≈ 60% от ~230px ≈ 138px — короткие
       значения («10 А», «220 ВА») влезают в одну строку. */
    .specs { table-layout: fixed; }
    .specs th, .specs td { overflow-wrap: break-word; hyphens: manual; }
}

@media (max-width: 600px) {
    /* Problem 3 — карточка списка в одну колонку: фото сверху во всю ширину,
       затем тело. Перекрывает раннее 100px 1fr (строка 1084) более поздним
       порядком в файле. .stretched-link::after по-прежнему накрывает всю
       карточку (inset:0 на position:relative .catalog-list-item),
       .catalog-list-more остаётся z-index:1 и кликабельным. */
    .catalog-list-item { grid-template-columns: 1fr; gap: 16px; }
    .catalog-list-media { width: 100%; display: flex; justify-content: center; }
    .product-card-img {
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* Problem 4 — hero категории на всю ширину экрана и короче по высоте.
       .catalog-hero — прямой потомок .container (padding 0 24px), поэтому
       поля -24px точно компенсируют отступ контейнера → edge-to-edge на
       телефонах (container == ширина вьюпорта ниже 1240px). БЕЗ 100vw →
       нет влияния ширины вертикального скроллбара. Шире текст → меньше
       строк → короче блок; также уменьшены вертикальные отступы и min-height. */
    .catalog-hero {
        margin-left: -24px;
        margin-right: -24px;
        width: calc(100% + 48px);
        border-radius: 0;
        padding: 22px 20px;
        gap: 16px;
    }
    .catalog-hero-content h1 { font-size: 22px; }
    .catalog-hero--image { min-height: 160px; }                      /* было 220 */
    .catalog-hero--image .catalog-hero-content { padding: 24px 20px; } /* было 36px 40px */
}

@media (max-width: 480px) {
    .catalog-list-item h3 { font-size: 16px; }

    /* Problem 1 (харденинг) — для неразрывных значений-размеров («300х285х85»):
       схлопываем список ТТХ в одну колонку, чтобы каждое значение получило
       ПОЛНУЮ ширину тела карточки и длинный токен помещался в одну строку
       вместо разрыва через break-word. Чуть мельче шрифт значения как запас. */
    .catalog-list-spec {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .catalog-list-specs dd { font-size: 12px; }
}

/* ============================================================
   MOBILE FIXES — ТЗ «Корректировка мобильной версии» (июль 2026)
   Все правила строго внутри @media; десктоп (≥1024px) не затронут.
   Без !important (инлайн-стилей и библиотек не трогаем). Это
   КОРРЕКТИРОВКА карточной вёрстки (не редизайн): сужаем боковые
   отступы, именные блоки выводим на край экрана, держим читаемость
   текста (≥16px), форма — без зума iOS, убираем горизонтальный скролл.
   Приоритет — 320–767px.
   ============================================================ */
/* Mobile fixes */

/* ---- Форма: читаемость и тап (мобайл + планшет). Зум-на-фокусе в iOS
        Safari срабатывает на ЛЮБОЙ ширине при font-size<16px, поэтому
        порог 1023 (захватываем и планшет); десктоп ≥1024 не трогаем. ---- */
@media (max-width: 1023.98px) {
    /* §2.6: font-size ≥16px — iOS не зумирует страницу при фокусе (#7);
       min-height 44px — удобство тапа (#6). Поля и так width:100%, кнопка
       отправки — flex:1 min-height:48px (базовые правила). min-height вешаем
       только на input: textarea имеет свой min-height:96px (строка 461). */
    .form-group input,
    .form-group textarea { font-size: 16px; }
    .form-group input { min-height: 44px; }
    .search-form input[type="search"],
    .search-form button { font-size: 16px; min-height: 44px; }
}

/* ---- Основные мобильные правки (≤767px) ---- */
@media (max-width: 767.98px) {
    /* §2.1/§2.2: боковой отступ 24→16px.
       16px = нижний порог читаемости из §2.2 («padding: 0 16px»). Контейнер
       НЕ обнуляем до 0, а сужаем до 16: это автоматически даёт ВСЕМ текстовым
       секциям ровно 16px от краёв экрана (§2.2) без хрупкого перечисления
       обёрток (при 0 любое пропущенное правило → текст у самого края). Те же
       16px ставим хедеру/футеру/CTA — единый мобильный отступ по макету.
       ВАЖНО: это 16px связано с отрицательными полями edge-to-edge блоков
       ниже и с catalog-hero — менять только совместно. */
    .container,
    .header-top,
    .nav-container,
    .cta-strip,
    .footer { padding-left: 16px; padding-right: 16px; }

    /* §2.1/§2.3: именные блоки-карточки — на всю ширину экрана, без скруглений.
       Блок с ценой, форма обратной связи и аналогичные секции (§2.1). Поля -16px
       точно компенсируют отступ контейнера (их прямые родители — content-body,
       info-main, contacts-layout/contacts-main — не имеют своих боковых полей)
       ⇒ фон/подложка доходит до края экрана, а внутренний padding блока (≥20px)
       держит текст не у края (§2.2). box-sizing:border-box + width:calc(100%+32px)
       ⇒ переполнения нет: −16 слева + ширина+32 = ровно во вьюпорт. Радиус 0,
       тень снята (§2.3).
       contacts-block — ПОТОМКОВЫМИ селекторами (0,2,0): в обоих контекстах, где
       он рендерится (.info-main на главной с картой, .contacts-layout на /contacts/),
       стоит сбрасывающее { margin:0 } той же специфичности (строки 425 и 925).
       Голый .contacts-block (0,1,0) проигрывал бы → блок получал width без margin
       и уходил вправо (асимметрия, 16px за правым краем). Здесь специфичность
       та же, но правило позже в файле ⇒ побеждаем. */
    .price-block,
    .form-block,
    .contacts-aside,
    .info-main .contacts-block,
    .contacts-layout .contacts-block {
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        border-radius: 0;
        box-shadow: none;
    }

    /* catalog-hero: перенастройка под новый отступ контейнера (16px). Правило
       в §600px выше было заточено под padding 24px (−24/+48); после сужения
       контейнера компенсируем точно: −16/+32, иначе hero уходил на 8px за край.
       border-radius:0 — на 600–767 hero теперь edge-to-edge, углы у самого края
       экрана не скругляем (§2.3). Эта правка ниже по файлу ⇒ при ≤600 перекрывает
       §600px-вариант. */
    .catalog-hero {
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        border-radius: 0;
    }

    /* §2.5: изображения/видео не вылезают за экран (страховка для <img> из
       контента body без своих размеров). iframe НЕ трогаем: у Яндекс.Карты
       высота через aspect-ratio/!important (§CONTACT MAP) — height:auto сломал бы.
       Специфичные классы (.product-card-img height, .logo-mark и т.д.) бьют
       элементное img по специфичности ⇒ их размеры сохраняются. */
    img,
    video { max-width: 100%; height: auto; }

    /* §2.4: body { overflow-x:hidden } уже в базе (строка 42); на html НЕ
       дублируем — это ломает position:sticky у .header. Допстраховка от скролла
       на 320px: тосты (min-width:280 + right:24 — впритык) — фиксируем поля,
       чтобы длинное уведомление не вылезло за край. */
    .toast-wrap { left: 16px; right: 16px; }
    .toast { min-width: 0; max-width: 100%; }
}

/* ============ 404 «Не найдено» (шаблон error404) ============
   Метафора ИБП: дисплей с ошибкой 404 + аварийный красный LED.
   При hover/focus на CTA — «резерв включён»: зелёный LED, дисплей «РЕЗЕРВ».
   Клик по CTA → вспышка «включения питания» и переход на главную. */
.error404 { padding-top: 8px; }
.error404__inner {
    max-width: 760px; margin: 0 auto; text-align: center;
    padding: 56px 24px 80px;
}
.error404__ups { width: min(320px, 80%); height: auto; margin: 0 auto 28px; display: block; }

/* Дисплей: по умолчанию «404», при наведении на CTA — «РЕЗЕРВ». */
.ups-display--ok { display: none; }
body.e404-reserve .ups-display--404 { display: none; }
body.e404-reserve .ups-display--ok  { display: block; }

/* Аварийный красный LED мигает; зелёный — тусклый, пока не «включён резерв». */
.ups-led--red   { animation: e404-blink .9s step-end infinite; filter: drop-shadow(0 0 6px #FF3B3B); }
.ups-led--green { opacity: .12; transition: opacity .3s, filter .3s; }
body.e404-reserve .ups-led--red   { animation: none; opacity: .15; filter: none; }
body.e404-reserve .ups-led--green { opacity: 1; filter: drop-shadow(0 0 6px #22C55E); }
.ups-display--404 { animation: e404-flicker 2.4s linear infinite; }
body.e404-reserve .ups-display--404 { animation: none; }

@keyframes e404-blink   { 50% { opacity: .15; } }
@keyframes e404-flicker {
    0%, 100% { opacity: 1; }
    8%  { opacity: .85; } 9%  { opacity: 1; }
    42% { opacity: .9;  } 43% { opacity: 1; }
    71% { opacity: .82; } 73% { opacity: 1; }
}

.error404__title { font-size: clamp(1.4rem, 4vw, 2.1rem); margin: 0 0 14px; color: var(--ink); }
.error404__sub {
    color: var(--ink-2); font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.65;
    max-width: 540px; margin: 0 auto 32px;
}
.error404__cta { font-size: 16px; padding: 16px 34px; }
.error404__cta i { color: #fff; }

.error404__nav { margin-top: 44px; }
.error404__nav-title {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .15em;
    color: var(--muted); margin: 0 0 16px; font-weight: 600;
    font-family: Consolas, 'Courier New', monospace;
}
.error404__lines {
    list-style: none; padding: 0; margin: 0 auto; max-width: 580px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.error404__lines a {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-md); padding: 14px 16px; min-height: var(--tap);
    color: var(--ink); text-decoration: none; font-size: .94rem; font-weight: 600;
    transition: border-color var(--t), background var(--t), transform var(--t);
}
.error404__lines a:hover, .error404__lines a:focus-visible {
    border-color: var(--brand-hover); background: var(--brand-soft);
    transform: translateY(-2px);
}
.error404__lines a i { color: var(--brand); flex: none; }

.error404__hotline { margin-top: 40px; color: var(--muted); font-size: .95rem; }
.error404__hotline a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
.error404__hotline a:hover { color: var(--brand-hover); }

/* Вспышка «включения питания» при клике на CTA. */
.error404__flash {
    position: fixed; inset: 0; background: var(--brand);
    opacity: 0; pointer-events: none; z-index: 9999;
}
body.e404-power .error404__flash { animation: e404-power .38s ease-in both; }
@keyframes e404-power { to { opacity: .92; } }

@media (max-width: 600px) {
    .error404__inner { padding-top: 36px; }
    .error404__cta { display: inline-flex; width: 100%; justify-content: center; }
    .error404__lines { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .ups-led--red, .ups-display--404 { animation: none; }
    .error404__flash { display: none; }
}