/**
 * Редизайн витрины — общий слой поверх style.css.
 *
 * Палитра и «физика» (тени, радиусы, подложки) взяты из редизайна админки
 * (backend/web/css/admin-ui.css) — чтобы сайт, админка, ИИ-помощник и приложение
 * выглядели одной системой. Фирменные цвета те же, что были: синий #2f3a85 и жёлтый #feec00.
 *
 * Разметку почти не трогаем — держимся на существующих классах темы.
 * Откат редизайна = убрать этот файл из UnishopCustomAsset.
 *
 * Каталог (левое дерево категорий) НАМЕРЕННО не тронут — решение по нему отложено.
 */

:root {
    --sn-brand:      #2f3a85;
    --sn-brand-deep: #23305f;
    --sn-brand-lift: #4a58c4;
    --sn-accent:     #feec00;

    --sn-ink:       #16192e;
    --sn-ink-soft:  #5b6484;
    --sn-ink-faint: #8b93ad;

    --sn-line:      #e5e9f4;
    --sn-line-soft: #f1f4fb;
    --sn-page:      #eef1f8;
    --sn-plate:     #f4f5f9;

    --sn-shadow:      0 1px 2px rgba(35, 48, 95, .06), 0 8px 24px rgba(35, 48, 95, .07);
    --sn-shadow-lift: 0 4px 10px rgba(35, 48, 95, .08), 0 18px 34px rgba(35, 48, 95, .14);

    --sn-r-s: 10px;
    --sn-r:   14px;
    --sn-r-l: 18px;
}


/* ═══════════════════════════════════════════════════════════════════
   1. ТРИ КОЛОНКИ ТОВАРОВ НА ГЛАВНОЙ
   Было: строки в общей рамке, тень-плинтус, фото без подложки, цена — тем же
   серым, что и всё остальное.
   Стало: отдельные карточки один в один как в ИИ-помощнике — угол 12px, лёгкая
   тень, фото на подложке, метка наличия, цена синим.
   Только для сайта: в приложении (.is-app) колонки — горизонтальные ленты,
   их правила лежат в style.css и остаются как есть.
   ═══════════════════════════════════════════════════════════════════ */

/* Заголовок — фирменный и на телефоне тоже: раскладка блока там приложенческая
   (лента), а вид заголовка остаётся сайтовым, чтобы приложение отличалось.
   Поэтому условие здесь про приложение, а не про компактный вид. */
