@charset "UTF-8";

/* ============================================================
   1. БАЗОВЫЕ СТИЛИ
   ============================================================ */

/* Ховер ссылок — НЕ для кнопок (иначе текст на синей кнопке
   становится тёмно-синим и сливается с фоном). */
a:hover:not(.btn):not(.btn-buy):not(.btn-order):not(.price-list-btn),
a:focus:not(.btn):not(.btn-buy):not(.btn-order):not(.price-list-btn) {
    color: #0F2A6B !important;
}

/* ============================================================
   2. ЛОГОТИП — только <img> (сам .logo — в header.css)
   ============================================================ */

.logo img {
    height: 100%;
    width: auto;
    display: block;
    max-height: 45px;
}

.spacer {
    flex-grow: 1;
}

@media (max-width: 576px) {
    .logo img { max-height: 32px; }
}

/* ============================================================
   3. ОТСТУПЫ
   ============================================================ */

/* cat.tmpl: дублируем правила из product.css (там их нет,
   т.к. product.css не подключён на cat.tmpl). Селектор через
   потомка — h1 на cat вложен в div ItemList. */
main.container:has(.breadcrumb):not(:has(.product)) .breadcrumb {
    margin-top: 1.7em;
}

main.container:has(.breadcrumb):not(:has(.product)) h1 {
    margin-top: 0.3em;
}

/* index, cart, page — без крошек. Компенсируем высоту крошек
   + margin h1 через padding-top контейнера. */
main.container:not(:has(.breadcrumb)) {
    padding-top: 3em;
}

main.container:not(:has(.breadcrumb)) h1 {
    margin-top: 0;
}

/* ============================================================
   4. FANCYBOX
   ============================================================ */

