/* ==========================================================================
   МОБІЛЬНА ВЕРСІЯ — єдина точка правди
   --------------------------------------------------------------------------
   ЄДИНИЙ мобільний брейкпоінт: max-width 820px.

   Історично мобільні правила розкидані по файлах і по брейкпоінтах
   400 / 401–820 / 479 / 820 / 1024 / 1450 / 1460 / 1700, часто дубльовані
   й перебиті !important. Нові мобільні правила пишемо ТІЛЬКИ тут і ТІЛЬКИ
   в цьому брейкпоінті; старі блоки виводимо поетапно.

   Файл підключається ОСТАННІМ у layout.html, тому перебиває попередні
   правила порядком, а не специфічністю. !important стоїть лише там, де
   старе правило теж має !important (позначено коментарем).

   Розміри — з токенів у root.css (--vs-*).
   ========================================================================== */

/* ── Дефолти для десктопа ────────────────────────────────────────────────
   Стоять ПЕРЕД медіа-запитом: інакше при однаковій специфічності правило
   нижче в файлі перебиває мобільне (на цьому вже спіймався один раз). */
.vs-bottom-nav {
    display: none; /* нижня навігація — лише мобілка */
}

.vs-mobile-call {
    display: none; /* кнопка «подзвонити» — лише мобілка */
}

.vs-aside-extra {
    display: none; /* інфо-блок у бічному меню — лише мобілка */
}

.cookie-consent__text-short {
    display: none; /* коротка версія cookie-тексту — лише мобілка */
}

.cta-btn__price,
.cta-btn__label-short,
.vs-cta-spacer {
    display: none; /* ціна, коротка підпис і розпірка — лише мобілка */
}

.pdp-meta,
.pdp-meta__code,
.pdp-trust,
.pdp-topbar,
.pdp-badge,
.pane-heading,
.mini-basket__badge,
.lst-topbar,
.lst-filters,
.bsk-topbar,
.chk-topbar,
.acc-topbar,
.acc-hub,
.acc-orders,
.acc-order-page,
.acc-wishlist,
.acc-promo,
.acc-head,
.auth-head,
.auth-intro,
.auth-tabs,
.auth-extra,
.acc-profile__pass,
.basket-breakdown,
.basket-item-unit,
.basket-min-note,
.stock-mark--low,
.tab-empty,
.cookie-consent__close,
tr[data-vs-spec="fits"],
.checkout-submit__price {
    display: none; /* усе це — лише мобілка; десктоп лишається таким, як був */
}

/* Наявність у карточці: колір був інлайн-стилем у product.html, тепер клас.
   ДЕСКТОП лишається тим самим, що й до редизайну: синій «в наявності»,
   червоний «немає». Зелений/оранжевий із макета — тільки в медіа-запиті. */
.stock-mark {
    margin: 0 0 0 7px;
}

.stock-mark--in {
    color: var(--color-primary);
}

.stock-mark--out {
    color: red;
}

/* Ціна товару: раніше була інлайн-стилями в stock_record.html
   (font-size:30px; color:black; font-weight:bold) — повторюємо тут, щоб
   десктоп виглядав як до заміни інлайнів на клас. */
.pdp-price {
    font-size: 30px;
    font-weight: 700;
    color: #000;
}

/* гілка «податок відомий» мала margin-bottom: 2px !important */
.pdp-price--tight {
    margin-bottom: 2px;
}

/* гілка «податок невідомий» була 16px */
.pdp-price--net {
    font-size: 16px;
}