html:not(.is-app) .product-mini-widgets .widget-title {
    margin-bottom: 11px;
    padding: 0 15px 0;
    border-bottom: 0;
    color: var(--sn-brand-deep);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* На компьютере блок сам лежит в колонке с полями, боковой отступ там лишний */
body:not(.is-compact) .product-mini-widgets .widget-title { padding: 0; }

/* Жёлтая черта вместо жёлтой заливки: фирменный цвет остаётся, но не кричит */
html:not(.is-app) .product-mini-widgets .widget-title::before {
    content: '';
    flex: 0 0 auto;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: var(--sn-accent);
}

body:not(.is-compact) .product-mini-widgets .widget-strip {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 9px;
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(50, 59, 134, .06);
    transition: box-shadow .15s ease, border-color .15s ease;
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry:hover {
    border-color: #d9dfef;
    box-shadow: var(--sn-shadow);
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 3px;
    border-radius: 8px;
    background: var(--sn-plate);
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-thumb > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-thumb > a > img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Цепочку держим ровно той же длины, что у правил в style.css (там селектор
   с `.widget-featured-products`), иначе старые размер и серый цвет перевесят.
   Инлайновый <style> в _product_widgets.php с его min-height короче и проигрывает обоим. */
body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-title {
    min-height: 0;
    /* Ровно две строки: иначе карточки с коротким названием ниже соседних и ряд «пляшет» */
    height: 33px;
    overflow: hidden;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.32;
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-title > a {
    color: var(--sn-ink);
    font-weight: 600;
    text-decoration: none;
}

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-title > a:hover {
    color: var(--sn-brand);
}

body:not(.is-compact) .product-mini-widgets .entry-stock {
    display: inline-block;
    width: fit-content;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
}

body:not(.is-compact) .product-mini-widgets .entry-stock--in { background: #e3f6ea; color: #1c7a3e; }
body:not(.is-compact) .product-mini-widgets .entry-stock--out { background: #eceef6; color: var(--sn-ink-faint); }

/* В приложении карточка узкая и вертикальная — метка её распирает */
.is-compact .product-mini-widgets .entry-stock { display: none; }

body:not(.is-compact) .product-mini-widgets .widget-strip > .entry .entry-meta {
    padding-top: 1px;
    color: var(--sn-brand);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════
   2. БЛОК «ПОЛЕЗНЫЕ СТАТЬИ»
   Было: жёлтая шапка + голубые подчёркнутые ссылки, строки разной высоты.
   Стало: белая карточка, миниатюра статьи задаёт ритм, подчёркивания нет.
   ═══════════════════════════════════════════════════════════════════ */

.banner.blog-banner {
    margin-top: 20px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}

.blog-banner .blog-article-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 0;
    padding: 14px 15px;
    border-bottom: 1px solid var(--sn-line-soft);
    border-radius: 0;
    background: #fff !important;
    color: var(--sn-brand-deep) !important;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: left;
    text-shadow: none;
    text-transform: none;
}

/* Жёлтый квадрат со значком — единственное место, где жёлтый остался в блоке */
.blog-banner .blog-article-title .blog-article-title__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--sn-accent);
    color: var(--sn-brand-deep);
}

.blog-banner > ul.blog-list {
    margin: 0;
    padding: 0;
}

.blog-list > li {
    padding: 0;
    line-height: normal;
}

.blog-list > li + li {
    border-top: 1px solid var(--sn-line-soft);
}

.blog-list > li > a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    color: var(--sn-ink);
    text-decoration: none;
}

.blog-list > li > a:hover {
    background: var(--sn-line-soft);
}

.blog-list__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 2px;
    border-radius: 8px;
    background: var(--sn-plate);
    overflow: hidden;
}

.blog-list__thumb > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.blog-list__name {
    display: block;
    min-width: 0;
    color: var(--sn-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.blog-list > li > a:hover .blog-list__name {
    color: var(--sn-brand);
}

/* «Все статьи» — пилюля уже была переделана раньше, здесь только отбивка */
.blog-list > li.all_stats {
    padding: 11px 15px;
    border-top: 1px solid var(--sn-line-soft);
}

/* Пилюля обнимает текст: общее правило выше сделало ссылки блока flex во всю ширину */
.blog-list > li.all_stats > a {
    display: inline-flex;
    width: auto;
    padding: 7px 14px;
}

.blog-list > li.all_stats > a:hover {
    background: rgba(47, 58, 133, .13);
}


/* ═══════════════════════════════════════════════════════════════════
   3. ВЫПАДАШКА «АКЦИИ И ПРЕДЛОЖЕНИЯ»
   Было: серая рамка, острые углы, хвостик-треугольник, пункты слиплись.
   Стало: панель с мягкой тенью, у каждой акции значок и воздух вокруг строки.
   Правила общие для двух мест: десктопная шапка (.hdr__actions) и мобильная
   строка (.header-second-line.two на главной).
   ═══════════════════════════════════════════════════════════════════ */

.hdr__actions .dropdown-menu,
.header-second-line .dropdown-menu {
    left: 0;
    min-width: 290px;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    box-shadow: var(--sn-shadow-lift);
    transform: none;
}

/* Хвостик-треугольник убираем: он был нарисован рамкой и тянул за собой серый кант */
.hdr__actions .dropdown-menu::before,
.hdr__actions .dropdown-menu::after,
.header-second-line .dropdown-menu::before,
.header-second-line .dropdown-menu::after {
    content: none;
    display: none;
}

.hdr__actions .dropdown-menu > .dropdown-item,
.header-second-line .dropdown-menu > .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--sn-r-s);
    color: var(--sn-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
    text-decoration: none;
}

.hdr__actions .dropdown-menu > .dropdown-item + .dropdown-item,
.header-second-line .dropdown-menu > .dropdown-item + .dropdown-item {
    margin-top: 2px;
}

/* Значок у каждой акции свой — подбирается в _actions_dropdown.php по её признакам */
.act-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.act-name { min-width: 0; }

.act-ico--month   { background: #fff6cc; color: #8a6a00; }
.act-ico--stop    { background: #e8f7ee; color: #15803d; }
.act-ico--sale    { background: #fdf3e3; color: #b45309; }
.act-ico--percent { background: #fdeaea; color: #b91c1c; }
.act-ico--cut     { background: #e8eefc; color: #1d4ed8; }
.act-ico--truck   { background: #e8eefc; color: #1d4ed8; }
.act-ico--tag     { background: rgba(47, 58, 133, .09); color: var(--sn-brand); }

.hdr__actions .dropdown-menu > .dropdown-item:hover,
.hdr__actions .dropdown-menu > .dropdown-item:focus,
.header-second-line .dropdown-menu > .dropdown-item:hover,
.header-second-line .dropdown-menu > .dropdown-item:focus {
    background: var(--sn-line-soft);
    color: var(--sn-brand);
}


/* ═══════════════════════════════════════════════════════════════════
   4. ФУТЕР
   Было: три несогласованных серых (светлая подложка, тёмная черта 5px,
   почти чёрная полоса копирайта) и ссылки трёх разных видов.
   Стало: тёмно-синий градиент — тот же, что в боковом меню админки.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .site-footer {
    padding-top: 34px;
    border-top: 0;
    background: linear-gradient(160deg, #1b2650 0%, #2a3573 42%, #3f4db0 100%) !important;
    color: rgba(255, 255, 255, .82);
}

html:not(.is-app) .site-footer .widget {
    margin-bottom: 26px;
}

html:not(.is-app) .site-footer .widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    padding-bottom: 0;
    border: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

html:not(.is-app) .site-footer .widget-title::before {
    content: '';
    flex: 0 0 auto;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--sn-accent);
}

html:not(.is-app) .site-footer .widget-links ul > li {
    margin-bottom: 8px;
}

/* Три колонки ссылок жили по разным правилам: меню из БД рендерится без <span>,
   акции и информация — со <span>. Приводим к одному виду. */
html:not(.is-app) .site-footer .widget-links ul > li > a,
html:not(.is-app) .site-footer .widget-links ul > li > a span {
    color: rgba(255, 255, 255, .82) !important;
    font-size: 13px;
    text-decoration: none !important;
}

html:not(.is-app) .site-footer .widget-links ul > li > a:hover,
html:not(.is-app) .site-footer .widget-links ul > li > a:hover span {
    color: var(--sn-accent) !important;
}

html:not(.is-app) .site-footer .widget__contact-text,
html:not(.is-app) .site-footer .widget__contact-text p,
html:not(.is-app) .site-footer .widget-light-skin .widget__contact-text {
    color: rgba(255, 255, 255, .82) !important;
    font-size: 13px;
    line-height: 1.6;
}

html:not(.is-app) .site-footer .widget__contact-text a {
    color: #fff;
    text-decoration: none;
}

html:not(.is-app) .site-footer .widget__contact-text a:hover {
    color: var(--sn-accent);
}

html:not(.is-app) .site-footer .font-weight-bold {
    color: rgba(255, 255, 255, .5);
    font-size: 11.5px;
    font-weight: 800 !important;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

html:not(.is-app) .site-footer .info_icon {
    margin-right: 12px;
    margin-top: 10px;
}

html:not(.is-app) .site-footer .footer_icon {
    width: 36px;
    height: 36px;
}

/* Было scale(1.3) — иконка прыгала и налезала на соседнюю */
html:not(.is-app) .site-footer .footer_icon:hover {
    transform: translateY(-2px);
}

html:not(.is-app) .under-footer {
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: #1b2650;
}

html:not(.is-app) .under-footer .footer-copyright {
    padding-top: 14px;
    padding-bottom: 6px;
    font-size: 12px;
}

html:not(.is-app) .under-footer .footer-rec-notice {
    padding-bottom: 14px;
}


/* ═══════════════════════════════════════════════════════════════════
   5. ШАПКА — три этажа
   Этаж 1 (серый): адрес, телефон, действия по заказу.
   Этаж 2 (белый): логотип, поиск во всю ширину, профиль, корзина.
   Этаж 3 (белый): меню и «Акции» справа.

   Десктопная и мобильная шапки — два независимых блока разметки,
   переключаются по 768px: тот же порог, на котором тема и раньше
   меняла .menu-for-desktop на .menu-for-mobile.
   ═══════════════════════════════════════════════════════════════════ */

.hdr { display: none; }

@media (min-width: 768px) {
    .hdr { display: block; }
    .hdr-mob { display: none; }

    /* Поиск и «Акции» переехали в шапку; .header-second-line остаётся мобильной строкой */
    html:not(.is-app) .header-second-line.first { display: none; }

    html:not(.is-app) header.navbar-custom {
        padding: 0 !important;
        border-bottom: 1px solid var(--sn-line);
        box-shadow: none;
    }
}

/* ── этаж 1: справочная полоса ── */
.hdr__util {
    background: var(--sn-page);
    border-bottom: 1px solid var(--sn-line);
}

.hdr__util-in {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 30px;
}

/* contact_short редактируется в админке и приходит как <p> с двумя <span>,
   на которых висят бутстраповские col-md-4 — гасим их, иначе спаны разъедутся по трети ширины */
.hdr__contacts p {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
}

.hdr__contacts span {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 0 0 22px;
    color: var(--sn-ink-soft);
    font-size: 12.5px;
    line-height: 1.4;
}

.hdr__contacts span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
}

.hdr__contacts span:first-child::before { background-image: url(../img/new/ico-maps.svg); }
.hdr__contacts span:nth-child(2)::before { background-image: url(../img/new/ico-tel.svg); }

.hdr__contacts span strong {
    margin-left: 5px;
    color: var(--sn-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.hdr__util-links {
    display: flex;
    gap: 18px;
    margin-left: auto;
}

.hdr__util-links a {
    color: var(--sn-brand);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.hdr__util-links a:hover { text-decoration: underline; }

/* ── этаж 2: логотип, поиск, профиль, корзина ── */
.hdr__main {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 3px 0;
}

.hdr__logo { flex: 0 0 auto; }

/* Логотип задаём по высоте, а не по ширине — иначе он один распирает строку.
   Пропорция картинки 2.36:1, поэтому ширину набираем только высотой. */
.hdr__logo img {
    display: block;
    width: auto;
    height: 74px;
}

.hdr .hdr__search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

/* Специфичность как у `.container .site-search__custom .form-control` в style.css */
.hdr .container .hdr__search .form-control {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    height: 40px;
    padding: 0 15px;
    border: 1px solid var(--sn-line);
    border-right: 0;
    border-radius: var(--sn-r-s) 0 0 var(--sn-r-s);
    background: #fff;
    color: var(--sn-ink);
    font-size: 14px;
}

.hdr .container .hdr__search .form-control:focus {
    border-color: var(--sn-brand);
    background: #fff;
    color: var(--sn-ink);
    box-shadow: 0 0 0 3px rgba(47, 58, 133, .12);
}

.hdr .container .hdr__search .form-control::placeholder {
    color: var(--sn-ink-faint);
    font-size: 14px;
}

/* Старая кнопка была квадратом 36×32 с иконкой-фоном и font-size:0 — сбрасываем всё */
.hdr .hdr__search .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0 19px;
    border: 0;
    border-radius: 0 var(--sn-r-s) var(--sn-r-s) 0;
    background-color: var(--sn-brand);
    background-image: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
}

.hdr .hdr__search .btn:hover { background-color: #35408f; }

.hdr__acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.hdr__act {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: var(--sn-r-s);
    color: var(--sn-ink-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.hdr__act:hover {
    background: var(--sn-line-soft);
    color: var(--sn-brand);
}

.hdr__profile .dropdown-menu {
    left: auto;
    right: 0;
    min-width: 190px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    box-shadow: var(--sn-shadow-lift);
    transform: none;
}

.hdr__profile .dropdown-menu::before,
.hdr__profile .dropdown-menu::after { content: none; display: none; }

.hdr__profile .dropdown-menu > .dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--sn-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.hdr__profile .dropdown-menu > .dropdown-item:hover {
    background: var(--sn-line-soft);
    color: var(--sn-brand);
}

/* Корзина: разметку отдаёт _cart.php (её обновляет аякс), поэтому переопределяем
   позиционирование прямо здесь. Почти все старые правила висят на `.toolbar-custom .inner`,
   которого в новой шапке нет, но у голого `.cart__custom` в style.css радиус и цвет
   помечены !important — их приходится перебивать тем же способом. */
.hdr__cart .cart__custom {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 7px 13px 7px 11px;
    border-radius: var(--sn-r-s) !important;
    background: var(--sn-line-soft);
    color: var(--sn-brand-deep) !important;
    text-align: left;
}

.hdr__cart .cart__custom:hover { background: #e7ebf7; }

/* Ссылка растянута на всю плашку: кликается вся кнопка, а не только иконка */
.hdr__cart .cart__custom > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    border-radius: var(--sn-r-s);
}

/* order: -1 — иконка рисуется псевдоэлементом, то есть последним ребёнком флекса */
.hdr__cart .cart__custom::after {
    content: '';
    order: -1;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: url(../img/new/ico-shop.svg) no-repeat center / contain;
}

.hdr__cart .cart__custom .cart-meta {
    position: absolute;
    top: -5px;
    left: 26px;
    z-index: 3;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sn-accent);
    color: var(--sn-brand-deep);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(35, 48, 95, .25);
}

.hdr__cart .cart__custom .cart-meta .count__custom {
    font-size: 11px;
    line-height: 18px;
}

.hdr__cart .cart__custom .cart-description {
    position: static;
    color: var(--sn-brand-deep);
    line-height: 1.15;
}

/* Ярлык в разметке — «сумма»; вместо него подпись «Корзина» из ::before ниже */
.hdr__cart .cart__custom .cart-description .description-label { display: none; }

.hdr__cart .cart__custom .cart-description .description-value {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* ── этаж 3: меню и акции ── */
.hdr__nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
}

.hdr__nav ul {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdr__nav ul > li { margin: 0; }

.hdr__nav ul > li > a {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 9px;
    color: var(--sn-ink-soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.hdr__nav ul > li > a span { text-decoration: none; }

.hdr__nav ul > li > a:hover {
    background: var(--sn-line-soft);
    color: var(--sn-brand);
}

.hdr__nav ul > li.active > a {
    background: var(--sn-brand);
    color: #fff;
}

.hdr__actions { margin-left: auto; }

.hdr__actions > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
}

.hdr__actions > .dropdown-toggle:hover { background: #c62828; color: #fff; }

.hdr__actions > .dropdown-toggle::after { display: none; }

.hdr__actions .dropdown-menu { left: auto; right: 0; }

/* Дерево категорий подтягивалось вверх на 43px, чтобы встать вровень со старой
   второй строкой шапки. Второй строки больше нет — иначе шапка «Каталог»
   наезжает на меню. Отступ тот же, что у пути справа: обе колонки начинаются
   на одной высоте и не липнут к шапке. */
@media (min-width: 992px) {
    html:not(.is-app) .widget-categories__custom { margin-top: 16px; }
}

/* Слово «Корзина» над суммой: сам ярлык в разметке — «сумма», и его текст трогать
   нельзя, разметку мини-корзины забирает аякс (/cart/render-mini). */
.hdr__cart .cart__custom .cart-description::before {
    content: 'Корзина';
    display: block;
    color: var(--sn-ink-faint);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
}



/* ═══════════════════════════════════════════════════════════════════
   6. ЛИСТ: СТАТЬЯ И ТЕКСТОВЫЕ СТРАНИЦЫ CMS
   Было: тело статьи и страницы выводились без единого класса, правил для
   абзацев/списков/таблиц в стилях не существовало, строка тянулась во всю
   ширину колонки.
   Стало: белый лист на светлой подложке, ограниченная длина строки,
   типографика для HTML из редактора.
   Лист живёт в правой колонке — дерево категорий слева остаётся везде.
   ═══════════════════════════════════════════════════════════════════ */

.sheet {
    margin-bottom: 26px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-l);
    background: #fff;
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}

/* Полоса 260px обрезала почти квадратную фотографию по верхнему краю. Пропорция 3:2
   близка к тому, в чём обложки лежат в базе (около 4:3), поэтому кадр почти не режется.
   Ширину задаём явно: с aspect-ratio плюс max-height блок ужимался по ширине, и справа
   оставалась пустая полоса в 100px. */
.sheet__cover {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--sn-plate);
    overflow: hidden;
}

.sheet__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Картинка акции в админке — квадратная наклейка (592×592, у «Щедрой зимы» вообще
   150×150). Растянутая на всю ширину, она превращалась в кусок красной диагонали.
   Показываем её целиком по центру подложки: широкий баннер, когда его загрузят,
   ляжет так же — без обрезки. */
.sheet--page .sheet__cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    height: 240px;
    max-height: none;
    padding: 12px 0;
}

.sheet--page .sheet__cover img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Шапка текстовой страницы: заголовок из CMS на фирменном градиенте */
.sheet__hero {
    padding: 22px 26px;
    background: linear-gradient(120deg, var(--sn-brand-deep) 0%, #3d4aa8 55%, var(--sn-brand-lift) 100%);
    color: #fff;
}

.sheet__hero h1 {
    margin: 0;
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.022em;
}

.sheet__hero p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
}

.sheet__body { padding: 22px 26px 26px; }

.sheet__meta {
    margin-bottom: 9px;
    color: var(--sn-ink-faint);
    font-size: 12px;
}

.sheet__body > h1 {
    margin: 0 0 16px;
    color: var(--sn-ink);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.022em;
}

/* ── типографика содержимого из редактора ── */
.sheet__text {
    max-width: 72ch;
    color: #3d4560;
    font-size: 14.5px;
    line-height: 1.68;
}

.sheet__text > *:first-child { margin-top: 0; }
.sheet__text > *:last-child { margin-bottom: 0; }

.sheet__text p { margin: 0 0 13px; }

.sheet__text h2,
.sheet__text h3,
.sheet__text h4 {
    margin: 24px 0 10px;
    padding-left: 12px;
    border-left: 3px solid var(--sn-accent);
    color: var(--sn-brand-deep);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.012em;
}

.sheet__text h2 { font-size: 18px; }
.sheet__text h3 { font-size: 16.5px; }
.sheet__text h4 { font-size: 15px; }

.sheet__text ul,
.sheet__text ol { margin: 0 0 14px; padding-left: 0; }

.sheet__text ul { list-style: none; }
.sheet__text ol { padding-left: 20px; }

.sheet__text li { margin-bottom: 6px; }

.sheet__text ul > li {
    position: relative;
    padding-left: 20px;
    list-style: none;
}

.sheet__text ul > li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sn-brand);
    opacity: .45;
}

.sheet__text a {
    color: var(--sn-brand);
    font-weight: 600;
    text-decoration: underline;
}

.sheet__text strong { color: var(--sn-ink); font-weight: 700; }

.sheet__text img {
    max-width: 100%;
    height: auto;
    margin: 4px 0;
    border-radius: var(--sn-r-s);
}

.sheet__text table {
    width: 100%;
    margin: 0 0 14px;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sheet__text th {
    padding: 9px 11px;
    border-bottom: 1px solid var(--sn-line);
    background: var(--sn-line-soft);
    color: var(--sn-ink-faint);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
}

.sheet__text td {
    padding: 9px 11px;
    border-bottom: 1px solid var(--sn-line-soft);
}

.sheet__text blockquote {
    margin: 0 0 14px;
    padding: 13px 15px;
    border-left: 3px solid var(--sn-accent);
    border-radius: 0 var(--sn-r-s) var(--sn-r-s) 0;
    background: #fffbe0;
    font-size: 13.5px;
}

.sheet__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 15px 26px;
    border-top: 1px solid var(--sn-line-soft);
    background: var(--sn-line-soft);
}

.sheet__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--sn-r-s);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.sheet__btn--main {
    background: linear-gradient(135deg, var(--sn-brand), var(--sn-brand-lift));
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 58, 133, .24);
}

.sheet__btn--main:hover { color: #fff; }

.sheet__btn--ghost {
    border: 1px solid var(--sn-line);
    background: #fff;
    color: var(--sn-ink-soft);
    font-weight: 600;
}

.sheet__btn--ghost:hover { color: var(--sn-brand); }


/* ═══════════════════════════════════════════════════════════════════
   7. КОНТАКТЫ
   Карта, реквизиты и форма вопроса — три карточки вместо сплошного блока.
   ═══════════════════════════════════════════════════════════════════ */

.contacts__grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.contacts__map {
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}

/* Раньше размеры карты стояли в инлайн-стилях прямо в вьюхе */
.contacts__map #map {
    width: 100%;
    height: 100%;
    min-height: 330px;
}

.contacts__card {
    padding: 20px 22px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
}

.contacts__title {
    margin: 0 0 14px;
    color: var(--sn-ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.contacts__text {
    color: var(--sn-ink-soft);
    font-size: 13.5px;
    line-height: 1.75;
}

.contacts__text a {
    color: var(--sn-brand);
    font-weight: 600;
    text-decoration: none;
}

.contacts__text a:hover { text-decoration: underline; }

/* Поля формы размечены колонками col-sm-6 без обёртки .row — даём им флекс-контекст */
.contacts__card--form {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 8px 20px;
}

.contacts__card--form > h3,
.contacts__card--form > p,
.contacts__card--form > form { width: 100%; }

.contacts__card--form form {
    display: flex;
    flex-wrap: wrap;
}

.contacts__card--form h3 {
    margin: 0;
    padding: 14px 14px 0 !important;
    color: var(--sn-ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.contacts__card--form > p {
    margin: 4px 0 14px;
    padding: 0 14px;
    font-size: 13.5px;
}

.contacts__card--form .form-control {
    height: 40px;
    border: 1px solid #dde3f2;
    border-radius: var(--sn-r-s);
    box-shadow: none;
    font-size: 14px;
}

.contacts__card--form textarea.form-control { height: auto; }

.contacts__card--form .form-control:focus {
    border-color: var(--sn-brand);
    box-shadow: 0 0 0 3px rgba(47, 58, 133, .12);
}

.contacts__card--form label {
    color: var(--sn-ink);
    font-size: 13px;
    font-weight: 600;
}

/* Кнопка осталась от старой темы: контурная, капсом, а на наведении заливалась
   голубым из bootstrap-палитры — единственный элемент страницы не в наших цветах. */
.btn.sn-submit {
    min-width: 190px;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--sn-r-s);
    background: linear-gradient(135deg, var(--sn-brand), var(--sn-brand-lift));
    box-shadow: 0 4px 12px rgba(47, 58, 133, .24);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    transition: box-shadow .15s ease, transform .15s ease;
}

.btn.sn-submit:hover,
.btn.sn-submit:focus {
    background: linear-gradient(135deg, var(--sn-brand), var(--sn-brand-lift));
    box-shadow: 0 6px 16px rgba(47, 58, 133, .3);
    color: #fff;
    transform: translateY(-1px);
}

.btn.sn-submit:active { transform: none; }

@media (max-width: 767px) {
    .contacts__grid { grid-template-columns: 1fr; }
    .sheet__body { padding: 18px 16px 20px; }
    .sheet__hero { padding: 18px 16px; }
    .sheet__hero h1 { font-size: 21px; }
    .sheet__body > h1 { font-size: 22px; }
    .sheet__foot { padding: 14px 16px; }
}


/* ═══════════════════════════════════════════════════════════════════
   8. ПЕРЕКЛЮЧАТЕЛЬ СТРАНИЦ (пагинация)
   Стили в теме были написаны под разметку `ul.pages`, которой LinkPager
   не создаёт: он отдаёт `ul.pagination > li > a`. Поэтому переключатель
   до сих пор шёл вообще без оформления — кружки 36×36 и голубой активный
   из темы ни разу не применялись.
   ═══════════════════════════════════════════════════════════════════ */

/* Якорь списка товаров (см. main.js): чтобы после перехода на страницу 2 заголовок
   не упирался в самый край окна. */
#tovary { scroll-margin-top: 16px; }

ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: auto;
    margin: 24px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--sn-line);
    list-style: none;
}

ul.pagination > li { display: block; margin: 0; }

ul.pagination > li > a,
ul.pagination > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-s);
    background: #fff;
    color: var(--sn-ink-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

ul.pagination > li > a:hover {
    border-color: var(--sn-brand);
    color: var(--sn-brand);
}

ul.pagination > li.active > a {
    border-color: transparent;
    background: linear-gradient(135deg, var(--sn-brand), var(--sn-brand-lift));
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 58, 133, .26);
}

ul.pagination > li.disabled > span {
    background: var(--sn-line-soft);
    color: var(--sn-ink-faint);
    opacity: .7;
    cursor: default;
}


/* ═══════════════════════════════════════════════════════════════════
   9. ПЛИТКИ КАТЕГОРИЙ И ПОДКАТЕГОРИЙ
   Раскладка была на бутстраповских колонках внутри isotope-сетки: плитки
   разной высоты, картинка занимала 65% ширины ячейки-таблицы, заголовок
   жёстко 70px. Переводим на грид с равными плитками.
   Само дерево каталога слева НЕ трогаем.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 0 8px;
    min-height: 0;
    background-image: none;
}

/* Плитки размечены как col-sm-3 — гасим ширины и отступы колонок */
html:not(.is-app) .catalog-grid > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}

html:not(.is-app) .catalog-grid .gutter-sizer,
html:not(.is-app) .catalog-grid .grid-sizer { display: none; }

html:not(.is-app) .catalog-grid .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

html:not(.is-app) .catalog-grid .card:hover {
    transform: translateY(-2px);
    border-color: #d9dfef;
    box-shadow: var(--sn-shadow-lift);
}

html:not(.is-app) .catalog-grid .card-img-tiles {
    padding: 12px 12px 0;
    border-bottom: 0;
}

html:not(.is-app) .catalog-grid .card-img-tiles .inner { display: block; width: 100%; }

/* Было display:table-cell шириной 65% — картинка жалась в угол ячейки */
html:not(.is-app) .catalog-grid .card-img-tiles .main-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Плитка была почти квадратной и терялась на широком экране: снимок раздела
       мельче, чем фотография товара в карточке рядом. */
    height: 190px;
    padding: 8px;
    border-radius: var(--sn-r-s);
    background: var(--sn-plate);
}

html:not(.is-app) .catalog-grid .card-img-tiles .main-img > img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}

html:not(.is-app) .catalog-grid .card-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    flex: 1 1 auto;
    padding: 12px 12px 14px;
}

/* Ровно три строки: названия разделов бывают и в одну, и в три, а плитки
   должны быть одной высоты во всех рядах. Три, а не две, — чтобы длинные
   названия вроде «Маячки, уголки, профили (для штукатурки и шпаклёвки)»
   помещались целиком. */
html:not(.is-app) .catalog-grid .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 53px;
    min-height: 0;
    margin: 0;
    color: var(--sn-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}

html:not(.is-app) .catalog-grid .card-block .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: auto;
    margin: auto 0 0;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    /* Была тихой и синела только под курсором — то есть выглядела выключенной,
       пока на неё не наведёшься. */
    background: var(--sn-brand);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}

html:not(.is-app) .catalog-grid .card-block .btn:hover {
    border-color: transparent;
    background: var(--sn-brand-deep);
    color: #fff !important;
}

@media (max-width: 1199px) {
    html:not(.is-app) .catalog-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    html:not(.is-app) .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    html:not(.is-app) .catalog-grid .card-img-tiles .main-img { height: 150px; }
    html:not(.is-app) .catalog-grid .card-title { font-size: 12.5px; height: 49px; }
}


/* ═══════════════════════════════════════════════════════════════════
   10. СТРАНИЦЫ ЗАКАЗА: ПРОВЕРКА СТАТУСА И ОПЛАТА
   Обе жили на голых бутстраповских карточках с инлайновыми <hr> и
   классами, которых нет в стилях (.card-title1, .text-center1,
   .border_bottom). Переводим на общий лист.
   ═══════════════════════════════════════════════════════════════════ */

.order-form { max-width: 460px; }

.order-form .form-group { margin-bottom: 16px; }

.order-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--sn-ink);
    font-size: 13.5px;
    font-weight: 600;
}

.order-form .form-control {
    height: 44px;
    padding: 0 15px;
    border: 1px solid #dde3f2;
    border-radius: var(--sn-r-s);
    background: #fff;
    color: var(--sn-ink);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.order-form .form-control:focus {
    border-color: var(--sn-brand);
    box-shadow: 0 0 0 3px rgba(47, 58, 133, .12);
}

.order-form .help-block {
    margin-top: 6px;
    color: #b91c1c;
    font-size: 12.5px;
}

.order-form .help-block a { color: var(--sn-brand); font-weight: 600; }

.order-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--sn-r-s);
    background: linear-gradient(135deg, var(--sn-brand), var(--sn-brand-lift));
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.2;
    text-transform: none;
    box-shadow: 0 4px 12px rgba(47, 58, 133, .24);
}

.order-btn:hover {
    background: linear-gradient(135deg, #35408f, #5563d0);
    color: #fff !important;
}

.order-btn--pay {
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 4px 12px rgba(22, 163, 74, .24);
}

.order-btn--pay:hover { background: linear-gradient(135deg, #166534, #16a34a); }

/* ── найденный заказ ── */
.order-found {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: var(--sn-line-soft);
}

.order-found__num {
    color: var(--sn-ink-faint);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.order-found__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--sn-brand-deep);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: var(--sn-shadow);
}

.order-found__status::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sn-brand-lift);
}

.order-found__desc {
    margin: 0;
    max-width: 62ch;
    color: var(--sn-ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.order-found__again {
    color: var(--sn-brand);
    font-size: 13.5px;
    font-weight: 600;
}

/* ── справочник статусов ── */
.status-list { display: grid; gap: 10px; }

.status-list__i {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--sn-line-soft);
}

.status-list__i:first-child { border-top: 0; padding-top: 0; }

.status-list__n {
    color: var(--sn-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.status-list__d {
    color: var(--sn-ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

@media (max-width: 767px) {
    .status-list__i { grid-template-columns: 1fr; gap: 3px; }
}

/* ── примечание про платёжный шлюз ── */
.order-note {
    margin: 0;
    padding: 14px 16px;
    border-left: 3px solid var(--sn-brand-lift);
    border-radius: 0 var(--sn-r-s) var(--sn-r-s) 0;
    background: var(--sn-line-soft);
    color: var(--sn-ink-soft);
    font-size: 12.5px;
    line-height: 1.65;
}

/* Подвал листа с приглушённым содержимым (справочник статусов, реквизиты шлюза) */
.sheet__aside {
    padding: 20px 26px 24px;
    border-top: 1px solid var(--sn-line-soft);
    background: #fcfdff;
}

.sheet__aside h2 {
    margin: 0 0 14px;
    color: var(--sn-ink);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}

@media (max-width: 767px) {
    .sheet__aside { padding: 18px 16px 20px; }
}

/* Заголовок раздела над списком товаров (страница акции) */
.section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 6px 0 14px;
    color: var(--sn-brand-deep);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.section-title::before {
    content: '';
    flex: 0 0 auto;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--sn-accent);
}


/* ═══════════════════════════════════════════════════════════════════
   11. ОТСТУПЫ В САЙДБАРЕ
   Баннеры под деревом категорий разносило на 30px сверху и 20px снизу
   каждый, из-за чего блок статей уезжал ниже колонок товаров справа.
   ═══════════════════════════════════════════════════════════════════ */

/* Отступы подобраны замером: карточка статей начинается вровень с ПЕРВОЙ карточкой
   товара справа (не с заголовком колонки) и заканчивается на уровне третьей. */
html:not(.is-app) .sidebar-banners { margin-top: -16px; }

html:not(.is-app) .sidebar-banners .banner {
    margin-top: 22px;
    margin-bottom: 0;
}

html:not(.is-app) .banner.blog-banner { margin-top: 22px; }


/* ═══════════════════════════════════════════════════════════════════
   12. РЕЗКА В РАЗМЕР
   Признак opt_cutting_size ведётся в 1С (реквизит «Резка в размер») и
   приезжает каждой выгрузкой каталога. Пока это только пометка: заказать
   конкретную длину через сайт нельзя, размер согласуют при подтверждении.
   ═══════════════════════════════════════════════════════════════════ */

/* Наличие — плашкой, как чипы на странице товара: точка перед текстом читалась
   как список, а не как метка состояния. */
body:not(.is-compact) .pcard-stock__in,
body:not(.is-compact) .pcard-stock__out {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}

body:not(.is-compact) .pcard-stock__in {
    background: #e3f6ea;
    color: #1c7a3e;
}

body:not(.is-compact) .pcard-stock__in::before { content: none; }

body:not(.is-compact) .pcard-stock__out {
    background: #fdf0dd;
    color: #8a5a12;
}

/* Пометка — в правом верхнем углу карточки: ленты акций («Стоп-цена», «Акция»)
   идут диагональю из ЛЕВОГО угла, справа сверху свободно. Из потока она выведена,
   чтобы карточки с резкой не были выше соседних. */
.product-card-custom .pcard-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Строка есть у всех карточек, даже когда в ней ничего нет: иначе в каталожном
       режиме товары без наличия были бы ниже соседей. */
    min-height: 22px;
}

.product-card-custom .pcard-cut {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 120;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px 4px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 3px rgba(35, 48, 95, .16);
    color: var(--sn-brand);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    /* Вся карточка — ссылка на товар, пометка не должна перехватывать клик. */
    pointer-events: none;
}

.is-app .product-card-custom .pcard-stock { min-height: 20px; }

.is-app .product-card-custom .pcard-cut {
    top: 12px;
    right: 12px;
    padding: 3px 7px 3px 6px;
    font-size: 10px;
}

.is-app .product-card-custom .pcard-cut svg { width: 10px; height: 10px; }

/* Страница товара */
html:not(.is-app) .pinfo-cut,
.is-app .pinfo-cut {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 480px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #dfe4f4;
    border-radius: var(--sn-r-s);
    background: linear-gradient(180deg, #f8faff, #eef2fd);
    color: var(--sn-brand-deep);
    text-decoration: none;
}

.pinfo-cut:hover,
.pinfo-cut:focus {
    border-color: #c3ccec;
    color: var(--sn-brand-deep);
    text-decoration: none;
}

.pinfo-cut__ico {
    flex: none;
    margin-top: 1px;
    color: var(--sn-brand);
}

.pinfo-cut__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pinfo-cut__txt b {
    font-size: 14px;
    font-weight: 700;
}

.pinfo-cut__txt small {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--sn-ink-soft);
}


/* ═══════════════════════════════════════════════════════════════════
   13. КАРТОЧКА КАТАЛОГА ПЛОТНЕЕ
   Название держало жёсткие 100px (style.css:620) даже под одну строку,
   а цена — 58px резерва. На экран влезало меньше товаров, чем могло.
   Фото не трогаем: стройматериалы опознают именно по нему.
   ═══════════════════════════════════════════════════════════════════ */

/* Углы карточки — как у мини-карточек «Самых продаваемых» (12px): на витрине всё
   скруглено, и резкие 7px в каталоге выбивались. */
body:not(.is-compact) .product-card-custom {
    padding: 9px !important;
    border-radius: 12px !important;
}

body:not(.is-compact) .product-card-custom .product-thumb > img { border-radius: 8px; }

/* Высота именно фиксированная, не auto: у названия работает старый трюк обрезки
   через float `.box:before` высотой 200px (style.css:655) — при height:auto он
   разворачивает заголовок на все 200, и карточки в каруселях выросли бы. */
body:not(.is-compact) .product-card-custom .product-title {
    flex: 0 0 auto;
    height: 56px;
    min-height: 0;
    margin: 6px 0 0;
    overflow: hidden;
}

body:not(.is-compact) .product-card-custom .product-title > a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13.5px !important;
    line-height: 1.34;
}

body:not(.is-compact) .product-card-custom .pcard-stock { padding: 4px 2px 0; }

/* Резерв под строку со старой ценой держим всегда: в каруселях карточки не
   растягиваются под общую высоту, и товар со скидкой был на 9px выше соседа. */
body:not(.is-compact) .product-card-custom .product-price {
    min-height: 54px;
    padding: 4px 2px 6px;
}

/* Кнопки почти прямоугольные — как просил владелец. Плюс счётчик: кнопки были
   разной ширины (18 и 22px) и налезали на поле на пиксель, углы не совпадали. */
html:not(.is-app) .add_to_cart-button,
html:not(.is-app) .product-card-custom .pcard-ask,
html:not(.is-app) .feed__link { border-radius: 8px !important; }

html:not(.is-app) .add_to_cart > div {
    display: inline-flex;
    align-items: center;
}

html:not(.is-app) .add_to_cart-minus,
html:not(.is-app) .add_to_cart-plus {
    width: 26px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* В карточке каталога места мало: счётчик ужимаем, остальное отдаём кнопке —
   иначе «В корзину» обрезается на последней букве. */
html:not(.is-app) .product-card-custom .add_to_cart-minus,
html:not(.is-app) .product-card-custom .add_to_cart-plus { width: 22px; }

html:not(.is-app) .product-card-custom .add_to_cart-quantity { width: 28px !important; }

html:not(.is-app) .product-card-custom .add_to_cart-button {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 6px !important;
}

html:not(.is-app) .add_to_cart-minus { border-radius: 8px 0 0 8px !important; }

html:not(.is-app) .add_to_cart-plus {
    border-left: 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

html:not(.is-app) .add_to_cart-quantity {
    width: 34px !important;
    margin: 0 !important;
    text-align: center;
}

/* Позиция под заказ: вместо мёртвой кнопки — переход в карточку с телефоном */
.product-card-custom .pcard-ask {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--sn-brand);
    border-radius: 6px;
    background: #fff;
    color: var(--sn-brand);
    font-size: 12.5px;
    font-weight: 700;
}

.product-card-custom .pcard-ask:hover {
    background: var(--sn-line-soft);
    color: var(--sn-brand-deep);
    text-decoration: none;
}

.is-app .product-card-custom .pcard-ask { height: 34px; border-radius: 8px; font-size: 12px; }


/* Правая колонка — одно белое окно на всё: код, название, цена, признаки,
   кнопка, «как получить», телефон. Было пять отдельных подложек подряд, колонка
   рассыпалась. Внутри окна блоки разделены волосяной линией, своих фонов
   и рамок у них больше нет. */
.pinfo-card {
    max-width: 560px;
    padding: 17px 20px 15px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
}

.pinfo-card > .pinfo-code {
    margin: 0;
    color: var(--sn-ink-soft);
}

.pinfo-card > .pinfo-title {
    margin: 3px 0 0;
    padding-top: 0;
}

.pinfo-card > .pinfo-plate {
    max-width: none;
    /* Столбцом: пересчёт на хлысты стоял справа от цены и висел там одиноко,
       между ним и признаками зияла дыра. Теперь строкой под ценой. */
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid var(--sn-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.pinfo-card > .pinfo-chips,
.pinfo-card > .pinfo-short { max-width: none; }
.pinfo-card > .pinfo-chips { margin: 12px 0 6px; }
.pinfo-card > .sp-buttons { margin-bottom: 0 !important; }

/* Вторая плашка — условия получения. Тише белой: покупка решается выше,
   здесь только «откуда забрать» и телефон. */
.pinfo-soft {
    max-width: 560px;
    margin: 10px 0 0;
    padding: 14px 20px 13px;
    border: 1px solid #e2e8f8;
    border-radius: var(--sn-r);
    /* Не серый: серая плита рядом с белой карточкой смотрелась выцветшей.
       Холодный светлый тон из той же синей семьи, что и весь редизайн. */
    background: #f6f9ff;
}

.pinfo-soft > .pinfo-get {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.pinfo-soft > .pinfo-call {
    max-width: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--sn-line);
}

/* ═══════════════════════════════════════════════════════════════════
   14. ПРАВАЯ КОЛОНКА КАРТОЧКИ ТОВАРА
   Плита с ценой и единицей измерения, ряд признаков, «как получить», телефон.
   ═══════════════════════════════════════════════════════════════════ */

.pinfo-plate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    max-width: 520px;
    margin: 6px 0 12px;
    padding: 13px 16px;
    border-radius: var(--sn-r);
    background: var(--sn-line-soft);
}

.pinfo-plate__old {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.pinfo-plate__old del {
    color: var(--sn-ink-faint);
    font-size: 14px;
}

.pinfo-plate .pinfo-percent {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e8443a;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}

.pinfo-plate__label {
    color: var(--sn-ink-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pinfo-plate__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
}

.pinfo-plate__now {
    color: var(--sn-brand-deep);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.pinfo-plate__now--sale { color: #e8443a; }

.pinfo-plate__unit {
    color: var(--sn-ink-soft);
    font-size: 13.5px;
}

.pinfo-plate__lengths {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-left: 0;
    color: var(--sn-ink-faint);
    font-size: 12.5px;
    text-align: left;
}

.pinfo-plate__lengths b { color: var(--sn-ink-soft); font-weight: 700; }

/* Ряд признаков */
.pinfo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 520px;
    margin: 0 0 14px;
}

.pinfo-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.pinfo-chip--stock { background: #e3f6ea; color: #1c7a3e; }
.pinfo-chip--order { background: #fdf0dd; color: #8a5a12; }
.pinfo-chip--weight { background: #fdf3e3; color: #8a6321; }

a.pinfo-chip--cut {
    background: #e8ecfb;
    color: var(--sn-brand);
    text-decoration: none;
}

a.pinfo-chip--cut:hover {
    background: #dde3f8;
    color: var(--sn-brand-deep);
    text-decoration: none;
}

.pinfo-short {
    max-width: 520px;
    color: var(--sn-ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

.pinfo-get {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
}

.pinfo-get__row { display: flex; align-items: flex-start; gap: 10px; }

.pinfo-get__ico {
    flex: none;
    margin-top: 1px;
    color: var(--sn-brand);
}

.pinfo-get__txt { display: flex; flex-direction: column; gap: 2px; }
.pinfo-get__txt b { color: var(--sn-ink); font-size: 13.5px; font-weight: 700; }

.pinfo-get__txt small {
    color: var(--sn-ink-soft);
    font-size: 12.5px;
    line-height: 1.45;
}

.pinfo-get__txt small a { color: var(--sn-brand); }

.pinfo-call {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 9px;
    max-width: 520px;
    margin: 0 0 6px;
    color: var(--sn-ink-soft);
    font-size: 13px;
}

.pinfo-call svg { flex: none; color: var(--sn-brand); }

.pinfo-call a {
    color: var(--sn-brand);
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
}

/* Предупреждение об акции теперь под фотографией и ровно по её ширине */
html:not(.is-app) .product-gallery > .pinfo-attention,
.is-app .product-gallery > .pinfo-attention {
    max-width: none;
    margin: 10px 0 4px;
}


/* ═══════════════════════════════════════════════════════════════════
   15. ВКЛАДКИ КАРТОЧКИ ТОВАРА ВО ВСЮ ШИРИНУ
   .sheet__text ограничивает строку 72 знаками — это правильно для статьи
   в узкой колонке, но во вкладке справа оставалась пустая половина.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .tab-content .tab-pane.sheet__text { max-width: none; }

html:not(.is-app) .tab-pane.sheet__text > p,
html:not(.is-app) .tab-pane.sheet__text > ul,
html:not(.is-app) .tab-pane.sheet__text > ol { max-width: 92ch; }

html:not(.is-app) .tab-pane.sheet__text img {
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   16. СВОДКА СПИСКА («Показаны записи 1-12 из 12»)
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .list-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--sn-line-soft);
    color: var(--sn-ink-soft);
    font-size: 12.5px;
}

html:not(.is-app) .list-summary b {
    color: var(--sn-brand-deep);
    font-size: 13.5px;
    font-weight: 800;
}

html:not(.is-app) .list-summary span { color: var(--sn-ink-faint); }

.is-app .list-summary { font-size: 12px; color: var(--sn-ink-soft); }


/* ═══════════════════════════════════════════════════════════════════
   17. ЗАГОЛОВОК СПИСКА ТОВАРОВ И СВОДКА В ОДНОЙ СТРОКЕ
   Сводка висела отдельным блоком ниже заголовка, на пустом месте.
   ═══════════════════════════════════════════════════════════════════ */

.section-title--list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 22px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sn-line);
}

.section-title--list .section-title { margin: 0; }

/* Пустая строка-заголовок (список без имени) не должна оставлять полосу */
.section-title--list:empty { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   18. КОРЗИНА — СТРОКИ-КАРТОЧКИ (вариант 1)
   Было: таблица на семь колонок (отдельный столбец «Ед. изм.» ради слова
   «рулон») и четыре равнозначные кнопки внизу, из которых самой заметной
   была «Очистить корзину» в красной рамке.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .cart-detail .table,
html:not(.is-app) .cart-detail tbody,
html:not(.is-app) .cart-detail tbody tr,
html:not(.is-app) .cart-detail tbody td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
}

html:not(.is-app) .cart-detail tbody tr + tr { border-top: 1px solid var(--sn-line-soft); }

/* Колонки: фото, товар, цена за единицу, количество, сумма, удаление.
   Одна карточка на весь список, строки разделены волосяной линией. */
html:not(.is-app) .cart-cols,
html:not(.is-app) .cart-line {
    display: grid;
    grid-template-columns: 64px 1fr 120px 108px 116px 28px;
    gap: 14px;
    align-items: center;
}

html:not(.is-app) .cart-cols {
    padding: 0 14px 8px;
    color: var(--sn-ink-faint);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

html:not(.is-app) .cart-cols span:nth-child(3),
html:not(.is-app) .cart-cols span:nth-child(5) { text-align: right; }
html:not(.is-app) .cart-cols span:nth-child(4) { text-align: center; }

html:not(.is-app) .cart-detail tbody {
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}

html:not(.is-app) .cart-line {
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: none;
}

html:not(.is-app) .cart-line__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border-radius: 8px;
    background: var(--sn-plate);
    overflow: hidden;
}

html:not(.is-app) .cart-line__pic img { max-width: 100%; max-height: 100%; }

html:not(.is-app) .cart-line__nm {
    display: block;
    color: var(--sn-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

html:not(.is-app) .cart-line__nm:hover { color: var(--sn-brand); }

html:not(.is-app) .cart-line__unit {
    margin-top: 3px;
    color: var(--sn-ink-faint);
    font-size: 12px;
}

/* Цена за единицу: старая зачёркнута над новой, чтобы столбец не разъезжался */
html:not(.is-app) .cart-line__price {
    text-align: right;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

html:not(.is-app) .cart-line__price del {
    display: block;
    color: var(--sn-ink-faint);
    font-size: 12px;
}

html:not(.is-app) .cart-line__price b { color: #e8443a; font-weight: 700; }
html:not(.is-app) .cart-line__price span { color: var(--sn-ink); }

/* Счётчик как в окне добавления: рамка, скруглённые углы, тихие кнопки */
html:not(.is-app) .cart-line__qty {
    display: flex;
    justify-self: center;
    width: auto;
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

html:not(.is-app) .cart-line__qty .qtyminus,
html:not(.is-app) .cart-line__qty .qtyplus {
    width: 30px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: var(--sn-line-soft);
    color: var(--sn-brand);
    font-size: 15px;
    font-weight: 700;
}

html:not(.is-app) .cart-line__qty .qtyminus:hover,
html:not(.is-app) .cart-line__qty .qtyplus:hover { background: #e3eafb; }

html:not(.is-app) .cart-line__qty .qty {
    width: 46px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--sn-ink);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

html:not(.is-app) .cart-line__meta del { margin-right: 5px; }
html:not(.is-app) .cart-line__meta b { color: #e8443a; font-weight: 700; }

html:not(.is-app) .cart-line__cut {
    margin-left: 8px;
    color: var(--sn-brand);
    font-weight: 700;
}

html:not(.is-app) .cart-line__qty { flex: none; }

html:not(.is-app) .cart-line__sum {
    min-width: 0;
    color: var(--sn-brand-deep);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

html:not(.is-app) .cart-line__x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--sn-ink-faint);
}

html:not(.is-app) .cart-line__x:hover { background: #fdecea; color: #d2402f; }

/* Низ корзины собран как в окне добавления: итог отдельной строкой справа,
   под ним черта, ниже — действия. */
html:not(.is-app) .cart-total {
    margin-top: 14px;
    padding: 15px 18px 16px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
}

html:not(.is-app) .cart-total__l {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--sn-line);
}

html:not(.is-app) .cart-total__label {
    color: var(--sn-ink-soft);
    font-size: 14px;
}

html:not(.is-app) .cart-total__sum {
    display: block;
    color: var(--sn-brand-deep);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

html:not(.is-app) .cart-total__r {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

html:not(.is-app) .cart-total__back,
html:not(.is-app) .cart-total__clear {
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html:not(.is-app) .cart-total__back { color: var(--sn-ink-faint); }
html:not(.is-app) .cart-total__clear { color: #d2402f; }

html:not(.is-app) .cart-total .cart-checkout-btn {
    height: 44px;
    margin-left: auto;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    /* Жёлтая кнопка осталась от старого оформления: в окне добавления главное
       действие уже синее, и владельцу так больше нравится. */
    background: var(--sn-brand) !important;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

html:not(.is-app) .cart-total .cart-checkout-btn:hover { background: var(--sn-brand-deep) !important; }

html:not(.is-app) .cart-guest {
    margin: 10px 2px 0;
    color: var(--sn-ink-faint);
    font-size: 12.5px;
}

html:not(.is-app) .cart-guest a { color: var(--sn-brand); font-weight: 600; }

@media (max-width: 900px) {
    html:not(.is-app) .cart-cols { display: none; }

    html:not(.is-app) .cart-line {
        grid-template-columns: 62px 1fr 24px;
        gap: 10px;
    }
    html:not(.is-app) .cart-line__price { grid-column: 2; text-align: left; }
    html:not(.is-app) .cart-line__price del { display: inline; margin-right: 5px; }
    html:not(.is-app) .cart-line__qty { justify-self: start; grid-column: 2; }
    html:not(.is-app) .cart-line__pic { height: 58px; }
    html:not(.is-app) .cart-line__mid { grid-column: 2 / 4; }
    html:not(.is-app) .cart-line__sum { grid-column: 2 / 4; text-align: left; font-size: 15px; }
    html:not(.is-app) .cart-line__x { grid-row: 1; grid-column: 3; }
    html:not(.is-app) .cart-total__l { justify-content: space-between; }
    html:not(.is-app) .cart-total__r { justify-content: space-between; }
    html:not(.is-app) .cart-total .cart-checkout-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   19. ПОДСКАЗКИ ПОИСКА
   Было: разделы и товары одной кучей, между ними пустой <li> с чёрной рамкой,
   названия строчными из индекса, окно высотой 200 px — четыре строки.
   Стало: две группы со своими заголовками, фото товара, метка наличия,
   счётчик у раздела и строка «показать все» с общим числом.
   Правила общие для сайта и приложения — разметку рисует один и тот же main.js.
   ═══════════════════════════════════════════════════════════════════ */

.autocomplete-wrapper {
    max-height: 62vh;
    padding: 0;
    border: 1px solid var(--sn-line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--sn-shadow-lift);
    font-size: 14px;
    overflow: hidden auto;
}

.autocomplete-wrapper .ac-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 15px 6px;
    background: var(--sn-line-soft);
    color: var(--sn-ink-faint);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.autocomplete-wrapper .ac-group em {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.autocomplete-wrapper .autocomplete-wrapper-items {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--sn-line-soft);
}

.autocomplete-wrapper .autocomplete-wrapper-items:last-child { border-bottom: 0; }
.autocomplete-wrapper .autocomplete-wrapper-items:hover { background: var(--sn-line-soft); }

.autocomplete-wrapper .autocomplete-wrapper-items > a {
    gap: 12px;
    padding: 8px 15px;
    color: var(--sn-ink);
}

.autocomplete-wrapper .autocomplete-wrapper-items > a:hover { color: var(--sn-ink); }

.autocomplete-wrapper .ac-nm {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.autocomplete-wrapper .ac-nm small {
    display: block;
    color: var(--sn-ink-faint);
    font-size: 12px;
}

.autocomplete-wrapper .ac-nm strong { color: var(--sn-brand); font-weight: 800; }

.autocomplete-wrapper .ac-thumb {
    flex: none;
    width: 42px;
    height: 42px;
    padding: 2px;
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

.autocomplete-wrapper .ac-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #e8ecfb;
    color: var(--sn-brand);
}

.autocomplete-wrapper .ac-cnt {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--sn-line-soft);
    color: var(--sn-ink-soft);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.autocomplete-wrapper .ac-cat:hover .ac-cnt { background: #fff; }

.autocomplete-wrapper .autocomplete-price {
    flex: none;
    color: var(--sn-brand-deep);
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.autocomplete-wrapper .ac-all > a {
    padding: 11px 15px;
    background: var(--sn-line-soft);
    color: var(--sn-brand);
    font-weight: 700;
}

.autocomplete-wrapper .ac-all span:last-child {
    color: var(--sn-ink-faint);
    font-size: 13px;
    font-weight: 600;
}

.autocomplete-wrapper .ac-empty {
    padding: 12px 15px;
    color: var(--sn-ink-faint);
}


/* ═══════════════════════════════════════════════════════════════════
   20. ДЕРЕВО КАТАЛОГА — ПЛОТНОЕ (вариант А, выбран владельцем 07.08)
   Было: у каждого пункта своя рамка и высота 52 px, раскрытая ветка заливалась
   тёмно-синим, вложенные — серым, вместо стрелок кружки «+»/«−».
   Стало: одна карточка с волосяными разделителями, строки ужаты, раскрытая ветка
   на светлой подложке, активный пункт — синей полосой слева. Счётчиков нет —
   владелец: «глаза разбегаются». Каталога в приложении нет, is-app не трогаем.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .widget-categories__custom .widget-title {
    padding: 11px 15px;
    border: 0;
    border-radius: var(--sn-r-s) var(--sn-r-s) 0 0;
    background: var(--sn-brand) !important;
    box-shadow: none;
    color: #fff !important;
    font-size: 14px;
    text-align: left;
}

html:not(.is-app) .widget-categories__custom .custom__name {
    padding-left: 0;
    border-bottom: 0;
    letter-spacing: -.01em;
}

/* Иконка каталога висела слева за пределами шапки — на синем фоне ей места нет */
html:not(.is-app) .widget-categories__custom .custom__name:before { display: none; }
html:not(.is-app) .widget-categories__custom .cat-collapse span,
html:not(.is-app) .widget-categories__custom .cat-collapse span:before,
html:not(.is-app) .widget-categories__custom .cat-collapse span:after { background: #fff; }

html:not(.is-app) .widget-categories__custom > div > ul {
    border: 1px solid var(--sn-line);
    border-top: 0;
    border-radius: 0 0 var(--sn-r-s) var(--sn-r-s);
    box-shadow: var(--sn-shadow);
    overflow: hidden;
}

html:not(.is-app) .widget-categories__custom ul > li {
    border: 0;
    border-top: 1px solid var(--sn-line);
}

html:not(.is-app) .widget-categories__custom > div > ul > li:first-child { border-top: 0; }

html:not(.is-app) .widget-categories__custom ul > li > a {
    display: block;
    min-height: 0;
    padding: 9px 30px 9px 14px;
    color: var(--sn-ink) !important;
    font-size: 13.5px;
    line-height: 1.35;
}

/* Подсветка заметно темнее подложки раскрытой ветки — иначе внутри открытого
   раздела наведение не видно вовсе: цвет совпадал с фоном ветки. */
html:not(.is-app) .widget-categories__custom ul > li > a:hover {
    background: #e3eafb;
    color: var(--sn-brand) !important;
    box-shadow: inset 3px 0 0 rgba(47, 58, 133, .35);
}

/* Раскрытая ветка: светлая подложка вместо тёмно-синей заливки */
html:not(.is-app) .widget-categories__custom li.level1.expanded,
html:not(.is-app) .widget-categories__custom li.level2.expanded,
html:not(.is-app) .widget-categories__custom li.level3.expanded,
html:not(.is-app) .widget-categories__custom li.level4.expanded { background: var(--sn-line-soft); }

html:not(.is-app) .widget-categories__custom .expanded > a:first-child {
    background: none;
    color: var(--sn-brand-deep) !important;
    font-weight: 700;
}

html:not(.is-app) .widget-categories__custom ul > li.has-children > ul { background: none; }
html:not(.is-app) .widget-categories__custom ul > li > ul > li { background: none; margin-left: 0; }

html:not(.is-app) .widget-categories__custom ul ul > li > a {
    padding: 8px 30px 8px 28px;
    color: var(--sn-ink-soft) !important;
    font-size: 13px;
}

html:not(.is-app) .widget-categories__custom ul ul ul > li > a { padding-left: 40px; }

/* Внутри раскрытой ветки разделители светлее — иначе подложка рябит */
html:not(.is-app) .widget-categories__custom ul ul > li { border-top-color: #e0e6f6; }

/* Активный пункт: полоса слева вместо жёлтой заливки во всю строку */
html:not(.is-app) .widget-categories__custom ul > li.active > a,
html:not(.is-app) .widget-categories ul > li.active > a {
    background: #fff;
    box-shadow: inset 3px 0 0 var(--sn-brand);
    color: var(--sn-brand) !important;
    font-weight: 800;
}

/* Кружки «+»/«−» — обычной стрелкой, поворот при раскрытии */
html:not(.is-app) .widget-categories__custom ul > li.has-children > a:after {
    content: "›";
    top: 50%;
    right: 11px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--sn-ink-faint);
    font-size: 16px;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform .25s;
}

html:not(.is-app) .widget-categories__custom ul > li.has-children.expanded > a:after {
    content: "›";
    padding: 0;
    background: none;
    transform: translateY(-50%) rotate(90deg);
}


/* ═══════════════════════════════════════════════════════════════════
   21. ПУТЬ НАД ТОВАРОМ (вариант 1, выбран владельцем 07.08)
   Было: все звенья подчёркнуты и одинаково заметны, включая текущий товар,
   который никуда не ведёт; на телефоне путь занимал четыре строки (158 px).
   Стало: одна строка на плашке, ссылки тихие, длинные звенья ужимаются
   многоточием, текущее — серым.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .breadcrumb-custom {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 16px 0 14px;
    padding: 7px 13px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-s);
    background: #fff !important;
    box-shadow: var(--sn-shadow);
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
}

html:not(.is-app) .breadcrumb-custom > li {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html:not(.is-app) .breadcrumb-custom > li:first-child { flex: none; }

html:not(.is-app) .breadcrumb-custom > li > a {
    color: var(--sn-ink-soft);
    text-decoration: none;
}

html:not(.is-app) .breadcrumb-custom > li > a:hover {
    color: var(--sn-brand);
    text-decoration: underline;
}

html:not(.is-app) .breadcrumb-custom > li.active { color: var(--sn-ink-faint); }

html:not(.is-app) .breadcrumb-custom .crumbs-home {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--sn-line-soft);
    vertical-align: -6px;
}

html:not(.is-app) .breadcrumb-custom .crumbs-home svg { vertical-align: 0; }
html:not(.is-app) .breadcrumb-custom > li + li:before { margin: 0 5px; opacity: .5; }


/* ═══════════════════════════════════════════════════════════════════
   22. ПРЕДУПРЕЖДЕНИЕ ОБ АКЦИИ ПОД ФОТОГРАФИЕЙ
   Было: сплошная жёлтая заливка с жёлтой рамкой — кричит цветом и при этом
   выглядит выцветшей, из другого набора, чем остальной сайт.
   Стало: обычная белая карточка сайта, тревожный цвет остался только у значка
   и тонкой полосы слева.
   ═══════════════════════════════════════════════════════════════════ */

.pinfo-attention {
    /* Не flex: значок пущен обтеканием, чтобы вторая-третья строка шли под ним,
       а не отступали колонкой. Полосы слева нет — цвет остался только у значка. */
    display: block;
    padding: 10px 13px 11px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-s);
    background: #fff;
    box-shadow: var(--sn-shadow);
    color: var(--sn-ink-soft);
    font-size: 12.5px;
    line-height: 1.45;
}

.pinfo-attention svg {
    float: left;
    width: 16px;
    height: 16px;
    margin: 1px 9px 1px 0;
    /* Фирменный #feec00 на белом почти не виден — тот же жёлтый, но темнее */
    stroke: #e8b21c;
}

.pinfo-attention span { display: inline; }


/* ═══════════════════════════════════════════════════════════════════
   23. ОКНО «ТОВАР ДОБАВЛЕН В КОРЗИНУ»
   Осталось от старого оформления: жёлтая кнопка, бежевые рамки, подчёркнутая
   ссылка, окно прижато к верху экрана. Приводим к тому же языку, что корзина:
   белая карточка по центру, синяя кнопка действия, тихая ссылка возврата.
   ═══════════════════════════════════════════════════════════════════ */

#cart_ajax .modal-dialog { max-width: 540px; }

#cart_ajax .modal-content {
    border: 0;
    border-radius: var(--sn-r-l);
    box-shadow: var(--sn-shadow-lift);
}

#cart_ajax .modal-header {
    align-items: center;
    padding: 15px 20px 13px;
    border-bottom: 1px solid var(--sn-line);
}

#cart_ajax .cart-modal__title {
    gap: 9px;
    color: var(--sn-brand-deep);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

#cart_ajax .cart-modal__ok {
    width: 24px;
    height: 24px;
    background: #1c7a3e;
    font-size: 12px;
}

#cart_ajax .modal-header .close {
    margin: 0;
    padding: 0 2px;
    color: var(--sn-ink-faint);
    font-weight: 400;
    opacity: 1;
    text-shadow: none;
}

#cart_ajax .modal-header .close:hover { color: var(--sn-brand); }

#cart_ajax .modal-body { padding: 16px 20px 18px; }

#cart_ajax .cart-modal__item {
    padding: 9px;
    border: 1px solid var(--sn-line);
    border-radius: 12px;
}

#cart_ajax .cart-modal__ph img {
    border: 1px solid var(--sn-line);
    border-radius: 9px;
    background: #fff;
}

#cart_ajax .cart-modal__name {
    color: var(--sn-ink);
    font-weight: 700;
    text-decoration: none;
}

#cart_ajax .cart-modal__name:hover { color: var(--sn-brand); }

#cart_ajax .cart-modal__qty {
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

#cart_ajax .cart-modal__step {
    width: 28px;
    height: 30px;
    border: 0;
    background: var(--sn-line-soft);
    color: var(--sn-brand);
    font-size: 15px;
    font-weight: 700;
}

#cart_ajax .cart-modal__step:hover:not(:disabled) { background: #e3eafb; }
#cart_ajax .cart-modal__num { min-width: 34px; font-variant-numeric: tabular-nums; }
#cart_ajax .cart-modal__meta { color: var(--sn-ink-faint); font-size: 12.5px; }

#cart_ajax .cart-modal__sum {
    color: var(--sn-brand-deep);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#cart_ajax .cart-modal__total {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sn-line);
    color: var(--sn-ink-soft);
    font-size: 14px;
}

#cart_ajax .cart-modal__total b {
    color: var(--sn-brand-deep);
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#cart_ajax .cart-modal__actions { gap: 10px; margin-top: 16px; }

#cart_ajax .modal-dialog .btn.cart-modal__cont,
#cart_ajax .modal-dialog .btn.cart-modal__go {
    height: 44px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

#cart_ajax .modal-dialog .btn.cart-modal__cont {
    border: 1px solid var(--sn-line);
    background: #fff;
    color: var(--sn-ink-soft);
}

#cart_ajax .modal-dialog .btn.cart-modal__cont:hover {
    border-color: var(--sn-brand);
    background: #fff;
    color: var(--sn-brand);
}

#cart_ajax .modal-dialog .btn.cart-modal__go {
    border: 0;
    background: var(--sn-brand);
    color: #fff;
}

#cart_ajax .modal-dialog .btn.cart-modal__go:hover { background: var(--sn-brand-deep); color: #fff; }

/* Вертикальное центрирование: класс modal-dialog-centered в бутстрапе темы
   не описан, окно прижималось к верху экрана. */
/* Центрируем сам слой окна, а не диалог: у темы своя прокрутка внутри .modal,
   и modal-dialog-centered оказывался выше середины ровно на её величину.
   Класс открытого окна вешает бутстрап: в теме он третьей версии (.in),
   класс .show оставлен на случай перехода на четвёртую. Скрытое окно правило
   не трогает — всплыть не может. */
html:not(.is-app) #cart_ajax.in,
html:not(.is-app) #cart_ajax.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

html:not(.is-app) #cart_ajax.in,
html:not(.is-app) #cart_ajax.show { padding: 28px 12px; }

html:not(.is-app) #cart_ajax.in .modal-dialog,
html:not(.is-app) #cart_ajax.show .modal-dialog {
    width: 100%;
    /* Тема держит у диалога margin-top 138 px — с ним окно уезжает выше центра;
       воздух по краям задаём padding'ом самого слоя. Бутстрап третьей версии
       выезжает окном через translate(0,-25%) — при флексе этот сдвиг остаётся
       и поднимает карточку ровно на четверть её высоты. */
    margin: 0 auto !important;
    transform: none !important;
}

html:not(.is-app) #cart_ajax .modal-dialog-centered .modal-content { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════
   24. ТЕКСТОВЫЕ СТРАНИЦЫ CMS ВО ВСЮ ШИРИНУ ЛИСТА
   72 знака в строке — норма для статьи блога, но на «Оплате/доставке»
   справа оставалась пустая полоса 120 px, а таблицы расценок мельчали.
   Во вкладках карточки товара это уже починено (секция 15) — здесь то же
   самое для страниц.
   ═══════════════════════════════════════════════════════════════════ */

.sheet--page .sheet__text { max-width: none; }

.sheet--page .sheet__text img {
    width: 100%;
    max-width: 100%;
    height: auto;
}


/* Раздел, на странице которого мы стоим, обычно ещё и раскрыт. Правило раскрытой
   ветки перебивало активное — оставалась полоса, но пропадал цвет текущего. */
.widget-categories__custom ul > li.active.expanded > a:first-child {
    background: #fff;
    color: var(--sn-brand) !important;
    font-weight: 800;
}


/* ═══════════════════════════════════════════════════════════════════
   25. СОГЛАСИЕ НА ОБРАБОТКУ ДАННЫХ (шаг «Контакты»)
   Было: голая системная галочка, звёздочка «tomato» в конце фразы, после
   клика вся строка зеленела (класс has-success от валидатора), и 72 px
   пустоты под блоком при высоте самого блока 30 px.
   Стало: строка-карточка с фирменной галочкой, спокойный текст, воздух убран.
   ═══════════════════════════════════════════════════════════════════ */

.field-checkoutform2-terms_of_agreement { margin-bottom: 4px; }
.field-checkoutform2-terms_of_agreement .checkbox { margin: 0; }
.field-checkoutform2-terms_of_agreement .help-block:empty { display: none; margin: 0; }

.field-checkoutform2-terms_of_agreement label.has-star {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-s);
    background: #fff;
    color: var(--sn-ink-soft);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}

.field-checkoutform2-terms_of_agreement label.has-star:hover { border-color: var(--sn-brand-lift); }

/* Звёздочка обязательности вылезала в конец предложения, за точкой — читалась
   как опечатка. Обязательность и так проверяется: без галочки шаг не проходит. */
.form-group.required.field-checkoutform2-terms_of_agreement label.has-star::after { content: none; }

.field-checkoutform2-terms_of_agreement a {
    color: var(--sn-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.field-checkoutform2-terms_of_agreement input[type="checkbox"] {
    flex: none;
    position: static;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid #c9d1e8;
    border-radius: 6px;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.field-checkoutform2-terms_of_agreement input[type="checkbox"]:checked {
    border-color: var(--sn-brand);
    background: var(--sn-brand) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}

.field-checkoutform2-terms_of_agreement input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--sn-brand-lift);
    outline-offset: 2px;
}

/* Валидатор красит согласие мятным (.has-success) — на шаге оформления это
   выглядит как ошибка чужого стиля. Ошибку оставляем красной, как была. */
.has-success .field-checkoutform2-terms_of_agreement label.has-star,
.field-checkoutform2-terms_of_agreement.has-success label.has-star { color: var(--sn-ink-soft); }

.field-checkoutform2-terms_of_agreement.has-error label.has-star { border-color: #e8443a; }


/* ═══════════════════════════════════════════════════════════════════
   26. ОКНО «УСЛОВИЯ СОГЛАШЕНИЯ»
   Текст из админки (Faq #1) — 2110 px на компьютере и 3492 на телефоне;
   окно открывалось от верхнего края, начало уезжало за экран (top −389),
   и прокручивалась вся страница вместе с фоном. Теперь окно по центру,
   прокручивается только текст внутри.
   Правила общие: оформлять заказ можно и из приложения.
   ═══════════════════════════════════════════════════════════════════ */

#content_ajax.in,
#content_ajax.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 28px 12px;
}

#content_ajax.in .modal-dialog,
#content_ajax.show .modal-dialog {
    width: 100%;
    max-width: 760px;
    margin: 0 auto !important;
    transform: none !important;
}

#content_ajax .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 56px);
    border: 0;
    border-radius: var(--sn-r-l);
    box-shadow: var(--sn-shadow-lift);
    overflow: hidden;
}

#content_ajax .modal-header {
    flex: none;
    align-items: flex-start;
    padding: 15px 20px 13px;
    border-bottom: 1px solid var(--sn-line);
}

#content_ajax .modal-title {
    color: var(--sn-brand-deep);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.35;
}

#content_ajax .modal-header .close {
    margin: 0;
    padding: 0 2px;
    color: var(--sn-ink-faint);
    font-weight: 400;
    opacity: 1;
    text-shadow: none;
}

#content_ajax .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 20px 20px;
    overflow-y: auto;
    color: var(--sn-ink-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

#content_ajax .modal-body p { margin-bottom: 10px; }


/* ═══════════════════════════════════════════════════════════════════
   27. ЗАГОЛОВКИ БЛОКОВ НА ГЛАВНОЙ (вариант 2, выбран владельцем 07.08)
   Было: обычный текст по центру тем же начертанием, что и всё вокруг —
   карточки нарядные, а над ними голая строка, и блоки сливались в ленту.
   Стало: значок в фирменном жёлтом, название, подпись с названием акции
   и ссылка «смотреть все» там, где виджету привязана акция или раздел.
   ═══════════════════════════════════════════════════════════════════ */

.sect-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.sect-title__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--sn-accent);
    color: var(--sn-brand-deep);
}

.sect-title__txt { flex: 1 1 auto; min-width: 0; }

.sect-title__h {
    margin: 0;
    color: var(--sn-brand-deep);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-transform: none;
}

.sect-title__txt small {
    display: block;
    margin-top: 1px;
    color: var(--sn-ink-faint);
    font-size: 12.5px;
}

.sect-title__all {
    flex: none;
    color: var(--sn-brand);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.sect-title__all:hover { color: var(--sn-brand-deep); text-decoration: underline; }

@media (max-width: 575px) {
    .sect-title { gap: 10px; }
    .sect-title__ico { width: 32px; height: 32px; border-radius: 9px; }
    .sect-title__h { font-size: 16.5px; }
    .sect-title__all { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   28. ШАГ «ПРОВЕРЬТЕ ВАШ ЗАКАЗ»
   Была таблица на семь колонок (одна из них — иконка «изменить»), отдельная
   мобильная разметка и подытог строкой без выделения. Стало то же, что в
   корзине: строки-карточки, итог отдельной карточкой, данные заказа — двумя
   белыми плитками.
   ═══════════════════════════════════════════════════════════════════ */

.shopping-layout > h4 {
    margin: 0 0 16px;
    color: var(--sn-brand-deep);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: left;
}

.rev-list { display: flex; flex-direction: column; gap: 10px; }

.rev-line {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    background: #fff;
}

.rev-line__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68px;
    border-radius: 8px;
    background: var(--sn-plate);
    overflow: hidden;
}

.rev-line__pic img { max-width: 100%; max-height: 100%; }

.rev-line__nm {
    display: block;
    color: var(--sn-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.rev-line__nm:hover { color: var(--sn-brand); }

.rev-line__meta {
    margin-top: 5px;
    color: var(--sn-ink-faint);
    font-size: 12.5px;
}

.rev-line__meta b { color: var(--sn-ink-soft); font-weight: 700; }

.rev-line__sum {
    min-width: 104px;
    color: var(--sn-brand-deep);
    font-size: 16px;
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rev-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
}

.rev-total__edit {
    color: var(--sn-brand);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rev-total__label { margin-left: auto; color: var(--sn-ink-soft); font-size: 14px; }

.rev-total__sum {
    color: var(--sn-brand-deep);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Две плитки с данными заказа */
.review-props {
    padding: 12px 16px 13px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r-s);
    background: #fff;
}

.checkout-form-label {
    margin-bottom: 7px;
    color: var(--sn-ink-faint);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    .rev-line {
        grid-template-columns: 62px 1fr;
        gap: 10px;
    }
    .rev-line__pic { height: 58px; }
    .rev-line__sum { grid-column: 2; min-width: 0; text-align: left; }
    .rev-total__label { margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   29. КАТАЛОГ СПИСКОМ В ДВА СТОЛБЦА (вариант 3, выбран владельцем 07.08)
   Было: плитки с фотографией и кнопкой «Открыть» — четыре в ряд, 34 раздела
   на четыре экрана прокрутки. Плитки с большим фото отпадали: снимки разделов
   сняты вразнобой, на части водяной знак.
   Стало: строки как в приложении (разметка та же), в два столбца и с числом
   товаров в разделе.
   ═══════════════════════════════════════════════════════════════════ */

html:not(.is-app) .catlist--two {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-top: 4px;
}

html:not(.is-app) .catlist--two .catlist__i {
    min-height: 96px;
    padding: 12px 14px 12px 12px;
    border-radius: 14px;
    box-shadow: var(--sn-shadow);
    color: var(--sn-ink) !important;
    font-size: 14px;
    font-weight: 700;
}

html:not(.is-app) .catlist--two .catlist__i:hover {
    box-shadow: var(--sn-shadow-lift);
    color: var(--sn-brand-deep) !important;
}

html:not(.is-app) .catlist--two .catlist__name { line-height: 1.3; }

/* Снимок раздела в списке был с ноготь — на широком экране строка выглядела пустой */
html:not(.is-app) .catlist--two .catlist__pic {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

@media (max-width: 767px) {
    html:not(.is-app) .catlist--two .catlist__i { min-height: 84px; }
    html:not(.is-app) .catlist--two .catlist__pic { width: 60px; height: 60px; }
}

html:not(.is-app) .catlist__n {
    display: block;
    margin-top: 2px;
    color: var(--sn-ink-faint);
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 767px) {
    html:not(.is-app) .catlist--two { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   30. ПРИЛОЖЕНИЕ: ЧЕГО НЕ ХВАТАЛО
   Редизайн писался под сайт и почти весь был закрыт от приложения
   условием html:not(.is-app). Экраны, у которых своего оформления в
   приложении нет, оставались в дореформенном виде: статьи простынёй,
   выпадашка акций голыми значками, текстовые страницы без листа.
   Секции 2, 3, 6, 7, 8, 10, 17, 23, 24, 25, 28 теперь общие; здесь —
   то, что приложению нужно иначе, чем сайту.
   ═══════════════════════════════════════════════════════════════════ */

/* Лист текстовой страницы во весь экран: на телефоне поля сайта (26 px)
   съедали седьмую часть ширины. Рамка и тень тоже не нужны — лист и так
   единственное, что на экране. */
.is-app .sheet {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.is-app .sheet__body { padding: 16px 15px 22px; }
.is-app .sheet__hero { padding: 16px 15px 0; }
.is-app .sheet__hero h1,
.is-app .sheet__body > h1 { font-size: 21px; line-height: 1.25; }
.is-app .sheet__text { font-size: 14.5px; }
.is-app .sheet__text h2 { font-size: 17px; }
.is-app .sheet__text h3 { font-size: 15.5px; }

/* Обложка акции — квадратная наклейка из админки. На широком экране полоса
   в 240 px читается как баннер, на телефоне та же полоса даёт наклейку 216×216
   посреди пустого серого поля — «обрубок». Полосу ужимаем, а подложку делаем
   белой: наклейка перестаёт быть плитой и читается значком над заголовком. */
.is-app .sheet--page .sheet__cover {
    height: 96px;
    padding: 12px 0 4px;
    background: #fff;
}

/* Кнопки под статьёй лежали вплотную к тексту: у листа в приложении был снят
   верхний отступ. Возвращаем воздух и ставим их по центру. */
.is-app .sheet__foot {
    justify-content: center;
    padding: 16px 15px 20px;
}

/* Подвал приложения — тот же тёмно-синий градиент, что на сайте. Раскрывашки
   остаются (простыня правовых ссылок на телефоне нечитаема), но подложка
   заголовка из белой становится полупрозрачной по фону. */
.is-compact .site-footer {
    padding-top: 16px;
    border-top: 0;
    background: linear-gradient(160deg, #1b2650 0%, #2a3573 42%, #3f4db0 100%) !important;
    color: rgba(255, 255, 255, .82);
}

.is-compact .site-footer .widget-title {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
    color: #fff !important;
}

.is-compact .site-footer .widget-title:active { background: rgba(255, 255, 255, .16); }

/* Строка заголовка разъезжалась на три угла: фирменная жёлтая черта прижималась
   к левому краю, название вставало по центру, стрелка — к правому. Виновата
   раскладка «по краям» от общей раскрывашки: черта, текст и стрелка для неё —
   три равноправных элемента. Собираем слева направо, стрелку отжимаем полем. */
.is-compact .site-footer .widget-title {
    justify-content: flex-start;
    gap: 10px;
}

.is-compact .site-footer .widget-title::after { margin-left: auto; }

.is-compact .site-footer .widget-title::after {
    border-right-color: rgba(255, 255, 255, .7);
    border-bottom-color: rgba(255, 255, 255, .7);
}

.is-compact .site-footer .widget-links a,
.is-compact .site-footer .widget-links a span,
.is-compact .site-footer .widget__contact-text,
.is-compact .site-footer .widget__contact-text p {
    color: rgba(255, 255, 255, .85) !important;
}

.is-compact .site-footer .widget__contact-text a { color: #fff !important; }
.is-compact .site-footer .font-weight-bold { color: rgba(255, 255, 255, .55); }

/* Значки соцсетей лежали внутри раскрывашки «Информация» — до них добирались
   в два действия, хотя это единственная ссылка наружу, которая в приложении
   нужна. Достаём их из-под заголовка: правило идёт ПОСЛЕ общего скрытия
   `.widget > *:not(.widget-title)` и перебивает его порядком в файле. */
.is-compact .site-footer .widget > .footer-social {
    display: block;
    margin-top: 2px;
    padding: 0 0 6px;
    text-align: center;
}

.is-compact .site-footer .footer-social .font-weight-bold {
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: .12em;
}

.is-compact .site-footer .footer-social .d-flex { justify-content: center; gap: 16px; }
.is-compact .site-footer .footer-social .info_icon { margin: 0; }
.is-compact .site-footer .footer_icon { width: 42px; height: 42px; }

/* Место под панель вкладок было отступом самого подвала — на сером фоне его
   не было видно, на градиенте снизу светилась синяя полоса. Отдаём отступ
   нижней тёмной строке, чтобы хвост был одного цвета с ней. */
.is-compact .site-footer { padding-bottom: 0; }

.is-compact .under-footer {
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: #1b2650;
}

/* Место под панель вкладок — только в приложении: на сайте её нет */
.is-app .under-footer { padding-bottom: calc(var(--apptabs-h) + 14px); }

/* Шаги оформления на телефоне — той же лентой-стрелками, что на компьютере
   (решение владельца 08.08): пройденный шаг залит фирменным синим, следующие
   белые, между ними уголок. Раньше здесь была строка текста с разделителями
   «›» — компактно, но не читалось как путь из четырёх шагов.

   Порядок в разметке обратный: «Проверка» идёт первой и получает element1,
   а прямой порядок задаёт сама тема свойством `order`. Отсюда и правило
   «залить уголок ПРЕДЫДУЩЕГО шага» пишется как `.active + a`. */
.is-compact .checkout-steps {
    display: block;
    margin: 0 0 14px;
    padding: 0;
}

.is-compact .checkout-steps::after {
    display: block;
    clear: both;
    content: '';
}

.is-compact .checkout-steps > a {
    position: relative;
    display: block;
    float: right;
    width: 25%;
    height: 38px;
    min-height: 0;
    margin: 0;
    padding: 0;
    /* Уголок вынесен за правый край шага (right: -9px) — обрезка съела бы ему остриё */
    overflow: visible;
    border-top: 1px solid var(--sn-line);
    border-bottom: 1px solid var(--sn-line);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #606975;
    font-size: 11px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -.01em;
    text-align: center;
    white-space: nowrap;
}

/* Уголок — два наложенных треугольника: нижний рисует линию, верхний закрывает
   его заливкой шага, и получается стрелка с обводкой. */
.is-compact .checkout-steps > a > .angle {
    display: block;
    position: absolute;
    top: 0;
    right: -9px;
    z-index: 2;
    width: 19px;
    height: 36px;
    background: #fff;
}

.is-compact .checkout-steps > a > .angle::before,
.is-compact .checkout-steps > a > .angle::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: solid transparent;
    content: '';
    pointer-events: none;
}

.is-compact .checkout-steps > a > .angle::after {
    border-width: 18px;
    border-left-color: #fff;
}

.is-compact .checkout-steps > a > .angle::before {
    margin-top: -1px;
    border-width: 19px;
    border-left-color: var(--sn-line);
}

.is-compact .checkout-steps > a.completed { color: #6b74a8; }

/* Галочку пройденного шага прячем: на 90 px в шаг не влезают и значок, и название —
   «1. Контакты» обрезалось на «Контак». Пройденный шаг и так отличается цветом. */
.is-compact .checkout-steps > a.completed > .step-indicator { display: none; }

.is-compact .checkout-steps > a.active {
    background: var(--sn-brand);
    color: #fff;
    font-weight: 700;
}

.is-compact .checkout-steps > a.active > .angle::after { border-left-color: var(--sn-brand); }
.is-compact .checkout-steps > a.active + a > .angle { background: var(--sn-brand); }

/* Первый по виду шаг (в разметке он последний) — со скруглением слева,
   последний по виду — справа: лента не упирается в края голыми углами. */
.is-compact .checkout-steps > a.element4 {
    border-left: 1px solid var(--sn-line);
    border-radius: var(--sn-r-s) 0 0 var(--sn-r-s);
}

.is-compact .checkout-steps > a.element1 {
    border-right: 1px solid var(--sn-line);
    border-radius: 0 var(--sn-r-s) var(--sn-r-s) 0;
}

.is-compact .checkout-steps > a.element1 > .angle { display: none; }

/* На узких телефонах (320 px) четыре названия в ленту не помещаются: прячем
   номер шага, остаётся одно слово. */
@media (max-width: 359px) {
    .is-compact .checkout-steps > a { font-size: 10px; letter-spacing: -.03em; }
}

/* «Уточнить наличие» в ленте сопутствующих: карточка там 152 px, а кнопка
   бутстрапа не переносит текст (white-space: nowrap) — надпись вылезала
   за карточку. Уменьшаем надпись и убираем боковые поля. */
.is-app .strip-scroll .product-card-custom .pcard-ask {
    padding: 0 4px;
    font-size: 11px;
    letter-spacing: -.01em;
}

/* Плашка «цена окончательная» в приложении уходит вниз колонки (см.
   _product_info.php): под фотографией она перебивала цену и кнопку. */
.is-app .pinfo-attention--foot { margin: 12px 0 0; }

/* Строка «Итого» под списком корзины. Сумма есть и в прилипшей полосе внизу,
   но там она читается как часть кнопки; под списком нужна точка, где счёт
   заканчивается — иначе между последним товаром и «сопутствующими» пусто. */
.is-app .cart-sum {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 4px;
    padding: 13px 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(35, 42, 78, .07), 0 0 0 1px rgba(35, 42, 78, .04);
}

.is-app .cart-sum__l {
    color: #8b91a6;
    font-size: 13.5px;
    font-weight: 700;
}

.is-app .cart-sum__v {
    color: #23305f;
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Плашки правой колонки в приложении: те же, что на сайте, но без боковых
   полей — экран узкий, и 20 px с каждой стороны съедали восьмую часть строки. */
.is-app .pinfo-card {
    max-width: none;
    padding: 15px 14px 14px;
    border-radius: 14px;
}

.is-app .pinfo-soft {
    max-width: none;
    padding: 13px 14px 12px;
    border-radius: 14px;
}

/* ── правки по замечаниям владельца, 07.08 ── */

/* Рекомендованные товары в оформлении шли по одной карточке в ряд: у колонки
   класс col-12, а брейкпоинт col-sm-6 начинается с 576 px. В приложении экран
   всегда уже — ставим два столбца принудительно. Только колонки с товаром:
   заголовок блока лежит в отдельном col-12, и от общего правила он вставал
   вполовину ширины, а первая карточка приклеивалась к нему сбоку. */
.is-app .checkout-rec > .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 5px;
    padding-right: 5px;
}

.is-app .checkout-rec { margin-left: -5px; margin-right: -5px; }

/* Лист в приложении был квадратным во всю ширину: углы режутся, шапка
   упирается в текст. Возвращаем скругление и воздух под заголовком —
   у шапки не было нижнего поля вовсе, заголовок лежал на кромке. */
.is-app .sheet {
    /* Верх листа упирался в шапку приложения — 0 px зазора */
    margin: 12px 0 16px;
    border-radius: 16px;
}

/* Плашка пустой корзины стояла вплотную под шапкой: у обёртки всего 10 px
   собственного отступа. Прошлая добавка в 3 px зазора не дала — ставим 12,
   и плашка встаёт с тем же воздухом, что лист текстовой страницы. */
.is-compact .cart-empty { margin-top: 12px; }

.is-app .sheet__hero { padding: 15px 15px 16px; }

/* Название статьи стояло вровень с верхом снимка и висело над ним —
   в одну строку это читалось как сбой. Выравниваем по середине строки. */
.is-compact .blog-list > li > a { align-items: center; }

/* Название в корзине резалось посреди слова: место под две строки было,
   но перенос запрещал их занять. Запрет приходит от строк таблицы корзины,
   поэтому снимаем его и на обёртке — иначе не наследуется как надо. */
.is-compact .crow__mid,
.is-compact .crow__nm { white-space: normal; }

/* Проверка статуса и оплата по номеру на экране входа: карточка та же, что
   у формы, ссылки — как пункты «Приложение» в профиле. */
/* .auth — флекс-строка: вторая карточка вставала соседней колонкой и ужимала
   форму входа в узкий столбик. В приложении складываем в колонку. */
.is-app .auth {
    flex-direction: column;
    align-items: stretch;
}

.is-app .auth__card--tools { margin-top: 14px; }
.is-app .auth__card--tools .auth__lead { margin-bottom: 12px; }
.is-app .auth__card--tools .account__applink:last-child { margin-bottom: 0; }

.is-app .auth__card--tools .account__applink {
    font-weight: 600;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════
   31. ЗАСТАВКА ЗАПУСКА ПРИЛОЖЕНИЯ
   Приложение открывалось сразу страницей — от значка на экране до
   каталога не было ничего, что отличало бы его от вкладки браузера.
   Знак, название и полоса заполнения занимают ту секунду, которую
   всё равно тратит загрузка. Показывается один раз за запуск.
   ═══════════════════════════════════════════════════════════════════ */

.appsplash { display: none; }

.is-app.splash-on .appsplash {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #fff;
    transition: opacity .4s ease;
}

/* Пока заставка на экране, страница под ней не должна прокручиваться:
   иначе палец «пролистывает» невидимое содержимое. */
.is-app.splash-on { overflow: hidden; }

/* Разметка оболочки лежит внутри .offcanvas-wrapper, а у него z-index 10 —
   это отдельный слой, и всё внутри прижато к нему целиком. Сообщение о cookie
   висит на body с z-index 10600 и рисовалось поверх заставки. На время
   заставки снимаем у обёртки собственный слой: position без z-index его
   не создаёт, и 12000 у заставки начинает считаться от корня. */
.is-app.splash-on .offcanvas-wrapper { z-index: auto; }

.is-app.splash-done .appsplash { opacity: 0; }

.appsplash__mark {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    animation: sn-splash-rise .5s cubic-bezier(.2, .8, .3, 1) both;
}

/* Название переливается тем же жёлтым, что и знак: градиент шире надписи
   и проезжает по ней один раз за полторы секунды. */
.appsplash__name {
    background: linear-gradient(96deg, #2f3a85 0%, #2f3a85 34%, #f2c400 50%, #2f3a85 66%, #2f3a85 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    animation: sn-splash-rise .5s .06s cubic-bezier(.2, .8, .3, 1) both,
               sn-splash-shine 1.5s .25s ease-in-out;
}

.appsplash__name b { font-weight: 800; }

.appsplash__bar {
    width: 168px;
    height: 3px;
    border-radius: 3px;
    background: #e9ecf6;
    overflow: hidden;
    animation: sn-splash-rise .5s .12s cubic-bezier(.2, .8, .3, 1) both;
}

/* Полоса растёт по transform, а не по width: ширина заставляет браузер
   пересчитывать раскладку каждый кадр. */
.appsplash__bar > i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #2f3a85, #4b5bd6 55%, #f2c400);
    transform: scaleX(.05);
    transform-origin: left center;
    animation: sn-splash-fill 1.15s cubic-bezier(.25, .9, .35, 1) forwards;
}

/* Дошли до готовности — полоса добегает до конца, и только потом уход */
.is-app.splash-done .appsplash__bar > i {
    animation: none;
    transform: scaleX(1);
    transition: transform .25s ease-out;
}

@keyframes sn-splash-rise {
    from { opacity: 0; transform: translateY(9px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes sn-splash-shine {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}

@keyframes sn-splash-fill {
    from { transform: scaleX(.05); }
    to   { transform: scaleX(.9); }
}

/* Кому движение мешает — заставка та же, но без переездов и переливов */
@media (prefers-reduced-motion: reduce) {
    .appsplash__mark,
    .appsplash__name,
    .appsplash__bar { animation: none; }

    .appsplash__bar > i { animation: none; transform: scaleX(.9); }
}


/* ═══════════════════════════════════════════════════════════════════
   32. ДВИЖЕНИЕ
   Три вещи в приложении (отклик на касание, проявление экрана, счётчик
   корзины) и две на сайте (наезд снимка, появление окна корзины).
   Правило одно: движение отвечает на действие человека либо занимает
   время, которое всё равно уходит на загрузку. Проявления карточек по
   прокрутке здесь намеренно нет — в каталоге список сканируют глазами,
   и ожидание каждой карточки мешает.
   ═══════════════════════════════════════════════════════════════════ */

/* ── приложение: отклик на касание ── */
/* Именно то, по чему приложение отличают от сайта: под пальцем предмет
   проседает. Меняем только transform — он не вызывает пересчёт раскладки. */
.is-app .product-card-custom,
.is-app .catlist__i,
.is-app .crow,
.is-app .blog-list > li > a,
.is-app .account__applink,
.is-app .sheet__btn,
.is-app .cart-bar,
.is-app .add_to_cart-button,
.is-app .pcard-ask,
.is-app .order-btn {
    transition: transform .12s cubic-bezier(.3, .7, .4, 1);
}

.is-app .product-card-custom:active,
.is-app .catlist__i:active,
.is-app .crow:active,
.is-app .blog-list > li > a:active,
.is-app .account__applink:active,
.is-app .sheet__btn:active,
.is-app .add_to_cart-button:active,
.is-app .pcard-ask:active,
.is-app .order-btn:active {
    transform: scale(.977);
}

/* Полоса оформления во всю ширину: те же 2 % на ней читаются как перекос */
.is-app .cart-bar:active { transform: scale(.99); }

/* Вкладка внизу: подпрыгивает значок, а не вся кнопка — иначе прыгает подпись */
.is-app .apptabs__i svg { transition: transform .16s cubic-bezier(.3, .7, .4, 1); }
.is-app .apptabs__i:active svg { transform: translateY(-2px) scale(1.06); }

/* ── приложение: проявление экрана ── */
/* Переход внутри приложения — обычная перезагрузка страницы, и содержимое
   возникало рывком. Шапка и панель вкладок не участвуют: они обязаны
   стоять на месте.
   ТОЛЬКО прозрачность, без сдвига. Сдвиг — это transform, а любой transform,
   даже единичный, делает элемент точкой отсчёта для position: fixed внутри.
   Полоса «Оформить» в корзине висит именно так и уезжала на середину экрана.
   `both` при этом сохраняет матрицу и после конца анимации, то есть ломает
   не на время проигрывания, а навсегда. */
.is-app [role="main"] {
    animation: sn-screen-in .2s ease-out both;
}

@keyframes sn-screen-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── приложение: счётчик корзины ── */
/* Класс вешает скрипт оболочки при изменении числа */
.is-app .apptabs__b.is-bump { animation: sn-bump .42s cubic-bezier(.25, 1.4, .4, 1); }

@keyframes sn-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.42); }
    70%  { transform: scale(.94); }
    100% { transform: scale(1); }
}

/* ── сайт: снимок товара под курсором ── */
/* Карточка и так приподнимается; наезд снимка добавляет глубины, но только
   на сайте — на телефоне наведения нет, а перерисовка есть. */
html:not(.is-app) .product-card-custom .product-thumb {
    overflow: hidden;
    border-radius: 8px;
}

html:not(.is-app) .product-card-custom .product-thumb > img {
    transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

html:not(.is-app) .product-card-custom:hover .product-thumb > img {
    transform: scale(1.045);
}

/* ── окно «товар добавлен»: появление ── */
/* Окно возникало рывком. Всплывает на 14 px и слегка подрастает — так же,
   как ведут себя окна в приложениях. */
#cart_ajax .modal-content { animation: sn-modal-in .22s cubic-bezier(.2, .8, .3, 1) both; }

@keyframes sn-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Кому движение мешает — всё остаётся на местах */
@media (prefers-reduced-motion: reduce) {
    .is-app [role="main"],
    .is-app .apptabs__b.is-bump,
    #cart_ajax .modal-content { animation: none; }

    .is-app .product-card-custom:active,
    .is-app .catlist__i:active,
    .is-app .crow:active,
    .is-app .blog-list > li > a:active,
    .is-app .account__applink:active,
    .is-app .sheet__btn:active,
    .is-app .add_to_cart-button:active,
    .is-app .pcard-ask:active,
    .is-app .order-btn:active,
    .is-app .cart-bar:active,
    .is-app .apptabs__i:active svg { transform: none; }

    html:not(.is-app) .product-card-custom:hover .product-thumb > img { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   33. ПУСТЫЕ СОСТОЯНИЯ
   На месте пустого списка была строка «Извините, ничего не найдено»
   в левом верхнем углу и полтора экрана пустоты под ней: непонятно,
   сломался сайт или запрос неудачный, и уйти некуда.
   Стало: значок, что произошло, что с этим делать и куда идти.
   ═══════════════════════════════════════════════════════════════════ */

/* Блок живёт внутри сетки карточек — без растяжки он встал бы одной колонкой */
.grid-custom-list > .empty-state { grid-column: 1 / -1; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 38px 20px 42px;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow);
    text-align: center;
}

.empty-state__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 18px;
    background: var(--sn-line-soft);
    color: var(--sn-brand);
}

.empty-state__title {
    margin: 0;
    max-width: 34ch;
    color: var(--sn-ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.3;
}

.empty-state__hint {
    margin: 8px 0 0;
    max-width: 46ch;
    color: var(--sn-ink-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

.empty-state__act {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.empty-state__btn {
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--sn-line);
    border-radius: 8px;
    background: #fff;
    color: var(--sn-ink-soft);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 0;
    text-transform: none;
}

.empty-state__btn:hover {
    border-color: var(--sn-brand);
    color: var(--sn-brand);
    text-decoration: none;
}

.empty-state__btn--main {
    border-color: var(--sn-brand);
    background: var(--sn-brand);
    color: #fff;
}

.empty-state__btn--main:hover { background: var(--sn-brand-deep); color: #fff; }

.is-app .empty-state { padding: 30px 16px 34px; border-radius: 16px; }
.is-app .empty-state__title { font-size: 16px; }
.is-app .empty-state__act { width: 100%; flex-direction: column; }
.is-app .empty-state__btn { width: 100%; }
.is-app .empty-state__btn:active { transform: scale(.977); }

/* Значок к «Заказов пока нет» в профиле — тот же язык, что у списков */
.orders__empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: var(--sn-line-soft);
    color: var(--sn-brand);
}


/* ── ещё движение: полоса перехода, подсказки, второе окно ── */

/* Переход в приложении — это перезагрузка страницы: между нажатием и новым
   экраном секунда тишины, и человек жмёт второй раз. Тонкая полоса под шапкой
   показывает, что нажатие услышано. Снимается сама вместе со старой страницей;
   на всякий случай её убирает и таймер в оболочке. */
.is-app .appbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2f3a85 35%, #f2c400 65%, transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.is-app.nav-busy .appbar::after {
    opacity: 1;
    animation: sn-nav-run 1s linear infinite;
}

@keyframes sn-nav-run {
    from { background-position: -45% 0; }
    to   { background-position: 145% 0; }
}

/* Подсказки поиска возникали рывком поверх страницы. Заливки после конца
   анимации намеренно нет: элемент возвращается к своему обычному виду,
   и никакой остаточной матрицы у него не остаётся. */
.autocomplete-wrapper:not(.hidden) {
    animation: sn-drop-in .16s ease-out;
}

@keyframes sn-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Окно «Условия соглашения» — тем же движением, что окно корзины */
#content_ajax .modal-content { animation: sn-modal-in .22s cubic-bezier(.2, .8, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .is-app.nav-busy .appbar::after { animation: none; background: #2f3a85; }
    .autocomplete-wrapper:not(.hidden),
    #content_ajax .modal-content { animation: none; }
}


/* ── строки каталога на телефоне крупнее ──
   Снимок 46 px не давал опознать материал: у стройки полразделa различается
   именно фактурой. Плитка и строка выросли примерно на треть (решение
   владельца 07.08). Двухстолбцовый список каталога на сайте — правилами выше. */
.is-compact .catlist__i {
    min-height: 84px;
    padding: 11px 14px 11px 11px;
    gap: 14px;
}

.is-compact .catlist__pic {
    width: 62px;
    height: 62px;
    border-radius: 13px;
}


/* ── лента акции над снимком ──
   Лента лежала обычным absolute без слоя и держалась над фотографией только
   потому, что та ничем не поднята. Под курсором у фотографии появляется
   transform — он создаёт свой слой, и снимок всплывал НАД лентой, срезая её
   до красной полоски. Даём ленте явный слой. Клики сквозь неё проходят на
   ссылку-снимок: раньше она лежала внутри неё и сама вела в карточку. */
.pcard-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 150px;
    pointer-events: none;
}

.pcard-ribbon img { display: block; width: 100%; }

/* В компактном виде карточка ниже: снимок 124 px, и лента в 150 свисала на цену.
   Сжимаем до размера снимка — заодно она перестаёт накрывать значок скидки. */
.is-compact .pcard-ribbon { width: 116px; }

/* Значок скидки уводим в правый верхний угол: в левом идёт лента «Товар месяца»,
   и вдвоём они наезжали друг на друга — процент ложился прямо на надпись. */
.is-compact .pcard-percent {
    z-index: 4;
    top: 10px;
    right: 10px;
    left: auto;
}

/* Пометка «в размер» стоит в том же углу. Когда на карточке есть и скидка,
   опускаем пометку под неё, иначе они встают друг на друга. */
.is-compact .product-card-custom:has(.pcard-percent) .pcard-cut { top: 38px; }


/* ═══════════════════════════════════════════════════════════════════
   34. ШАПКА НА ТЕЛЕФОНЕ (вариант 2, выбран владельцем 08.08)
   Было 277 px: логотип-баннер 225×95, четыре значка сеткой 2×2 в рамках,
   синяя заливка поиска во всю ширину и отдельная полоса «Каталог».
   Стало три строки: логотип со значками, поиск, кнопка каталога.
   Разметку не трогаем — те же классы темы, только другие размеры.
   ═══════════════════════════════════════════════════════════════════ */

/* ── строка 1: логотип и значки ── */
/* Блок, а не флекс: первым ребёнком тут лежит форма всплывающего поиска, и в
   флекс-строке она забирала половину ширины — логотип уезжал к середине. */
.is-compact .hdr-mob {
    min-height: 0;
    padding: 8px 0;
    background: #fff;
    border-bottom: 1px solid var(--sn-line-soft);
}

/* Сетка, а не флекс-строка: логотип слева, значки справа, а выпадающие меню —
   отдельной полосой во всю ширину под ними. Во флексе они делили строку с
   логотипом, и значки переносились вниз. */
.is-compact .hdr-mob .header_flex_wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin: 0;
    min-width: 0;
}

.is-compact .hdr-mob .menu-for-mobile { grid-column: 1 / -1; }

/* Клирфикс бутстрапа (.row::before/::after) в сетке становится её ячейкой и
   сдвигает логотип со значками на колонку вправо. */
.is-compact .hdr-mob .header_flex_wrapper::before,
.is-compact .hdr-mob .header_flex_wrapper::after { display: none; }

/* Колонки бутстрапа внутри шапки: их доли (col-8 / col-4) делили строку пополам,
   из-за чего значки уезжали вверх на 30 px от собственной строки. */
.is-compact .hdr-mob .header_flex_wrapper > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

.is-compact .hdr-mob .header_flex_wrapper > .col-8 { flex: 1 1 auto; min-width: 0; }

.is-compact .hdr-mob .header_flex_wrapper > .col-8 > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
}

/* Значки прижимаем вправо, логотип забирает остаток строки */
.is-compact .hdr-mob .navbar-user-button { margin-left: auto; }

/* .inner.center-block выравнивал логотип по центру строки — он наезжал на значки */
.is-compact .hdr-mob .site-branding,
.is-compact .hdr-mob .site-branding .inner {
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    text-align: left;
}

/* .col-6 держал за брендингом половину строки, и логотип уезжал к её середине */
.is-compact .hdr-mob .site-branding {
    flex: 0 0 auto;
    margin-right: auto;
}

.is-compact .hdr-mob .header_flex_wrapper > .col-8 > .row { justify-content: flex-start; }

.is-compact .hdr-mob .site-logo { display: inline-block; }

/* Логотип задаём по высоте: баннер 225×95 занимал больше половины первого экрана.
   Поля обнуляем — тема центрировала картинку автоотступами. */
.is-compact .hdr-mob .site-logo img {
    height: 42px;
    width: auto;
    max-width: none;
    margin: 0 !important;
}

.is-compact .hdr-mob .site-branding .inner { display: block; }

.is-compact .hdr-mob .navbar_contact1,
.is-compact .hdr-mob .navbar-user-button > .row,
.is-compact .hdr-mob .navbar_contact1 > .row { margin: 0; }

/* Значки: были квадратами 60×53 с рамками, сложенными сеткой 2×2 */
.is-compact .hdr-mob .mobile-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto !important;
    padding: 0;
}

.is-compact .hdr-mob .mobile-icons > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    margin: 0;
}

.is-compact .hdr-mob .mobile-icon {
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px;
    background-color: transparent !important;
    background-size: 21px 21px;
    background-position: center;
    background-repeat: no-repeat;
}

.is-compact .hdr-mob .mobile-icon:active { background-color: var(--sn-plate) !important; }

/* «Контакты» убираем: телефон и адрес лежат в подвале, а место в строке дорого */
.is-compact .hdr-mob .mobile-contacts { display: none !important; }

/* Первым в шапке лежит запасная форма поиска старой темы: сама она схлопнута в
   ноль, но её кнопки .search-tools висят абсолютом поверх значков и съедали
   нажатия по верхней половине корзины и меню. Видимый поиск — во второй строке. */
.is-compact .hdr-mob > form.site-search { display: none; }

/* Бургер темы рисуется тремя полосками-элементами, но под ними лежала ещё и
   фоновая картинка — вместе выходил значок, который не читался как меню. */
.is-compact .hdr-mob .navbar-toggle:not(.mobile-login) {
    background-image: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.is-compact .hdr-mob .navbar-toggle .icon-bar {
    width: 19px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: var(--sn-brand);
}

/* ── выпадающие меню профиля и бургера ── */
/* Тема вешала их абсолютом без единой привязки (left: auto, width: auto), а
   координаты дописывал main.js по месту кнопки. В сетчатой шапке точкой отсчёта
   оказался нулевой по ширине блок, и список уезжал за левый край экрана
   (left −235): нажатие срабатывало, но видно ничего не было.
   Считаем координаты сами — от самой шапки, а не от кнопки. */
.is-compact .hdr-mob { position: relative; z-index: 60; }

.is-compact .hdr-mob .menu-for-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
}

/* !important — против инлайновых top/right, которые main.js пишет прямо в стиль
   элемента при каждом нажатии на значок. */
.is-compact .hdr-mob .menu-for-mobile .site-menu.site-menu-custom.navbar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    margin: 0;
}

/* Плашка меню — как остальные карточки редизайна: белая, со скруглением, тонкой
   рамкой и мягкой тенью. Скругление и заливка на ней целиком, а не на списках
   внутри: списков два, и на их стыке углы прорезали в плашке белые уголки. */
.is-compact .hdr-mob .menu-for-mobile .navbar-collapse {
    margin: 6px 15px 0;
    border: 1px solid var(--sn-line);
    border-radius: var(--sn-r);
    background: #fff;
    box-shadow: var(--sn-shadow-lift);
    overflow: hidden;
}

/* Селекторы длинные не для красоты: у темы правила на те же элементы записаны
   через пять классов, коротким вариантом их не перебить. */
.is-compact .hdr-mob .menu-for-mobile .site-menu.site-menu-custom.navbar .navbar-collapse ul {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Второй список («Проверить статус», «Оплатить») — про уже сделанный заказ, а не
   про магазин: уводим его на подложку и делаем спокойнее первого. */
/* !important — в теме висит `ul { border: none !important }` на все списки сайта,
   обычным правилом черту не нарисовать. */
.is-compact .hdr-mob #order-submenu-for-mobile {
    border-top: 1px solid var(--sn-line) !important;
    background: var(--sn-plate);
}

.is-compact .hdr-mob #order-submenu-for-mobile li a {
    color: var(--sn-ink-soft) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

/* Тема отбивала имя и «Выход» чёрной чертой — на светлой плашке это грубо */
.is-compact .hdr-mob #login-menu-for-mobile ul li:nth-child(2),
.is-compact .hdr-mob #login-menu-for-mobile ul li:nth-child(4) {
    border-top: 1px solid var(--sn-line);
}

/* У вошедшего первым пунктом идёт его имя — строка без ссылки, и поля ей взять
   неоткуда: у остальных пунктов их даёт сама ссылка. */
.is-compact .hdr-mob #login-menu-for-mobile li:not(:has(a)) {
    padding: 10px 16px;
    background: var(--sn-plate);
    color: var(--sn-ink-soft);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.is-compact .hdr-mob .menu-for-mobile .site-menu.site-menu-custom.navbar .navbar-collapse ul li {
    padding: 0;
    text-align: left;
}

/* Разделители между пунктами: без них шесть строк читаются одним полотном.
   Первый пункт списка не трогаем — там уже граница самой плашки. */
.is-compact .hdr-mob .menu-for-mobile .navbar-collapse ul li + li { border-top: 1px solid var(--sn-line-soft); }

.is-compact .hdr-mob .menu-for-mobile .site-menu.site-menu-custom.navbar .navbar-collapse ul li a {
    display: block;
    position: relative;
    padding: 13px 34px 13px 16px;
    color: var(--sn-brand-deep);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-transform: none;
}

/* Уголок справа — та же подсказка «ведёт дальше», что в списке разделов каталога */
.is-compact .hdr-mob .menu-for-mobile .navbar-collapse ul li a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid var(--sn-ink-faint);
    border-bottom: 2px solid var(--sn-ink-faint);
    transform: rotate(-45deg);
}

.is-compact .hdr-mob .menu-for-mobile .navbar-collapse ul li a:active { background: var(--sn-line-soft); }

/* Уголок-указатель темы рисовался от правого края её же абсолютного блока —
   теперь плашка во всю ширину, и он повис бы посередине пустого места. */
.is-compact .hdr-mob .menu-for-mobile .site-menu.site-menu-custom.navbar .navbar-collapse::before,
.is-compact .hdr-mob .menu-for-mobile .site-menu.site-menu-custom.navbar .navbar-collapse::after { display: none; }

/* Раскрытый значок подсвечен — видно, какое из двух меню сейчас открыто */
.is-compact .hdr-mob .mobile-icon[aria-expanded="true"] { background-color: var(--sn-plate) !important; }

/* ── строка 2: поиск ── */
.is-compact .header-second-line {
    padding: 9px 0 0;
    background: transparent;
}

.is-compact .header-second-line > .container > .row > [class*="col-"] { padding: 0 15px; }

.is-compact .header-second-line .site-search__custom {
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 5px 0 12px;
    border: 1px solid var(--sn-line);
    border-radius: 12px;
    background: var(--sn-plate);
}

/* Поле было синей заливкой во всю ширину с белым текстом-подсказкой */
.is-compact .header-second-line .form-control {
    height: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sn-ink) !important;
    /* 16, а не 15: у поля с меньшим шрифтом Safari приближает страницу при фокусе */
    font-size: 16px !important;
}

.is-compact .header-second-line .form-control::placeholder { color: var(--sn-ink-faint); opacity: 1; }

/* 16 px — не про читаемость: Safari приближает страницу при фокусе на поле
   с меньшим шрифтом, и вернуться потом можно только вручную. */
.is-compact input[type="text"],
.is-compact input[type="tel"],
.is-compact input[type="email"],
.is-compact input[type="search"],
.is-compact input[type="number"],
.is-compact input[type="password"],
.is-compact textarea,
.is-compact select { font-size: 16px !important; }

.is-compact .header-second-line .btn {
    flex: 0 0 auto;
    width: auto !important;
    height: 34px !important;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--sn-brand) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 650;
    line-height: 34px !important;
}

/* Подсказки поиска висели под синей полосой во всю ширину */
.is-compact .header-second-line .autocomplete-wrapper {
    top: 48px;
    left: 0;
    right: 0;
    width: auto;
}

/* ── строка 3: каталог ── */
.is-compact .category_two { padding: 9px 0 0; }
.is-compact .category_two .widget { margin: 0; }

.is-compact .category_two .widget-title {
    height: 44px;
    margin: 0 15px;
    width: auto;
    padding: 0 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 650;
}

/* Раскрытое дерево категорий начиналось вплотную к кнопке */
.is-compact .category_two .widget > *:not(.widget-title) { margin-top: 8px; }

/* ── дерево разделов под кнопкой «Каталог» ──
   Кнопка идёт с полями 15 px, а раскрытый список — во всю ширину экрана: строки
   висели шире кнопки и упирались в края. Ставим список в те же поля и делаем его
   отдельной карточкой, а не продолжением кнопки (между ними теперь зазор). */
.is-compact .category_two .widget-categories__custom > .collapse { margin: 0 15px; }

/* Верхние углы прямые: список читается продолжением кнопки, а не отдельной
   карточкой, приехавшей вплотную. */
.is-compact .category_two .widget-categories__custom > .collapse > ul {
    border-top: 0;
    border-radius: 0 0 var(--sn-r-s) var(--sn-r-s);
}

/* Строки в мобильном дереве были на 9 px — палец в такую не попадает */
.is-compact .category_two .widget-categories__custom ul > li > a { padding: 12px 30px 12px 14px; }