.fancybox__container { --fancybox-bg: #ffffff !important; background-color: #ffffff !important; }
.fancybox__slide { background-color: #ffffff !important; }
.fancybox__image { background-color: #ffffff !important; }
.fancybox__content { background: #ffffff !important; }
.has-image .fancybox__content { background: rgba(255, 255, 255, 0) !important; }
.fancybox__backdrop { background: #ffffff !important; }
.fancybox__slide.has-image { background: #ffffff !important; }
.fancybox__image[style*="object-fit"] { background-color: #ffffff !important; }

.fancybox__container .carousel__button {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(200, 200, 200, 0.5) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transform: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fancybox__container .carousel__button svg {
    stroke: #222222 !important;
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.5 !important;
}

.fancybox__container .carousel__button.is-prev,
.fancybox__container .carousel__button.is-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.fancybox__container .carousel__button.is-prev { left: 16px !important; }
.fancybox__container .carousel__button.is-next { right: 16px !important; }
.fancybox__container .carousel__button.is-close { top: 12px !important; right: 12px !important; }
.fancybox__container .carousel__button.is-close svg { width: 20px !important; height: 20px !important; }

.fancybox__container .fancybox__counter {
    color: #222222 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 40px !important;
    min-width: 60px !important;
    padding: 0 12px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(200, 200, 200, 0.4) !important;
}

.fancybox__container .fancybox__toolbar { padding: 8px 12px !important; background: transparent !important; }
.fancybox__container .fancybox__toolbar__items { gap: 6px !important; }

.fancybox__container .carousel__button:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(150, 150, 150, 0.9) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
}

.fancybox__container .carousel__button.is-prev:hover,
.fancybox__container .carousel__button.is-next:hover {
    transform: translateY(-50%) !important;
}

.fancybox__container .carousel__button[disabled] { opacity: 0.3 !important; cursor: default !important; }
.fancybox__container .carousel__button[disabled]:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(200, 200, 200, 0.5) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
}

.fancybox__container .fancybox__progress { background: #FFB300 !important; }

.fancybox__thumbs .carousel__slide .fancybox__thumb {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent;
    border-radius: 6px;
    border: 2px solid transparent !important;
}

.fancybox__thumbs .carousel__slide .fancybox__thumb::after { display: none !important; }

.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb {
    border-color: #555555 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.fancybox__thumbs .carousel__slide:not(.is-nav-selected):hover .fancybox__thumb {
    border-color: #555555 !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 768px) {
    .fancybox__container .carousel__button { width: 36px !important; height: 36px !important; }
    .fancybox__container .carousel__button svg { width: 18px !important; height: 18px !important; }
    .fancybox__container .carousel__button.is-prev { left: 8px !important; }
    .fancybox__container .carousel__button.is-next { right: 8px !important; }
    .fancybox__container .carousel__button.is-close { top: 8px !important; right: 8px !important; }
    .fancybox__container .fancybox__counter { font-size: 13px !important; line-height: 34px !important; min-width: 50px !important; padding: 0 10px !important; }
    .fancybox__container .fancybox__toolbar__items { gap: 4px !important; }
}

@media (max-width: 480px) {
    .fancybox__container .carousel__button { width: 32px !important; height: 32px !important; }
    .fancybox__container .carousel__button svg { width: 16px !important; height: 16px !important; }
    .fancybox__container .fancybox__counter { font-size: 12px !important; line-height: 30px !important; min-width: 40px !important; padding: 0 8px !important; }
    .fancybox__container .fancybox__toolbar__items { gap: 3px !important; }
}

/* ============================================================
   5. МОБИЛЬНОЕ МЕНЮ (аккордеон + цвета на мобиле)
   ============================================================ */

@media (max-width: 576px) {
    /* Аккордеон */
    .catalog li.sm-multilevel .sm-multicolumn,
    .catalog li.sm-multilevel > ul { display: none !important; }

    .catalog li.sm-multilevel.sm-active .sm-multicolumn,
    .catalog li.sm-multilevel.sm-active > ul {
        display: block !important;
        position: static !important;
        border: none !important;
    }

    /* Стрелочка ▼ вместо ▶ */
    .catalog li.sm-multilevel > a:before,
    .catalog li.sm-multilevel > span.parent-link:before { display: none !important; }

    .catalog li.sm-multilevel > a:after,
    .catalog li.sm-multilevel > span.parent-link:after {
        content: " ▼";
        float: right;
        color: #999;
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .catalog li.sm-multilevel.sm-active > a:after,
    .catalog li.sm-multilevel.sm-active > span.parent-link:after { transform: rotate(180deg); }

    /* Цвета верхнего уровня — как на ПК */
    .catalog > li > a,
    .catalog > li > span.parent-link {
        color: #1A3A8A !important;
        background: transparent !important;
    }
    .catalog > li > a:hover,
    .catalog li.sm-active > a {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }

    /* Hover вложенных ссылок — как на ПК */
    .catalog li.sm-multilevel .sm-multicolumn a:hover,
    .catalog li.sm-multilevel > ul a:hover {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }

    /* Группы — как на ПК, без жёлтой полосы */
    .catalog .sm-groupname,
    .catalog span.sm-groupname,
    .catalog .sm-column > a.sm-groupname,
    .catalog .sm-column > span.sm-groupname {
        color: #1a1a1a !important;
        font-size: 13px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        background: transparent !important;
        border-bottom: none !important;
        padding: 10px 0 6px 0.5em;
        margin: 6px 0 4px 0;
        cursor: default;
        display: block;
        font-weight: 700;
    }
    .catalog .sm-groupname:hover,
    .catalog span.sm-groupname:hover {
        background: transparent !important;
        color: #1a1a1a !important;
    }

    /* Позиционирование каталога на мобиле:
       - top: 0, bottom: 0 — растягиваем на весь экран;
       - height: 100vh → 100dvh — три уровня fallback,
         чтобы высота не "дышала" при смене адресного бара Chrome;
       - z-index: 999 — перекрывает контент.
       Мобильный футер имеет z-index: 1000 — он рисуется поверх
       каталога, чтобы крестик в футере (закрытие каталога)
       оставался кликабельным. */
    .catalog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        bottom: 0 !important;
        max-height: none;
    }

    .catalog.sm-activated {
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh;
        height: -webkit-fill-available;
        height: 100dvh;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   6. ПК - ОТКРЫТИЕ ПОДМЕНЮ ПО НАВЕДЕНИЮ
   ============================================================ */

@media (min-width: 577px) {
    /* Раскрытие подменю справа */
    .catalog li:hover > a~* {
        display: block !important;
        position: absolute;
        left: 100%;
        top: -1px;
        width: max-content;
    }
    .catalog li:hover > a~.sm-multicolumn { display: flex !important; }

    /* Раскрытие подменю, если активный пункт — <span> */
    .catalog li:hover > span.parent-link ~ * {
        display: block !important;
        position: absolute;
        left: 100%;
        top: -1px;
        width: max-content;
        background-color: var(--catalog-background-color, #ffffff);
        border: var(--catalog-border, 1px solid #e6eaed);
        box-shadow: var(--catalog-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    }
    .catalog li:hover > span.parent-link ~ .sm-multicolumn { display: flex !important; }

    /* Цвета верхнего уровня — как в разделе 5 (для мобилы) */
    .catalog > li > a { color: #1A3A8A !important; background: transparent !important; }
    .catalog > li > a:hover { background: #f5f4f2 !important; color: #1A3A8A !important; }
    .catalog > li.sm-active > a { background: #f5f4f2 !important; color: #1A3A8A !important; }

    /* Hover вложенных ссылок */
    .catalog li.sm-multilevel .sm-multicolumn a:hover,
    .catalog li.sm-multilevel > ul a:hover {
        background: #f5f4f2 !important;
        color: #1A3A8A !important;
    }

    /* Группы */
    .catalog .sm-groupname {
        color: #1a1a1a !important;
        font-size: 13px !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        background: transparent !important;
        padding-right: 1.2em;
    }
    .catalog .sm-groupname:hover { background: transparent !important; color: #1a1a1a !important; }

    /* Стрелочка ▶ — цвет */
    .catalog li.sm-multilevel > a:before,
    .catalog li.sm-multilevel > span.parent-link:before {
        color: #d0d0d0 !important;
        border-top-color: #d0d0d0 !important;
    }
}

/* ============================================================
   7. МОБИЛЬНАЯ ШАПКА
   ============================================================ */

.phone-link,
.phone-link:visited,
.phone-link:hover,
.phone-link:active {
    color: #000000 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

@media (min-width: 577px) {
    .phone-link { pointer-events: none !important; cursor: default !important; }
    .appbar .phone { font-size: 1.4em; }
}

@media (max-width: 576px) {
    /* min-height body — три уровня fallback:
       1. vh        — старые браузеры (iOS < 15.4, старый Android);
       2. -webkit-fill-available — Safari/Chrome iOS 13–15.3 (трюк Apple);
       3. dvh       — современные (iOS 15.4+, Chrome 108+).

       padding-bottom — компенсация под мобильный футер
       (position: fixed, bottom: 0). Реальная высота футера =
       min-height 3.6em + padding 0.5em + 0.5em + safe-area =
       4.6em + safe-area. Ставим 5.5em — с запасом 0.9em, чтобы
       последний абзац <footer> не упирался в футер впритык. */
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        min-height: 100dvh;
        padding-bottom: calc(3.3em + env(safe-area-inset-bottom, 0)) !important;
    }

    /* Перебиваем оригинальное header.css:
       .appbar { position: fixed; z-index: 998; width: 100%;
                 left: 0; top: 0; }
       Делаем шапку обычным блоком в потоке. */
    .appbar {
        position: static !important;
        z-index: auto !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
    }

    /* Перебиваем оригинальное header.css:
       .appbar > *:nth-child(n+3) { display: none; }
       Возвращаем ТОЛЬКО телефон (.phone — 3-й ребёнок).
       .schedule (4-й) и .icon.counter (5-й) остаются скрытыми —
       как в оригинале партнёрки. Корзина доступна в футере. */
    .appbar .phone {
        display: flex !important;
        font-size: 1.15em;
        padding-right: 0 !important;
        padding-left: 0.3em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: auto;
        text-align: right;
    }
    .phone-link { pointer-events: auto !important; cursor: pointer !important; }

    /* Перебиваем оригинальное catalog.css:
       .catalog-btn { position: fixed; right: 0; top: 0; ... }
       Скрываем гамбургер на мобиле — каталог открывается
       только из мобильного футера (#mf-catalog-btn). */
    .catalog-btn {
        display: none !important;
    }

    /* .menu — сжимаем до нуля, потому что nav.scrollable скрыт */
    .menu {
        margin-top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .menu nav.scrollable {
        display: none !important;
    }
}

/* ============================================================
   8. АКТИВНЫЙ ПУНКТ МЕНЮ (базовые стили ссылок)
   ============================================================ */

.catalog a.current-menu-item,
.catalog a.active-parent,
.catalog span.current-menu-item,
.catalog span.active-parent {
    text-decoration: none !important;
}

nav.scrollable a.current-menu-item {
    text-decoration: none !important;
    color: #1A3A8A !important;
}

footer a.current-menu-item {
    cursor: default !important;
    text-decoration: none !important;
    color: #1A3A8A !important;
    font-weight: 700 !important;
}

/* ============================================================
   9. ПОДСВЕТКА АКТИВНОГО ПУНКТА (для всех разрешений)
   ============================================================ */

/* Верхний уровень каталога — ТОЧНОЕ совпадение */
.catalog > li > a.current-menu-item.parent-link,
.catalog > li > span.parent-link.current-menu-item {
    background: #f5f4f2 !important;
    color: #1A3A8A !important;
}

/* Верхний уровень каталога — РОДИТЕЛЬ активной дочерней */
.catalog > li > a.active-parent.parent-link {
    background: #f5f4f2 !important;
    color: #1A3A8A !important;
}

/* Вложенные ссылки в каталоге */
.catalog li.sm-multilevel .sm-multicolumn a.current-menu-item,
.catalog li.sm-multilevel > ul a.current-menu-item,
.catalog li.sm-multilevel .sm-multicolumn span.current-menu-item,
.catalog li.sm-multilevel > ul span.current-menu-item {
    background: #f5f4f2 !important;
    color: #1A3A8A !important;
}

/* Активная группа (заголовок колонки) */
.catalog .sm-column > a.sm-groupname.current-menu-item,
.catalog .sm-column > span.sm-groupname.current-menu-item,
.catalog span.sm-groupname.current-menu-item {
    background: #f5f4f2 !important;
    color: #1A3A8A !important;
}

/* ============================================================
   10. СТИЛИ ДЛЯ SPAN В КАТАЛОГЕ (когда активный пункт — <span>)
   ============================================================ */

/* Скрываем подэлементы после span.parent-link (аналог a~*) */
.catalog li > span.parent-link ~ * {
    display: none;
    position: absolute;
    background-color: var(--catalog-background-color, #ffffff);
    border: var(--catalog-border, 1px solid #e6eaed);
    box-shadow: var(--catalog-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* Сам span верхнего уровня — как <a> из catalog.css */
.catalog > li > span.parent-link {
    display: block;
    padding-left: 1.2em;
    padding-right: 1.8em;
    line-height: 2.7em;
    color: var(--catalog-color, #333);
    text-decoration: none;
    position: relative;
}

.catalog > li > span.parent-link.current-menu-item {
    background: #f5f4f2 !important;
    color: #1A3A8A !important;
}

/* Стрелочка ▶ для span.parent-link */
.catalog li.sm-multilevel > span.parent-link:before {
    color: var(--catalog-chevron-color, #d0d0d0);
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    position: absolute;
    right: 0;
    content: "";
    line-height: 1em;
    top: 1.2em;
    margin-right: 0.7rem;
    transform: rotate(-90deg);
}

/* Вложенные span (активные ссылки в подменю) */
.catalog li.sm-multilevel .sm-multicolumn span.current-menu-item:not(.sm-groupname),
.catalog li.sm-multilevel > ul span.current-menu-item:not(.sm-groupname) {
    display: block;
    padding-left: 1.2em;
    padding-right: 1.2em;
    line-height: 2.7em;
    color: #1A3A8A !important;
    text-decoration: none;
    background: #f5f4f2 !important;
}

/* Группы span (заголовки колонок) — как <a class="sm-groupname"> из catalog.css */
.catalog .sm-column > span.sm-groupname,
.catalog .sm-column > a.sm-groupname,
.catalog > li > ul > span.sm-groupname,
.catalog > li > ul > a.sm-groupname,
.catalog span.sm-groupname {
    display: block !important;
    font-weight: bold !important;
    font-size: inherit !important;
    line-height: 1.6em !important;
    padding-left: 0.6em !important;
    padding-right: 1.2em !important;
    margin-top: 0.8em !important;
    margin-bottom: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    border-left: none !important;
    border-bottom: none !important;
}

.catalog .sm-column > a.sm-groupname,
.catalog span.sm-groupname:not(.current-menu-item) {
    color: #5f6368 !important;
    background: transparent !important;
}

.catalog .sm-column > a.sm-groupname:hover,
.catalog a.sm-groupname:hover {
    background-color: transparent !important;
    color: #5f6368 !important;
}

/* Мобильная версия span-стилей */
@media (max-width: 576px) {
    /* Раскрытие подменю, если активный пункт — <span> */
    .catalog li.sm-multilevel.sm-active > span.parent-link ~ * {
        display: block !important;
        position: static !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding-left: 1em;
    }

    /* span верхнего уровня */
    .catalog > li > span.parent-link {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.9rem;
        color: #1A3A8A !important;
        display: block;
        padding-left: 1.2em;
        padding-right: 1.8em;
        line-height: 2.7em;
    }

    /* Вложенные span */
    .catalog li.sm-multilevel .sm-multicolumn span.current-menu-item:not(.sm-groupname),
    .catalog li.sm-multilevel > ul span.current-menu-item:not(.sm-groupname) {
        padding-left: 1.8em !important;
        font-size: 0.9rem !important;
        color: #1A3A8A !important;
    }

    /* Группы span — только цвет, отступы/размеры из раздела 5 */
    .catalog .sm-column > span.sm-groupname,
    .catalog .sm-column > a.sm-groupname,
    .catalog span.sm-groupname,
    .catalog .sm-groupname {
        border-bottom: none !important;
        padding: 10px 0 6px 0.5em !important;
        margin: 6px 0 4px 0 !important;
        color: #1a1a1a !important;
        background: transparent !important;
    }

    .catalog .sm-column > span.sm-groupname.current-menu-item,
    .catalog span.sm-groupname.current-menu-item {
        color: #1A3A8A !important;
        background: #f5f4f2 !important;
    }

    .catalog .sm-column > a.sm-groupname:hover,
    .catalog span.sm-groupname:hover,
    .catalog .sm-groupname:hover {
        background: transparent !important;
        color: #1a1a1a !important;
    }
}

/* ============================================================
   11. СТИЛИ ДЛЯ SPAN В NAV (АКТИВНЫЙ ПУНКТ)
   ============================================================ */

/* Активный пункт в nav.scrollable рендерится как <span>,
   потому что ссылка на саму себя не нужна.
   Правила нужны только на ПК — на мобиле nav.scrollable скрыт. */
@media (min-width: 577px) {
    .menu nav > span.current-menu-item {
        font-size: var(--nav-font-size);
        font-weight: var(--nav-font-weight);
        color: #1A3A8A !important;
        text-transform: uppercase;
        text-decoration: none;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        cursor: default;
    }

    /* Оранжевая полоска снизу */
    .menu nav > span.current-menu-item:after,
    .menu nav > a.current-menu-item:after {
        position: absolute;
        bottom: 0;
        content: "";
        display: block;
        height: 3px;
        left: 0 !important;
        width: 100% !important;
        background-color: var(--nav-border-color); /* из _config.css */
    }
}

/* ============================================================
   12. ПЛАВАЮЩИЙ МОБИЛЬНЫЙ ФУТЕР + ИНФО-МЕНЮ
   ============================================================ */

.mobile-footer {
    display: none;
}

.mf-info-menu {
    display: none;
}

@media (max-width: 576px) {
    .mobile-footer {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;   /* было 997 — подняли, чтобы футер был
                            поверх каталога (z-index: 999) */
        background: #ffffff;
        border-top: 1px solid #e6eaed;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
        align-items: center;
        justify-content: space-around;
        padding: 0.5em 0.5em calc(0.5em + env(safe-area-inset-bottom, 0)) 0.5em;
        min-height: 3.6em;
    }

    .mf-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 0.3em 0.2em;
        color: #1A3A8A;
        text-decoration: none;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease;
    }

    .mf-item:active { color: #0F2A6B; }

    .mf-item i {
        font-size: 1.5rem;
        line-height: 1;
        color: #1A3A8A;
    }

    /* Каталог: переключение бургер ↔ крестик */
    .mf-catalog .powericon-close { display: none !important; }
    .mf-catalog.sm-activated .powericon-close { display: inline-block !important; }
    .mf-catalog.sm-activated .powericon-menu { display: none !important; }

    /* Инфо-кнопка: активное состояние */
    .mf-info.is-active i { color: #0F2A6B; }

    /* Счётчик на корзине */
    .mf-cart-count {
        position: absolute;
        top: 0.1em;
        right: 0.5em;
        background: #e74c3c;
        color: #ffffff;
        font-size: 0.6rem;
        padding: 0 0.35em;
        border-radius: 10px;
        min-width: 1em;
        text-align: center;
        line-height: 1.2;
        font-weight: 600;
    }

    /* Инфо-меню: всплывающий список над футером */
    .mf-info-menu {
        display: block;
        position: fixed;
        bottom: calc(4em + env(safe-area-inset-bottom, 0));
        left: 0;
        right: 0;
        z-index: 996;
        background: #ffffff;
        border-top: 1px solid #e6eaed;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
        padding: 0 0 0.5em 0;
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.25s ease-out, opacity 0.2s ease-out;
    }

    .mf-info-menu.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mf-info-menu a {
        display: block;
        padding: 0.9em 1.2em;
        font-size: 1rem;
        color: #1A3A8A;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .mf-info-menu a:last-child {
        border-bottom: none;
    }

    .mf-info-menu a:active {
        background: #f5f4f2;
    }

    /* Активный пункт инфо-меню — span, жирный, серый */
    .mf-info-menu .mf-info-current {
        display: block;
        padding: 0.9em 1.2em;
        font-size: 1rem;
        color: #5f6b7a;
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
        cursor: default;
    }

    .mf-info-menu .mf-info-current:last-child {
        border-bottom: none;
    }
}

/* ============================================================
   13. ПЛИТКИ ГЛАВНОЙ — WebP через <picture>
   ============================================================ */

/* Резервируем место под картинку до её загрузки — устраняет CLS.
   Соотношение сторон 336:252 = 4:3. */
.tiles picture {
    display: block;
    aspect-ratio: 336 / 252;
}

.tiles picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s linear 0s;
}

.tiles picture > img:hover {
    transform: scale(1.02);
    filter: brightness(80%);
    will-change: transform;
}

/* ============================================================
   14. ТОВАРЫ В СПИСКЕ (главная, категории)
   ============================================================
   - .item-wrapper — контейнер карточки (рамка, скругление 12px).
   - Серая рамка — всегда (border).
   - При наведении — только тень (box-shadow), рамка НЕ меняется.
*/

.item-wrapper {
    border: 1px solid #E6EAED;
    border-radius: 12px;
    overflow: hidden;
    padding: 0.75em 1em 1em 1em;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    transition: box-shadow 0.2s ease;
}

.item-wrapper:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Ссылка .item.card — без рамки, только грид */
.item.card {
    border: none;
    border-radius: 0;
    padding: 0;
    flex-grow: 1;
}

/* --- Цена для discontinued-товаров в списке --- */
.item .price .price-out {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--text-light-color, #5f6b7a);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ============================================================
   15. КАРТОЧКА ТОВАРА — доработки
   ============================================================
   Правки к product.css:
   - сетка .controls с областью addInfo-wrapper;
   - три статуса наличия в стиле Google-сниппетов
     (цветная точка + серый текст):
       • В наличии       — зелёная точка
       • Под заказ       — оранжевая точка
       • Нет в наличии   — красная точка (discontinued)
   - строка ПВЗ (#pickup-line).
*/

.product > .controls {
    grid-template-rows: auto auto auto auto auto auto 1fr !important;
    grid-template-areas:
        "brief_desc"
        "brief_sheet"
        "addInfo-wrapper"
        "price-and-buy"
        "city"
        "delivery" !important;
}

.product > .controls > .addInfo-wrapper {
    grid-area: addInfo-wrapper;
}

/* --- Общий стиль всех трёх статусов: серый текст + точка --- */

.product > .controls > .addInfo-wrapper .addInfo_yes,
.product > .controls > .addInfo-wrapper .addInfo_no,
.product > .controls > .addInfo-wrapper .addInfo_discontinued {
    color: var(--text-light-color, #5f6b7a);
    font-weight: 400;
    font-size: 0.9em;
    letter-spacing: 0.01em;
    padding-left: 1.1em;
    position: relative;
    line-height: 1.4;
}

/* Общая точка */
.product > .controls > .addInfo-wrapper .addInfo_yes::before,
.product > .controls > .addInfo-wrapper .addInfo_no::before,
.product > .controls > .addInfo-wrapper .addInfo_discontinued::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
}

/* "В наличии" — зелёная точка */
.product > .controls > .addInfo-wrapper .addInfo_yes::before {
    background-color: var(--stock-in-color, #2a8500);
}

/* "Под заказ" — оранжевая точка */
.product > .controls > .addInfo-wrapper .addInfo_no::before {
    background-color: var(--stock-out-color, #e67e22);
}

/* "Нет в наличии" (discontinued) — красная точка */
.product > .controls > .addInfo-wrapper .addInfo_discontinued::before {
    background-color: var(--stock-discontinued-color, #c41e3a);
}

/* Убираем старые псевдоэлементы (галочка / крестик), если были */
.product > .controls > .addInfo-wrapper .addInfo_yes::after,
.product > .controls > .addInfo-wrapper .addInfo_no::after,
.product > .controls > .addInfo-wrapper .addInfo_discontinued::after {
    display: none;
}

/* Строка ПВЗ */
#pickup-line {
    display: block;
}

#pickup-line #pickup-spinner {
    margin-left: 0.3em;
}

#pickup-info {
    display: inline;
}

#pickup-info .pickup-map-link {
    display: inline;
}

#pickup-info .pickup-suffix {
    display: inline;
    cursor: default;
}

/* ============================================================
   16. МОБИЛЬНАЯ ВЁРСТКА БЛОКА "САМОВЫВОЗ / ДОСТАВКА"
   ============================================================ */

@media (max-width: 768px) {
    .product > .controls > .delivery {
        flex-direction: column;
        gap: 0.5em;
    }

    .product > .controls > .delivery > div {
        display: flex;
        flex-direction: column;
    }

    .product > .controls > .delivery > div > div:first-child {
        font-weight: 700;
        margin-bottom: 0.3em;
        color: var(--text-light-color);
    }
}

/* ============================================================
   17. СЛАЙДЕР + ГАЛЕРЕЯ (карточка товара)
   ============================================================ */

.product > .photo {
    overflow: hidden;
}

.product > .photo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product > .photo li {
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.product > .gallery a {
    display: block;
    width: 60px;
    height: 60px;
    padding: 0.25em;
    box-sizing: border-box;
}

.product > .gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   18. КНОПКИ — Material / Google-style
   ============================================================
   Все переменные — в _config.css (раздел «Кнопки»).
   Приоритет каскада: product.css / pages.css подключаются
   ПОСЛЕ custom.css. Поэтому для кнопок на этих страницах
   используется !important.

   ВАЖНО: класс .btn.grey (серая контурная кнопка) удалён —
   он больше не применяется ни в одном шаблоне. Кнопки в
   product.tmpl теперь всегда янтарные (в наличии и под заказ).
   Для discontinued используется .btn.disabled.
*/

/* --- Базовый .btn: primary --- */
.btn {
    background-color: var(--btn-color);
    color: var(--btn-text-color);
    font-weight: var(--btn-font-weight);
    text-transform: var(--btn-text-transform);
    padding: var(--btn-padding);
    min-height: var(--btn-min-height);
    line-height: 1.2;
    border: var(--btn-border);
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: var(--btn-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    background-color: var(--btn-hover-color);
    color: var(--btn-text-color); /* остаётся тёмным */
    box-shadow: var(--btn-hover-shadow);
}

.btn:active {
    background-color: var(--btn-active-color);
    color: var(--btn-text-color); /* остаётся тёмным */
    box-shadow: none;
}

/* --- Неактивная кнопка "Нет в наличии" (discontinued) ---
   Используется в product.tmpl для товаров, снятых с продажи.
   Серая, некликабельная, без hover-эффектов. */
.btn.disabled {
    background-color: #e0e0e0;
    color: #88919d;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px solid #d0d0d0;
    font-weight: var(--btn-font-weight);
    text-transform: var(--btn-text-transform);
    padding: var(--btn-padding);
    min-height: var(--btn-min-height);
    line-height: 1.2;
    border-radius: var(--btn-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* .btn.yellow (историческое имя primary) — тоже primary-янтарный */
.btn.yellow {
    background-color: var(--btn-color);
    color: var(--btn-text-color);
}

.btn.yellow:hover {
    background-color: var(--btn-hover-color);
    color: var(--btn-text-color); /* остаётся тёмным */
    box-shadow: var(--btn-hover-shadow);
}

.btn.yellow:active {
    background-color: var(--btn-active-color);
    color: var(--btn-text-color); /* остаётся тёмным */
}

/* --- Кнопка "Заказать" на странице услуг ---
   !important — pages.css подключается после custom.css.
   min-width фиксирует ширину, чтобы кнопка не сжималась.
   .price-list-value { flex-shrink: 0 } ниже — родитель не сжимает. */
.page ul.price-list li .price-list-btn {
    background-color: var(--btn-color) !important;
    color: var(--btn-text-color) !important;
    font-weight: var(--btn-font-weight) !important;
    text-transform: var(--btn-text-transform) !important;
    font-size: 0.95em !important;
    padding: 0.55em 1.2em !important;
    min-height: 34px !important;
    min-width: 140px !important;
    line-height: 1.2 !important;
    border: var(--btn-border) !important;
    border-radius: var(--btn-border-radius) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: var(--btn-transition) !important;
    margin-left: 0.5rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.page ul.price-list li .price-list-btn:hover {
    background-color: var(--btn-hover-color) !important;
    color: var(--btn-text-color) !important; /* остаётся тёмным */
    box-shadow: var(--btn-hover-shadow) !important;
}

.page ul.price-list li .price-list-btn:active {
    background-color: var(--btn-active-color) !important;
    color: var(--btn-text-color) !important; /* остаётся тёмным */
}

/* Запрещаем .price-list-value сжиматься. */
.page ul.price-list li .price-list-value {
    flex-shrink: 0 !important;
}

/* --- Focus-visible для всех кнопок (accessibility) --- */
.btn:focus-visible,
.page ul.price-list li .price-list-btn:focus-visible {
    outline: 2px solid var(--btn-color);
    outline-offset: 2px;
}

/* --- Touch-target: на мобиле кнопки выше ---
   .price-list-btn исключён — компактная. */
@media (max-width: 576px) {
    .btn {
        min-height: 44px !important;
    }
}

/* ============================================================
   18.1. КНОПКА "КУПИТЬ" В КАРТОЧКЕ ТОВАРА — фикс 212×40
   ============================================================
   Перебиваем:
   - product.css: .product>.controls>.price-and-buy .buy { width: 40% }
   - common.css:  .btn { width: 100% }

   Фиксированный размер 212×40 — как кнопка "В корзину"
   в списке (раздел 23). Кнопки визуально одинаковые.

   На мобиле (<=576px) — НЕ трогаем. Там кнопка остаётся
   width: 100% (из common.css) и помещается в правую колонку.
   product.css сам перестраивает сетку на мобиле.

   ВАЖНО: селектор .product > .controls > .price-and-buy .buy
   точечный, чтобы не задеть другие .buy на странице.
*/

@media (min-width: 577px) {
    .product > .controls > .price-and-buy .buy {
        width: 212px;
        min-width: 212px;
        flex-shrink: 0;
    }

    .product > .controls > .price-and-buy .buy .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 212px;
        height: 40px;
        min-height: 40px;
        padding: 0 1em;
        box-sizing: border-box;
    }
}

/* ============================================================
   19. ЦЕНЫ — крупнее цифры, знак ₽ меньше
   ============================================================
   ВАЖНО: product.css подключается ПОСЛЕ custom.css в product.tmpl.
   При равной специфичности он побеждает. Поэтому для цен
   в карточке товара и в списке используем !important.

   ВАЖНО: корзина НЕ трогается — это техническая страница,
   цены там стандартные из cart.css.
*/

/* ============================================================
   19.1. ЗНАК ВАЛЮТЫ — общее правило
   ============================================================
   Применяется там, где знак ₽ обёрнут в
   <span class="currency"> — в product.tmpl, _item.tmpl,
   service.htm. В cart.tmpl знак НЕ оборачивается. */

.currency {
    font-size: 0.7em;
    font-weight: 400;
    margin-left: 0;
    letter-spacing: 0;
    white-space: nowrap;
}

/* ============================================================
   19.2. КАРТОЧКА ТОВАРА (страница)
   ============================================================
   Здесь знак ₽ крупнее относительно цифр, чем в других местах:
   0.65em вместо 0.7em. */

.product > .controls > .price-and-buy .price {
    font-size: 2.2em !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.product > .controls > .price-and-buy .price .currency {
    font-size: 0.65em;
}

/* ============================================================
   19.3. КАРТОЧКА В СПИСКЕ (главная, категории)
   ============================================================ */

.item .price {
    font-size: 1.5em !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ============================================================
   19.4. СТРАНИЦА УСЛУГ
   ============================================================ */

.page ul.price-list li .price-list-value {
    font-size: 1.15em;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   20. ФОН ПОД ИЗОБРАЖЕНИЕМ В КАРТОЧКЕ СПИСКА
   ============================================================
   Дополняет раздел 14.

   Цель:
   - серый фон под изображением (квадратная плашка);
   - скругление снизу (верх примыкает к скруглению карточки);
   - картинка по центру, не крупнее 90% плашки;
   - mix-blend-mode: multiply — белый фон картинки исчезает;
   - position: relative — для absolute-индикатора слайдера;
   - touch-action: pan-y — на мобиле горизонтальный свайп для JS.

   Переменная --item-image-bg-color задана в _config.css.
*/

.item .img {
    background-color: var(--item-image-bg-color);
    border-radius: 0 0 12px 12px;
    margin: -0.75em -1em 0.6em -1em;
    padding: 0.75em 1em;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

.item .img img {
    display: block;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    margin: auto;
    mix-blend-mode: multiply;
}

/* ============================================================
   21. СЛАЙДЕР КАРТОЧЕК В СПИСКЕ — индикатор
   ============================================================
   Работает в паре с /theme/js/lib/item-slider/item-slider.js.
   JS на mouseenter строит .js-slider-indicator внутри .item .img,
   меняет src у <img class="js-slider-main">.
   Стили контейнера .item .img — в разделе 20. */

/* Индикатор — полоски сверху блока */
.js-slider-indicator {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    gap: 3px;
    z-index: 2;
    pointer-events: none;
}

.js-slider-indicator span {
    flex: 1;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1px;
}

.js-slider-indicator span.active {
    background: rgba(0, 0, 0, 0.5);
}

/* На мобиле — индикатор компактнее */
@media (max-width: 576px) {
    .js-slider-indicator {
        top: 4px;
        left: 4px;
        right: 4px;
        gap: 2px;
    }
}

/* ============================================================
   22. ХЛЕБНЫЕ КРОШКИ (многоуровневые)
   ============================================================
   Заменяют старые одноуровневые крошки.
   Разметка — <nav><ol class="breadcrumb">...
   База — breadcrumb.css (файл партнёрки, НЕ править).
   Здесь — точечные доработки через custom.css.
*/

.breadcrumb-nav {
    margin: 0;
}

/* Основной .breadcrumb уже стилизован в breadcrumb.css.
   Дорабатываем:
   - flex-wrap: wrap — чтобы длинные цепочки переносились;
   - убираем overflow: hidden (обрезал хвост);
   - для <ol> — list-style: none, padding: 0. */
.breadcrumb {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Последний элемент — серый, без ссылки */
.breadcrumb li:last-child span[aria-current="page"] {
    color: var(--text-light-color, #5f6b7a);
    font-weight: 400;
}

/* Ссылки в крошках */
.breadcrumb a {
    color: var(--breadcrumb-color, #5f6b7a);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--link-color-default, #1A3A8A);
    text-decoration: underline;
}

/* На мобиле — компактнее */
@media (max-width: 576px) {
    .breadcrumb {
        font-size: 0.8em;
    }
    .breadcrumb > li + li:before {
        padding-left: 3px;
        padding-right: 1px;
    }
}

/* ============================================================
   23. ПЕРЕКЛЮЧАТЕЛЬ ВИДА (СПИСОК / ПЛИТКА) + РЕЖИМ "СПИСОК"
   ============================================================
   Дефолт на десктопе — список (view-list ставится в cat.tmpl).
   На < 768px — принудительная плитка без тумблера.
   Колонки на плитке — из дефолтного item.css:
   auto-fill, minmax(200px, max-content).
   На < 576px item.css сам переключает на repeat(2, 1fr).

   Правая колонка: margin-left: auto прижимает блок к правому
   краю. БЕЗ width — иначе margin-left: auto не срабатывает
   (ширина уже определена). Только min-width и max-width.

   Для discontinued (price=0):
   - цена не выводится;
   - доставка/самовывоз не выводятся;
   - кнопка — .btn.disabled "Нет в наличии" (серая, 150px);
   - статус .addInfo_discontinued "Нет в наличии" + красная точка.

   Мини-снайпер (item-slider.js) работает в обоих режимах.
*/

/* --- По умолчанию .item-list-view скрыт (плитка) --- */
.item-list-view {
    display: none;
}

/* --- Переключатель вида --- */
.view-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 1.5em;
    background: #f5f4f2;
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.view-btn:hover { color: #333; }

.view-btn.active {
    background: #ffffff;
    color: #1A3A8A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.view-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* ============================================================
   РЕЖИМ "СПИСОК" (view-list)
   ============================================================ */

.items-list.view-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.items-list.view-list .item-wrapper {
    padding: 0;
}

.items-list.view-list .item-wrapper > .item.card {
    display: none;
}

.items-list.view-list .item-list-view {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

/* Левая часть: серая плашка картинки.
   Прижата к верху/низу/лево рамки. Скругление 12px со всех
   сторон — обрезается overflow: hidden на .item-wrapper.
   РЕЗИНОВАЯ ширина: 25% карточки, min 120px, max 220px. */
.items-list.view-list .item-list-img {
    width: 25%;
    min-width: 120px;
    max-width: 220px;
    flex-shrink: 0;
    background-color: var(--item-image-bg-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1.5em;
    box-sizing: border-box;
    margin: 0;
    touch-action: pan-y;
    overflow: hidden;
}

.items-list.view-list .item-list-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Центральная часть */
.items-list.view-list .item-list-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    min-width: 0;
    padding: 1.5em 1em 1.5em 1.5em;
}

.items-list.view-list .item-list-center .model {
    font-size: 1.3em;
    font-weight: 700;
    color: #1A3A8A;
    text-decoration: none;
    margin: 0;
    line-height: 1.3;
}

.items-list.view-list .item-list-center .desc {
    font-size: 1em;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

.items-list.view-list .item-list-center .chars {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-size: 0.95em;
    color: #666;
    margin-top: 0.5em;
}

/* Правая часть: цена, статус, доставка, кнопка.
   - margin-left: auto прижимает блок к ПРАВОМУ краю.
   - БЕЗ width: 22% — иначе margin-left: auto не сработает.
   - Только min-width и max-width.
   - Внутри — всё по ЛЕВОМУ краю (align-items: flex-start). */
.items-list.view-list .item-list-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 160px;
    max-width: 260px;
    flex-shrink: 0;
    margin-left: auto;
    gap: 0.5em;
    padding: 1em;
}

.items-list.view-list .item-list-right .price {
    font-size: 1.8em;
    font-weight: 700;
    text-align: left;
    margin: 0;
    line-height: 1;
}

.items-list.view-list .item-list-right .price .currency {
    font-size: 0.7em;
    font-weight: 400;
}

/* Статусы наличия (точки — как в разделе 15) */
.items-list.view-list .addInfo-wrapper {
    font-size: 0.95em;
    color: var(--text-light-color, #5f6b7a);
    padding-left: 1.1em;
    position: relative;
    text-align: left;
    line-height: 1.4;
}

.items-list.view-list .addInfo-wrapper .addInfo_yes::before,
.items-list.view-list .addInfo-wrapper .addInfo_no::before,
.items-list.view-list .addInfo-wrapper .addInfo_discontinued::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
}

.items-list.view-list .addInfo-wrapper .addInfo_yes::before {
    background-color: var(--stock-in-color, #2a8500);
}

.items-list.view-list .addInfo-wrapper .addInfo_no::before {
    background-color: var(--stock-out-color, #e67e22);
}

.items-list.view-list .addInfo-wrapper .addInfo_discontinued::before {
    background-color: var(--stock-discontinued-color, #c41e3a);
}

/* Доставка / самовывоз — inline-текст с запятой.
   display: block — чтобы пробел после запятой работал. */
.items-list.view-list .delivery-links {
    font-size: 0.9em;
    color: #888;
    text-align: left;
    margin-top: 0.2em;
}

.items-list.view-list .delivery-links a {
    color: #1A3A8A;
    text-decoration: none;
    border-bottom: 1px dashed #1A3A8A;
}

/* Кнопка "В корзину" в списке — 150×36, слева внизу. */
.items-list.view-list .item-list-right .buy {
    margin-top: auto;
    width: 150px;
}

.items-list.view-list .item-list-right .buy .btn.yellow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 36px;
    min-height: 36px;
    padding: 0 1em;
    box-sizing: border-box;
    text-transform: none;
    border-radius: var(--btn-border-radius);
    background-color: var(--btn-color);
    color: var(--btn-text-color);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    text-decoration: none;
    transition: var(--btn-transition);
}

.items-list.view-list .item-list-right .buy .btn.yellow:hover {
    background-color: var(--btn-hover-color);
    color: var(--btn-text-color);
    box-shadow: var(--btn-hover-shadow);
}

/* Кнопка "Нет в наличии" (discontinued) — серая, 150×36. */
.items-list.view-list .item-list-right .buy .btn.disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 36px;
    min-height: 36px;
    padding: 0 1em;
    box-sizing: border-box;
    text-transform: none;
    border-radius: var(--btn-border-radius);
    background-color: #e0e0e0;
    color: #88919d;
    border: 1px solid #d0d0d0;
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font-size);
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   КОМПАКТНОСТЬ НА СРЕДНИХ ЭКРАНАХ (577-991px)
   Только padding и line-height. font-size НЕ трогаем.
*/
@media (max-width: 991px) {
    .items-list.view-list .item-list-center {
        padding: 1em;
    }
    .items-list.view-list .item-list-center .desc {
        line-height: 1.4;
    }
    .items-list.view-list .item-list-img {
        padding: 1em;
    }
    .items-list.view-list .item-list-right {
        padding: 1em;
    }
}

/* ============================================================
   < 768px: принудительная плитка без тумблера.
   grid-template-columns НЕ задаём — берётся из item.css:
   auto-fill, minmax(200px, max-content) → 2 колонки
   (как на дефектном сайте партнёрки).
   На < 576px item.css сам даёт repeat(2, 1fr).
*/
@media (max-width: 767px) {
    .view-toggle {
        display: none !important;
    }

    .items-list.view-list {
        display: grid;
    }

    .items-list.view-list .item-wrapper {
        padding: 0.75em 1em 1em 1em;
    }

    .items-list.view-list .item-wrapper > .item.card {
        display: grid;
    }

    .items-list.view-list .item-list-view {
        display: none;
    }
}