@media (max-width: 820px) {

    /* --- Шапка: один рядок замість трьох ---------------------------------
       Було: смуга «Інформація / телефони / мова» + рядок з бургером і
       пошуком. Стало: логотип + пошук + телефон + кошик.
       Інфо-посилання, телефони й перемикач мови переїхали в бічне меню
       (smartphone_aside.html), каталог — у нижню навігацію. */
    #top_page {
        display: none !important; /* .navbar має власні display-правила */
    }

    /* Бургер прибираємо, але НЕ .aside-menu-wrapper: у ньому лежить саме
       меню (#aside-menu, position: fixed). Відкриває його тепер таб
       «Каталог» у нижній навігації. */
    .smartphone-menu-container {
        display: none !important; /* перебиває .aside-menu-wrapper{display:block!important} */
    }

    /* Два рядки: [логотип · телефон · кошик] / [пошук на всю ширину].
       Раніше було три рядки (смуга «Інформація», рядок з бургером і пошуком,
       рядок категорій), і логотип на мобілці був прихований зовсім. */
    /* Обгортка шапки мала padding 15px зверху й знизу — 30px порожнього
       місця над контентом. Внутрішні відступи задає .primary_inner. */
    .page_inner_1 {
        padding: 0 !important;
    }

    .primary_inner {
        gap: 8px;
        flex-wrap: wrap !important; /* у блоці ≤820 стоїть nowrap */
        row-gap: 10px;
        padding: 10px 12px !important;
        /* легасі-блок ≤400 задавав height: 56px — другий рядок вилазив
           за межі шапки й накладався на хлібні крошки */
        height: auto;
        min-height: var(--vs-header-h);
    }

    .brand {
        display: block !important; /* перебиває .sidebar,.brand,.navbar-details{display:none!important} */
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand .h1,
    .brand > div {
        margin: 0;
        font-size: 17px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Тагляйн у рядок не влазить — лишаємо його десктопу */
    .brand small {
        display: none;
    }

    .vs-mobile-call {
        order: 2;
    }

    .mini-basket-wrapper {
        order: 3;
    }

    .search_bar {
        order: 4;
        flex: 1 0 100% !important; /* у блоці ≤820 стоїть flex: 1 1 0 */
    }

    /* Кошик у шапці повертаємо (був display:none на мобілці — і його не було
       видно взагалі), а службові кнопки входу/дашборда лишаємо в меню. */
    .mini-basket-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .mini-basket-wrapper .log-in-wrapper {
        display: none !important; /* у старому блоці ≤400 теж !important */
    }

    .mini-basket .mini-basket-button,
    .mini-basket button {
        width: var(--vs-tap) !important;
        height: var(--vs-tap) !important;
        border-radius: var(--vs-radius-sm) !important;
        background: var(--vs-bg) !important;
    }

    .vs-mobile-call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--vs-tap);
        height: var(--vs-tap);
        flex: 0 0 auto;
        border-radius: var(--vs-radius-sm);
        background: var(--vs-bg);
        color: var(--vs-ink);
        text-decoration: none;
    }

    .vs-mobile-call svg {
        width: 22px;
        height: 22px;
    }

    /* Пошук: іконка всередині поля, кнопка submit і так прихована */
    .search_bar .input-group {
        position: relative;
    }

    /* Іконку малюємо псевдоелементом, а не окремим тегом: будь-який зайвий
       елемент усередині .input-group забирає бутстрапівські :first-child /
       :last-child, і на ДЕСКТОПІ поле або кнопка втрачали скруглення. */
    .search_bar .input-group::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 50%;
        width: 18px;
        height: 18px;
        margin-top: -9px;
        background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a939f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
        pointer-events: none;
        z-index: 3;
    }

    .search_bar input {
        height: 48px;
        padding-left: 38px !important; /* старе правило теж з padding */
        border-radius: var(--vs-radius) !important;
    }

    /* --- Нижня навігація -------------------------------------------------- */
    .vs-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001; /* над контентом, під бічним меню (#aside-menu = 1000 + overlay) */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: var(--vs-card);
        border-top: 1px solid var(--vs-line);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 10px rgba(20, 24, 31, 0.05);
    }

    .vs-bottom-nav__item {
        position: relative;
        height: var(--vs-nav-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        background: none;
        padding: 0;
        font: inherit;
        font-size: 10.5px;
        line-height: 1;
        color: var(--vs-muted);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .vs-bottom-nav__item svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        /* 1.7 на щільному екрані читалось тонко й нерівно між іконками */
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .vs-bottom-nav__item.is-active {
        color: var(--color-primary);
        font-weight: 600;
    }

    .vs-bottom-nav__badge {
        position: absolute;
        top: 6px;
        left: 56%;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--color-primary-seconday);
        color: #fff;
        font-size: 10.5px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* Контент не має ховатись під навігацією */
    body {
        padding-bottom: calc(var(--vs-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Cookie-смуга має z-index 9999 і лізе поверх меню — ховаємо її, поки
       меню або шторка відкриті. */
    body.menu-open .cookie-consent,
    body.vs-sheet-open .cookie-consent {
        display: none;
    }

    /* Нижню навігацію при відкритому меню НЕ ховаємо: зникала вся смуга, і
       це читалось як поломка. Просто пускаємо меню й затемнення поверх неї
       — права частина екрана лишається робочою, тап по ній закриває меню. */
    body.menu-open .vs-bottom-nav {
        /* вище за затемнення (900), але нижче за саме меню (1000): смуга
           лишається видимою Й робочою — тап по табу закриває меню й веде
           на сторінку (див. mobile_bottom_nav.html) */
        z-index: 950;
    }

    body.menu-open .overlay {
        z-index: 900;
    }

    body.menu-open .aside-menu,
    body.menu-open #aside-menu,
    body.menu-open .catalogue-menu {
        z-index: 1000;
    }

    /* Закрите меню ховаємо ще й visibility, а не лише зсувом за екран.
       Зсув робить transform із transition: поки стилі не застосувались (або
       сторінка тільки малюється), панель встигала блимнути й «поїхати»
       ліворуч. visibility не анімується, тож блимання немає взагалі. */
    .aside-menu {
        visibility: hidden;
        transition: transform .3s ease-in-out, visibility 0s linear .3s;
    }

    .aside-menu.open {
        visibility: visible;
        transition: transform .3s ease-in-out;
    }

    /* --- Cookie-смуга ----------------------------------------------------
       Було: блок на три рядки тексту з кнопкою, перекривав нижню третину
       екрана й не закривався. Стало: одна смуга над навігацією з хрестиком. */
    .cookie-consent {
        bottom: calc(var(--vs-nav-h) + env(safe-area-inset-bottom, 0px));
        flex-direction: row !important; /* ≤600px розгортав у колонку */
        align-items: center;
        text-align: left !important;
        gap: 10px !important;
        padding: 10px 10px 10px 14px !important;
        font-size: 12.5px;
        box-shadow: 0 -2px 10px rgba(20, 24, 31, 0.08);
    }

    .cookie-consent p {
        flex: 1 1 auto;
        min-width: 0;
    }

    .cookie-consent__text {
        display: none; /* повний текст лишається на десктопі */
    }

    .cookie-consent__text-short {
        display: block;
        line-height: 1.35;
    }

    .cookie-consent__text-short a {
        color: var(--color-primary-hover);
        white-space: nowrap;
    }

    .cookie-consent__btn {
        padding: 0 14px;
        height: var(--vs-tap);
        border-radius: var(--vs-radius-sm);
        flex: 0 0 auto;
    }

    .cookie-consent__close {
        width: var(--vs-tap);
        height: var(--vs-tap);
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: none;
        color: var(--vs-muted);
        cursor: pointer;
    }

    .cookie-consent__close svg {
        width: 18px;
        height: 18px;
    }

    /* --- Бічне меню: інфо-блок, що переїхав із верхньої смуги ------------- */
    .vs-aside-extra {
        display: block;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--vs-line);
    }

    .vs-aside-extra__title {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--vs-muted);
        margin: 0 0 8px;
    }

    .vs-aside-extra__link {
        display: flex;
        align-items: center;
        min-height: var(--vs-tap);
        color: var(--vs-ink);
        text-decoration: none;
        font-size: 15px;
    }

    .vs-aside-extra__phones {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 10px;
    }

    .vs-aside-extra__phone {
        display: flex;
        align-items: center;
        min-height: var(--vs-tap);
        color: var(--color-primary);
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
    }

    .vs-aside-extra__langs {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }

    .vs-aside-extra__lang {
        height: 40px;
        min-width: 72px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius-sm);
        background: none;
        color: var(--vs-ink);
        font-size: 14px;
        cursor: pointer;
    }

    .vs-aside-extra__lang.is-active {
        border-color: var(--color-primary);
        background: var(--vs-accent-soft);
        color: var(--color-primary-hover);
        font-weight: 600;
    }

    /* ======================================================================
       ЕТАП 2 — СТОРІНКА ТОВАРУ
       ====================================================================== */

    /* --- Хлібні крошки в один рядок ---------------------------------------
       Назва товару розганяла їх на три рядки над фото. */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        font-size: 12.5px;
        margin-bottom: 8px;
    }

    .breadcrumb li,
    .breadcrumb .breadcrumb-item {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* обрізаємо тільки останню крошку (назву товару) — інакше «Домашня…/Дет…»
       виглядає як набір огризків */
    .breadcrumb li:last-child,
    .breadcrumb .breadcrumb-item:last-child {
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Панель покупки прилипає до низу ----------------------------------
       Раніше кнопка «Додати в кошик» була ~1500px від верху сторінки: щоб
       купити, треба було прокрутити фото, таблицю характеристик і відгуки.
       Кнопка вже привʼязана до форми через form="add_to_basket_form",
       тому панель просто виводимо з потоку — розмітку дублювати не треба. */
    body.product-page .cta-panel:not(.oos-panel) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002; /* над нижньою навігацією */
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--vs-card);
        border-top: 1px solid var(--vs-line);
        box-shadow: 0 -6px 18px rgba(20, 24, 31, 0.08);
    }

    /* На сторінці товару нижню навігацію ховаємо: її місце займає панель
       покупки, інакше внизу дві смуги одна над одною. */
    body.product-page .vs-bottom-nav {
        display: none;
    }

    body.product-page .cookie-consent {
        bottom: 68px; /* висота панелі покупки */
    }

    /* Запас під зафіксовану панель даємо сторінці, а не розпіркою в потоці:
       розпірка стояла відразу за формою, тобто посеред сторінки, і давала
       78px порожнього місця між характеристиками й відгуками. */
    body.product-page {
        /* Запас потрібен рівно на висоту панелі, інакше останній блок ховається
           під нею. Раніше було 84px, і під футером лишалась біла смуга — тепер
           запас 66px і того ж кольору, що футер, тож візуально смуги немає. */
        padding-bottom: 66px;
        background: #f5f7fa;
    }

    /* У товару, якого немає в наявності, панель покупки не фіксована
       (.oos-panel лишається в потоці) — запас під неї давав порожню смугу
       під футером. */
    body.product-page:not(:has(.cta-panel:not(.oos-panel))) {
        padding-bottom: 0;
    }

    body.product-page .cta-form {
        flex: 0 0 auto;
    }

    .cta-qty {
        display: flex;
        align-items: center;
        height: var(--vs-tap);
        border: 1px solid #dfe4ec;
        border-radius: var(--vs-radius-sm);
        overflow: hidden;
    }

    .cta-qty-btn {
        width: 38px;
        height: var(--vs-tap);
        border: none;
        background: none;
        font-size: 19px;
        line-height: 1;
        color: var(--vs-ink);
    }

    .cta-qty-input {
        width: 34px;
        height: var(--vs-tap);
        border: none;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    .cta-qty-input::-webkit-outer-spin-button,
    .cta-qty-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* примітки під кількістю в фіксованій панелі не поміщаються —
       вони лишаються в основному потоці сторінки лише на десктопі */
    body.product-page .cta-qty-note {
        display: none;
    }

    body.product-page .cta-qty-warning {
        position: absolute;
        bottom: 100%;
        left: 12px;
        right: 12px;
        margin: 0 0 6px;
        padding: 6px 10px;
        border-radius: var(--vs-radius-sm);
        background: #fff4f4;
        color: #d13a3a;
        font-size: 12px;
    }

    .cta-actions {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* product_detail.css задає .cta-actions > * { flex: 1 1 200px; min-width: 215px } —
       через це кошик і вішлист не влазили в один ряд і панель ставала 128px */
    .cta-actions > * {
        flex: 0 0 auto;
        min-width: 0;
    }

    .cta-actions > .cta-btn--orange {
        flex: 1 1 auto;
    }

    .cta-actions .btn-wishlist {
        flex: 0 0 auto;
    }

    /* перебиваємо .cta-actions .btn-wishlist .cta-btn { width: 100% } */
    .cta-actions .btn-wishlist .cta-btn {
        width: var(--vs-tap);
        min-width: var(--vs-tap);
    }

    .cta-btn {
        min-height: var(--vs-tap);
        font-size: 14px;
        border-radius: var(--vs-radius-sm);
    }

    body.product-page .cta-btn--orange {
        padding: 8px 10px;
        gap: 6px;
    }

    body.product-page .cta-qty-btn {
        width: 34px;
    }

    .cta-btn__price {
        display: inline;
        font-weight: 800;
    }

    /* «Додати в кошик · 181,00 ₴» у 390px не влазило й обрізалось —
       на мобілці показуємо коротку підпис */
    .cta-btn--orange .cta-btn__label {
        display: none;
    }

    .cta-btn--orange .cta-btn__label-short {
        display: inline;
    }

    /* Вішлист: був другою кнопкою на всю ширину, до того ж червоною —
       читався як «видалити». Лишаємо тільку сердечко (::before у
       product_detail.css), підпис ховаємо через font-size: 0. */
    .btn-wishlist {
        flex: 0 0 auto;
        width: auto;
    }

    .cta-btn--red {
        width: var(--vs-tap);
        min-width: var(--vs-tap);
        padding: 0;
        font-size: 0;
        background: #fff;
        border-color: #f3c8c8;
        color: #e11d1d;
    }

    .cta-btn--red::before {
        font-size: 20px;
    }

    /* --- Аналоги: горизонтальна лента замість 48 рядків -------------------
       На мобілці li.col-sm-* займали всю ширину, тобто 48 карточок ставали
       48 рядками — вкладка «Аналоги» давала 15 888px з 17 720px висоти
       сторінки. Тепер це один ряд зі скролом. */
    #relatedTabsContent ul.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        margin: 0 !important;
        padding: 2px 0 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #relatedTabsContent ul.row::-webkit-scrollbar {
        display: none;
    }

    #relatedTabsContent ul.row > li {
        flex: 0 0 156px;
        width: 156px;
        max-width: 156px;
        padding: 0 !important;
        scroll-snap-align: start;
    }

    #relatedTabsContent .product-card {
        height: 100%;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        padding: 8px;
    }

    #relatedTabsContent .product-card img {
        width: 100%;
        height: auto;
        max-height: 108px;
        object-fit: contain;
    }

    #relatedTabsContent .product-card .product-title,
    #relatedTabsContent .product-card h3 {
        font-size: 12px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* зірки «(0) відгуків» у ленті аналогів — шум, і забирають висоту */
    #relatedTabsContent .product-card .product-reviews {
        display: none;
    }

    /* картинка в ленті: контейнер .product-image має власну висоту */
    #relatedTabsContent .product-card .product-image {
        height: 104px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #relatedTabsContent .product-card .product-image img {
        max-height: 104px;
    }

    /* ціна й кнопка в 156px не вміщаються в один ряд — ставимо в колонку */
    #relatedTabsContent .product-card .product-price-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    #relatedTabsContent .product-card .product-basket-price-wrapper {
        width: 100%;
        justify-content: stretch;
    }

    #relatedTabsContent .product-card .product-cart-button {
        width: 100%;
        min-height: var(--vs-tap);
    }

    /* --- Таби: один ряд зі скролом замість двох рядів ---------------------- */
    #relatedTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        border-bottom: 1px solid var(--vs-line);
        scrollbar-width: none;
    }

    #relatedTabs::-webkit-scrollbar {
        display: none;
    }

    #relatedTabs .nav-link {
        white-space: nowrap;
        min-height: var(--vs-tap);
        display: flex;
        align-items: center;
        font-size: 13.5px;
    }

    /* --- Галерея: не вище половини екрана --------------------------------- */
    #product_gallery.img-thumbnail {
        max-width: 100%;
    }

    #product_gallery .carousel-inner > .carousel-item > img {
        max-height: 46vh;
    }

    /* заглушка «немає фото» рендериться поза каруселлю — обмежуємо і її */
    .product_col_gallery .img-thumbnail img,
    .product_col_gallery img.img-fluid {
        max-height: 46vh;
        width: auto;
        object-fit: contain;
    }

    /* ======================================================================
       СТОРІНКА ТОВАРУ — ЗА МАКЕТОМ (варіант A · Товар)
       ----------------------------------------------------------------------
       Раніше я лише перекрасив десктопну сторінку. Макет задає іншу
       структуру: власна панель сторінки замість шапки сайту, бейдж
       наявності поверх галереї, ціна з кодом одним рядком, доставка
       відразу під ціною, характеристики рядками без заголовка, аналоги
       окремою секцією замість бутстрап-вкладок.
       ====================================================================== */

    /* --- Панель сторінки замість шапки сайту ------------------------------ */
    body.product-page .breadcrumb,
    body.product-page nav[aria-label="breadcrumb"] {
        display: none !important;
    }

    .pdp-topbar {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 56px;
        padding: 0 6px 0 2px;
        background: var(--vs-card);
        border-bottom: 1px solid var(--vs-line);
    }

    .pdp-topbar__back,
    .pdp-topbar__ico {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--vs-radius);
        color: var(--vs-ink);
        position: relative;
    }

    .pdp-topbar__ico {
        background: #f0f3f8;
    }

    .pdp-topbar__back svg,
    .pdp-topbar__ico svg {
        width: 22px;
        height: 22px;
    }

    .pdp-topbar__where {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        color: var(--vs-muted);
    }

    .pdp-topbar__badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--color-primary-seconday, #ffa500);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    /* --- Тіло: сітка сторінки без бутстрап-відступів ----------------------- */
    .product_page {
        padding: 0 var(--vs-gap);
    }

    .product_page > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .product_page .product_col_gallery,
    .product_page .product_main {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- Галерея: нижча, з бейджем наявності ------------------------------- */
    .product_col_gallery {
        position: relative;
        margin: 0 calc(-1 * var(--vs-gap)) 12px;
    }

    /* Тло дає сама галерея, а не колонка: у колонки лишалась смуга під
       фото (заглушка «немає фото» біла, і різниця висот читалась як брак). */
    #product_gallery {
        background: #f0f3f8;
        overflow: hidden;
    }

    .pdp-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
    }

    .pdp-badge--in {
        background: #17a44b;
    }

    .pdp-badge--low {
        background: #e08000;
    }

    .pdp-badge--out {
        background: #c0392b;
    }

    #product_gallery.img-thumbnail,
    .product_col_gallery .img-thumbnail {
        max-width: 100%;
        margin: 0 !important;
        border: 0;
        background: transparent;
        padding: 0;
    }

    #product_gallery .carousel-inner > .carousel-item > img,
    .product_col_gallery .img-thumbnail img,
    .product_col_gallery img.img-fluid {
        display: block;
        width: 100%;
        height: 300px;
        object-fit: contain;
        margin: 0 auto;
    }

    /* Індикатори — точки, а не мініатюри: у макеті під фото рядок точок. */
    #product_gallery .carousel-indicators {
        position: absolute;
        bottom: 8px;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 6px;
        border: 0;
        background: none;
    }

    #product_gallery .carousel-indicators li {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #c4ccd8;
        overflow: hidden;
        text-indent: -999px;
        border: 0;
    }

    #product_gallery .carousel-indicators li.active {
        width: 18px;
        background: var(--vs-ink);
    }

    #product_gallery .carousel-indicators li img {
        display: none;
    }

    /* стрілки поверх фото на мобілці тільки заважають — жест гортання є */
    #product_gallery .carousel-control-prev,
    #product_gallery .carousel-control-next {
        display: none;
    }

    /* --- Назва, ціна, код -------------------------------------------------- */
    h1.product-title-product-page {
        margin: 0 0 10px;
        font-size: 20px;
        line-height: 1.3;
        font-weight: 700;
    }

    .pdp-price-row {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 12px;
    }

    .pdp-price {
        margin: 0;
        font-size: 30px;
        line-height: 1;
        font-weight: 800;
    }

    .pdp-meta__code {
        display: inline;
        font-size: 13px;
        color: var(--vs-muted);
    }

    /* --- Доставка й оплата під ціною --------------------------------------- */
    .pdp-trust {
        display: grid;
        gap: 10px;
        margin: 0 0 14px;
        padding: 12px 14px;
        list-style: none;
        background: #f0f3f8;
        border-radius: var(--vs-radius);
    }

    .pdp-trust li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13.5px;
        line-height: 1.35;
    }

    .pdp-trust svg {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        color: var(--color-primary);
    }

    /* --- Характеристики: рядки без заголовка -------------------------------- */
    .product_main .sub-header {
        display: none; /* у макеті рядки йдуть без заголовка «Характеристики» */
    }

    .product_main table.table {
        display: block;
        margin: 0 0 6px;
        background: none;
    }

    /* flex-колонка, щоб рядок «Код» можна було підняти нагору через order:
       у макеті коду в характеристиках немає, але його питають найчастіше,
       а в списку атрибутів фіду він губиться десь посередині. */
    .product_main table.table tbody {
        display: flex;
        flex-direction: column;
    }

    .product_main table.table tr[data-vs-spec="code"] {
        order: -1;
    }

    /* у шаблоні рядок безумовний: без коду лишався б «Код» з порожнім
       значенням, ще й першим рядком */
    .product_main table.table tr[data-vs-spec="code"]:has(td:empty) {
        display: none;
    }

    .product_main table.table tr {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 0;
        border-top: 1px solid var(--vs-line);
    }

    /* рамку зверху знімає ВІЗУАЛЬНО перший рядок: після order ним став
       «Код», а перший у розмітці (UPC) з'їхав на друге місце й рамка йому
       знову потрібна */
    .product_main table.table tr:first-child,
    .product_main table.table tr[data-vs-spec="code"] {
        border-top: 0;
    }

    .product_main table.table tbody:has(tr[data-vs-spec="code"] td:not(:empty)) tr:first-child {
        border-top: 1px solid var(--vs-line);
    }

    /* легасі-«зебра» фарбувала кожен другий рядок у #f9f9f9 */
    .product_main table.table tr,
    .product_main table.table tr:nth-child(even),
    .product_main table.table tr:nth-child(odd) {
        background: none;
    }

    /* Наявність показує бейдж на галереї, тож рядок таблиці зайвий. Код
       товару лишаємо: він потрібен і біля ціни, і в характеристиках — саме
       його диктують у телефонній розмові. */
    .product_main table.table tr[data-vs-spec="availability"] {
        display: none;
    }

    /* якщо інших характеристик немає — від блока лишалась порожня рамка */
    .pdp-specs:not(:has(tr:not([data-vs-spec]))) {
        display: none;
    }

    .product_main table.table th,
    .product_main table.table td {
        display: block;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        font-size: 14px;
        line-height: 1.35;
    }

    .product_main table.table th {
        flex: 0 1 auto;
        color: var(--vs-muted);
        font-weight: 400;
    }

    .product_main table.table td {
        flex: 1 1 auto;
        color: var(--vs-ink);
        font-weight: 700;
        text-align: right;
    }

    .product_main table.table td strong {
        color: inherit !important; /* інлайн-стиль у detail.html */
        font-weight: 700;
    }

    /* марки авто — посиланням-акцентом, як у макеті */
    .product_main table.table td.pdp-fits {
        color: var(--color-primary);
        font-weight: 700;
    }

    /* --- Моделі: три на видноті, решта — за розкриттям ---------------------- */
    .pdp-models {
        display: inline;
    }

    .pdp-models > summary {
        display: inline;
        list-style: none;
        cursor: pointer;
    }

    .pdp-models > summary::-webkit-details-marker {
        display: none;
    }

    .pdp-models__more {
        margin-left: 6px;
        padding: 1px 7px;
        border-radius: 999px;
        background: var(--vs-accent-soft);
        color: #0a6cbf;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .pdp-models[open] > summary .pdp-models__head,
    .pdp-models[open] > summary .pdp-models__more {
        display: none; /* розкрили — показуємо повний перелік, а не «ще N» */
    }

    .pdp-models__all {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
        padding-top: 2px;
    }

    .pdp-model {
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--vs-accent-soft);
        color: #0a6cbf;
        font-size: 12.5px;
        font-weight: 600;
    }

    /* --- Опис і відгуки ---------------------------------------------------- */
    .product_main > hr,
    .product_page hr {
        display: none;
    }

    /* кнопка «Написати відгук» стояла посеред характеристик */
    #write_review.btn {
        display: none;
    }

    #product_description h2,
    .product_page section h2 {
        margin: 14px 0 6px;
        font-size: 17px;
        font-weight: 700;
    }

    #product_description .description-content,
    .product_page section p {
        font-size: 14px;
        line-height: 1.5;
    }

    /* --- Аналоги: секція замість вкладок ----------------------------------- */
    #relatedTabs {
        display: none; /* вкладки лишаємо десктопу */
    }

    .pane-heading {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 16px 0 10px;
        font-size: 17px;
        font-weight: 700;
    }

    .pane-heading span {
        font-size: 14px;
        font-weight: 400;
        color: var(--vs-muted);
    }

    /* панелі показуємо як секції: bootstrap лишає їх прихованими без .active */
    #relatedTabsContent > .tab-pane#analogs,
    #relatedTabsContent > .tab-pane#recommended {
        display: block !important; /* .fade:not(.show) має opacity 0 */
        opacity: 1;
    }

    /* застосовність тепер рядок «Підходить до», історія перегляду тут зайва */
    #relatedTabsContent > .tab-pane#applicability,
    #relatedTabsContent > .tab-pane#recent {
        display: none !important;
    }

    /* лента карточок: горизонтальний скрол зі снапом */
    #relatedTabsContent ul.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
        margin: 0 calc(-1 * var(--vs-gap)) !important;
        padding: 2px var(--vs-gap) 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--vs-gap); /* див. коментар у стрічці на головній */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #relatedTabsContent ul.row::-webkit-scrollbar {
        display: none;
    }

    #relatedTabsContent ul.row > li {
        flex: 0 0 152px;
        width: 152px;
        max-width: 152px;
        padding: 0 !important;
        scroll-snap-align: start;
    }

    #relatedTabsContent .product-card {
        height: 100%;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        padding: 8px;
    }

    #relatedTabsContent .product-card .product-image {
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #relatedTabsContent .product-card .product-image img {
        max-height: 88px;
        width: auto;
        object-fit: contain;
    }

    #relatedTabsContent .product-card .product-title,
    #relatedTabsContent .product-card h3 {
        font-size: 12px;
        line-height: 1.3;
        font-weight: 400;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #relatedTabsContent .product-card .product-reviews,
    #relatedTabsContent .product-card .product-in-stock,
    #relatedTabsContent .product-card .product-unavailable {
        display: none; /* у ленті аналогів це шум, місце потрібне ціні */
    }

    #relatedTabsContent .product-card .product-price {
        font-size: 14px;
        font-weight: 700;
    }

    #relatedTabsContent .product-card .product-price-wrap {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    #relatedTabsContent .product-card .product-cart-button {
        width: 36px;
        min-height: 36px;
        padding: 0;
    }

    /* у 36px кнопці підпис «купити» не вміщався і показувався огризком «к.» */
    #relatedTabsContent .product-card .product-cart-button-text {
        display: none;
    }

    /* --- Кнопки в карточці стрічки -----------------------------------------
       Сердечко лишалось у потоці й ставало ПІД кнопкою кошика, наїжджаючи
       на ціну. Робимо як у сітці каталогу: сердечко поверх фото, у рядку з
       ціною — лише кошик. */
    #relatedTabsContent .product-card {
        position: relative;
    }

    #relatedTabsContent .product-card #add_to_wishlist_form,
    #relatedTabsContent .product-card .btn-wishlist {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 3;
        margin: 0;
    }

    #relatedTabsContent .product-card #add_to_wishlist_form button,
    #relatedTabsContent .product-card .btn-wishlist button,
    #relatedTabsContent .product-card .btn-wishlist a {
        width: 32px;
        height: 32px;
        min-height: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--vs-line);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 1px 4px rgba(20, 24, 31, 0.10);
    }

    #relatedTabsContent .product-card #add_to_wishlist_form svg,
    #relatedTabsContent .product-card .btn-wishlist svg {
        width: 18px;
        height: 18px;
        stroke: #e11d1d !important; /* старе правило теж з !important */
    }

    #relatedTabsContent .product-card #add_to_wishlist_form svg[fill="red"],
    #relatedTabsContent .product-card #add_to_wishlist_form svg[fill="red"] path {
        fill: #e11d1d !important;
    }

    /* ціна й кошик — в один рядок, без переносу */
    #relatedTabsContent .product-card .product-price-wrap,
    #relatedTabsContent .product-card .product-footer {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    #relatedTabsContent .product-card .product-basket-price-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
    }

    .tab-empty {
        margin: 0;
        padding: 14px 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
        color: var(--vs-muted);
        font-size: 13px;
        line-height: 1.4;
    }

    /* ======================================================================
       ЕТАП 3 — КАТАЛОГ І ЛІСТИНГ
       ====================================================================== */

    /* --- Шапка лістингу: смуга замість оранжевого блока -------------------
       Було: оранжевий блок на всю ширину з текстом результатів і
       повноширинним селектом сортування — близько 180px над першим товаром. */
    .browse-pre-form {
        flex-direction: row !important; /* у ≤820 стояла колонка */
        align-items: center !important;
        gap: 8px;
        margin: 0 !important;
        /* сам відступ задає блок «ЛІСТИНГ: ВІДСТУПИ ЗА МАКЕТОМ» нижче;
           тут лишається лише скидання легасі-фону й напрямку */
        padding: 12px 0 0 !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0;
    }

    /* обидва блоки мусять стискатись: текст результатів + чип сортування
       в один рядок давали 411px при 366 доступних — сторінка розʼїжджалась */
    .results-info {
        flex: 1 1 auto;
        min-width: 0;
    }

    .results-info p {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        color: var(--vs-muted);
        /* текст результатів — другорядний: він і стискається першим */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .results-info strong {
        color: var(--vs-ink);
    }

    /* чип отримує свою природну ширину (щоб підпис не різався), а
       текст результатів поруч стискається */
    .sort-form {
        width: auto !important;
        flex: 0 0 auto;
        min-width: 0;
        max-width: 62%;
    }

    .sort-form .form-group.row {
        margin: 0;
    }

    .sort-form .col-sm-10 {
        padding: 0;
        width: auto;
        flex: 0 0 auto;
    }

    /* порожня мітка над селектом лише додавала висоту */
    .sort-form .form-label {
        display: none;
    }

    /* Нативний select лишається в DOM (він надсилає форму), але його
       системний дропдаун на телефоні дрібний і відкривається не там, де
       тиснув. Показуємо чип + шторку (mobile_sort.js); поки скрипт не
       виконався, select лишається робочим і видимим. */
    .sort-form select,
    .sort-form .form-control {
        width: auto !important;
        height: var(--vs-tap);
        padding: 0 28px 0 12px;
        border: 1px solid #dfe4ec;
        border-radius: 22px;
        background-color: #fff;
        font-size: 16px; /* 16px — щоб iOS не зумив при фокусі */
    }

    /* !important на всіх розмірах: правило .sort-form select вище має
       width: auto !important, і без цього «схований» select лишався
       203px шириною, розганяючи сторінку до 465px — з ним поїхали за
       екран і нижня навігація, і хрестик cookie-смуги. */
    /* --- Поле-тригер для решти селектів (підбір за авто тощо) ------------ */
    .vs-select-field {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 46px;      /* макет: поле 46px, не 44 */
        padding: 0 10px;
        border: 1px solid #dfe4ec;
        border-radius: 10px;
        background: #fff;
        color: var(--vs-ink);
        font: inherit;
        font-size: 14px;   /* макет: 14px/600, а не 15px */
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }

    .vs-select-field:disabled {
        opacity: 0.55;
    }

    .vs-select-field__label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vs-select-field svg {
        position: static;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: var(--vs-muted);
    }

    /* будь-який «схований» select не має тримати ширину чи висоту:
       .home-picker__field select задає height/width, і без адресного
       правила поле лишалось у потоці й розганяло сторінку */
    select.vs-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0 0 0 0);
        overflow: hidden;
    }

    /* Обидва правила з !important, тому виграє специфічніше:
       .sort-form select (0,2,0) перебивало .vs-visually-hidden (0,1,0) —
       «схований» select лишався 161px і розганяв сторінку до 430px.
       Тому для селекта сортування ховаємо адресно. */
    .sort-form select.vs-visually-hidden,
    .sort-form .form-control.vs-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0 0 0 0);
        overflow: hidden;
    }

    .vs-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 0 !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0 !important;
    }

    /* --- Чип сортування --------------------------------------------------- */
    .vs-sort-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: var(--vs-tap);
        max-width: 100%;
        padding: 0 12px;
        border: 1px solid #dfe4ec;
        border-radius: 22px;
        background: #fff;
        color: var(--vs-ink);
        font: inherit;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
    }

    .vs-sort-chip__label {
        min-width: 0; /* без цього довга підпис лізе під шеврон замість «…» */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* custom_catalogue.css робить .input-icon-wrapper svg абсолютним
       (це стрілка для нативного селекта) — і чіпляє мій шеврон у чипі,
       через що він накладався на підпис. Повертаємо його в потік. */
    .vs-sort-chip svg {
        position: static;
        right: auto;
        top: auto;
        transform: none;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: var(--vs-muted);
    }

    /* обгортка селекта тягнеться на 100% — чипу тоді не хватає ширини */
    .sort-form .input-icon-wrapper {
        width: auto;
        max-width: 100%;
    }

    /* --- Шторка вибору ---------------------------------------------------- */
    .vs-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(20, 24, 31, 0.45);
    }

    /* display: flex нижче перебиває браузерне [hidden]{display:none} —
       без цього закрита шторка лишалась на екрані й перехоплювала кліки */
    .vs-sheet[hidden],
    .vs-sheet-backdrop[hidden] {
        display: none !important;
    }

    .vs-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1201; /* вище нижньої навігації (1001) і панелі покупки (1002) */
        max-height: 72vh;
        display: flex;
        flex-direction: column;
        background: var(--vs-card);
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -10px 30px rgba(20, 24, 31, 0.22);
    }

    .vs-sheet__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px 16px 12px;
        border-bottom: 1px solid var(--vs-line);
    }

    .vs-sheet__grip {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #dfe4ec;
    }

    .vs-sheet__title {
        font-size: 15px;
        font-weight: 700;
    }

    .vs-sheet__list {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vs-sheet__row {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        padding: 0 16px;
        border: none;
        border-bottom: 1px solid #f0f3f8;
        background: none;
        font: inherit;
        font-size: 15px;
        text-align: left;
        color: var(--vs-ink);
    }

    .vs-sheet__row.is-current {
        color: var(--color-primary-hover);
        font-weight: 700;
        background: var(--vs-accent-soft);
    }

    .vs-sheet__row.is-current::after {
        content: "";
        width: 16px;
        height: 9px;
        margin-left: auto;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg) translateY(-3px);
    }

    body.vs-sheet-open {
        overflow: hidden;
    }

    /* --- Сітка: дві колонки на ВСІХ мобільних ширинах --------------------
       Було: 2 колонки лише на 401–820px, а на ≤400px — одна (правило з
       легасі-блоку, який ми на цьому етапі прибрали). */
    .products-grid.grid-net {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        margin-top: 10px;
    }

    .products-grid.grid-net > .col {
        padding: 0 !important;
    }

    /* --- Компактна карточка ----------------------------------------------- */
    .products-grid.grid-net .product-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    .products-grid.grid-net .product-image {
        height: 104px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .products-grid.grid-net .product-image img {
        max-width: 100%;
        max-height: 104px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .products-grid.grid-net .product-title {
        font-size: 12.5px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* «(0) відгуків» стоїть у кожній карточці й майже завжди нульовий —
       на мобілці це шум, який забирає рядок */
    .products-grid.grid-net .product-reviews {
        display: none;
    }

    .products-grid.grid-net .product-in-stock,
    .products-grid.grid-net .product-unavailable {
        font-size: 11.5px;
        font-weight: 600;
    }

    .products-grid.grid-net .product-footer {
        margin-top: auto;
    }

    .products-grid.grid-net .product-price {
        font-size: 16px !important;
        font-weight: 800;
    }

    /* кнопка стає іконкою: підпис «КУПИТИ» в 2 колонки не влазить */
    .products-grid.grid-net .product-cart-button-text {
        display: none;
    }

    .products-grid.grid-net .product-cart-button {
        width: var(--vs-tap);
        height: var(--vs-tap);
        min-width: var(--vs-tap);
        padding: 0;
        border-radius: var(--vs-radius-sm);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Сердечко на фото, кошик поруч із ціною --------------------------
       У 166px карточки ціна + ДВІ кнопки 44px в один ряд не влазять:
       62 (ціна) + 10 (проміжок) + 92 (сердечко+кошик) = 164 при 128
       доступних — тому в авторизованого кнопки зʼїжджали під ціну.
       Тепер поруч із ціною лишається кошик, а сердечко — поверх фото
       (як у більшості магазинів), і рядок не переноситься навіть на
       чотиризначних цінах. */
    .products-grid.grid-net .product-card {
        position: relative;
    }

    .products-grid.grid-net .product-card #add_to_wishlist_form {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 3;
        margin: 0;
    }

    .products-grid.grid-net .product-card #add_to_wishlist_form button {
        width: var(--vs-tap);
        height: var(--vs-tap);
        border-radius: 50%;
        border: 1px solid var(--vs-line);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 1px 4px rgba(20, 24, 31, 0.10);
    }

    .products-grid.grid-net .product-card #add_to_wishlist_form svg {
        width: 22px;
        height: 22px;
        stroke: #e11d1d !important; /* старе правило теж з !important */
    }

    .products-grid.grid-net .product-card #add_to_wishlist_form svg[fill="red"],
    .products-grid.grid-net .product-card #add_to_wishlist_form svg[fill="red"] path {
        fill: #e11d1d !important;
    }

    /* у рядку ціни лишився один кошик — перенос більше не потрібен */
    .products-grid.grid-net .product-price-wrap {
        flex-wrap: nowrap;
    }

    /* --- «Показати більше» замість 390 сторінок пагінації ----------------- */
    .show-more {
        margin: 14px 0 0;
        display: block; /* у custom_catalogue.css це flex з центруванням */
    }

    /* форма всередині — теж на всю ширину, інакше кнопка width:100%
       розтягується лише до 151px (ширини свого контенту) */
    .show-more #load-more-form,
    .show-more form {
        width: 100%;
    }

    .show-more-button {
        width: 100%;
        min-height: 48px;
        border: 1px solid var(--color-primary);
        border-radius: var(--vs-radius);
        background: #fff;
        color: var(--color-primary-hover);
        font-size: 15px;
        font-weight: 700;
    }

    /* нумерація на 390 сторінок на телефоні марна — лишається «Показати більше» */
    nav .pagination {
        display: none;
    }

    /* --- Перенесено з видаленого блоку ≤400px ----------------------------- */
    #messages {
        margin: 0 10px;
    }

    .alertinner a:last-child {
        margin-top: 5px;
    }

    .container.page {
        margin: 0 !important;
    }

    .layout2_subcontent_container {
        margin: 0 !important;
    }

    .page_inner {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* ======================================================================
       ЕТАП 4 — ГОЛОВНА-ЛЕНДІНГ
       ====================================================================== */

    /* 16px, щоб iOS не зумив сторінку при фокусі на селекті */
    .home-picker__field select {
        font-size: 16px;
        height: var(--vs-tap);
    }

    .home-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-picker__head h2,
    .home-section__head h2 {
        font-size: 15px;
    }

    /* стрічка товарів на головній — горизонтальний скрол, а не сітка:
       вертикально головна й так довга */
    .home-strip.products-grid.grid-net {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .home-strip.products-grid.grid-net::-webkit-scrollbar {
        display: none;
    }

    .home-strip.products-grid.grid-net > .col {
        flex: 0 0 166px;
        width: 166px;
        scroll-snap-align: start;
    }

    .carparts__title {
        font-size: 18px;
    }

    /* ======================================================================
       ЕТАП 5 — КОШИК
       ----------------------------------------------------------------------
       Було: рядок товару 192px висоти з картинкою 140px і порожнім місцем
       посередині, кнопки кількості 38px і поле 33px (менше тап-таргета),
       підсумок із кнопкою «Оформити» — десь унизу сторінки після ваучера,
       про мінімальну суму замовлення клієнт дізнавався вже в чекауті.
       ====================================================================== */

    /* заголовок сторінки 28px забирав рядок екрана ні за що */
    .basket-page .page-header h1 {
        margin: 4px 0 8px;
        font-size: 20px;
        line-height: 1.25;
    }

    /* --- Рядок товару: сітка «фото | контент» ----------------------------- */
    .basket-page .current-item {
        display: grid;
        grid-template-columns: 98px minmax(0, 1fr) 44px;
        grid-template-areas:
            "img title remove"
            "img qty   price";
        align-items: center;
        gap: 8px 10px;
        height: auto;
        padding: 10px;
        border-radius: var(--vs-radius);
        border-color: var(--vs-line);
    }

    .basket-page .image-container {
        grid-area: img;
    }

    /* Фото — квадрат на всю висоту рядка (назва 44 + проміжок 8 +
       лічильник 46 = 98), тож його низ збігається з низом лічильника, а
       картинка не притиснута до краю. Підкладки немає — фон білий. */
    .basket-page .image-container {
        width: 98px;
        height: 98px;
        align-self: start;
        border-radius: var(--vs-radius-sm);
        overflow: hidden;
    }

    .basket-page .image-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .basket-page .image-container img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: var(--vs-radius-sm);
    }

    .basket-page .title-stock-container {
        grid-area: title;
        margin-left: 0;
        align-self: start;
    }

    .basket-page .item-title-container {
        width: auto !important; /* легасі-блок ≤480 задає width: 250px */
        max-height: none;
        font-size: 14px;
        line-height: 1.35;
    }

    .basket-page .item-title-container a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .basket-page .item-stock-container p {
        margin: 4px 0 0;
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    /* --- Кількість: тап-таргет 44px --------------------------------------- */
    .basket-page .counter-container {
        grid-area: qty;
        margin-left: 0;
    }

    .basket-page .quantity-counter {
        width: 132px;
        border: 1px solid #dfe4ec;
        border-radius: var(--vs-radius-sm);
        overflow: hidden;
        flex-wrap: nowrap;
    }

    .basket-page .quantity-counter .btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff; /* у макеті степер білий, без сірих клавіш */
        color: var(--vs-ink);
        font-size: 20px;
        line-height: 1;
    }

    /* «−» у макеті приглушений: він рідше потрібен, ніж «+» */
    .basket-page .quantity-counter .js-decrement {
        color: var(--vs-muted);
    }

    .basket-page .quantity-counter .form-control {
        max-width: none !important; /* інлайн style="max-width:3rem" у шаблоні */
        width: 36px;
        height: 44px;
        padding: 0;
        border: 0; /* макет: суцільна рамка навколо, без перегородок усередині */
        border-radius: 0;
        background: #fff;
        font-size: 14px;
        font-weight: 700;
    }

    /* --- Ціна й видалення -------------------------------------------------- */
    .basket-page .basket-item-price-container {
        grid-area: price;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        margin-left: 0 !important; /* інлайн style="margin-left: auto" */
        padding-top: 0;
    }

    .basket-page .basket-item-price {
        color: var(--vs-ink) !important; /* .basket-item-price у custom_basket.css стоїть з !important */
        font-size: 16px;
        font-weight: 800;
    }

    /* у макеті рядок кошика — назва, кількість і сума; наявність тут шум */
    .basket-page .item-stock-container {
        display: none;
    }

    .basket-page .basket-item-unit {
        display: block; /* десктопний дефолт — none */
        margin: 2px 0 0;
        font-size: 11.5px;
        line-height: 1.2;
        white-space: nowrap; /* «180,00 ₴ × 2» переносилось і розтягувало рядок */
        color: var(--vs-muted);
    }

    .basket-page .remove-container {
        grid-area: remove;
        margin-left: 0;
        align-self: start;
        justify-content: flex-end;
    }

    .basket-page .basket-remove-btn {
        width: 44px;
        height: 44px;
    }

    /* --- Підсумок прилипає до низу ---------------------------------------- */
    .basket-page .basket-totals-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        width: auto;
        height: auto; /* блок ≤1024 задає 128px */
        margin: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-top: 1px solid var(--vs-line);
        border-radius: 0;
        background: var(--vs-card);
        box-shadow: 0 -6px 18px rgba(20, 24, 31, 0.08);
    }

    .basket-page .basket-price-summary {
        flex: 0 0 auto;
    }

    .basket-page .basket-price-summary p {
        margin: 0;
        font-size: 21px;
        line-height: 1.1;
    }

    .basket-page .basket-checkout {
        flex: 1 1 auto;
    }

    .basket-page .basket-checkout .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        margin: 0;
        font-size: 15px;
    }

    /* поки не вистачає до мінімальної суми — кнопка неактивна */
    .basket-checkout .btn.is-disabled {
        opacity: .5;
        pointer-events: none;
    }

    /* підказка про мінімум — окремим рядком над кнопкою */
    .basket-page .basket-min-note {
        display: block; /* десктопний дефолт — none */
        flex: 1 0 100%;
        order: -1;
        margin: 0;
        font-size: 12.5px;
        line-height: 1.35;
        color: #a85f00;
    }

    /* Порожній кошик: текст і кнопка стояли впритул до панелі й в один
       рядок. Даємо повітря зверху й ставимо стовпчиком по центру. */
    .basket-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin: 0;
        padding: 48px 12px 24px;
        color: var(--vs-muted);
        font-size: 15px;
        text-align: center;
    }

    .basket-empty .btn {
        min-height: var(--vs-tap);
        display: inline-flex;
        align-items: center;
        padding: 0 18px;
        border-radius: var(--vs-radius-sm);
    }

    /* нижню навігацію тут ховаємо: її місце займає підсумок */
    body.basket-page .vs-bottom-nav {
        display: none;
    }

    /* Запас під зафіксованим підсумком (97px) був 110px — під футером
       лишалась біла смуга 13px. Ставимо стільки ж, скільки займає панель, а
       фон сторінки робимо кольором футера, щоб залишок не читався смугою
       (панель може підрости, коли текст про мінімальну суму переноситься). */
    body.basket-page {
        background: #f5f7fa;
        /* Висота зафіксованого підсумку плаває: рядок про мінімальну суму
           є не завжди, та й текст у ньому може перенестись. Тому запас
           знизу беремо з фактичного заміру (basket_totals.html), а 97px —
           лише фолбек, поки скрипт не відпрацював. */
        padding-bottom: var(--vs-basket-cta-h, 97px);
    }

    body.basket-page .cookie-consent {
        bottom: 78px;
    }

    /* --- Далі по потоку: «Продовжити покупки» й ваучер --------------------- */
    .basket-page .totals-container {
        flex-direction: column;
        margin-top: 12px;
    }

    .basket-page .basket-cnt-shp-container .btn,
    .basket-page #voucher_form_link .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--vs-tap);
    }

    /* ваучер кричав оранжевим сильніше за «Оформити замовлення» */
    .basket-page #voucher_form_link .btn {
        /* .btn-custom у root.css стоїть з !important */
        border: 1px solid var(--vs-line) !important;
        background: var(--vs-card) !important;
        color: var(--vs-ink) !important;
        font-weight: 600;
    }

    .basket-page .voucher-container {
        margin-top: 12px;
        padding: 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    .basket-page .voucher-title {
        margin: 0 0 8px;
        font-size: 15px;
        font-weight: 700;
    }

    /* ======================================================================
       ЕТАП 5 — ЧЕКАУТ
       ----------------------------------------------------------------------
       Чекаут має власний layout і донедавна взагалі не бачив mobile.css.
       Було: поля 40px у дві вузькі колонки (через grid виходило «Прізвище |
       По батькові» і лише потім «Ім'я»), радіокнопки перевізника 13px, оплата
       24px, кнопка «Оформити замовлення» — у кінці сторінки на 2200px.
       ====================================================================== */

    .checkout-page .checkout-content {
        padding: 0 var(--vs-gap);
    }

    .checkout-page .checkout-label {
        margin: 8px 0 12px;
        font-size: 20px;
        font-weight: 700;
    }

    .checkout-page .checkout-tags {
        margin: 16px 0 8px;
        font-size: 16px;
        font-weight: 700;
    }

    /* --- Поля: одна колонка, 48px, шрифт 16px ----------------------------- */
    .checkout-page .form-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .checkout-page .form-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        margin: 0;
    }

    .checkout-page .form-group label {
        font-size: 13px;
        color: var(--vs-muted);
    }

    .checkout-page input[type="text"],
    .checkout-page input[type="tel"],
    .checkout-page input[type="email"],
    .checkout-page .custom-form-control,
    .checkout-page #city-input {
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid #dfe4ec;
        border-radius: var(--vs-radius-sm);
        /* 16px — інакше iOS зумить сторінку при фокусі в поле */
        font-size: 16px;
    }

    .checkout-page .city_selection {
        margin-top: 12px;
    }

    .checkout-page .city_selection label {
        display: block;
        width: 100%;
    }

    /* --- Перевізник і оплата: картки з великим тап-таргетом --------------- */
    .checkout-page .nova_poshta_container,
    .checkout-page .ukr_poshta_container,
    .checkout-page .meest_container,
    .checkout-page .nolozhenniy_platezh,
    .checkout-page .pay-now-method-container {
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    /* обраний варіант видно рамкою, а не лише крапкою в радіо */
    .checkout-page .nova_poshta_container:has(> div input[name="delivery"]:checked),
    .checkout-page .ukr_poshta_container:has(> div input[name="delivery"]:checked),
    .checkout-page .nolozhenniy_platezh:has(input:checked),
    .checkout-page .pay-now-method-container:has(input:checked) {
        border-color: var(--color-primary);
        background: var(--vs-accent-soft);
    }

    /* «Нова Пошта» й «За тарифами перевізника» стояли в один ряд через
       space-between — назва перевізника ламалась на два рядки. Ставимо
       підпис під назвою. */
    .checkout-page .nova_poshta_container > div:first-child,
    .checkout-page .ukr_poshta_container > div:first-child {
        flex-direction: column !important; /* інлайн flex-direction: row */
        align-items: flex-start;
        gap: 2px;
    }

    .checkout-page .nova_poshta_container > div:first-child label,
    .checkout-page .ukr_poshta_container > div:first-child label,
    .checkout-page .nolozhenniy_platezh label,
    .checkout-page .pay-now-method-container label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: var(--vs-tap);
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    .checkout-page .nova_poshta_container > div:first-child > div span,
    .checkout-page .ukr_poshta_container > div:first-child > div span {
        padding-left: 32px; /* під назву, врівень із текстом після радіо */
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    /* Текст «Остаточна вартість доставки розраховується індивідуально…»
       стоїть у кожній картці перевізника І в підсумку — тричі на одному
       екрані. Лишаємо його там, де він доречний: у підсумку. */
    .checkout-page .nova_poshta_container > p,
    .checkout-page .ukr_poshta_container > p {
        display: none;
    }

    /* радіо 13px не натиснеш пальцем */
    .checkout-page input[type="radio"] {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        accent-color: var(--color-primary);
    }

    /* варіанти доставки всередині картки */
    .checkout-page .extended > div > label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: var(--vs-tap);
        margin: 0;
        font-size: 14px;
    }

    .checkout-page .specific_extended {
        padding-left: 32px;
    }

    .checkout-page .specific_extended span {
        display: block;
        margin-bottom: 4px;
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    /* курʼєр: вулиця/будинок/квартира в один ряд не влазять */
    .checkout-page #curier-extended,
    .checkout-page #curier-extended-ukr {
        flex-wrap: wrap;
        gap: 10px !important; /* інлайн-стиль gap: 30px у шаблоні */
    }

    .checkout-page #curier-extended > label {
        flex: 1 1 100%;
    }

    /* --- Список товарів у замовленні -------------------------------------- */
    .checkout-page .basket-items-container img,
    .checkout-page .order-delivery-info img {
        width: 56px;
        height: 56px;
        object-fit: contain;
    }

    /* --- Підсумок і кнопка ------------------------------------------------- */
    .checkout-page .order-info {
        margin-top: 16px;
        padding: 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    .checkout-page .order-info h3 {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 700;
    }

    .checkout-page .checkout-form button[type="submit"] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
        border-radius: 0;
        font-size: 16px;
        font-weight: 700;
        /* Бутстрапівський .btn дає padding 8px зверху й 0 знизу — підпис
           стояв на 8px нижче центру смуги. Відступи робимо симетричними, а
           безпечну зону айфона додаємо до ВИСОТИ, а не до нижнього падінгу,
           інакше текст з'їжджає вгору вже на пристрої з «чубчиком». */
        padding: 0 16px env(safe-area-inset-bottom, 0px);
        min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    .checkout-submit__price {
        display: inline;
    }

    body.checkout-page {
        /* кнопка (56) + запас; безпечна зона айфона тепер частина висоти
           кнопки, тож додаємо її й сюди */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* --- Списки автокомплиту: міста й відділення --------------------------- */
    .checkout-page .city_list,
    .checkout-page .departments-cont {
        width: 100%;
        max-height: 45vh;
        overflow-y: auto;
    }

    .checkout-page .city_results li,
    .checkout-page .dep-list li {
        min-height: var(--vs-tap);
        display: flex;
        align-items: center;
        padding: 8px 10px;
        font-size: 14px;
        line-height: 1.3;
    }

    .checkout-page .np-search-input {
        min-height: 48px;
        font-size: 16px;
    }

    /* ======================================================================
       ЛІСТИНГ — ЗА МАКЕТОМ (варіант A · Каталог)
       ----------------------------------------------------------------------
       Було: шапка сайту з пошуком, хлібні крошки, рядок «Знайдено 22
       результата — показано…» з чипом сортування. У макеті: панель сторінки
       (назад · розділ · N товарів · авто · пошук), рядок фільтрів чипами,
       сортування компактним посиланням.
       ====================================================================== */

    body.listing-page .breadcrumb,
    body.listing-page nav[aria-label="breadcrumb"] {
        display: none !important;
    }

    body.listing-page .page-header {
        display: none; /* назву розділу показує панель сторінки */
    }

    .lst-topbar {
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 56px;
        padding: 6px 6px 6px 2px;
        background: var(--vs-card);
    }

    .lst-topbar__back,
    .lst-topbar__ico {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--vs-radius);
        color: var(--vs-ink);
    }

    .lst-topbar__ico {
        background: #f0f3f8;
    }

    .lst-topbar__back svg,
    .lst-topbar__ico svg {
        width: 22px;
        height: 22px;
    }

    .lst-topbar__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lst-topbar__title {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .lst-topbar__sub {
        font-size: 13px;
        color: var(--vs-muted);
        line-height: 1.3;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* --- Рядок фільтрів ---------------------------------------------------- */
    .lst-filters {
        display: block;
        position: relative;
        /* без свого контексту накладання панель варіантів опинялась ПІД
           сіткою товарів, і сітка перехоплювала тапи по опціях */
        z-index: 40;
        background: var(--vs-card);
        padding: 0 0 10px;
        border-bottom: 1px solid var(--vs-line);
    }

    .lst-filters__row {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 0 var(--vs-gap);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }

    .lst-filters__row::-webkit-scrollbar {
        display: none;
    }

    /* поки панель відкрита, рядок перестає бути горизонтальною стрічкою:
       інакше панель лишається завширшки зі своїм чипом (~230px) і
       з'їжджає вбік разом зі скролом чипів */
    .lst-filters__row:has(.lst-filters__more[open]) {
        flex-wrap: wrap;
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .lst-chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--vs-line);
        border-radius: 999px;
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
    }

    .lst-chip--main {
        border-color: var(--vs-ink);
        background: var(--vs-ink);
        color: #fff;
        list-style: none;
        cursor: pointer;
    }

    .lst-chip--main::-webkit-details-marker {
        display: none;
    }

    .lst-chip--main svg {
        width: 18px;
        height: 18px;
    }

    .lst-chip__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        background: var(--color-primary-seconday, #ffa500);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }

    .lst-chip--car,
    .lst-chip.is-on {
        border-color: var(--color-primary);
        background: var(--vs-accent-soft);
        color: #0a6cbf;
    }

    .lst-chip__x {
        font-size: 17px;
        line-height: 1;
        opacity: .7;
    }

    .lst-filters__more {
        flex: 0 0 auto;
    }

    /* Розкрита панель займає весь рядок, інакше вона була завширшки з чип
       «Фільтри» (~150px) і виглядала обрізаним списком збоку. Решта чипів
       переноситься під неї. */
    .lst-filters__more[open] {
        position: static;
        flex: 1 1 100%;
    }

    /* Панель варіантів стоїть У ПОТОЦІ, а не поверх контенту: коли вона була
       absolute, сітка товарів перехоплювала тапи по опціях (z-index не
       рятував — сітка в сусідньому контексті накладання). Розкриття просто
       розсуває сторінку, як і має поводитись <details>. Вигляд — як у решти
       випадайок: біла картка з рамкою, заокругленням і тінню. */
    .lst-filters__panel {
        display: grid;
        gap: 2px;
        margin-top: 10px;
        padding: 6px 12px 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
        box-shadow: 0 6px 18px rgba(20, 24, 31, 0.08);
    }

    .lst-filters__label {
        margin: 10px 0 2px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--vs-muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .lst-filters__opt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--vs-tap);
        padding: 0 6px;
        border-radius: var(--vs-radius-sm);
        color: var(--vs-ink);
        font-size: 15px;
        text-decoration: none;
    }

    /* роздільник між рядками, але не під останнім і не перед підписом
       «Ціна» — там уже є власний відступ */
    .lst-filters__opt + .lst-filters__opt {
        border-top: 1px solid var(--vs-line);
        border-radius: 0;
    }

    .lst-filters__opt.is-on {
        background: var(--vs-accent-soft);
    }

    .lst-filters__opt.is-on {
        color: var(--color-primary);
        font-weight: 700;
    }

    .lst-filters__reset {
        margin-top: 10px;
        min-height: var(--vs-tap);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--vs-radius-sm);
        background: #f0f3f8;
        color: var(--vs-ink);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    /* --- Сортування компактним посиланням ---------------------------------- */
    .catalogue-browse-content-container form {
        margin: 0;
    }

    .results-info {
        display: none; /* кількість товарів тепер у панелі сторінки */
    }

    /* Сортування — компактний чип у тому ж стилі, що й решта керування в
       рядку фільтрів. Без рамки й фону (як було) кнопка читалась як
       звичайний сірий підпис, і незрозуміло, що по ній можна тапнути. */
    .sort-form .vs-sort-chip {
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--vs-line);
        border-radius: 999px;
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 13.5px;
        font-weight: 600;
    }

    .sort-form .vs-sort-chip svg {
        width: 16px;
        height: 16px;
        color: var(--vs-muted);
    }

    /* --- Карточки: наявність кольором, назва звичайною вагою --------------- */
    .products-grid.grid-net .product-title,
    .products-grid.grid-net .product-title a {
        font-weight: 400;
    }

    .products-grid.grid-net .stock-mark {
        margin-left: 0;
        font-size: 12.5px;
    }

    .catalogue-browse-content-container {
        padding: 0 var(--vs-gap);
    }

    .products-grid.grid-net {
        padding-top: 4px;
    }

    /* ======================================================================
       ГОЛОВНА — ДОВЕДЕННЯ ДО МАКЕТУ (варіант A · Головна)
       ----------------------------------------------------------------------
       Було: підписи «Марка/Модель» над полями (у макеті значення стоїть
       усередині поля), категорії списком у стовпчик без іконок, стрічка
       «Нові надходження». Стало: плитка 3-в-ряд з іконкою й кількістю,
       підбір як у макеті, стрічка «Часто купують».
       ====================================================================== */

    .home-picker__hint {
        margin-left: auto;
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    /* значення показує сам тригер поля — окремий підпис зверху зайвий */
    .home-picker__field > span {
        display: none;
    }

    .home-cats {
        display: grid;
        /* auto-fit від 104px: на 390px виходить три колонки, як у макеті, а
           на 320px — дві, бо в 93px назва «принадлежності,» не влазить
           жодним шрифтом і слово довелось би рвати */
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        /* однакова висота плиток у всіх рядах, а не по найдовшій назві */
        grid-auto-rows: 1fr;
        gap: 8px;
    }

    /* у макеті поля підбору стоять із проміжком 8px */
    .home-picker__form {
        gap: 8px;
    }

    /* поки нічого не обрано — підпис сірий і звичайної ваги, як у макеті */
    .vs-select-field.is-placeholder .vs-select-field__label {
        color: var(--vs-muted);
        font-weight: 400;
    }

    .home-cat {
        display: flex;
        flex-direction: column;
        /* home.css задає ряд із align-items:center — через це іконка й назва
           ставали по центру плитки, а кількість (margin-left:auto) тікала
           вправо. У макеті все притиснуте до лівого краю. */
        align-items: flex-start;
        gap: 6px;
        min-height: 0;
        padding: 10px 8px 12px; /* 8px з боків: назви категорій довгі */
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
        color: var(--vs-ink);
        text-decoration: none;
    }

    .home-cat__ico {
        display: block;
        color: var(--color-primary);
    }

    .home-cat__ico svg {
        width: 22px;
        height: 22px;
    }

    /* Назву НЕ обрізаємо: довгі («Комплектуючі причепів, захист двигуна»)
       ховалися за трикрапкою й категорію було не впізнати. Скільки треба
       рядків — стільки й буде, а плитки в усіх рядах лишаються однакової
       висоти (grid-auto-rows: 1fr вище). */
    .home-cat__name {
        /* Плитка — flex-колонка з align-items: flex-start, тож блок назви
           брав ширину за вмістом і вилазив за плитку на 9px: кома після
           «Автоаксесуари,» лізла на рамку. Прибиваємо до ширини плитки. */
        width: 100%;
        min-width: 0;
        /* break-word, а не anywhere: рвати слово посеред складу («Автоаксе-
           ссуа/ри») можна лише коли інакше не влазить, та й тоді хай це
           робить переносник зі знаком дефіса */
        overflow-wrap: break-word;
        hyphens: auto;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        text-align: left;
    }

    .home-cat__count {
        margin: auto 0 0; /* home.css тягне margin-left: auto */
        font-size: 11px;
        line-height: 1.2;
        color: var(--vs-muted);
    }

    /* --- Стрічка товарів: карточки як у макеті ----------------------------- */
    .home-strip.products-grid.grid-net {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap;
        gap: 10px;
        margin: 0 calc(-1 * var(--vs-gap));
        padding: 2px var(--vs-gap) 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Без цього перша карточка прилипала до самого краю екрана: snap
           рахує позицію від межі контейнера й ігнорує padding — стрічка
           стартувала прокрученою рівно на 12px. */
        scroll-padding-left: var(--vs-gap);
        scrollbar-width: none;
    }

    .home-strip.products-grid.grid-net::-webkit-scrollbar {
        display: none;
    }

    .home-strip.products-grid.grid-net > .col {
        flex: 0 0 168px;
        width: 168px;
        max-width: 168px;
        scroll-snap-align: start;
    }

    .home-strip .product-card .stock-mark {
        display: none; /* у стрічці макет показує лише назву й ціну */
    }

    /* ======================================================================
       КОШИК — ДОВЕДЕННЯ ДО МАКЕТУ (варіант A · Кошик)
       ----------------------------------------------------------------------
       Було: шапка сайту з пошуком, хлібні крошки, «Кошик» заголовком,
       одна сума без пояснення, вибір перевізника — тільки в чекауті.
       Стало: панель сторінки з кількістю товарів, карточка «Доставка» з
       чипами перевізника, розбивка «Товари / Доставка / До оплати», кнопка
       на всю ширину з підписом про мінімум під нею.
       ====================================================================== */

    body.basket-page .breadcrumb,
    body.basket-page nav[aria-label="breadcrumb-custom"],
    body.basket-page .page-header {
        display: none !important;
    }

    .bsk-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 56px;
        padding: 6px 12px 6px 2px;
        background: var(--vs-card);
        border-bottom: 1px solid var(--vs-line);
    }

    .bsk-topbar__back {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--vs-ink);
    }

    .bsk-topbar__back svg {
        width: 22px;
        height: 22px;
    }

    .bsk-topbar__title {
        font-size: 18px;
        font-weight: 700;
    }

    .bsk-topbar__count {
        font-size: 14px;
        color: var(--vs-muted);
    }

    /* --- Розбивка підсумків ------------------------------------------------- */
    .basket-breakdown {
        display: grid;
        gap: 8px;
        margin: 0 0 12px;
        padding: 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    .basket-breakdown__row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        font-size: 14px;
        color: var(--vs-muted);
    }

    .basket-breakdown__row span:last-child {
        color: var(--vs-ink);
        font-weight: 600;
        text-align: right;
    }

    .basket-breakdown__row--total {
        padding-top: 8px;
        border-top: 1px solid var(--vs-line);
        font-size: 16px;
        color: var(--vs-ink);
        font-weight: 700;
    }

    .basket-breakdown__row--total span:last-child {
        font-size: 19px;
        font-weight: 800;
    }

    /* --- Кнопка внизу: на всю ширину, сума вже в розбивці ------------------- */
    .basket-page .basket-totals-container {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .basket-page .basket-price-summary {
        display: none; /* сума стоїть у розбивці «До оплати» */
    }

    /* макет: рядок під кнопкою, сірий і по центру */
    .basket-page .basket-min-note {
        order: 2;
        text-align: center;
        font-size: 12px;
        color: var(--vs-muted);
    }

    /* коли суми НЕ вистачає — це вже попередження, а не довідка */
    .basket-page .basket-min-note:not(.basket-min-note--hint) {
        color: #a85f00;
    }

    .basket-page .basket-checkout .btn {
        min-height: 54px; /* макет */
        border-radius: var(--vs-radius);
        font-size: 16.5px;
        font-weight: 700;
    }

    /* лічильник на кошику в шапці (макет: оранжевий кружок «2») */
    .mini-basket__badge {
        position: absolute;
        top: -4px;
        right: -4px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--color-primary-seconday, #ffa500);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    /* ======================================================================
       МОБІЛЬНІ ДОПОВНЕННЯ ДО ТОГО, ЩО ЛИШИЛОСЬ ДЕСКТОПНИМ
       ----------------------------------------------------------------------
       Розмітку й дефолти ми повернули до стану develop, щоб десктоп не
       змінювався. Те, що макет вимагає для мобілки, вмикаємо тут.
       ====================================================================== */

    /* наявність: зелений/оранжевий і підміна «В наявності» на «Мало» */
    .stock-mark {
        font-weight: 600;
    }

    .stock-mark--in {
        color: #17a44b;
    }

    .stock-mark--low {
        display: block;
        color: #e08000;
    }

    .stock-mark--out {
        color: #c0392b;
    }

    .product-in-stock:has(.stock-mark--low) .stock-mark--in {
        display: none;
    }

    /* «Підходить до» — мобільний рядок характеристик (на десктопі його немає,
       там марки показує вкладка «Застосовність») */
    .product_main table.table tr[data-vs-spec="fits"] {
        display: flex;
    }

    /* ціна за штуку в кошику й підпис у порожній вкладці */
    .basket-page .basket-item-unit,
    .tab-empty {
        display: block;
    }

    /* хрестик у cookie-смузі */
    .cookie-consent__close {
        display: flex;
    }

    /* кнопка оформлення гасне, поки не набрано мінімальну суму */
    .basket-checkout .btn.is-disabled {
        opacity: .5;
        pointer-events: none;
    }

    /* Порядок блоків на сторінці товару: у розмітці відгуки стоять перед
       вкладками (як на десктопі), а на мобілці аналоги мають бути вище. */
    .product_page {
        display: flex;
        flex-direction: column;
    }

    .product_page > .row {
        order: 1;
    }

    /* Опис — прямий нащадок .product_page без свого order, тобто 0: він
       опинявся ВИЩЕ фотографії. Місце опису — під блоком покупки й перед
       аналогами. */
    .product_page > #product_description {
        order: 2;
    }

    .product_page > #relatedTabs,
    .product_page > #relatedTabsContent {
        order: 3;
    }

    .product_page > section {
        order: 4;
    }

    /* ======================================================================
       ЛІСТИНГ: ВІДСТУПИ ЗА МАКЕТОМ
       ----------------------------------------------------------------------
       Бічний відступ накопичувався по ланцюгу вкладених контейнерів:
       .page_inner 12 + .catalogue-browse-content-container 12 + .container 12
       = 36px замість 12. По вертикалі між фільтрами, сортуванням і сіткою
       виходило 18px замість 12.
       ====================================================================== */

    /* Контейнер сторінки — flex із gap: 10px, через це між панеллю, рядком
       фільтрів і контентом стояли зайві 10px, яких у макеті немає. */
    .layout2_subcontent_container {
        gap: 0;
    }

    .catalogue-browse-content-container {
        padding: 0;
    }

    .catalogue-browse-content-container .container {
        max-width: none;
        padding: 0;
    }


    .products-grid.grid-net {
        margin: 12px 0 0;
        padding: 0;
    }

    .products-grid.grid-net .product-card {
        gap: 7px; /* макет: .card gap 7 */
    }

    /* ======================================================================
       СТОРІНКИ З ВЛАСНОЮ ПАНЕЛЛЮ: ЯК ХОВАТИ ШАПКУ САЙТУ
       ----------------------------------------------------------------------
       Товар, лістинг і кошик мають власну панель, тож шапка сайту там зайва.
       Але ховати .page_inner_1 через display:none НЕ МОЖНА: усередині неї
       лежить бічне меню каталогу (#aside-menu), яке відкриває таб «Каталог»
       у нижній навігації. Разом із шапкою зникало й меню — тап по «Каталогу»
       нічого не відкривав. Тому шапку схлопуємо, а обгортку меню лишаємо.
       ====================================================================== */

    body.listing-page .page_inner_1,
    body.product-page .page_inner_1,
    body.basket-page .page_inner_1,
    body.account-profile .page_inner_1 {
        height: 0;
        min-height: 0;
        padding: 0 !important;
        overflow: visible;
    }

    body.listing-page .primary_inner,
    body.product-page .primary_inner,
    body.basket-page .primary_inner {
        height: 0;
        min-height: 0;
        gap: 0;
        row-gap: 0;
        padding: 0 !important;
        overflow: visible;
    }

    /* із шапки лишається тільки обгортка бічного меню — саме меню fixed,
       місця в потоці не займає */
    body.listing-page .primary_inner > *:not(.aside-menu-wrapper),
    body.product-page .primary_inner > *:not(.aside-menu-wrapper),
    body.basket-page .primary_inner > *:not(.aside-menu-wrapper),
    body.account-profile .primary_inner > *:not(.aside-menu-wrapper) {
        display: none !important;
    }

    body.listing-page .aside-menu-wrapper,
    body.product-page .aside-menu-wrapper,
    body.basket-page .aside-menu-wrapper,
    body.account-profile .aside-menu-wrapper {
        display: block !important;
        height: 0;
    }

    /* ======================================================================
       БІЧНЕ МЕНЮ — ЄДИНИЙ ВИГЛЯД
       ----------------------------------------------------------------------
       Було три різні стилі іконок в одному списку: «Каталог» — біла на синій
       кнопці, «Увійти» — в круглій обводці, «Кошик» — червона в сірому
       квадраті; між пунктами стояли <hr>, а між групами зяяли порожні смуги.
       Тепер один ряд 48px: плитка іконки 34px, підпис, шеврон.
       ====================================================================== */

    .aside-menu {
        padding-bottom: 16px;
    }

    /* --- Шапка меню --------------------------------------------------------- */
    .aside-menu .aside-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 56px;
        padding: 0 8px 0 16px;
        border-bottom: 1px solid var(--vs-line);
        background: var(--vs-card);
    }

    .aside-menu .smartphone-brand {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.2px;
    }

    .aside-menu #closeMenu {
        float: none !important; /* інлайн-стиль у шаблоні */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--vs-radius);
        color: var(--vs-ink);
        cursor: pointer;
    }

    .aside-menu #closeMenu svg {
        width: 22px;
        height: 22px;
    }

    /* --- Кнопка «Каталог» --------------------------------------------------- */
    .aside-menu .smartphone-catalogue-btn-container {
        padding: 12px;
    }

    .aside-menu .catalogue-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 48px;
        border: 0;
        border-radius: var(--vs-radius);
        background: var(--color-primary);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
    }

    .aside-menu .catalogue-button svg {
        width: 20px !important;  /* інлайн-стиль 24px у шаблоні */
        height: 20px !important;
        stroke-width: 1.8;
    }

    /* у розмітці іконка стоїть після тексту — ставимо її перед підписом */
    .aside-menu .catalogue-button {
        flex-direction: row-reverse;
    }

    /* --- Рядки меню: іконка-плитка + підпис --------------------------------- */
    .aside-menu .menu-button-acc,
    .aside-menu .menu-button-dash,
    .aside-menu .menu-button-logout,
    .aside-menu .menu-button-acc-2,
    .aside-menu .menu-button-logout-2,
    .aside-menu .menu-button-login,
    .aside-menu .smartphone-basket {
        gap: 12px !important; /* інлайн-стиль gap: 10px */
        min-height: 48px;
        padding: 0 12px;
    }

    .aside-menu .menu-button-acc > button,
    .aside-menu .menu-button-dash > button,
    .aside-menu .menu-button-logout > button,
    .aside-menu .menu-button-acc-2 > button,
    .aside-menu .menu-button-logout-2 > button,
    .aside-menu .menu-button-login > button,
    .aside-menu .smartphone-basket .mini-basket button {
        display: flex !important; /* інлайн-стилі в mini_basket.html */
        align-items: center;
        justify-content: center;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        flex: 0 0 34px;
        border: 0 !important;
        border-radius: 10px !important;
        background: #f0f3f8 !important;
        color: var(--color-primary);
        cursor: pointer;
    }

    .aside-menu .menu-button-acc svg,
    .aside-menu .menu-button-dash svg,
    .aside-menu .menu-button-logout svg,
    .aside-menu .menu-button-acc-2 svg,
    .aside-menu .menu-button-logout-2 svg,
    .aside-menu .menu-button-login svg,
    .aside-menu .smartphone-basket svg {
        width: 20px !important;   /* у шаблоні трапляються інлайн-розміри */
        height: 20px !important;
        stroke-width: 1.8;
    }

    /* один колір для всіх іконок меню: обведені беруть stroke, кошик —
       заливку (він намальований суцільним шляхом, а не контуром) */
    .aside-menu .menu-button-acc svg,
    .aside-menu .menu-button-dash svg,
    .aside-menu .menu-button-logout svg,
    .aside-menu .menu-button-acc-2 svg,
    .aside-menu .menu-button-logout-2 svg,
    .aside-menu .menu-button-login svg {
        stroke: var(--color-primary) !important; /* у шаблоні stroke="currentColor" */
    }

    .aside-menu .smartphone-basket svg path {
        fill: var(--color-primary);
    }

    .aside-menu .menu-button-acc a span,
    .aside-menu .menu-button-dash a span,
    .aside-menu .menu-button-logout a span,
    .aside-menu .menu-button-acc-2 a span,
    .aside-menu .menu-button-logout-2 a span,
    .aside-menu .menu-button-login a span,
    .aside-menu .smartphone-basket a span {
        font-size: 15px !important;  /* інлайн 20px/500 */
        font-weight: 600 !important;
    }

    /* --- Розділювачі: замість <hr> між кожним пунктом ------------------------ */
    .aside-menu .custom-divider {
        display: none;
    }

    .aside-menu .smartphone-mini-basket-wrapper {
        border-top: 1px solid var(--vs-line);
        padding-top: 4px;
    }

    .aside-menu .smartphone-basket {
        border-top: 1px solid var(--vs-line);
        margin-top: 4px;
        padding-top: 4px;
    }

    /* --- Блок «Інформація» --------------------------------------------------- */
    .vs-aside-extra {
        border-top: 1px solid var(--vs-line);
        margin-top: 4px;
        padding: 12px 12px 0;
    }

    .vs-aside-extra__title {
        margin: 0 0 4px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--vs-muted);
    }

    .vs-aside-extra__link {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: var(--vs-ink);
        font-size: 14.5px;
        text-decoration: none;
    }

    .vs-aside-extra__phones {
        display: grid;
        gap: 6px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--vs-line);
    }

    .vs-aside-extra__phone {
        display: flex;
        align-items: center;
        min-height: 40px;
        color: var(--vs-ink);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .vs-aside-extra__langs {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--vs-line);
    }

    .vs-aside-extra__lang {
        flex: 1 1 0;
        min-height: 40px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius-sm);
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 13.5px;
        font-weight: 600;
    }

    .vs-aside-extra__lang.is-active {
        border-color: var(--color-primary);
        background: var(--vs-accent-soft);
        color: #0a6cbf;
    }

    /* ======================================================================
       КАРТОЧКА: КНОПКА КОШИКА ПІД СЕРДЕЧКОМ
       ----------------------------------------------------------------------
       Сердечко стоїть абсолютно за 7px від краю карточки, а кошик сидів у
       .product-footer із власним padding 10px — виходило 19px, і кнопки
       не збігались по правому краю. Прибираємо бічний padding футера:
       відступ карточки (8px) задає єдину межу для обох кнопок.
       ====================================================================== */

    .products-grid.grid-net .product-footer,
    .home-strip .product-footer,
    #relatedTabsContent .product-footer {
        padding-left: 0;
        padding-right: 0;
    }

    /* Назва мала власний margin-left: 8px і починалась на 17px від краю
       карточки, тоді як мітка наявності та ціна — на 9px. Прибираємо: ліву
       межу задає відступ самої карточки. */
    .products-grid.grid-net .product-title,
    .home-strip .product-title,
    #relatedTabsContent .product-title {
        margin-left: 0;
        margin-right: 0;
    }

    /* сердечко — на ту саму вертикаль, що й кошик */
    .products-grid.grid-net .product-card #add_to_wishlist_form,
    .products-grid.grid-net .product-card .btn-wishlist,
    .home-strip .product-card #add_to_wishlist_form,
    .home-strip .product-card .btn-wishlist,
    #relatedTabsContent .product-card #add_to_wishlist_form,
    #relatedTabsContent .product-card .btn-wishlist {
        right: 8px;
        top: 8px;
    }

    /* ======================================================================
       ДРІБНИЦІ СТОРІНКИ ТОВАРУ
       ====================================================================== */

    /* Рядок «Товар знаходиться в списку бажань … Видалити» рендериться
       всередині зафіксованої панелі покупки й ламав її: кнопки стискались,
       текст ліз поверх. У панелі лишається саме сердечко, а прибрати з
       обраного можна на сторінці «Обране». */
    .wishlist-state {
        display: none;
    }

    /* Товар уже в обраному. Сердечко в панелі — це гліф ::before, він завжди
       залитий, тож стан показуємо фоном кнопки: інакше «додати» і «вже
       додано» виглядають однаково. */
    .cta-btn--red.is-in-wishlist {
        background: #e11d1d;
        border-color: #e11d1d;
        color: #fff;
    }

    /* У стрічках аналогів і рекомендованих кошик зупинявся за 38px від краю
       карточки, а сердечко висіло за 8px — кнопки стояли на різних
       вертикалях. Тепер обидві по межі контенту карточки (9px):
       ряд ціни розтягуємо на всю ширину, а обгортку кошика — навпаки,
       по вмісту й притиснуту вправо. */
    #relatedTabsContent .product-card #add_to_wishlist_form,
    #relatedTabsContent .product-card .btn-wishlist {
        top: 8px;
        right: 8px; /* форма ширша за кнопку на 1px — так сердечко стає рівно на 9px */
    }

    #relatedTabsContent .product-card .product-price-wrap {
        width: 100%;
        flex: 1 1 auto;
    }

    #relatedTabsContent .product-card .product-basket-price-wrapper {
        width: auto;
        flex: 0 0 auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    /* Назва займає 1–3 рядки, тому мітка наявності «плавала»: у сусідніх
       карточках «Мало» і «В наявності» стояли на різних рівнях (ціну вже
       тримав margin-top: auto в .product-footer). Тепер донизу притискаємо
       весь хвіст карточки — мітку разом із ціною, і рядки збігаються. */
    .products-grid.grid-net .product-in-stock,
    .home-strip .product-in-stock,
    .products-grid:not(.grid-net) .product-in-stock {
        margin-top: auto;
    }

    /* У картках «Немає в наявності» замість кнопки кошика стоїть перекреслений
       значок заввишки 40px замість 44 — через це мітка й ціна в такій картці
       були на 4px нижче, ніж у сусідніх. Зрівнюємо з кнопкою. */
    .products-grid.grid-net .product-unavailable,
    .products-grid:not(.grid-net) .product-card .product-unavailable {
        width: var(--vs-tap);
        height: var(--vs-tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* інакше вільний простір ділився б між міткою і футером */
    .products-grid.grid-net .product-in-stock ~ .product-footer,
    .home-strip .product-in-stock ~ .product-footer,
    .products-grid:not(.grid-net) .product-in-stock ~ .product-footer {
        margin-top: 0;
    }

    /* ======================================================================
       ЧЕКАУТ: ПАНЕЛЬ СТОРІНКИ, ШИРИНА, КАРТКИ
       ----------------------------------------------------------------------
       Було: угорі логотип VIN.ZP.UA і заголовок по центру (на решті
       сторінок скрізь панель «‹ назва»), а контент з'їдали три вкладені
       відступи — 19.5 (auto-margin) + 12 + 10 + 20, тобто поля починались
       за 63px від краю екрана при ширині 390.
       ====================================================================== */

    .chk-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 56px;
        padding: 6px 12px 6px 2px;
        background: var(--vs-card);
        border-bottom: 1px solid var(--vs-line);
    }

    .chk-topbar__back {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--vs-ink);
    }

    .chk-topbar__back svg {
        width: 22px;
        height: 22px;
    }

    .chk-topbar__title {
        font-size: 18px;
        font-weight: 700;
    }

    /* логотип і заголовок по центру — їх замінила панель */
    .checkout-page .checkout-inner,
    .checkout-page .checkout-label {
        display: none;
    }

    /* --- Ширина: один відступ 12px замість чотирьох вкладених ------------- */
    .checkout-page .checkout-content {
        max-width: 100%; /* checkout_mobile_style.css: 90% */
        margin: 0;
        padding: 12px;
    }

    .checkout-page .checkout-content form {
        padding: 0; /* checkout_mobile_style.css: 10px */
        gap: 12px;
    }

    .checkout-page .contact-info,
    .checkout-page .order-delivery-info {
        padding: 12px;
        margin-bottom: 12px;
        border: 1px solid var(--vs-line); /* синя рамка лишилась від старої верстки */
        border-radius: var(--vs-radius);
    }

    .checkout-page .contact-info h3,
    .checkout-page .order-delivery-info h3 {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 700;
    }

    /* --- Товари в замовленні: рядок як у кошику --------------------------- */
    .checkout-page .basket-items-checkout {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas:
            "img name name"
            "img qty  sum";
        align-items: center;
        gap: 4px 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--vs-line);
    }

    .checkout-page .item-image {
        grid-area: img;
        width: 56px;
        height: 56px;
    }

    .checkout-page .basket-items-checkout .basket-item-name {
        grid-area: name;
        display: block;
        font-size: 13.5px;
        line-height: 1.3;
    }

    .checkout-page .basket-items-checkout .basket-item-name p {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .checkout-page .basket-items-checkout .basket-item-quantity {
        grid-area: qty;
        text-align: left;
    }

    .checkout-page .basket-items-checkout .basket-item-quantity p {
        margin: 0;
        font-size: 12px;
        color: var(--vs-muted);
    }

    .checkout-page .basket-items-checkout .basket-total-price {
        grid-area: sum;
        text-align: right;
    }

    .checkout-page .basket-items-checkout .basket-total-price p {
        margin: 0;
        font-size: 15px;
        font-weight: 800;
    }

    /* сині цифри з легасі-стилю: у рядку має виділятись лише сума */
    .checkout-page .basket-items-checkout .basket-item-quantity span {
        color: inherit;
        font-weight: 400;
    }

    .checkout-page .basket-items-checkout .basket-total-price,
    .checkout-page .basket-items-checkout .basket-total-price span {
        color: var(--vs-ink);
    }

    /* --- Поля й випадайки перевізника ------------------------------------- */
    .checkout-page .specific_extended {
        position: relative; /* якір для випадайки відділень */
    }

    .checkout-page .np_depart_label,
    .checkout-page .np_poshtomat_label,
    .checkout-page .specific_extended > label {
        display: block;
        width: 100%;
    }

    /* поле-«селект»: readonly, відкриває список — показуємо це шевроном */
    .checkout-page #departmentInput,
    .checkout-page #postomatInput,
    .checkout-page #departmentInputUkr {
        width: 100%;
        min-height: 48px;
        padding-right: 36px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a939f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 18px 18px;
        text-overflow: ellipsis;
    }

    /* Випадайка відділень — карткою одразу під полем. Абсолютне
       позиціювання тут не годиться: якір (.specific_extended) починається
       вище поля разом із підписом, і панель накривала саме поле. */
    .checkout-page .departments-cont,
    .checkout-page .poshtomats-cont,
    .checkout-page .departments-cont-ukr {
        margin-top: 6px;
        padding: 8px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
        box-shadow: 0 6px 18px rgba(20, 24, 31, 0.10);
    }

    /* поки список відкритий, поле-тригер ховаємо: у панелі є своє поле
       пошуку з тим самим плейсхолдером, і два однакові поля підряд читались
       як помилка верстки */
    .checkout-page .specific_extended:has(.is-open) > label {
        display: none;
    }

    .checkout-page .np-search-input {
        width: 100%;
    }

    /* checkoutSelections.css малює рамку й тінь на самому СПИСКУ — виходила
       картка в картці, ще й завширшки по контенту (width: max-content) */
    .checkout-page .dep-list,
    .checkout-page .postomat-list,
    .checkout-page .city_results {
        width: 100%;
        max-width: 100%;
        margin: 6px 0 0;
        padding: 0;
        max-height: 40vh;
        overflow-y: auto;
        list-style: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .checkout-page .city_results {
        margin: 0;
    }

    .checkout-page .dep-list li,
    .checkout-page .postomat-list li,
    .checkout-page .city_results li {
        border-bottom: 0;
    }

    .checkout-page .dep-list li,
    .checkout-page .postomat-list li,
    .checkout-page .city_results li {
        border-radius: var(--vs-radius-sm);
    }

    .checkout-page .dep-list li:active,
    .checkout-page .postomat-list li:active,
    .checkout-page .city_results li:active {
        background: var(--vs-bg);
    }

    /* --- Місто: така сама випадайка ---------------------------------------- */
    .checkout-page .city_selection {
        position: relative;
    }

    .checkout-page .city_list {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 30;
        padding: 6px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
        box-shadow: 0 8px 24px rgba(20, 24, 31, 0.12);
    }

    /* ======================================================================
       ЕТАП 6 — КАБІНЕТ (макети AAccount / AOrders / AOrderDetail / AProfile)
       ----------------------------------------------------------------------
       Було: сторінки кабінету — бутстрапівські таблиці на всю ширину плюс
       колонка вкладок збоку; на 390px це нечитабельно. Мобільна розмітка
       додана окремими блоками, десктопні таблиці лишились як були і просто
       ховаються медіа-запитом.
       ====================================================================== */

    /* Сторінка кабінету — суцільне сіре полотно до самого футера. Було:
       .page_inner з білим фоном і padding 6px 12px, тому мій сірий блок
       висів островом — по боках білі смуги, а між ним і футером провал. */
    body.account-profile,
    body.account-profile .layout_page,
    body.account-profile .page_inner,
    body.account-profile .container {
        background: var(--vs-bg);
    }

    body.account-profile .page_inner,
    body.account-profile .container {
        /* !important — бо вище в цьому ж файлі .page_inner має
           padding-top/bottom: 6px !important, а бокові 12px приходять із
           легасі-лейауту */
        padding: 0 !important;
    }

    body.account-profile .layout2_content_container,
    body.account-profile .layout2_subcontent_container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Колонка вкладок і хлібні крихти зайві скрізь у кабінеті */
    body.account-profile .nav-pills,
    body.account-profile .breadcrumb,
    body.account-profile nav[aria-label="breadcrumb"],
    body.account-profile .page-header {
        display: none !important;
    }

    /* А от десктопні таблиці ховаємо ТІЛЬКИ на тих сторінках, де вже є
       мобільна розмітка — інакше сторінка без неї лишається порожньою
       (саме так я поклав «Обране», поки його ще не переробив). Ознака —
       сусідній блок .acc-*. */
    .acc-hub ~ table.table,
    .acc-hub ~ a.btn,
    .acc-hub ~ p,
    .acc-orders ~ table.table,
    .acc-orders ~ h2,
    .acc-orders ~ p,
    .acc-orders ~ .pagination,
    .acc-promo ~ .true-wholesale-container,
    .acc-promo ~ .false-wholesale-container,
    .acc-wishlist ~ form,
    .acc-wishlist ~ table.table,
    .acc-wishlist ~ p,
    .acc-wishlist ~ .pagination,
    .acc-order-page ~ h1,
    .acc-order-page ~ .order-main-data-container,
    .acc-order-page ~ .order-items-list-container,
    .acc-order-page ~ .total-info,
    .acc-order-page ~ .details-btns,
    .acc-order-page ~ .shipping-information,
    .acc-order-page ~ .discount-information {
        display: none !important;
    }

    .acc-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 56px;
        margin: 0 -12px 12px;
        padding: 6px 12px 6px 2px;
        background: var(--vs-card);
        border-bottom: 1px solid var(--vs-line);
    }

    /* Без стрілки «назад» (кабінет) заголовок лишався за 2px від краю:
       лівий відступ панелі розрахований саме на кнопку 44px. */
    .acc-topbar:not(:has(.acc-topbar__back)) {
        padding-left: 12px;
    }

    .acc-topbar__back {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--vs-ink);
    }

    .acc-topbar__back svg {
        width: 22px;
        height: 22px;
    }

    .acc-topbar__title {
        font-size: 18px;
        font-weight: 700;
    }

    .acc-topbar__sub {
        font-size: 14px;
        color: var(--vs-muted);
    }

    .acc-hub,
    .acc-orders,
    .acc-order-page,
    .acc-wishlist,
    .acc-promo {
        display: block;
        /* запас знизу — під зафіксовану навігацію */
        padding: 0 12px 76px;
        background: var(--vs-bg);
    }

    .acc-card {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    /* --- Кабінет: користувач, лічильники, меню ---------------------------- */
    .acc-user {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .acc-user__ava {
        flex: 0 0 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--vs-accent-soft);
        color: #0a6cbf;
        font-size: 16px;
        font-weight: 700;
    }

    .acc-user__info {
        min-width: 0;
        flex: 1 1 auto;
    }

    .acc-user__name {
        font-size: 15px;
        font-weight: 700;
    }

    .acc-user__phone {
        font-size: 13px;
        color: var(--vs-muted);
    }

    .acc-user__edit {
        flex: 0 0 var(--vs-tap);
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--vs-tap);
        height: var(--vs-tap);
        border-radius: var(--vs-radius-sm);
        border: 1px solid var(--vs-line);
        color: var(--vs-ink);
    }

    .acc-user__edit svg {
        width: 20px;
        height: 20px;
    }

    .acc-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .acc-stat {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .acc-stat__num {
        display: block;
        font-size: 22px;
        font-weight: 800;
    }

    .acc-stat__label {
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    .acc-menu {
        padding: 0 12px;
    }

    .acc-menu__row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 52px;
        color: var(--vs-ink);
        text-decoration: none;
        border-top: 1px solid var(--vs-line);
    }

    .acc-menu__row:first-child {
        border-top: 0;
    }

    .acc-menu__name {
        flex: 1 1 auto;
        font-size: 15px;
    }

    .acc-menu__note {
        font-size: 13px;
        color: var(--vs-muted);
    }

    .acc-menu__note--ok {
        color: #1a7f37;
        font-weight: 600;
    }

    .acc-menu__chevron {
        color: var(--vs-muted);
        font-size: 20px;
        line-height: 1;
    }

    .acc-help {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .acc-help__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .acc-help__title {
        font-size: 14px;
        font-weight: 700;
    }

    .acc-help__hours {
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    .acc-help__call {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-height: var(--vs-tap);
        padding: 0 14px;
        border-radius: var(--vs-radius-sm);
        background: var(--vs-accent-soft);
        color: #0a6cbf;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .acc-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--vs-tap);
        color: var(--vs-muted);
        font-size: 14px;
        text-decoration: none;
    }

    /* --- Замовлення: вкладки й карточки ------------------------------------ */
    .acc-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .acc-tabs::-webkit-scrollbar {
        display: none;
    }

    .acc-tab {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--vs-line);
        border-radius: 999px;
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .acc-tab.is-on {
        background: var(--vs-ink);
        border-color: var(--vs-ink);
        color: #fff;
    }

    .acc-tab__count {
        color: inherit;
        opacity: .65;
    }

    .acc-order__head {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .acc-order__num {
        flex: 1 1 auto;
        color: var(--vs-ink);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .acc-chip {
        flex: 0 0 auto;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f0f3f8;
        color: var(--vs-ink);
        font-size: 12.5px;
        font-weight: 600;
    }

    .acc-chip--new {
        background: var(--vs-accent-soft);
        color: #0a6cbf;
    }

    .acc-chip--processing {
        background: #fff3e0;
        color: #a85f00;
    }

    .acc-chip--shipped {
        background: #e7f6ec;
        color: #1a7f37;
    }

    .acc-chip--cancelled {
        background: #f0f3f8;
        color: var(--vs-muted);
    }

    .acc-order__meta {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-top: 8px;
    }

    .acc-order__sum {
        font-size: 18px;
        font-weight: 800;
    }

    .acc-order__date {
        margin-left: auto;
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    .acc-order__ttn {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding: 10px;
        border-radius: var(--vs-radius-sm);
        background: var(--vs-bg);
    }

    .acc-order__ttn-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .acc-order__carrier {
        display: block;
        font-size: 12px;
        color: var(--vs-muted);
    }

    .acc-order__ttn-num {
        font-size: 14px;
        font-weight: 700;
    }

    .acc-order__track {
        flex: 0 0 auto;
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .acc-order__actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }

    .acc-order__actions form {
        flex: 1 1 auto;
    }

    .acc-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--vs-tap);
        padding: 0 14px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius-sm);
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    .acc-order__actions > .acc-btn {
        flex: 1 1 auto;
    }

    .acc-btn--primary {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: #fff;
    }

    .acc-btn--danger {
        border-color: #f3c8c8;
        color: #e11d1d;
    }

    .acc-btn--wide {
        width: 100%;
    }

    .acc-empty {
        color: var(--vs-muted);
        font-size: 14px;
        text-align: center;
    }

    /* --- Деталка замовлення ------------------------------------------------ */
    .acc-odetail__head {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .acc-odetail__head > div:first-child {
        flex: 1 1 auto;
    }

    .acc-odetail__num {
        font-size: 15px;
        font-weight: 700;
    }

    .acc-odetail__date {
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    .acc-step {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 8px 0;
    }

    .acc-step__dot {
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid var(--vs-line);
        background: var(--vs-card);
        transform: translateY(2px);
    }

    .acc-step.is-done .acc-step__dot {
        border-color: #1a7f37;
        background: #1a7f37;
    }

    .acc-step.is-cancelled .acc-step__dot {
        border-color: #e11d1d;
        background: #e11d1d;
    }

    .acc-step__name {
        flex: 1 1 auto;
        font-size: 14px;
        font-weight: 600;
    }

    .acc-step:not(.is-done) .acc-step__name {
        color: var(--vs-muted);
        font-weight: 400;
    }

    .acc-step__when {
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    .acc-ttn__row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .acc-ttn__text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .acc-ttn__carrier {
        font-size: 12px;
        color: var(--vs-muted);
    }

    .acc-ttn__num {
        font-size: 15px;
        font-weight: 700;
    }

    .acc-ttn__copy {
        flex: 0 0 var(--vs-tap);
        width: var(--vs-tap);
        height: var(--vs-tap);
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius-sm);
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 16px;
    }

    .acc-ttn__copy.is-done {
        border-color: #1a7f37;
        color: #1a7f37;
    }

    .acc-ttn__row .acc-btn {
        width: auto;
        flex: 0 0 auto;
    }

    .acc-ttn__status {
        margin-top: 10px;
        padding: 8px 10px;
        border-radius: var(--vs-radius-sm);
        background: var(--vs-bg);
        font-size: 13px;
        color: var(--vs-ink);
    }

    .acc-olines__title,
    .acc-olines + .acc-card .acc-osum__row:first-child {
        font-size: 15px;
        font-weight: 700;
    }

    .acc-olines__title {
        margin-bottom: 8px;
    }

    .acc-oline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 10px 0;
        border-top: 1px solid var(--vs-line);
    }

    .acc-oline__name {
        grid-column: 1;
        font-size: 13.5px;
        line-height: 1.3;
    }

    .acc-oline__name a {
        color: inherit;
        text-decoration: none;
    }

    .acc-oline__meta {
        grid-column: 1;
        font-size: 12px;
        color: var(--vs-muted);
    }

    .acc-oline__sum {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
    }

    .acc-osum__row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        font-size: 13.5px;
    }

    .acc-osum__row > span:first-child {
        color: var(--vs-muted);
        white-space: nowrap;
    }

    .acc-osum__row > span:last-child {
        text-align: right;
    }

    .acc-osum__row--total {
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--vs-line);
        font-size: 16px;
        font-weight: 700;
    }

    .acc-osum__row--total > span:first-child {
        color: var(--vs-ink);
    }

    .acc-osum__row--total > span:last-child {
        font-size: 19px;
        font-weight: 800;
    }

    .acc-order-page__actions {
        display: grid;
        gap: 8px;
    }

    /* --- Обране (макет AWishlist) ------------------------------------------ */
    .acc-wish {
        display: flex;
        gap: 12px;
        padding: 10px;
    }

    .acc-wish__img {
        flex: 0 0 78px;
        width: 78px;
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .acc-wish__img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .acc-wish__body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .acc-wish__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: var(--vs-ink);
        font-size: 13.5px;
        line-height: 1.3;
        text-decoration: none;
    }

    .acc-wish__stock {
        font-size: 11.5px;
        font-weight: 600;
    }

    .acc-wish__stock--in {
        color: #16a34a;
    }

    .acc-wish__stock--out {
        color: #d13a3a;
    }

    .acc-wish__row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
    }

    .acc-wish__price {
        flex: 1 1 auto;
        font-size: 16px;
        font-weight: 800;
    }

    .acc-wish__price.is-muted {
        color: var(--vs-muted); /* макет: у відсутнього товару ціна приглушена */
    }

    .acc-wish__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        height: var(--vs-tap);
        padding: 0 14px;
        border: 1px solid var(--vs-line);
        border-radius: 10px;
        background: var(--vs-card);
        color: var(--vs-ink);
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .acc-wish__btn--buy {
        border-color: #ffa500;
        background: #ffa500;
        color: #fff;
        font-weight: 700;
    }

    .acc-wish__btn svg {
        width: 17px;
        height: 17px;
    }

    .acc-wish__del {
        flex: 0 0 34px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 34px;
        color: #c8d0da;
        text-decoration: none;
    }

    .acc-wish__del svg {
        width: 18px;
        height: 18px;
    }

    /* підказка під списком — пунктиром, як у макеті */
    .acc-wish-hint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        padding: 16px;
        border: 1px dashed #dfe4ec;
        border-radius: var(--vs-radius);
        background: var(--vs-card);
        color: var(--vs-muted);
        font-size: 13.5px;
        line-height: 1.4;
        text-align: center;
    }

    .acc-wish-hint svg {
        width: 22px;
        height: 22px;
    }

    /* --- Оптові ціни (макет APromo) ---------------------------------------- */
    .acc-promo__status {
        margin-bottom: 12px;
        padding: 14px;
        border-radius: var(--vs-radius);
        background: var(--vs-ink);
        color: #fff;
    }

    .acc-promo__status-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .acc-promo__badge {
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffa500;
        color: var(--vs-ink);
        font-size: 18px;
        font-weight: 700;
    }

    .acc-promo__status-title {
        font-size: 15px;
        font-weight: 700;
    }

    .acc-promo__status-note {
        margin-top: 12px;
        font-size: 12.5px;
        line-height: 1.4;
        color: #9aa6b5;
    }

    .acc-promo__title {
        margin-bottom: 10px;
        font-size: 14.5px;
        font-weight: 700;
    }

    .acc-promo__row {
        display: flex;
        gap: 8px;
    }

    .acc-promo__input {
        flex: 1 1 auto;
        min-width: 0;
        height: 50px;
        padding: 0 12px;
        border: 1px solid #dfe4ec;
        border-radius: 11px;
        font-size: 15px;
        letter-spacing: 1px;
    }

    .acc-promo__apply {
        flex: 0 0 auto;
        min-width: 96px;
        height: 50px;
        border: 0;
        border-radius: 11px;
        background: var(--color-primary);
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
    }

    .acc-promo__hint {
        margin-top: 8px;
        font-size: 12.5px;
        color: var(--vs-muted);
    }

    .acc-promo__bullet {
        display: flex;
        gap: 10px;
        padding: 6px 0;
        font-size: 13.5px;
        line-height: 1.35;
    }

    .acc-promo__bullet > span:first-child {
        color: #16a34a;
        font-weight: 700;
    }

    .acc-promo__contact {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .acc-promo__contact-text {
        flex: 1 1 auto;
        font-size: 13.5px;
    }

    .acc-promo__call {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        min-height: var(--vs-tap);
        padding: 0 14px;
        border-radius: var(--vs-radius-sm);
        background: var(--vs-accent-soft);
        color: #0a6cbf;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    /* --- Профіль і зміна пароля -------------------------------------------- */
    .acc-profile {
        display: block;
        padding: 0 12px 12px;
        background: var(--vs-bg);
    }

    .acc-profile #profile_form,
    .acc-profile #change_password_form {
        display: block;
        padding: 12px;
        border: 1px solid var(--vs-line);
        border-radius: var(--vs-radius);
        background: var(--vs-card);
    }

    /* підказки під полями (вимоги до пароля) — дрібним сірим */
    .acc-profile .form-text,
    .acc-profile .helptext,
    .acc-profile ul {
        display: block;
        margin: 6px 0 0;
        padding-left: 18px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--vs-muted);
    }

    .acc-profile .form-text {
        padding-left: 0;
    }

    .acc-profile .error-block {
        display: block;
        margin-top: 4px;
        font-size: 12.5px;
        color: #e11d1d;
    }

    .acc-profile .form-group {
        margin-bottom: 12px;
    }

    .acc-profile label {
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
        color: var(--vs-muted);
    }

    .acc-profile input[type="text"],
    .acc-profile input[type="email"],
    .acc-profile .form-control {
        width: 100%;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid #dfe4ec;
        border-radius: var(--vs-radius-sm);
        font-size: 16px; /* менший розмір iOS зумить при фокусі */
    }

    .acc-profile button[type="submit"] {
        width: 100%;
        min-height: 52px;
        border-radius: var(--vs-radius);
        border-color: #ffa500;
        background: #ffa500; /* як кнопки дії на решті мобільних екранів */
        font-size: 16px;
        font-weight: 700;
    }

    /* У партіалі форми Oscar поруч із кнопкою стоїть «або скасувати» —
       текстові вузли, які нічим не зачепити. Гасимо шрифт усього рядка й
       повертаємо його самій кнопці; назад веде стрілка в панелі.
       Сам рядок притискаємо донизу — у макеті «Зберегти» стоїть смугою
       внизу екрана. */
    .acc-profile form > .form-group:last-child {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        margin: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--vs-card);
        border-top: 1px solid var(--vs-line);
        font-size: 0;
    }

    .acc-profile form > .form-group:last-child button {
        font-size: 16px;
    }

    /* нижню навігацію на цих екранах ховаємо: її місце займає «Зберегти» */
    body.account-profile:has(.acc-profile) .vs-bottom-nav {
        display: none;
    }

    body.account-profile:has(.acc-profile) {
        padding-bottom: 84px;
    }

    /* «Змінити пароль» — над зафіксованою кнопкою збереження */
    .acc-profile__pass {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--vs-tap);
        margin: 12px;
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
    }

    /* ======================================================================
       ВХІД І РЕЄСТРАЦІЯ (макет AAuth)
       ----------------------------------------------------------------------
       Форми ті самі, що й на десктопі — дві колонки .login_form /
       .register_form. На мобілці показуємо одну з них перемикачем, а шапку,
       заголовок, «або», гостьове оформлення й згоду додано окремими
       блоками (на десктопі вони display: none).
       ====================================================================== */

    body.login-page .page_inner_1,
    body.login-page .breadcrumb,
    body.login-page nav[aria-label="breadcrumb"],
    body.login-page .footer-container,
    body.login-page .vs-bottom-nav {
        display: none !important;
    }

    body.login-page .page_inner,
    body.login-page .container {
        padding: 0 !important;
    }

    body.login-page,
    body.login-page .layout_page,
    body.login-page .page_inner {
        background: var(--vs-card);
    }

    .auth-head {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
    }

    .auth-head__close {
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--vs-ink);
    }

    .auth-head__close svg {
        width: 22px;
        height: 22px;
    }

    .auth-head__brand {
        flex: 1 1 auto;
        margin-right: 44px; /* компенсуємо хрестик, щоб логотип був по центру */
        text-align: center;
        font-size: 17px;
        font-weight: 800;
        color: var(--color-primary);
    }

    .auth-head__brand span {
        color: var(--vs-ink);
    }

    .auth-intro {
        display: block;
        padding: 8px 20px 0;
    }

    .auth-intro__title {
        font-size: 22px;
        font-weight: 800;
        line-height: 1.2;
    }

    .auth-intro__sub {
        margin-top: 6px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--vs-muted);
    }

    /* заголовок міняється разом із вкладкою */
    .auth-intro--register,
    .auth-mode-register .auth-intro--login {
        display: none;
    }

    .auth-mode-register .auth-intro--register {
        display: block;
    }

    .auth-tabs {
        display: flex;
        gap: 6px;
        margin: 18px 20px 0;
        padding: 4px;
        border-radius: 11px;
        background: #f0f3f8;
    }

    .auth-tab {
        flex: 1 1 0;
        height: 42px;
        border: 0;
        border-radius: 9px;
        background: none;
        color: #6c757d;
        font-size: 14.5px;
    }

    .auth-tab.is-on {
        background: var(--vs-card);
        color: var(--vs-ink);
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(20, 24, 31, 0.10);
    }

    /* --- Самі форми --------------------------------------------------------- */
    body.login-page .row {
        display: block;
        margin: 0;
    }

    body.login-page .login_form,
    body.login-page .register_form {
        display: none;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    body.login-page .login_form.is-auth-on,
    body.login-page .register_form.is-auth-on {
        display: block;
    }

    body.login-page #login_form,
    body.login-page #register_form {
        margin: 18px 20px 0;
        padding: 0;
        border: 0;
        /* .card.bg-light у бутстрапі стоїть з !important — інакше форма
           лишалась сірою плиткою замість чистого екрана з макета */
        background: none !important;
    }

    /* заголовки «Увійти» / «Реєстрація» всередині форм — їх замінив перемикач */
    body.login-page #login_form > h2,
    body.login-page #register_form > h2 {
        display: none;
    }

    body.login-page .form-group {
        margin-bottom: 14px;
    }

    body.login-page .form-group > div {
        position: relative;
    }

    body.login-page label {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        color: var(--vs-muted);
    }

    body.login-page input[type="text"],
    body.login-page input[type="email"],
    body.login-page input[type="password"],
    body.login-page .form-control {
        width: 100%;
        height: 52px;
        padding: 0 44px 0 12px;
        border: 1px solid #dfe4ec;
        border-radius: 11px;
        font-size: 15px;
    }

    .auth-eye {
        position: absolute;
        right: 0;
        bottom: 0; /* прив'язуємо до поля, а не до верху обгортки з помилками */
        width: 44px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: none;
        color: var(--vs-muted);
    }

    .auth-eye svg {
        width: 20px;
        height: 20px;
    }

    .auth-eye.is-on {
        color: var(--color-primary);
    }

    body.login-page .login_form p {
        margin: -4px 0 0;
    }

    body.login-page .login_form p a,
    body.login-page .login_form p a.custom-link {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--color-primary);
        text-decoration: none;
    }

    body.login-page button[type="submit"] {
        width: 100%;
        height: 54px;
        margin-top: 18px;
        border: 0;
        border-radius: 12px;
        background: #ffa500;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

    body.login-page .form-text,
    body.login-page .helptext,
    body.login-page ul {
        margin: 6px 0 0;
        padding-left: 18px;
        font-size: 12px;
        line-height: 1.35;
        color: var(--vs-muted);
    }

    body.login-page .error-block {
        display: block;
        margin-top: 4px;
        font-size: 12.5px;
        color: #e11d1d;
    }

    /* --- «або», гостьове оформлення, згода --------------------------------- */
    .auth-extra {
        display: block;
        padding: 18px 20px 24px;
    }

    .auth-or {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--vs-muted);
        font-size: 12.5px;
    }

    .auth-or::before,
    .auth-or::after {
        content: "";
        flex: 1 1 auto;
        height: 1px;
        background: #f0f3f8;
    }

    .auth-guest {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 54px;
        margin-top: 18px;
        border: 1px solid #dfe4ec;
        border-radius: 12px;
        color: var(--vs-ink);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .auth-guest svg {
        width: 20px;
        height: 20px;
    }

    .auth-consent {
        margin-top: 18px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--vs-muted);
    }

    .auth-consent a {
        color: var(--color-primary);
    }

    /* ======================================================================
       ГОРИЗОНТАЛЬНИЙ ВИЛІЗ
       ----------------------------------------------------------------------
       На вузьких екранах (320px) сторінку можна було посунути вбік:
       у видачі пошуку колонка .col має width: 94%, і при display: grid
       браузер рахує її від ширини екрана, а не від сітки — виходило 300px
       у контейнері 272px. У обраному не влізала кнопка «Повідомити».
       ====================================================================== */

    .products-grid.grid-shelves {
        grid-template-columns: minmax(0, 1fr);
    }

    .products-grid.grid-shelves .col {
        width: 100%;
        min-width: 0;
    }

    /* кнопка в обраному може стискатись і переноситись під ціну */
    .acc-wish__row {
        flex-wrap: wrap;
    }

    .acc-wish__btn {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* останній рубіж: жоден блок не робить сторінку ширшою за екран */
    html,
    body {
        overflow-x: hidden;
    }

    /* --- Сторінка «Доставка й оплата»: реквізити ---------------------------
       IBAN — 29 символів без пробілів, і клітинка вилазила за екран на
       37px: номер просто обрізався. Дозволяємо переносити довгі значення
       й не даємо другій колонці розпирати таблицю. */
    .requisites-table {
        width: 100%;
        table-layout: fixed;
    }

    .requisites-table td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}