/* ===== Внутренние страницы (каталог, товар, корзина, оформление) =====
   Макета у них нет: шапка лежит поверх контента, как на главной,
   поэтому контент сдвинут под неё и ограничен полями макета (220px). */
.m-page--inner {
    padding: calc(var(--u) * 180) calc(var(--u) * 220) calc(var(--u) * 100);
    min-height: 60vh;
}

.m-page--inner h1 {
    margin: 0 0 calc(var(--u) * 40);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 48);
    font-weight: 800;
    color: var(--c-dark-blue);
}

.m-page--inner .price {
    color: var(--c-dark-blue);
}

.m-page--inner .button,
.m-page--inner button.button {
    border-radius: 999px;
    background: var(--g-orange);
    color: #fff;
}

/* Класс .products в вёрстке — секция главной (flex-колонка с полями),
   а WooCommerce тем же классом размечает сетку товаров и «Похожие товары».
   Колонки WooCommerce раскладывает сам, float'ами. */
.m-page--inner .products {
    display: block;
    padding: 0;
}

/* Кнопка «В корзину» на время запроса */
.js-add-to-cart.is-loading {
    opacity: .6;
    pointer-events: none;
}

@media (max-width: 1279px) {
    .m-page--inner {
        padding: 140px 24px 60px;
    }

    .m-page--inner h1 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .m-page--inner {
        padding: 110px 16px 40px;
    }

    .m-page--inner h1 {
        font-size: 26px;
    }
}

/* ===== Попап «Товар добавлен в корзину» ===== */
.added_to_cart.wc-forward {
    /* Ссылку «Просмотр корзины» под кнопкой заменяет попап */
    display: none !important;
}

.is-popup-open,
.is-popup-open body {
    overflow: hidden;
}

.cart-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cart-popup[hidden] {
    display: none;
}

.cart-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(32, 45, 63, .45);
    opacity: 0;
    transition: opacity .25s;
}

.cart-popup__box {
    position: relative;
    width: calc(var(--u) * 560);
    max-width: 100%;
    padding: calc(var(--u) * 40);
    border-radius: calc(var(--u) * 30);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(32, 45, 63, .2);
    opacity: 0;
    transform: translateY(calc(var(--u) * 24)) scale(.97);
    transition: opacity .25s, transform .25s;
}

.cart-popup.is-open .cart-popup__overlay,
.cart-popup.is-open .cart-popup__box {
    opacity: 1;
}

.cart-popup.is-open .cart-popup__box {
    transform: none;
}

/* Крестик из двух полосок */
.cart-popup__close {
    position: absolute;
    top: calc(var(--u) * 20);
    right: calc(var(--u) * 20);
    width: calc(var(--u) * 40);
    height: calc(var(--u) * 40);
    border-radius: 50%;
    background: var(--c-gray-20);
    transition: background-color .2s;
}

.cart-popup__close::before,
.cart-popup__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--u) * 16);
    height: 2px;
    border-radius: 2px;
    background: var(--c-dark-blue);
    transform: translate(-50%, -50%) rotate(45deg);
}

.cart-popup__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.cart-popup__close:hover {
    background: #E0E4E7;
}

.cart-popup__title {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 12);
    padding-right: calc(var(--u) * 48);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 26);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

/* Белая галочка в зелёном круге — как у кнопки «В Корзине» */
.cart-popup__check {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 36);
    height: calc(var(--u) * 36);
    border-radius: 50%;
    background: var(--c-green);
}

.cart-popup__check img {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
}

.cart-popup__product {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 20);
    margin-top: calc(var(--u) * 28);
    padding: calc(var(--u) * 16);
    border-radius: calc(var(--u) * 20);
    background: #F3F8FB;
}

.cart-popup__img {
    flex: none;
    width: calc(var(--u) * 96);
    height: calc(var(--u) * 96);
    border-radius: calc(var(--u) * 14);
    background: #fff;
    object-fit: contain;
}

.cart-popup__name {
    font-size: calc(var(--u) * 17);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: var(--c-black);
}

.cart-popup__price {
    margin-top: calc(var(--u) * 6);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 24);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--c-red);
}

.cart-popup__total {
    margin-top: calc(var(--u) * 16);
    font-size: calc(var(--u) * 14);
    color: var(--c-gray-50);
}

.cart-popup__actions {
    display: flex;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 28);
}

.cart-popup__actions .btn-big {
    flex: 1;
    margin-top: 0;
}

/* Вторая кнопка: белая, без кружка со стрелкой, той же высоты */
.cart-popup__continue {
    justify-content: center;
    min-height: calc(var(--u) * 64);
    border: 1px solid var(--c-gray-20);
    background: #fff;
    color: var(--c-dark-blue);
    box-shadow: none;
}

@media (max-width: 767px) {
    .cart-popup {
        align-items: flex-end;
        padding: 0;
    }

    /* На телефоне — выезжающая снизу шторка */
    .cart-popup__box {
        width: 100%;
        padding: 28px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
    }

    .cart-popup__close {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
    }

    .cart-popup__title {
        font-size: 20px;
    }

    .cart-popup__check {
        width: 28px;
        height: 28px;
    }

    .cart-popup__check img {
        width: 16px;
        height: 16px;
    }

    .cart-popup__product {
        gap: 14px;
        margin-top: 20px;
        padding: 12px;
    }

    .cart-popup__img {
        width: 72px;
        height: 72px;
    }

    .cart-popup__name {
        font-size: 15px;
    }

    .cart-popup__price {
        font-size: 20px;
    }

    .cart-popup__total {
        font-size: 13px;
    }

    .cart-popup__actions {
        flex-direction: column-reverse;
        margin-top: 20px;
    }

    .cart-popup__continue {
        min-height: 54px;
    }
}

/* ===== Страница категории: первый блок ===== */
.cat-hero {
    position: relative;
    height: calc(var(--u) * 519);
    /* Шапка лежит поверх страницы, блок начинается под ней */
    margin-top: calc(var(--u) * 160);
    padding: calc(var(--u) * 60) calc(var(--u) * 220) 0;
    overflow: hidden;
    background: var(--c-bg-blue);
}

/* Фон блока одной картинкой из поля категории (2x, 3840×1038) */
.cat-hero__bg {
    position: absolute;
    inset: 0;
    background: var(--cat-hero-bg) center / cover no-repeat;
}

.cat-hero__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Хлебные крошки: полупрозрачная плашка, между пунктами — уголок */
.crumbs {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 14);
    height: calc(var(--u) * 40);
    padding: 0 calc(var(--u) * 15);
    border-radius: 900px;
    background: rgba(255, 255, 255, .35);
    font-size: calc(var(--u) * 14);
    letter-spacing: -0.04em;
    color: var(--c-muted);
}

.crumbs__link {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 14);
    transition: color .2s;
}

.crumbs__link:first-child {
    color: var(--c-dark-blue);
}

.crumbs__link::after {
    content: '';
    width: calc(var(--u) * 6);
    height: calc(var(--u) * 6);
    border-top: 1.5px solid #A9C6D8;
    border-right: 1.5px solid #A9C6D8;
    transform: rotate(45deg);
}

.crumbs__link:hover {
    color: var(--c-blue);
}

.cat-hero__title {
    margin-top: calc(var(--u) * 15);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 91);
    font-weight: 600;
    line-height: calc(var(--u) * 110);
    letter-spacing: -0.063em;
    color: var(--c-black);
}

.cat-hero__text {
    max-width: calc(var(--u) * 600);
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 20);
    line-height: calc(var(--u) * 35);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

.cat-hero__subtitle {
    margin-top: calc(var(--u) * 26);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: calc(var(--u) * 40);
    letter-spacing: -0.04em;
    color: var(--c-black);
}

.cat-hero__cats {
    display: flex;
    gap: calc(var(--u) * 11);
    margin-top: calc(var(--u) * 8);
}

.cat-card {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 15);
    width: calc(var(--u) * 257);
    padding: calc(var(--u) * 6);
    border-radius: calc(var(--u) * 20);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(46, 136, 189, .12);
    font-size: calc(var(--u) * 15);
    font-weight: 500;
    line-height: calc(var(--u) * 20);
    letter-spacing: -0.01em;
    color: var(--c-black);
    transition: transform .2s;
}

.cat-card:hover {
    transform: translateY(-2px);
}

.cat-card__img {
    flex: none;
    width: calc(var(--u) * 80);
    height: calc(var(--u) * 68);
    border-radius: calc(var(--u) * 14);
    object-fit: cover;
}

@media (max-width: 1279px) {
    .cat-hero {
        height: auto;
        padding: 40px 24px 48px;
    }

    .cat-hero__title {
        margin-left: 0;
        font-size: 56px;
        line-height: 64px;
    }

    .cat-hero__cats {
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    /* Макет 360: голубой фон начинается сразу под шапкой, крошки через 42px,
       наборы на фоне — узкой полосой под карточками категорий */
    .cat-hero {
        display: flex;
        flex-direction: column;
        margin-top: 91px;
        padding: 42px 14px 0;
    }

    .cat-hero__bg {
        position: relative;
        inset: auto;
        order: 1;
        width: calc(100% + 28px);
        height: 58px;
        margin: 8px -14px 0;
        background-position: center 38%;
        background-size: cover;
    }

    .crumbs {
        max-width: 100%;
        height: 30px;
        padding: 0 12px;
        overflow-x: auto;
        white-space: nowrap;
        font-size: 13px;
    }

    .cat-hero__title {
        margin-top: 14px;
        font-size: 38px;
        line-height: 44px;
    }

    .cat-hero__text {
        margin-top: 10px;
        font-size: 16px;
        line-height: 24px;
    }

    .cat-hero__subtitle {
        margin-top: 20px;
        font-size: 22px;
        line-height: 28px;
    }

    .cat-hero__cats {
        flex-direction: column;
        gap: 13px;
        width: 100%;
        margin-top: 14px;
    }

    /* Карточка 60px: картинка вплотную к краю, одна строка названия */
    .cat-card {
        gap: 20px;
        width: 100%;
        height: 60px;
        padding: 0 14px 0 0;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
    }

    /* Селектор с .cat-card — перебить height: auto из woocommerce.css для картинок */
    .cat-card .cat-card__img {
        flex: none;
        width: 60px;
        height: 60px;
        border-radius: 16px;
        object-fit: cover;
    }

    .cat-card__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Переносы строк из названий (для узких карточек десктопа) на телефоне не нужны */
    .cat-card__title br {
        display: none;
    }
}

/* ===== Каталог: фильтры, сортировка, сетка ===== */
/* Боковые поля даёт .m-page--inner (220px), у категории сверху — первый блок */
.m-page--catalog {
    padding-top: 0;
}

.catalog__heading {
    margin-bottom: 0;
}

.catalog {
    display: grid;
    grid-template-columns: calc(var(--u) * 270) minmax(0, 1fr);
    grid-template-areas:
        ". top"
        "aside main";
    column-gap: calc(var(--u) * 30);
    row-gap: calc(var(--u) * 30);
    padding: calc(var(--u) * 39) 0 calc(var(--u) * 11);
}

.catalog__top {
    grid-area: top;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 16);
}

.catalog__aside {
    grid-area: aside;
}

.catalog__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Выбранные фильтры */
.catalog__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 8);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 10);
    height: calc(var(--u) * 38);
    padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 10);
    border: 1px solid var(--c-gray-20);
    border-radius: 900px;
    font-size: calc(var(--u) * 15);
    letter-spacing: -0.02em;
    color: var(--c-black);
    transition: border-color .2s;
}

.chip:hover {
    border-color: #D5D9DC;
}

.chip__x {
    flex: none;
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
    border-radius: 50%;
    background: #F3F4F5 url(../img/icons/close.svg) center / calc(var(--u) * 12) no-repeat;
}

.chip--clear {
    border-color: transparent;
    padding-left: calc(var(--u) * 12);
    color: var(--c-blue);
    font-weight: 500;
}

.chip--clear .chip__text {
    border-bottom: 1px solid currentColor;
    line-height: 1.2;
}

/* Сортировка: плашка со стрелкой, под ней — список вариантов-ссылок */
.sort {
    position: relative;
    z-index: 5;
    flex: none;
    width: calc(var(--u) * 283);
    margin-left: auto;
}

.sort__current {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(var(--u) * 58);
    padding: 0 calc(var(--u) * 44) 0 calc(var(--u) * 16);
    border: 1px solid #F1F2F3;
    border-radius: calc(var(--u) * 16);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(73, 80, 85, .06);
    font-size: calc(var(--u) * 14);
    color: var(--c-black);
    text-align: left;
}

.sort__current::after {
    content: '';
    position: absolute;
    top: calc(var(--u) * 29);
    right: calc(var(--u) * 18);
    width: calc(var(--u) * 17);
    height: calc(var(--u) * 17);
    margin-top: calc(var(--u) * -8.5);
    background: url(../img/icons/select-arrow.svg) center / contain no-repeat;
    transition: transform .2s;
}

.sort.is-open .sort__current::after {
    transform: rotate(180deg);
}

.sort__list {
    position: absolute;
    top: calc(100% + calc(var(--u) * 6));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 2);
    padding: calc(var(--u) * 6);
    border: 1px solid #F1F2F3;
    border-radius: calc(var(--u) * 16);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(73, 80, 85, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--u) * -6));
    transition: opacity .2s, transform .2s, visibility .2s;
}

.sort.is-open .sort__list {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.sort__option {
    display: block;
    padding: calc(var(--u) * 10) calc(var(--u) * 12);
    border-radius: calc(var(--u) * 10);
    font-size: calc(var(--u) * 14);
    color: var(--c-black);
    transition: background-color .2s, color .2s;
}

.sort__option:hover {
    background: #F3F8FB;
}

.sort__option.is-active {
    font-weight: 600;
    color: var(--c-blue);
}

/* Пока подгружается новый результат фильтра */
.catalog.is-loading .catalog__main,
.catalog.is-loading .catalog__chips {
    opacity: .5;
    pointer-events: none;
    transition: opacity .2s;
}

/* Кнопка «Фильтры», крестик, «Примененные», «Показать товары» и оверлей — только на телефоне */
.catalog__toggle,
.filters__close,
.filters__applied,
.filters__apply,
.filters-overlay {
    display: none;
}

/* Плашка фильтров */
.filters {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--u) * 25);
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 20);
    background: #fff;
    box-shadow: 0 0 calc(var(--u) * 24) 0 rgba(73, 80, 85, 0.05);
}

.filters__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: calc(var(--u) * 25);
}

.filters__group--occasion {
    gap: calc(var(--u) * 10);
}

.filters__group--check {
    gap: calc(var(--u) * 10);
}

.filters__title {
    margin-bottom: calc(var(--u) * 2);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 18);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.04em;
    color: var(--c-black);
}

/* Чекбокс-ссылка: квадрат 21px, выбранный — синий с галочкой */
.filter-check {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 11);
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 21);
    letter-spacing: -0.02em;
    color: var(--c-black);
}

.filter-check__box {
    flex: none;
    width: calc(var(--u) * 21);
    height: calc(var(--u) * 21);
    border: 1px solid #E3E5E7;
    border-radius: calc(var(--u) * 6);
    background: #fff center / calc(var(--u) * 14) no-repeat;
    transition: background-color .2s, border-color .2s;
}

.filter-check:hover .filter-check__box {
    border-color: var(--c-blue);
}

.filter-check.is-checked .filter-check__box {
    border-color: var(--c-blue);
    background-color: var(--c-blue);
    background-image: url(../img/icons/check-small.svg);
}

.filter-check__badge {
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
    margin-left: calc(var(--u) * -3);
}

/* Повод: иконка 34px и подпись, выбранный — красный и подчёркнутый */
.filter-occasion {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 10);
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 34);
    letter-spacing: -0.02em;
    color: var(--c-black);
    transition: color .2s;
}

.filter-occasion__icon {
    flex: none;
    width: calc(var(--u) * 34);
    height: calc(var(--u) * 34);
    border-radius: calc(var(--u) * 8);
}

.filter-occasion:hover,
.filter-occasion.is-active {
    color: var(--c-red);
}

.filter-occasion:hover .filter-occasion__name,
.filter-occasion.is-active .filter-occasion__name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: calc(var(--u) * 5);
}

/* Баннер под фильтрами: фон-картинка, текст и кнопка поверх */
/* Макет 636×840 (2×): картинка со звёздами и домиком внизу, сверху — заголовок
   в две строки, текст и кнопка по ширине содержимого по центру */
.catalog-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(var(--u) * 418);
    margin-top: calc(var(--u) * 44);
    padding: calc(var(--u) * 30) calc(var(--u) * 20) 0;
    border-radius: calc(var(--u) * 22);
    background: #7C0B24 var(--catalog-banner-bg) center / cover no-repeat;
    text-align: center;
    overflow: hidden;
}

.catalog-banner__title {
    max-width: calc(var(--u) * 250);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 28);
    font-weight: 700;
    line-height: calc(var(--u) * 32);
    letter-spacing: -0.04em;
    color: #fff;
}

.catalog-banner__text {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 17);
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.02em;
    color: #fff;
}

.catalog-banner .btn-big {
    width: auto;
    min-width: calc(var(--u) * 238);
    margin: calc(var(--u) * 10) auto 0;
    box-shadow: none;
}

/* Сетка: 4 колонки по ширине карточки из вёрстки, кнопки по низу ряда */
.catalog__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--u) * 16) calc(var(--u) * 15);
    width: 100%;
}

.catalog__grid .product-card {
    width: auto;
}

.catalog__grid .product-card__img {
    height: 100%;
}

.catalog__grid .product-card__body {
    flex: 1;
}

.catalog__grid .product-card__cart {
    margin-top: auto;
}

.catalog__more {
    margin-top: calc(var(--u) * 34);
}

.catalog__more.is-loading {
    opacity: .6;
    pointer-events: none;
}

.catalog__empty {
    align-self: stretch;
    padding: calc(var(--u) * 60) calc(var(--u) * 30);
    border: 1px dashed var(--c-gray-20);
    border-radius: calc(var(--u) * 20);
    font-size: calc(var(--u) * 18);
    text-align: center;
    color: var(--c-gray-50);
}

@media (max-width: 1279px) {
    /* Без макета: фильтры над сеткой, баннер прячем, сетка в 3/2/1 колонки */
    .catalog {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "top"
            "aside"
            "main";
        row-gap: 20px;
        padding: 24px 0 0;
    }

    .filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 40px;
        padding: 20px;
    }

    .filters__group {
        margin-top: 0;
    }

    .catalog-banner {
        display: none;
    }

    .catalog__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .chip {
        height: 34px;
        font-size: 14px;
    }

    .sort {
        width: 240px;
    }

    .sort__current {
        height: 46px;
        font-size: 14px;
    }

    .sort__current::after {
        top: 23px;
    }

    .sort__option {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    /* Макет 360: одна строка — слева «Фильтры» с иконкой и счётчиком, справа сортировка.
       Выбранные фильтры здесь не показываем, они в панели («Примененные») */
    .catalog__top {
        justify-content: space-between;
        gap: 16px;
    }

    .catalog__chips {
        display: none;
    }

    /* От полосы с наборами до строки фильтров — 40px */
    .catalog {
        padding-top: 40px;
    }

    /* Панель и оверлей фиксированные, баннер скрыт — строку сетки под колонку убираем,
       иначе между строкой фильтров и товарами два row-gap */
    .catalog {
        grid-template-areas:
            "top"
            "main";
    }

    .catalog__aside {
        display: contents;
    }

    /* Баннер из боковой колонки на телефоне — под сеткой, на всю ширину. Макет
       672×736 (2×): своя картинка с крупным домиком, заголовок в одну строку,
       кнопка 228×58 по центру */
    .catalog-banner {
        display: flex;
        width: 100%;
        height: auto;
        aspect-ratio: 672 / 736;
        margin-top: 40px;
        padding: 28px 10px 0;
        border-radius: 22px;
        background-image: var(--catalog-banner-bg-mobile, var(--catalog-banner-bg));
    }

    .catalog-banner__title {
        max-width: none;
        font-size: 28px;
        line-height: 32px;
    }

    /* 16px: строка «Запаситесь подарками к наступающему» помещается целиком, как в макете */
    .catalog-banner__text {
        margin-top: 0;
        font-size: 16px;
        line-height: 24px;
    }

    .catalog-banner .btn-big {
        min-width: 228px;
        margin-top: 8px;
        padding: 9px 16px 9px 9px;
    }

    .catalog-banner .btn-big__icon {
        width: 40px;
        height: 40px;
    }

    .sort {
        width: 220px;
        max-width: calc(100% - 110px);
    }

    .sort__current {
        height: 58px;
        padding: 0 44px 0 20px;
        border-radius: 16px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        line-height: 56px;
    }

    .sort__current::after {
        top: 29px;
    }

    .filters {
        flex-direction: column;
        gap: 20px;
    }

    .filters__title {
        font-size: 17px;
    }

    .filter-check,
    .filter-occasion {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .catalog__toggle {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        flex: none;
        padding: 0;
        border: 0;
        background: none;
        font-weight: 600;
        font-size: 17px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--c-black);
        cursor: pointer;
    }

    /* Иконка-ползунки, счётчик выбранных фильтров сидит на её правом верхнем углу */
    .catalog__toggle-icon {
        position: relative;
        flex: none;
        width: 20px;
        height: 18px;
        background: url(../img/icons/filters.svg) center / contain no-repeat;
    }

    .catalog__toggle-count {
        position: absolute;
        top: -9px;
        right: -8px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 900px;
        background: var(--c-red);
        font-weight: 700;
        font-size: 10px;
        line-height: 1;
        color: #fff;
    }



    /* Фото товара на всю ширину колонки — вписываем, а не обрезаем */
    .catalog__grid .product-card__img {
        object-fit: contain;
    }
}

/* Макет 360: две колонки компактных карточек — без рамки, фото в рамке с плашкой
   снизу, название в две строки, цена со скидкой, кнопка; строки «Результат» нет */
@media (max-width: 767px) {
    .catalog__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .catalog__grid .product-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .catalog__grid .product-card__media {
        height: auto;
        aspect-ratio: 158 / 152;
        border: 1px solid var(--c-gray-20);
        border-radius: 20px;
    }

    .catalog__grid .product-card__tags {
        top: auto;
        bottom: 8px;
        left: 8px;
        gap: 4px;
    }

    .catalog__grid .tag {
        padding: 0 6px;
        font-size: 10px;
        line-height: 15px;
    }

    .catalog__grid .product-card__body {
        gap: 10px;
        padding: 12px 0 0;
    }

    .catalog__grid .product-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 38px;
        font-size: 16px;
        line-height: 19px;
    }

    .catalog__grid .product-card__prices {
        gap: 4px;
        height: auto;
    }

    .catalog__grid .product-card__price {
        font-size: 22px;
        line-height: 24px;
    }

    .catalog__grid .product-card__old-price {
        font-size: 14px;
        line-height: 20px;
    }

    .catalog__grid .product-card__discount {
        padding: 2px 5px 2px 2px;
        font-size: 11px;
        line-height: 15px;
    }

    .catalog__grid .product-card__discount img {
        width: 14px;
        height: 14px;
        margin: 0;
    }

    .catalog__grid .product-card__specs {
        display: none;
    }

    .catalog__grid .product-card__cart {
        gap: 6px;
        margin-top: 2px;
        padding: 7px 10px;
        font-size: 13px;
        line-height: 18px;
    }

    .catalog__grid .product-card__cart img {
        width: 16px;
        height: 16px;
    }
}

/* ===== Страница категории: текст внизу ===== */
/* Фон — картинка по ширине сверху («подтёки»), ниже ровный розовый её низа */
.cat-seo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--u) * 254) calc(var(--u) * 220) calc(var(--u) * 110);
    background: #FFEFF5 var(--cat-seo-bg) center top / 100% auto no-repeat;
}

.cat-seo__title {
    margin: calc(var(--u) * 10) 0 0 calc(var(--u) * -5);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 63);
    font-weight: 700;
    line-height: calc(var(--u) * 68);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.cat-seo__text {
    margin-top: calc(var(--u) * 31);
    font-size: calc(var(--u) * 17);
    line-height: calc(var(--u) * 28);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

.cat-seo__text p + p {
    margin-top: calc(var(--u) * 14);
}

.cat-seo__text b,
.cat-seo__text strong {
    font-weight: 700;
}

@media (max-width: 1279px) {
    .cat-seo {
        padding: 140px 24px 72px;
    }

    .cat-seo__title {
        margin-left: 0;
        font-size: 44px;
        line-height: 50px;
    }

    .cat-seo__title br {
        display: none;
    }

    .cat-seo__text {
        margin-top: 20px;
        font-size: 16px;
        line-height: 25px;
    }
}

@media (max-width: 767px) {
    .cat-seo {
        padding: 72px 16px 48px;
    }

    .cat-seo__title {
        font-size: 34px;
        line-height: 40px;
    }

    .cat-seo__text {
        font-size: 17px;
        line-height: 26px;
    }
}

/* ===== Обычная страница: крошки и заголовок =====
   Не .page: этот класс WordPress сам ставит на <body> всех страниц */
/* Шапка лежит поверх страницы, содержимое начинается под ней */
.inner-page {
    margin-top: calc(var(--u) * 160);
    /* Крошки на той же высоте, что в каталоге: ~20px под шапкой */
    padding: calc(var(--u) * 20) calc(var(--u) * 220) calc(var(--u) * 110);
}

/* Корзина — на светло-сером фоне, как в макете; плашка крошек — голубоватая */
.woocommerce-cart .inner-page {
    background: #F9F9F9;
}

.woocommerce-cart .inner-page .crumbs {
    background: #F2F6F9;
}

.inner-page__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.inner-page__title {
    margin-top: calc(var(--u) * 9);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 63);
    font-weight: 600;
    line-height: calc(var(--u) * 80);
    letter-spacing: -0.04em;
    color: var(--c-black);
}

/* Залогиненному админ-бар WordPress сдвигает страницу вниз (html { margin-top }),
   а шапка абсолютная и остаётся у верха окна — под баром. Опускаем её вместе со страницей,
   иначе между шапкой и .inner-page появляется лишний зазор в высоту бара */
.admin-bar .header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .header {
        top: 46px;
    }
}

/* ===== Пустая корзина ===== */
/* Серый фон заканчивается по низу картинки, как в макете */
.inner-page:has(.cart-empty-block) {
    padding-bottom: 0;
}

.cart-empty-block {
    display: flex;
    align-items: flex-start;
    margin-top: calc(var(--u) * 18);
}

/* Тень картинки уходит влево за поле и вправо под текст */
.cart-empty-block__img {
    flex: none;
    width: calc(var(--u) * 567);
    height: calc(var(--u) * 369);
    margin: 0 calc(var(--u) * -174) 0 calc(var(--u) * -23);
}

.cart-empty-block__body {
    position: relative;
    margin-top: calc(var(--u) * 107);
}

.cart-empty-block__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: calc(var(--u) * 40);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.cart-empty-block__text {
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 17);
    line-height: calc(var(--u) * 28);
    letter-spacing: -0.01em;
    color: var(--c-gray-50);
}

.cart-empty-block__text a {
    font-weight: 600;
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: calc(var(--u) * 4);
}

.cart-empty-block .btn-big {
    flex: none;
    margin: calc(var(--u) * 130) 0 0 auto;
    padding-right: calc(var(--u) * 28);
}

.cart-empty-block .btn-big__text {
    padding-left: calc(var(--u) * 20);
    font-size: calc(var(--u) * 17);
}

@media (max-width: 1279px) {
    .inner-page {
        padding: 20px 24px 72px;
    }

    .inner-page__title {
        font-size: 44px;
        line-height: 54px;
    }

    /* Картинка уже не внизу блока — подвалу нужен отступ */
    .inner-page:has(.cart-empty-block) {
        padding-bottom: 56px;
    }

    .cart-empty-block {
        flex-wrap: wrap;
        align-items: center;
        gap: 0 24px;
    }

    .cart-empty-block__img {
        width: 420px;
        height: auto;
        margin: 0 -100px 0 -16px;
    }

    .cart-empty-block__body {
        flex: 1;
        min-width: 280px;
        margin-top: 0;
    }

    .cart-empty-block .btn-big {
        margin: 24px 0 0;
    }
}

@media (max-width: 767px) {
    /* Макет 360: крошки на 22px ниже шапки, плашка 30px, заголовок 40px */
    .inner-page {
        margin-top: 97px;
        padding: 16px 16px 56px;
    }

    .inner-page__title {
        margin-top: 14px;
        font-size: 38px;
        line-height: 44px;
    }

    /* Пустая корзина: серый фон заканчивается через 36px под кнопкой */
    .inner-page:has(.cart-empty-block) {
        padding-bottom: 36px;
    }

    /* Картинка шире поля — обрезаем по краям экрана */
    .woocommerce-cart .inner-page {
        overflow: hidden;
    }

    .cart-empty-block {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        max-width: 100%;
        margin-top: 0;
        text-align: center;
    }

    /* В PNG большие прозрачные поля: сама тележка ~53% ширины файла.
       Чтобы она была ~245px, как в макете, файл растягиваем до 465px.
       Селектор с .woocommerce-cart — перебить max-width: 100% из woocommerce.css */
    .woocommerce-cart .cart-empty-block__img {
        align-self: flex-start;
        width: 465px;
        max-width: none;
        height: auto;
        /* Тележка в файле левее центра (её середина на 34% ширины): при левом крае
           файла +8px от поля она встаёт по центру экрана 360 */
        margin: -5px 0 -24px 32px;
    }

    .cart-empty-block__body {
        min-width: 0;
    }

    .cart-empty-block__title {
        font-size: 24px;
        line-height: 30px;
    }

    .cart-empty-block__text {
        margin-top: 8px;
        font-size: 17px;
        line-height: 25px;
    }

    .cart-empty-block__text br {
        display: none;
    }

    .cart-empty-block .btn-big {
        align-self: center;
        margin-top: 14px;
    }

    .cart-empty-block .btn-big__icon {
        width: 48px;
        height: 48px;
    }

    /* В мобильном макете пустой корзины слайдера «Добавьте к заказу» нет */
    .woocommerce-cart:has(.cart-empty-block) .products--cart {
        display: none;
    }
}

/* ===== Корзина с товарами ===== */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.cart-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 400);
    gap: calc(var(--u) * 20);
    align-items: start;
    margin-top: calc(var(--u) * 32);
}

/* Woo на время запроса кладёт поверх формы полупрозрачный слой */
.cart-page .blockUI.blockOverlay {
    border-radius: calc(var(--u) * 20);
}

.cart-page__items {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 10);
    min-width: 0;
}

.cart-item {
    display: grid;
    grid-template-columns:
        calc(var(--u) * 134) minmax(0, 1fr) calc(var(--u) * 145)
        calc(var(--u) * 206) calc(var(--u) * 44);
    align-items: center;
    column-gap: calc(var(--u) * 20);
    padding: calc(var(--u) * 10) calc(var(--u) * 26) calc(var(--u) * 10) calc(var(--u) * 12);
    border-radius: calc(var(--u) * 20);
    background: #fff;
}

.cart-item__media {
    display: block;
    height: calc(var(--u) * 130);
    overflow: hidden;
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 14);
    background: #fff;
}

.cart-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item__info {
    min-width: 0;
    padding-left: calc(var(--u) * 1);
}

.cart-item__title {
    display: block;
    max-width: calc(var(--u) * 300);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 19);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
    transition: color .2s;
}

a.cart-item__title:hover {
    color: var(--c-blue);
}

/* Свойства товара из корзины (если плагины их добавят) */
.cart-item__info .variation {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 13);
    color: var(--c-gray-50);
}

.cart-item__info .variation dt,
.cart-item__info .variation dd,
.cart-item__info .variation p {
    display: inline;
    margin: 0;
}

.cart-item__stock {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 5);
    margin-top: calc(var(--u) * 8);
    font-size: calc(var(--u) * 15);
    font-weight: 600;
    line-height: calc(var(--u) * 19);
    letter-spacing: -0.02em;
    color: #3B932A;
}

.cart-item__stock::before {
    content: '';
    flex: none;
    width: calc(var(--u) * 19);
    height: calc(var(--u) * 19);
    background: url(../img/icons/stock-check.svg) center / contain no-repeat;
}

.cart-item__stock--backorder {
    color: #DA7815;
}

.cart-item__stock--out {
    color: var(--c-red);
}

.cart-item__stock--backorder::before,
.cart-item__stock--out::before {
    display: none;
}

.cart-item__sku {
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 18);
    letter-spacing: -0.02em;
    color: var(--c-gray-50);
}

.cart-item__sku span {
    font-weight: 500;
    color: var(--c-black);
}

.cart-item__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--u) * 64);
    padding: 0 calc(var(--u) * 18);
    border: 1px solid var(--c-gray-20);
    border-radius: 900px;
}

.cart-item__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 28);
    height: calc(var(--u) * 28);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s;
}

.cart-item__qty-btn img {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
}

.cart-item__qty-btn:hover {
    background: #F2F4F5;
}

.cart-item__qty-btn:disabled {
    opacity: .4;
    background: none;
    cursor: default;
}

.cart-item__qty-input,
.cart-item__qty-value {
    width: calc(var(--u) * 44);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 18);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    color: var(--c-dark-blue);
    -moz-appearance: textfield;
    appearance: textfield;
}

.cart-item__qty-value {
    width: 100%;
}

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

.cart-item__qty-input:focus {
    outline: none;
}

.cart-item__qty:focus-within {
    border-color: var(--c-blue);
}

.cart-item__prices {
    padding-left: calc(var(--u) * 57);
    white-space: nowrap;
}

.cart-item__total {
    display: flex;
    align-items: baseline;
    gap: calc(var(--u) * 6);
    font-size: calc(var(--u) * 22);
    font-weight: 600;
    line-height: calc(var(--u) * 26);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.cart-item__total del {
    font-size: calc(var(--u) * 15);
    font-weight: 500;
    color: var(--c-gray-30);
}

.cart-item__unit {
    margin-top: calc(var(--u) * 2);
    font-size: calc(var(--u) * 13);
    line-height: calc(var(--u) * 17);
    letter-spacing: -0.02em;
    color: #8E969C;
}

.cart-item a.cart-item__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 44);
    height: calc(var(--u) * 44);
    border-radius: calc(var(--u) * 12);
    background: #F2F4F5;
    transition: background-color .2s;
}

.cart-item a.cart-item__remove-btn img {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
}

.cart-item a.cart-item__remove-btn:hover {
    background: #FFE3E9;
}

/* --- Правая колонка --- */
.cart-page__aside {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 20);
}

/* Промокод: розовая карточка в светлой рамке, подарок вылезает за верх */
.cart-promo {
    position: relative;
    padding: calc(var(--u) * 16) calc(var(--u) * 10) calc(var(--u) * 10);
    border: calc(var(--u) * 6) solid rgba(255, 255, 255, .85);
    border-radius: calc(var(--u) * 26);
    background: linear-gradient(180deg, #FFEEF4 0%, #FFEEF4 55%, #FFE2EC 100%);
    box-shadow: 0 0 calc(var(--u) * 18) 0 rgba(255, 170, 195, .3);
}

.cart-promo__img {
    position: absolute;
    top: calc(var(--u) * -25);
    right: 0;
    width: calc(var(--u) * 189);
    height: calc(var(--u) * 151);
    object-fit: contain;
    pointer-events: none;
}

.cart-promo__title,
.cart-promo__text {
    position: relative;
    margin: 0 calc(var(--u) * 9);
}

.cart-promo__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 32);
    font-weight: 700;
    line-height: calc(var(--u) * 40);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.cart-promo__text {
    margin-top: calc(var(--u) * 4);
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 21);
    letter-spacing: -0.02em;
    color: var(--c-dark-blue);
}

.cart-promo__panel {
    position: relative;
    margin-top: calc(var(--u) * 22);
    padding: calc(var(--u) * 12);
    border-radius: calc(var(--u) * 20);
    background: #fff;
}

.cart-promo__form {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 6);
}

.cart-promo__field {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    height: calc(var(--u) * 48);
    padding: 0 calc(var(--u) * 16);
    border: 1px solid #E3E6E8;
    border-radius: calc(var(--u) * 12);
    background: #fff;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    color: var(--c-dark-blue);
    transition: border-color .2s;
}

.cart-promo__field::placeholder {
    color: var(--c-gray-30);
}

.cart-promo__field:focus {
    border-color: var(--c-blue);
    outline: none;
}

/* Применённый промокод: поле только для чтения с зелёной галочкой */
.cart-promo__field.is-applied {
    overflow: hidden;
    padding-right: calc(var(--u) * 40);
    border-color: #D3E8CE;
    background: #fff url(../img/icons/check-green.svg) right calc(var(--u) * 16) center / calc(var(--u) * 16) no-repeat;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cart-promo__field.has-error {
    border-color: var(--c-red);
}

.cart-promo__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--u) * 48);
    padding: 0 calc(var(--u) * 20);
    border-radius: calc(var(--u) * 12);
    background: var(--c-dark-blue);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
}

.cart-promo__btn:hover {
    background: #34465E;
    color: #fff;
}

/* Ошибку промокода Woo дописывает в .coupon — под полем, во всю ширину */
.cart-promo .coupon-error-notice {
    flex-basis: 100%;
    margin: calc(var(--u) * 2) 0 0;
    font-size: calc(var(--u) * 13);
    line-height: calc(var(--u) * 18);
    color: var(--c-red);
}

.cart-promo__applied {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 16);
    margin-top: calc(var(--u) * 12);
    padding: calc(var(--u) * 16) calc(var(--u) * 15);
    border: 2px dashed #E6E6E6;
    border-radius: calc(var(--u) * 16);
}

.cart-promo__applied-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
    border-radius: 50%;
    background: #FFEEF4;
}

.cart-promo__applied-icon img {
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
}

.cart-promo__applied-title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 18);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
    overflow-wrap: anywhere;
}

.cart-promo__applied-text {
    margin-top: calc(var(--u) * 4);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 21);
    letter-spacing: -0.02em;
    color: var(--c-gray-50);
}

.cart-promo__applied-text b {
    font-weight: 700;
    color: var(--c-dark-blue);
}

/* Итого */
.cart-summary {
    padding: calc(var(--u) * 22) calc(var(--u) * 25) calc(var(--u) * 24);
    border-radius: calc(var(--u) * 20);
    background: #fff;
}

.cart-summary__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 32);
    font-weight: 700;
    line-height: calc(var(--u) * 40);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.cart-summary__rows {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 7);
    margin: calc(var(--u) * 12) 0 0;
}

.cart-summary__row {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--u) * 12);
    font-size: calc(var(--u) * 17);
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.02em;
}

.cart-summary__row dt {
    color: #6B7075;
}

.cart-summary__row dd {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    color: var(--c-dark-blue);
}

.cart-summary__row--total dd {
    color: var(--c-red);
}

.btn-big--wide {
    display: flex;
    width: 100%;
    margin-top: calc(var(--u) * 28);
}

.btn-big--wide .btn-big__text {
    flex: 1;
    padding-right: calc(var(--u) * 40);
    text-align: center;
}

/* Подсказка про доставку */
.cart-note {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 12);
    padding: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 24);
    border-radius: calc(var(--u) * 20);
    background: #D9EDF8;
}

.cart-note__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 48);
    height: calc(var(--u) * 48);
    border-radius: 50%;
    background: #fff;
}

.cart-note__icon img {
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
}

.cart-note__text {
    font-size: calc(var(--u) * 16);
    font-weight: 500;
    line-height: calc(var(--u) * 25);
    letter-spacing: -0.02em;
    color: var(--c-blue);
}

@media (max-width: 1023px) {
    .cart-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .cart-page__aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px;
    }

    .cart-note {
        grid-column: 1 / -1;
    }
}

/* Макет 360: карточка товара в два ряда — фото 72px, название в две строки и кнопка
   удаления справа; под названием, в той же колонке, счётчик и цены. Строки «В наличии»
   в мобильном макете нет */
@media (max-width: 767px) {
    .cart-page {
        gap: 20px;
        margin-top: 16px;
    }

    /* Серый фон заканчивается через 40px под подсказкой про доставку */
    .woocommerce-cart .inner-page:has(.cart-page) {
        padding-bottom: 40px;
    }

    .cart-page__items {
        gap: 12px;
    }

    .cart-page__aside {
        display: flex;
        align-items: stretch;
        gap: 20px;
    }

    .cart-item {
        grid-template-columns: 72px auto minmax(0, 1fr) 28px;
        grid-template-areas:
            "media info info remove"
            "media qty prices prices";
        gap: 8px 12px;
        padding: 12px;
        border-radius: 16px;
    }

    .cart-item__media {
        grid-area: media;
        align-self: start;
        height: 72px;
        border-radius: 12px;
    }

    .cart-item__info {
        grid-area: info;
        align-self: start;
        padding-left: 0;
    }

    .cart-item__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: none;
        overflow: hidden;
        font-size: 16px;
        line-height: 18px;
    }

    .cart-item__stock {
        display: none;
    }

    .cart-item__sku {
        margin-top: 6px;
        font-size: 15px;
        line-height: 19px;
    }

    .cart-item__remove {
        grid-area: remove;
        align-self: start;
    }

    .cart-item a.cart-item__remove-btn {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .cart-item a.cart-item__remove-btn img {
        width: 16px;
        height: 16px;
    }

    .cart-item__qty {
        grid-area: qty;
        width: 93px;
        height: 42px;
        padding: 0 12px;
    }

    .cart-item__qty-btn {
        width: 24px;
        height: 24px;
    }

    .cart-item__qty-btn img {
        width: 16px;
        height: 16px;
    }

    .cart-item__qty-input,
    .cart-item__qty-value {
        width: 32px;
        font-size: 16px;
    }

    .cart-item__prices {
        grid-area: prices;
        align-self: center;
        padding-left: 4px;
        white-space: normal;
    }

    .cart-item__total {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 17px;
        line-height: 22px;
    }

    .cart-item__total del {
        font-size: 13px;
    }

    .cart-item__unit {
        margin-top: 2px;
        font-size: 14px;
        line-height: 18px;
    }

    /* --- Промокод --- */
    .cart-promo {
        padding: 10px 6px 6px;
        border-width: 6px;
        border-radius: 24px;
    }

    /* Подарок в правом верхнем углу, текст под ним не заходит — ограничен по ширине */
    .cart-promo__img {
        top: -4px;
        width: 130px;
        height: 93px;
    }

    .cart-promo__title,
    .cart-promo__text {
        margin: 0 12px;
    }

    .cart-promo__title {
        font-size: 20px;
        line-height: 26px;
    }

    .cart-promo__text {
        max-width: 176px;
        margin-top: 4px;
        font-size: 15px;
        line-height: 22px;
    }

    .cart-promo__panel {
        margin-top: 16px;
        padding: 12px;
        border-radius: 16px;
    }

    .cart-promo__field,
    .cart-promo__btn {
        height: 48px;
        font-size: 16px;
    }

    .cart-promo .coupon-error-notice {
        font-size: 12px;
    }

    .cart-promo__applied {
        gap: 12px;
        padding: 14px 10px;
    }

    .cart-promo__applied-title {
        font-size: 16px;
        line-height: 21px;
    }

    .cart-promo__applied-text {
        font-size: 14px;
        line-height: 20px;
    }

    /* --- Итого --- */
    .cart-summary {
        padding: 20px 24px 16px;
    }

    .cart-summary__title {
        font-size: 28px;
        line-height: 34px;
    }

    .cart-summary__rows {
        gap: 6px;
        margin-top: 12px;
    }

    .cart-summary__row {
        font-size: 17px;
        line-height: 24px;
    }

    /* Кнопка 64px: кружок 48px с отступом 8px, текст по центру оставшейся части */
    .btn-big--wide {
        gap: 12px;
        margin-top: 16px;
        padding: 8px;
        font-size: 18px;
    }

    .btn-big--wide .btn-big__icon {
        width: 48px;
        height: 48px;
    }

    .btn-big--wide .btn-big__text {
        padding-right: 12px;
    }

    /* --- Подсказка про доставку --- */
    .cart-note {
        gap: 10px;
        padding: 16px 12px;
    }

    .cart-note__text {
        font-size: 16px;
        line-height: 22px;
    }
}

/* «Добавьте к заказу» под полной корзиной и под оформлением заказа на телефоне: две
   компактные карточки в ряд (как в сетке каталога: без рамки, фото в рамке с плашкой
   снизу, без «Результата»), стрелки слайдера — под карточками по центру */
@media (max-width: 767px) {
    .woocommerce-cart .products--cart,
    .woocommerce-checkout .products--cart {
        padding: 44px 16px 40px;
    }

    /* Шапка секции разбирается: заголовок сверху, стрелки уезжают под слайдер */
    .woocommerce-cart .products--cart .products__top,
    .woocommerce-checkout .products--cart .products__top {
        display: contents;
    }

    .woocommerce-cart .products--cart .products__head,
    .woocommerce-checkout .products--cart .products__head {
        order: 1;
        align-self: stretch;
    }

    .woocommerce-cart .products--cart .products__slider,
    .woocommerce-checkout .products--cart .products__slider {
        order: 2;
        width: 100%;
        margin: -24px 0;
        padding: 24px 0;
    }

    /* Секция на планшете выровнена по левому краю — стрелки ставим по центру отдельно */
    .woocommerce-cart .products--cart .products__arrows,
    .woocommerce-checkout .products--cart .products__arrows {
        order: 3;
        align-self: center;
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }

    .woocommerce-cart .products.products--cart .product-card.swiper-slide,
    .woocommerce-checkout .products.products--cart .product-card.swiper-slide {
        width: calc((100% - 12px) / 2);
        margin-right: 12px;
    }

    .woocommerce-cart .products--cart .product-card,
    .woocommerce-checkout .products--cart .product-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .woocommerce-cart .products--cart .product-card__media,
    .woocommerce-checkout .products--cart .product-card__media {
        height: auto;
        aspect-ratio: 162 / 151;
        border: 1px solid var(--c-gray-20);
        border-radius: 20px;
    }

    .woocommerce-cart .products--cart .product-card__tags,
    .woocommerce-checkout .products--cart .product-card__tags {
        top: auto;
        bottom: 8px;
        left: 8px;
        gap: 4px;
    }

    .woocommerce-cart .products--cart .tag,
    .woocommerce-checkout .products--cart .tag {
        padding: 0 6px;
        font-size: 10px;
        line-height: 15px;
    }

    .woocommerce-cart .products--cart .product-card__body,
    .woocommerce-checkout .products--cart .product-card__body {
        gap: 10px;
        padding: 12px 0 0;
    }

    .woocommerce-cart .products--cart .product-card__title,
    .woocommerce-checkout .products--cart .product-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 38px;
        font-size: 16px;
        line-height: 19px;
    }

    .woocommerce-cart .products--cart .product-card__prices,
    .woocommerce-checkout .products--cart .product-card__prices {
        gap: 4px;
        height: auto;
    }

    .woocommerce-cart .products--cart .product-card__price,
    .woocommerce-checkout .products--cart .product-card__price {
        font-size: 22px;
        line-height: 24px;
    }

    .woocommerce-cart .products--cart .product-card__old-price,
    .woocommerce-checkout .products--cart .product-card__old-price {
        font-size: 14px;
        line-height: 20px;
    }

    .woocommerce-cart .products--cart .product-card__discount,
    .woocommerce-checkout .products--cart .product-card__discount {
        padding: 2px 5px 2px 2px;
        font-size: 11px;
        line-height: 15px;
    }

    .woocommerce-cart .products--cart .product-card__discount img,
    .woocommerce-checkout .products--cart .product-card__discount img {
        width: 14px;
        height: 14px;
        margin: 0;
    }

    .woocommerce-cart .products--cart .product-card__specs,
    .woocommerce-checkout .products--cart .product-card__specs {
        display: none;
    }

    .woocommerce-cart .products--cart .product-card__cart,
    .woocommerce-checkout .products--cart .product-card__cart {
        gap: 6px;
        margin-top: 2px;
        padding: 7px 10px;
        font-size: 13px;
        line-height: 18px;
    }

    .woocommerce-cart .products--cart .product-card__cart img,
    .woocommerce-checkout .products--cart .product-card__cart img {
        width: 16px;
        height: 16px;
    }
}

/* ===== Уведомления WooCommerce — окошки в правом нижнем углу ===== */
.woocommerce-notices-wrapper {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(400px, calc(100vw - 32px));
    pointer-events: none;
}

.woocommerce-notices-wrapper:empty {
    display: none;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    position: relative;
    width: auto;
    margin: 0;
    padding: 16px 44px 16px 54px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 40px 0 rgba(32, 45, 63, .16);
    font-family: var(--f-text);
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.01em;
    color: var(--c-dark-blue);
    list-style: none;
    pointer-events: auto;
    animation: sb-toast-in .3s ease-out;
    transition: opacity .3s, transform .3s;
}

/* Woo фокусирует уведомление для скринридеров — рамка фокуса окошку не нужна */
.woocommerce-notices-wrapper [tabindex="-1"]:focus {
    outline: none;
}

.woocommerce-notices-wrapper .is-hiding {
    opacity: 0;
    transform: translateY(12px);
}

/* Значок слева: зелёная галочка, синее «i», красный «!» */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-green) url(../img/icons/check.svg) center / 16px no-repeat;
    font-family: var(--f-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    color: #fff;
}

.woocommerce-notices-wrapper .woocommerce-info::before {
    content: 'i';
    background: var(--c-blue);
}

.woocommerce-notices-wrapper .woocommerce-error::before {
    content: '!';
    background: var(--c-red);
}

.woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-info::after,
.woocommerce-notices-wrapper .woocommerce-error::after {
    display: none;
}

.woocommerce-notices-wrapper .woocommerce-error li {
    margin: 0;
    padding: 0;
}

.woocommerce-notices-wrapper .woocommerce-error li + li {
    margin-top: 6px;
}

/* Ссылки в тексте («Вернуть?», «Просмотр корзины») */
.woocommerce-notices-wrapper a,
.woocommerce-notices-wrapper a.button {
    float: none;
    display: inline;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.woocommerce-notices-wrapper a:hover {
    color: var(--c-red);
    background: none;
}

.woocommerce-notices-wrapper .sb-toast-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s;
}

.woocommerce-notices-wrapper .sb-toast-close:hover {
    background: #F2F4F5;
}

.woocommerce-notices-wrapper .sb-toast-close img {
    width: 14px;
    height: 14px;
}

@keyframes sb-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@media (max-width: 767px) {
    .woocommerce-notices-wrapper {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left: 16px;
        width: auto;
    }
}

/* ===== Оформление заказа ===== */
/* Стили WooCommerce для формы сильные (.woocommerce form .form-row …),
   поэтому селекторы здесь начинаются с form.checkout-page */
.woocommerce-checkout .inner-page {
    background: #F9F9F9;
}

.woocommerce-checkout .inner-page .crumbs {
    background: #F2F6F9;
}

/* В макете оформления промежуточные ссылки крошек тёмные, как «Главная» */
.woocommerce-checkout .inner-page .crumbs__link {
    color: var(--c-dark-blue);
}

.checkout-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 480);
    gap: calc(var(--u) * 20);
    align-items: start;
    margin-top: calc(var(--u) * 32);
}

.checkout-page__main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 20);
    min-width: 0;
}

/* WooCommerce вставляет в колонку шагов скрытые поля атрибуции заказа — как flex-элемент
   они добавляли лишний gap снизу. Скрытым полям отображение не нужно, значения всё равно
   уходят с формой */
.checkout-page__main > wc-order-attribution-inputs,
.checkout-page__main > .wc-order-attribution-inputs {
    display: none;
}

/* --- Шаг --- */
.checkout-step {
    position: relative;
    padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 30);
    border-radius: calc(var(--u) * 20);
    background: #fff;
}

/* Номер шага — синий кружок с хвостиком на краю карточки */
.checkout-step__num {
    position: absolute;
    top: calc(var(--u) * 27);
    left: calc(var(--u) * -20);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 40);
    height: calc(var(--u) * 40);
    border-radius: 50%;
    background: var(--c-blue);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 16);
    font-weight: 700;
    color: #fff;
}

.checkout-step__num::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--u) * -5);
    border-top: calc(var(--u) * 6) solid transparent;
    border-bottom: calc(var(--u) * 6) solid transparent;
    border-left: calc(var(--u) * 8) solid var(--c-blue);
    transform: translateY(-50%);
}

.checkout-step__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: calc(var(--u) * 38);
    letter-spacing: -0.04em;
    color: var(--c-black);
}

.checkout-step__text {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.01em;
    color: var(--c-gray-50);
}

/* --- Поля --- */
.checkout-page .checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 16) calc(var(--u) * 20);
    margin-top: calc(var(--u) * 20);
}

/* Woo вешает на эти блоки clearfix (::before/::after) — в сетке это лишние ячейки */
/* Ошибки оформления Woo вставляет в начало формы — над обеими колонками */
form.checkout-page > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
}

form.checkout-page > .woocommerce-NoticeGroup .woocommerce-error {
    margin: 0;
    padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 18) calc(var(--u) * 60);
    border: 0;
    border-radius: calc(var(--u) * 20);
    background: #FFF1F4;
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    color: var(--c-dark-blue);
    list-style: none;
}

form.checkout-page > .woocommerce-NoticeGroup .woocommerce-error::before {
    content: '!';
    top: calc(var(--u) * 18);
    left: calc(var(--u) * 22);
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
    border-radius: 50%;
    background: var(--c-red);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 14);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    text-align: center;
    color: #fff;
}

form.checkout-page > .woocommerce-NoticeGroup .woocommerce-error li + li {
    margin-top: calc(var(--u) * 4);
}

.checkout-page .checkout-fields::before,
.checkout-page .checkout-fields::after,
form.checkout-page #payment ul.pay-cards::before,
form.checkout-page #payment ul.pay-cards::after {
    display: none;
}

.checkout-page .checkout-fields[hidden] {
    display: none;
}

.checkout-page .checkout-fields--wide {
    grid-template-columns: minmax(0, 1fr);
}

.checkout-page .checkout-fields .form-row {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.checkout-page .checkout-fields .form-row label {
    display: block;
    margin-bottom: calc(var(--u) * 7);
    font-size: calc(var(--u) * 12.5);
    font-weight: 500;
    line-height: calc(var(--u) * 18);
    color: var(--c-black);
}

.checkout-page .form-row .required {
    visibility: visible;
    border: 0;
    font-weight: 600;
    color: var(--c-red);
    text-decoration: none;
}

.checkout-page .form-row .optional {
    display: none;
}

.checkout-page .checkout-fields .form-row .input-text,
.checkout-page .checkout-fields .form-row textarea {
    width: 100%;
    height: calc(var(--u) * 56);
    padding: 0 calc(var(--u) * 15);
    border: 1px solid #E6E6E6;
    border-radius: calc(var(--u) * 12);
    background: #fff;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 13.5);
    line-height: normal;
    color: var(--c-dark-blue);
    box-shadow: none;
    transition: border-color .2s;
}

.checkout-page .checkout-fields .form-row textarea.input-text {
    height: calc(var(--u) * 93);
    padding-top: calc(var(--u) * 14);
    resize: vertical;
}

.checkout-page .checkout-fields .form-row .input-text::placeholder,
.checkout-page .checkout-fields .form-row textarea::placeholder {
    color: #A0A6AB;
}

.checkout-page .checkout-fields .form-row .input-text:focus,
.checkout-page .checkout-fields .form-row textarea:focus {
    border-color: var(--c-blue);
    outline: none;
}

/* Woo красит проверенные поля в зелёный — в макете рамка обычная */
.checkout-page .checkout-fields .form-row.woocommerce-validated .input-text {
    border-color: #E6E6E6;
}

.checkout-page .checkout-fields .form-row.woocommerce-validated .input-text:focus {
    border-color: var(--c-blue);
}

.checkout-page .checkout-fields .form-row.woocommerce-invalid .input-text {
    border-color: var(--c-red);
}

.checkout-page .checkout-fields .form-row .checkout-inline-error-message {
    margin: calc(var(--u) * 6) 0 0;
    font-size: calc(var(--u) * 13);
    color: var(--c-red);
}

/* Страна — скрытое поле, места в сетке не занимает */
form.checkout-page #billing_country_field {
    display: none;
}

/* --- Чекбоксы и радиокнопки --- */
.checkout-check {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 12);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    color: var(--c-black);
    cursor: pointer;
}

.checkout-check input,
.checkout-option__radio,
.ship-card__radio,
.ship-rate__radio,
form.checkout-page .pay-card__radio {
    flex: none;
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
    margin: 0;
    border: 1.5px solid #DADDE0;
    border-radius: calc(var(--u) * 5);
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.checkout-check input:checked {
    border-color: var(--c-blue);
    background: var(--c-blue) url(../img/icons/check.svg) center / 70% no-repeat;
}

.checkout-option__radio,
.ship-card__radio,
.ship-rate__radio,
form.checkout-page .pay-card__radio {
    border-radius: 50%;
}

.checkout-option__radio:checked,
.ship-card.is-active .ship-card__radio,
.ship-rate__radio:checked,
form.checkout-page .pay-card__radio:checked {
    border: 2px solid var(--c-red);
    background: radial-gradient(circle, var(--c-red) 0 calc(var(--u) * 6), #fff calc(var(--u) * 6.5));
}

.checkout-check input:focus-visible,
.checkout-option__radio:focus-visible,
.ship-rate__radio:focus-visible,
form.checkout-page .pay-card__radio:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
}

/* --- Службы доставки --- */
.sb-ship-head__empty,
.checkout-payment__empty {
    margin-top: calc(var(--u) * 20);
    padding: calc(var(--u) * 18) calc(var(--u) * 20);
    border-radius: calc(var(--u) * 16);
    background: #F2F6F9;
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    color: var(--c-gray-50);
}

.sb-ship-head__package {
    margin-top: calc(var(--u) * 20);
    font-weight: 600;
}

.ship-providers,
form.checkout-page #payment ul.pay-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 20);
    margin: calc(var(--u) * 20) 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.ship-card,
form.checkout-page .pay-card__label {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 15);
    width: 100%;
    min-height: calc(var(--u) * 100);
    padding: calc(var(--u) * 16) calc(var(--u) * 52) calc(var(--u) * 16) calc(var(--u) * 17);
    border: 1px solid #E6E6E6;
    border-radius: calc(var(--u) * 16);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.ship-card:hover,
form.checkout-page .pay-card__label:hover {
    border-color: #F7A1B3;
}

/* Выбранная: красная рамка 2px — без сдвига содержимого (рамка через тень) */
.ship-card.is-active,
form.checkout-page .pay-card__radio:checked + .pay-card__label {
    border-color: var(--c-red);
    background: #FFF6F8;
    box-shadow: inset 0 0 0 1px var(--c-red);
}

.ship-card__logo,
.pay-card__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 109);
    height: calc(var(--u) * 66);
    overflow: hidden;
    border-radius: calc(var(--u) * 10);
    background: #F8F8F8;
}

.ship-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pay-card__icon {
    background: #fff;
}

.ship-card.is-active .ship-card__logo,
form.checkout-page .pay-card__radio:checked + .pay-card__label .pay-card__icon {
    background: #fff;
}

.pay-card__icon img {
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
}

.ship-card__body,
.pay-card__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 2);
    min-width: 0;
}

.ship-card__title,
.pay-card__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 18);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.ship-card__text,
.pay-card__text {
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.01em;
    color: var(--c-gray-50);
}

.ship-card__radio {
    position: absolute;
    top: calc(var(--u) * 16);
    right: calc(var(--u) * 17);
}

/* Оплата: радиокнопка — в углу карточки, как у служб доставки */
form.checkout-page #payment {
    padding: 0;
    border-radius: 0;
    background: none;
}

form.checkout-page #payment ul.pay-cards li.pay-card {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: inherit;
    text-align: left;
}

/* Woo прячет радиокнопку, когда способ оплаты один (style="display:none"),
   а в макете она видна и тогда */
form.checkout-page #payment ul.pay-cards li.pay-card input.pay-card__radio {
    display: block !important;
    position: absolute;
    z-index: 1;
    top: calc(var(--u) * 16);
    right: calc(var(--u) * 17);
    margin: 0;
}

form.checkout-page #payment .pay-card__fields {
    grid-column: 1 / -1;
    margin: calc(var(--u) * 12) 0 0;
    padding: calc(var(--u) * 16);
    border-radius: calc(var(--u) * 12);
    background: #F7F8F9;
    font-size: calc(var(--u) * 14);
    color: var(--c-gray-50);
}

form.checkout-page #payment .pay-card__fields::before {
    display: none;
}

/* --- Вкладки «до ПВЗ» / «курьером» --- */
.ship-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 20);
}

.ship-tabs__tab {
    height: calc(var(--u) * 60);
    padding: 0 calc(var(--u) * 22);
    border-radius: 900px;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 16);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--c-dark-blue);
    text-decoration: underline dotted #A0A6AB;
    text-underline-offset: calc(var(--u) * 6);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.ship-tabs__tab:hover {
    color: var(--c-blue);
}

.ship-tabs__tab.is-active {
    background: #E8F3FA;
    font-weight: 600;
    color: var(--c-blue);
    text-decoration: none;
}

/* --- Адрес --- */
.checkout-address {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 20);
}

.checkout-option {
    position: relative;
    display: block;
    padding: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 56);
    border: 1px solid #E6E6E6;
    border-radius: calc(var(--u) * 16);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.checkout-option.is-active {
    border-color: var(--c-red);
    background: #FFF6F8;
    box-shadow: inset 0 0 0 1px var(--c-red);
    cursor: default;
}

.checkout-option__radio {
    position: absolute;
    top: calc(var(--u) * 20);
    left: calc(var(--u) * 18);
}

.checkout-address__new-head {
    display: block;
    cursor: pointer;
}

.checkout-option__title {
    display: block;
    font-family: var(--f-head);
    font-size: calc(var(--u) * 17);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.checkout-option__text {
    display: block;
    margin-top: calc(var(--u) * 2);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    color: var(--c-gray-50);
}

.checkout-option__text:empty {
    display: none;
}

/* Выбран «Ваш адрес» — поля другого адреса свёрнуты */
.checkout-address.has-saved .checkout-address__new:not(.is-active) .checkout-fields {
    display: none;
}

.checkout-delivery[data-mode="courier"] .checkout-address__new.is-active {
    padding-bottom: calc(var(--u) * 32);
}

/* До пункта выдачи и пока доставка не выбрана — нужен только город */
.checkout-delivery:not([data-mode="courier"]) .checkout-address__saved,
.checkout-delivery:not([data-mode="courier"]) .checkout-address__new-head,
.checkout-delivery:not([data-mode="courier"]) #billing_address_1_field,
.checkout-delivery:not([data-mode="courier"]) #billing_house_field,
.checkout-delivery:not([data-mode="courier"]) #billing_address_2_field {
    display: none;
}

.checkout-delivery:not([data-mode="courier"]) .checkout-address__new {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.checkout-delivery:not([data-mode="courier"]) .checkout-address__new .checkout-fields {
    display: grid;
    margin-top: 0;
}

/* --- Тарифы: виден только выбранный до пункта выдачи — ради кнопки выбора пункта --- */
.ship-rates {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 10);
    margin: calc(var(--u) * 16) 0 0;
    padding: 0;
    list-style: none;
}

.ship-rates.is-empty,
.ship-rate.is-hidden {
    display: none;
}

.ship-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 10) calc(var(--u) * 14);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 21);
    color: var(--c-gray-50);
}

/* Тариф отмечен вкладкой — своя радиокнопка не нужна */
.ship-rate__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ship-rate__label {
    flex-basis: 100%;
    min-width: 0;
}

.ship-rate__label .amount,
.ship-rate__label bdi {
    font-weight: 700;
    white-space: nowrap;
}

/* Кнопки выбора пункта, которые выводят плагины СДЭК и 5Post (у СДЭК
   кнопка — сам .open-pvz-btn со ссылкой внутри, у 5Post — button) */
.ship-rate .open-pvz-btn,
.ship-rate button.fivepost-button-map {
    display: inline-flex;
    align-items: center;
    height: calc(var(--u) * 44);
    margin: 0;
    padding: 0 calc(var(--u) * 20);
    border: 0;
    border-radius: calc(var(--u) * 12);
    background: var(--c-dark-blue);
    box-shadow: none;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s;
}

.ship-rate .open-pvz-btn a {
    color: inherit;
    text-decoration: none;
}

.ship-rate .open-pvz-btn:hover,
.ship-rate button.fivepost-button-map:hover {
    background: #34465E;
    color: #fff;
}

.ship-rate .cdek-office-info {
    flex-basis: 100%;
    margin: 0;
    padding: calc(var(--u) * 12) calc(var(--u) * 14);
    border-radius: calc(var(--u) * 12);
    background: #F2F6F9;
    font-size: calc(var(--u) * 14);
    color: var(--c-gray-50);
}

.ship-rate .post5-map-btn-wrapper {
    display: block;
}

/* --- Получатель на другое имя --- */
.checkout-recipient__toggle {
    margin-top: calc(var(--u) * 24);
}

.checkout-account {
    margin-top: calc(var(--u) * 20);
}

/* Перед оформлением: вход, регистрация, данные получателя */
.checkout-auth .checkout-fields {
    margin-top: calc(var(--u) * 20);
}

.checkout-auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 12) calc(var(--u) * 20);
}

.checkout-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--u) * 52);
    margin-top: calc(var(--u) * 24);
    padding: 0 calc(var(--u) * 28);
    border-radius: calc(var(--u) * 12);
    background: var(--c-dark-blue);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
}

.checkout-auth__actions .checkout-auth__btn {
    margin-top: 0;
}

.checkout-auth__actions {
    margin-top: calc(var(--u) * 24);
}

.checkout-auth__btn:hover {
    background: #34465E;
}

.checkout-auth__link {
    font-size: calc(var(--u) * 14);
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: calc(var(--u) * 3);
}

/* --- Ваш заказ --- */
.checkout-page__aside {
    min-width: 0;
}

.checkout-summary {
    padding: calc(var(--u) * 24) calc(var(--u) * 25) calc(var(--u) * 25);
    border-radius: calc(var(--u) * 20);
    background: #fff;
}

.checkout-review__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: calc(var(--u) * 38);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.checkout-review__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 2);
}

.checkout-review__count {
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    color: var(--c-gray-50);
}

.checkout-review__toggle {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 4);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 13);
    color: var(--c-red);
    cursor: pointer;
}

.checkout-review__toggle::after {
    content: '';
    width: calc(var(--u) * 16);
    height: calc(var(--u) * 16);
    background: url(../img/icons/chevron-red.svg) center / contain no-repeat;
    transition: transform .2s;
}

.checkout-review__toggle[aria-expanded="false"]::after {
    transform: rotate(180deg);
}

.checkout-review__items {
    margin: calc(var(--u) * 10) 0 0;
    padding: 0;
    list-style: none;
}

.checkout-review.is-collapsed .checkout-review__items {
    display: none;
}

.checkout-item {
    display: grid;
    grid-template-columns: calc(var(--u) * 80) minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(var(--u) * 13);
    padding: calc(var(--u) * 15) 0;
    border-bottom: 1px solid var(--c-gray-20);
}

.checkout-item__media {
    display: block;
    height: calc(var(--u) * 76);
    overflow: hidden;
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 12);
}

.checkout-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-item__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 6);
    min-width: 0;
}

.checkout-item__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 14);
    font-weight: 500;
    line-height: calc(var(--u) * 18);
    letter-spacing: -0.02em;
    color: var(--c-dark-blue);
}

.checkout-item__price {
    font-size: calc(var(--u) * 17);
    font-weight: 600;
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.checkout-item__qty {
    align-self: end;
    font-size: calc(var(--u) * 13);
    color: var(--c-gray-50);
    white-space: nowrap;
}

.checkout-review__totals {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 7);
    margin: calc(var(--u) * 18) 0 0;
    padding-bottom: calc(var(--u) * 18);
    border-bottom: 1px solid var(--c-gray-20);
}

.checkout-review.is-collapsed .checkout-review__totals {
    padding-top: calc(var(--u) * 18);
    border-top: 1px solid var(--c-gray-20);
}

.checkout-review__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--u) * 10);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.01em;
}

.checkout-review__row dt {
    color: var(--c-black);
}

.checkout-review__row dt small {
    display: block;
    font-size: calc(var(--u) * 12);
    line-height: calc(var(--u) * 18);
    color: var(--c-gray-50);
}

.checkout-review__row dd {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    color: var(--c-black);
}

.checkout-review__row--discount dd {
    color: var(--c-red);
}

.checkout-review__row--dotted dt {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: calc(var(--u) * 10);
    color: var(--c-gray-50);
}

.checkout-review__row--dotted dt::after {
    content: '';
    flex: 1;
    border-bottom: 1px dotted #C4C9CD;
}

.checkout-review__row--total {
    align-items: center;
}

.checkout-review__row--total dt {
    font-weight: 700;
}

.checkout-review__row--total dd {
    font-size: calc(var(--u) * 30);
    font-weight: 600;
    line-height: calc(var(--u) * 32);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.checkout-summary__footer {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 18);
}

.checkout-check--consent {
    gap: calc(var(--u) * 10);
    font-size: calc(var(--u) * 12.5);
    line-height: calc(var(--u) * 19);
    color: var(--c-gray-50);
}

.checkout-check--consent a {
    color: var(--c-gray-50);
    text-decoration: underline;
    text-underline-offset: calc(var(--u) * 3);
}

.checkout-check--consent a:hover {
    color: var(--c-blue);
}

/* Кнопка: текст меняет checkout.js (.text()), поэтому кружок со стрелкой — псевдоэлементом */
form.checkout-page #place_order {
    position: relative;
    justify-content: center;
    min-height: calc(var(--u) * 82);
    margin-top: calc(var(--u) * 8);
    padding: calc(var(--u) * 10) calc(var(--u) * 30) calc(var(--u) * 10) calc(var(--u) * 82);
    border: 0;
    font-family: var(--f-text);
    cursor: pointer;
}

form.checkout-page #place_order::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--u) * 10);
    width: calc(var(--u) * 62);
    height: calc(var(--u) * 62);
    border-radius: 50%;
    background: #fff url(../img/icons/arrow.svg) center / calc(var(--u) * 18) no-repeat;
    transform: translateY(-50%);
}

form.checkout-page.processing #place_order {
    opacity: .7;
}

/* Woo на время пересчёта кладёт поверх блоков полупрозрачный слой */
.checkout-page .blockUI.blockOverlay {
    border-radius: calc(var(--u) * 20);
}

@media (max-width: 1023px) {
    .checkout-page {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .checkout-page__main {
        gap: 16px;
    }
}

/* Ссылка «добавить» у комментария — только на телефоне */
.checkout-comment__toggle {
    display: none;
}

@media (max-width: 767px) {
    /* Мобильный макет 360: карточки шагов с номером на верхней кромке, без подсказок,
       службы доставки плитками в два столбца, компактная оплата, сводка заказа */
    .checkout-page {
        gap: 28px;
        margin-top: 22px;
    }

    /* Номер шага выступает на 14px над карточкой — зазор между карточками с запасом */
    .checkout-page__main {
        gap: 28px;
    }

    .checkout-step {
        padding: 26px 14px 16px;
        border-radius: 16px;
    }

    .checkout-step__num {
        top: -14px;
        left: 16px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .checkout-step__num::after {
        display: none;
    }

    .checkout-step__title,
    .checkout-review__title {
        font-size: 22px;
        line-height: 28px;
    }

    .checkout-step__text {
        display: none;
    }

    /* Комментарий: заголовок + «добавить», поле раскрывается по клику */
    .checkout-comment__toggle {
        position: absolute;
        top: 30px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--f-text);
        font-size: 14px;
        line-height: 20px;
        color: var(--c-red);
        cursor: pointer;
    }

    .checkout-comment__toggle::after {
        content: '';
        width: 16px;
        height: 16px;
        background: url(../img/icons/chevron-red.svg) center / contain no-repeat;
        transform: rotate(180deg);
        transition: transform .2s;
    }

    .checkout-comment.is-open .checkout-comment__toggle::after {
        transform: none;
    }

    .checkout-comment:not(.is-open) .checkout-comment__field {
        display: none;
    }

    .checkout-comment .checkout-fields {
        margin-top: 14px;
    }

    /* Поля: в один столбец, «Номер дома» и «Квартира» — в два */
    .checkout-page .checkout-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        margin-top: 16px;
    }

    .checkout-page .checkout-fields .form-row {
        grid-column: 1 / -1;
    }

    .checkout-page .checkout-fields #billing_house_field,
    .checkout-page .checkout-fields #billing_address_2_field {
        grid-column: auto;
    }

    .checkout-page .checkout-fields .form-row label {
        margin-bottom: 6px;
        font-size: 13px;
        line-height: 18px;
    }

    .checkout-page .checkout-fields .form-row .input-text,
    .checkout-page .checkout-fields .form-row textarea {
        height: 50px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 15px;
    }

    .checkout-page .checkout-fields .form-row textarea.input-text {
        height: 90px;
        padding-top: 12px;
    }

    .sb-ship-head__empty,
    .checkout-payment__empty {
        margin-top: 16px;
        padding: 14px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 20px;
    }

    /* Службы доставки: две плитки в ряд, только логотип */
    .ship-providers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
        margin-top: 16px;
    }

    .ship-card {
        justify-content: center;
        min-height: 72px;
        padding: 12px;
        border-radius: 12px;
    }

    .ship-card__logo {
        width: 100%;
        max-width: 110px;
        height: 44px;
        background: none;
    }

    .ship-card__logo + .ship-card__body,
    .ship-card__radio {
        display: none;
    }

    .ship-card__title {
        font-size: 16px;
        line-height: 22px;
    }

    .ship-card__text {
        font-size: 13px;
        line-height: 18px;
    }

    /* Вкладки «Доставка до ПВЗ» / «Курьером» — по центру */
    .ship-tabs {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 12px;
        margin-top: 14px;
    }

    .ship-tabs__tab {
        height: 48px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 15px;
        text-decoration: none;
        white-space: nowrap;
    }

    /* Адрес */
    .checkout-address {
        gap: 12px;
        margin-top: 14px;
    }

    .checkout-option {
        padding: 14px 14px 16px 46px;
        border-radius: 12px;
    }

    .checkout-option__radio {
        top: 16px;
        left: 14px;
        width: 20px;
        height: 20px;
    }

    .checkout-option__title {
        font-size: 16px;
        line-height: 22px;
    }

    .checkout-option__text {
        font-size: 14px;
        line-height: 20px;
    }

    /* Поля внутри «Указать другой адрес» — на всю ширину карточки */
    .checkout-delivery[data-mode="courier"] .checkout-address__new .checkout-fields {
        margin: 14px 0 0 -32px;
    }

    .checkout-delivery[data-mode="courier"] .checkout-address__new.is-active {
        padding-bottom: 16px;
    }

    .ship-rates {
        margin-top: 12px;
    }

    .ship-rate {
        font-size: 14px;
        line-height: 20px;
    }

    .checkout-recipient__toggle {
        margin-top: 16px;
    }

    .checkout-check {
        gap: 10px;
        font-size: 14px;
        line-height: 20px;
    }

    .checkout-check input {
        width: 20px;
        height: 20px;
    }

    /* Оплата: компактная карточка с иконкой, без радиокнопки */
    form.checkout-page #payment ul.pay-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 16px;
    }

    form.checkout-page .pay-card__label {
        gap: 12px;
        min-height: 0;
        padding: 14px 14px 14px 16px;
        border-radius: 12px;
    }

    .pay-card__icon {
        width: 26px;
        height: 26px;
        border-radius: 0;
        background: none;
    }

    .pay-card__icon img {
        width: 24px;
        height: 24px;
    }

    .pay-card__title {
        font-size: 16px;
        line-height: 22px;
    }

    .pay-card__text {
        font-size: 14px;
        line-height: 20px;
    }

    form.checkout-page #payment ul.pay-cards li.pay-card input.pay-card__radio {
        display: none !important;
    }

    /* Сводка заказа */
    .checkout-summary {
        padding: 22px 14px 16px;
        border-radius: 16px;
    }

    .checkout-review__bar {
        margin-top: 4px;
    }

    .checkout-review__count {
        font-size: 15px;
        line-height: 22px;
    }

    .checkout-review__toggle {
        font-size: 14px;
    }

    .checkout-review__items {
        margin-top: 6px;
    }

    .checkout-item {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 12px 0;
    }

    .checkout-item__media {
        height: 72px;
        border-radius: 12px;
    }

    .checkout-item__body {
        gap: 4px;
    }

    .checkout-item__title {
        font-size: 14px;
        line-height: 18px;
    }

    .checkout-item__price {
        font-size: 16px;
        line-height: 22px;
    }

    .checkout-review__totals {
        gap: 8px;
        margin-top: 14px;
        padding-bottom: 14px;
    }

    .checkout-review__row {
        font-size: 15px;
        line-height: 22px;
    }

    .checkout-review__row dt small {
        font-size: 12px;
        line-height: 16px;
    }

    .checkout-review__row--total dd {
        font-size: 22px;
        line-height: 26px;
    }

    .checkout-summary__footer {
        gap: 12px;
        margin-top: 14px;
    }

    .checkout-check--consent {
        gap: 10px;
        font-size: 13px;
        line-height: 19px;
    }

    form.checkout-page #place_order {
        min-height: 60px;
        margin-top: 6px;
        padding: 8px 16px 8px 60px;
        font-size: 16px;
    }

    form.checkout-page #place_order::before {
        left: 8px;
        width: 44px;
        height: 44px;
        background-size: 16px;
    }
}

/* ===== Страница товара: «Результат» под ценой ===== */
.product-card__specs.product-single__specs {
    margin: 0 0 1.25em;
    font-size: 16px;
    line-height: 24px;
}

/* ===== Плашки меток: «Новинка» и «Хэллоуин» ===== */
.tag--new { background: #FFEDF0; color: #F40034; }
.tag--halloween { background: #F3EDFF; color: #7B48C8; }

/* ===== Нижняя панель (телефон) ===== */
.tabbar {
    display: none;
}

@media (max-width: 767px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    .tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 10px 20px calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 30px 30px 0 0;
        background: #fff;
        box-shadow: 0 -10px 30px rgba(32, 45, 63, .06);
    }

    .tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px 0;
        font-family: var(--f-text);
        font-size: 13px;
        line-height: 16px;
        letter-spacing: -0.02em;
        color: #A0A6AB;
        cursor: pointer;
        transition: color .2s;
    }

    .tabbar__item.is-active,
    .tabbar__item[aria-expanded="true"] {
        color: var(--c-dark-blue);
    }

    .tabbar__icon {
        position: relative;
        display: flex;
    }

    .tabbar__icon img {
        width: 24px;
        height: 24px;
    }

    .tabbar__count {
        position: absolute;
        top: -9px;
        left: 12px;
        min-width: 21px;
        height: 21px;
        padding: 0 4px;
        border: 1.5px solid #fff;
        border-radius: 900px;
        background: var(--c-red);
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        color: #fff;
    }

    .tabbar__count[hidden] {
        display: none;
    }

    /* Строка поиска над панелью */
    .tabbar__search {
        position: absolute;
        right: 13px;
        bottom: calc(100% + 10px);
        left: 13px;
        display: flex;
        gap: 6px;
        padding: 6px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 12px 40px rgba(32, 45, 63, .16);
    }

    .tabbar__search[hidden] {
        display: none;
    }

    .tabbar__search-input {
        flex: 1;
        min-width: 0;
        height: 44px;
        padding: 0 14px;
        border: 1px solid #E6E6E6;
        border-radius: 12px;
        font-family: var(--f-text);
        font-size: 16px;
        color: var(--c-dark-blue);
    }

    .tabbar__search-input:focus {
        border-color: var(--c-blue);
        outline: none;
    }

    .tabbar__search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--c-dark-blue);
        cursor: pointer;
    }

    .tabbar__search-btn img {
        width: 20px;
        height: 20px;
        filter: brightness(0) invert(1);
    }

    /* Окошки уведомлений и попап корзины — над панелью */
    .woocommerce-notices-wrapper {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== Каталог на телефоне: фильтры выезжающей панелью ===== */
@media (max-width: 767px) {
    .catalog__aside .filters {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0;
        width: calc(100% - 30px);
        max-width: 400px;
        overflow-x: hidden;
        padding: calc(52px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform .3s ease, visibility 0s linear .3s;
    }

    .catalog__aside.is-open .filters {
        visibility: visible;
        transform: none;
        transition: transform .3s ease;
    }

    .filters-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        background: rgba(11, 18, 29, .9);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility 0s linear .3s;
    }

    .catalog__aside.is-open .filters-overlay {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s;
    }

    html.is-filters-open,
    html.is-filters-open body {
        overflow: hidden;
    }

    .filters__close {
        position: absolute;
        top: calc(16px + env(safe-area-inset-top, 0px));
        right: 14px;
        display: block;
        width: 32px;
        height: 32px;
        background: url(../img/icons/close.svg) center / 24px no-repeat;
        opacity: .35;
        cursor: pointer;
    }

    .filters__applied {
        display: block;
        width: 100%;
        margin-bottom: 26px;
    }

    .filters__chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        margin-top: 8px;
    }

    .filters .chip {
        gap: 8px;
        height: 36px;
        padding: 0 4px 0 10px;
        font-size: 14px;
    }

    .filters .chip__x {
        width: 28px;
        height: 28px;
        background-size: 12px;
    }

    .filters .chip--clear {
        padding: 0;
        font-size: 14px;
        font-weight: 600;
    }

    .filters__title {
        margin-bottom: 4px;
        font-size: 19px;
        line-height: 26px;
    }

    .filters__group {
        width: 100%;
        margin-top: 26px;
    }

    .filters__group--occasion {
        gap: 10px;
    }

    .filters__group--check {
        gap: 12px;
    }

    .filter-check {
        gap: 12px;
        font-size: 14px;
        line-height: 22px;
    }

    .filter-check__box {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background-size: 14px;
    }

    .filter-occasion {
        gap: 10px;
        font-size: 16px;
        line-height: 34px;
    }

    /* Кнопка прилипает к низу панели */
    .filters__apply {
        position: sticky;
        bottom: 0;
        display: flex;
        flex: none;
        width: 100%;
        margin-top: 30px;
        padding-right: 26px;
        border: 0;
        box-shadow: 0 0 0 20px #fff;
        cursor: pointer;
    }

    .filters__apply .btn-big__text {
        flex: 1;
        text-align: center;
    }
}

/* ===== Страница товара (макет «Карточка товара») ===== */
.product-page {
    padding-top: calc(var(--u) * 25);
}

.product-page .woocommerce-notices-wrapper {
    position: static;
    width: auto;
    margin-bottom: calc(var(--u) * 20);
    pointer-events: auto;
}

.product-top {
    display: grid;
    grid-template-columns: calc(var(--u) * 610) minmax(0, 1fr) calc(var(--u) * 360);
    column-gap: calc(var(--u) * 40);
    align-items: start;
    margin-top: calc(var(--u) * 37);
}

/* Галерея: большое фото со стрелками внизу слева, миниатюры в ряд */
.product-gallery {
    min-width: 0;
}

.product-gallery__main {
    position: relative;
    height: calc(var(--u) * 568);
    overflow: hidden;
    border-radius: calc(var(--u) * 25);
    background: #F6F6F6;
}

.product-gallery__slide {
    height: 100%;
}

.product-gallery__img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}

.product-gallery__slide--video {
    background: #000;
}

.product-gallery__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery__arrows {
    position: absolute;
    z-index: 2;
    left: calc(var(--u) * 30);
    bottom: calc(var(--u) * 30);
    display: flex;
    gap: calc(var(--u) * 10);
}

/* Шевроны chevron-left/right нарисованы в поле 33×33 — выводим в этом размере, как на главной */
.product-gallery__arrows .arrow-btn img {
    width: calc(var(--u) * 33);
    height: calc(var(--u) * 33);
}

.product-gallery__thumbs {
    margin-top: calc(var(--u) * 16);
}

.product-gallery__thumb {
    position: relative;
    width: calc(var(--u) * 109);
    height: calc(var(--u) * 109);
    overflow: hidden;
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 16);
    background: #F6F6F6;
    cursor: pointer;
    transition: box-shadow .2s, border-color .2s;
}

.product-gallery__thumb.swiper-slide-thumb-active {
    border-color: var(--c-red);
    box-shadow: inset 0 0 0 1px var(--c-red);
}

.product-gallery__thumb-img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}

.product-gallery__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 40);
    height: calc(var(--u) * 40);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    transform: translate(-50%, -50%);
}

.product-gallery__play img {
    width: calc(var(--u) * 14);
    height: calc(var(--u) * 16);
    margin-left: calc(var(--u) * 2);
}

/* Описание под заголовком */
.product-summary {
    min-width: 0;
}

.product-summary__tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 8);
}

.product-summary .tag {
    padding: 0 calc(var(--u) * 12);
    font-size: calc(var(--u) * 13);
    line-height: calc(var(--u) * 26);
}

.m-page--inner .product-summary__title {
    margin: calc(var(--u) * 14) 0 0;
    font-family: var(--f-head);
    font-size: calc(var(--u) * 32);
    font-weight: 700;
    line-height: calc(var(--u) * 40);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.product-summary__label {
    margin-top: calc(var(--u) * 22);
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    line-height: calc(var(--u) * 22);
    color: var(--c-black);
}

.product-summary__text {
    margin-top: calc(var(--u) * 8);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.01em;
    color: var(--c-gray-50);
}

.product-summary__text p {
    margin: 0;
}

.product-summary__text p + p {
    margin-top: calc(var(--u) * 8);
}

/* Краткие версии: три строки описания, две — состава, дальше ссылка на вкладку */
.product-summary__text--3,
.product-summary__text--2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-summary__text--3 {
    -webkit-line-clamp: 3;
}

.product-summary__text--2 {
    -webkit-line-clamp: 2;
}

.product-summary__more {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 15);
    font-weight: 600;
    color: var(--c-red);
    transition: opacity .2s;
}

.product-summary__more img,
.product-delivery__link img {
    width: calc(var(--u) * 19);
    height: calc(var(--u) * 19);
}

/* Подчёркивание точками, как в макете; стрелка без подчёркивания */
.product-summary__more span,
.product-delivery__link span {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: calc(var(--u) * 4);
}

.product-summary__more:hover,
.product-delivery__link:hover {
    opacity: .75;
}

/* Правая колонка: наличие, цена с кнопкой, доставка */
.product-aside {
    min-width: 0;
}

.product-stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 12);
    height: calc(var(--u) * 53);
    padding: 0 calc(var(--u) * 20);
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 12);
    background: #fff;
}

.product-stock__status {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    font-size: calc(var(--u) * 14);
    font-weight: 600;
    color: #3B932A;
}

.product-stock__status.is-out {
    color: var(--c-gray-50);
}

.product-stock__status img {
    width: calc(var(--u) * 16);
    height: calc(var(--u) * 16);
}

.product-stock__share {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 14);
    font-weight: 500;
    color: var(--c-black);
    cursor: pointer;
    transition: color .2s;
}

.product-stock__share:hover {
    color: var(--c-blue);
}

.product-stock__share img {
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 18);
}

/* Подчёркивание, как в макете */
.product-stock__share span {
    text-decoration: underline;
    text-decoration-color: #C4C9CD;
    text-underline-offset: calc(var(--u) * 3);
}

/* Бейдж скидки на странице товара — процент в белом кружке из макета */
.product-price .product-card__discount img {
    content: url(../img/icons/percent-circle.svg);
}

.product-price {
    margin-top: calc(var(--u) * 20);
    padding: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 20);
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 16);
    background: #fff;
}

.product-price__label {
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    line-height: calc(var(--u) * 22);
    color: var(--c-black);
}

.product-price__prices {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 10);
    margin-top: calc(var(--u) * 8);
    white-space: nowrap;
}

.product-price__price {
    font-weight: 700;
    font-size: calc(var(--u) * 40);
    line-height: calc(var(--u) * 44);
    letter-spacing: -0.04em;
    color: var(--c-red);
}

.product-price__old-price {
    font-weight: 500;
    font-size: calc(var(--u) * 20);
    letter-spacing: -0.04em;
    color: var(--c-gray-30);
    text-decoration: line-through;
}

/* Кнопка покупки: красный градиент как у btn-big--red, белый кружок с иконкой слева */
.product-buy {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--u) * 60);
    margin-top: calc(var(--u) * 18);
    padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 64);
    border: 1px solid #C5342F;
    border-radius: 900px;
    background: linear-gradient(180deg, #E4534C 0%, #C02D27 61.591%, #DC342D 100%);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    cursor: pointer;
    transition: transform .2s, opacity .2s;
}

.product-buy:hover {
    transform: translateY(-2px);
}

.product-buy.is-loading {
    opacity: .7;
    pointer-events: none;
}

/* Белый кружок — псевдоэлементом, иконка поверх: иконки корзины и галочки белые
   (для красных кнопок), на кружке делаем их тёмными фильтром, а фильтр на самом
   img затемнил бы и фон */
.product-buy::before {
    content: '';
    position: absolute;
    top: calc(var(--u) * 7);
    left: calc(var(--u) * 7);
    width: calc(var(--u) * 44);
    height: calc(var(--u) * 44);
    border-radius: 50%;
    background: #fff;
}

.product-buy img {
    position: absolute;
    top: calc(var(--u) * 18);
    left: calc(var(--u) * 18);
    width: calc(var(--u) * 22);
    height: calc(var(--u) * 22);
}

/* Галочка «В Корзине» белая (для красных кнопок) — на белом кружке делаем тёмной */
.product-buy.is-added img {
    filter: brightness(0);
}

.product-buy.is-added {
    border-color: #75925A;
    background: var(--c-green);
}

.product-delivery {
    position: relative;
    margin-top: calc(var(--u) * 20);
    padding: calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 58);
    border-radius: calc(var(--u) * 16);
    background: #EAF4FB;
}

.product-delivery__icon {
    position: absolute;
    top: calc(var(--u) * 20);
    left: calc(var(--u) * 18);
    width: calc(var(--u) * 30);
    height: calc(var(--u) * 30);
}

.product-delivery__title {
    font-size: calc(var(--u) * 16);
    font-weight: 700;
    line-height: calc(var(--u) * 22);
    color: var(--c-dark-blue);
}

.product-delivery__text {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 22);
    color: var(--c-gray-50);
}

.product-delivery__text b {
    font-weight: 700;
    color: var(--c-black);
}

.product-delivery__link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 10);
    font-size: calc(var(--u) * 14);
    font-weight: 600;
    color: var(--c-blue);
    transition: opacity .2s;
}

/* Вкладки: полоса во всю ширину, активная — на голубой плашке */
.product-tabs {
    display: flex;
    gap: calc(var(--u) * 10);
    margin: calc(var(--u) * 40) calc(var(--u) * -220) 0;
    padding: calc(var(--u) * 18) calc(var(--u) * 220);
    border-top: 1px solid #F1F1F1;
    border-bottom: 1px solid #F1F1F1;
    background: #FAFAFA;
}

.product-tabs__tab {
    height: calc(var(--u) * 44);
    padding: 0 calc(var(--u) * 24);
    border-radius: calc(var(--u) * 12);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--c-black);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.product-tabs__tab:hover {
    color: var(--c-blue);
}

.product-tabs__tab.is-active {
    background: #E8F3FA;
    font-weight: 600;
    color: var(--c-blue);
}

.product-panels {
    margin-top: calc(var(--u) * 40);
}

.product-panel[hidden] {
    display: none;
}

.product-panel__text {
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

.product-panel__text h2,
.product-panel__text h3 {
    margin: 0 0 calc(var(--u) * 16);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 24);
    font-weight: 700;
    line-height: calc(var(--u) * 30);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.product-panel__text p,
.product-panel__text ul,
.product-panel__text ol {
    margin: 0 0 calc(var(--u) * 16);
}

.product-panel__text ul,
.product-panel__text ol {
    padding-left: calc(var(--u) * 22);
}

.product-panel__text > :last-child {
    margin-bottom: 0;
}

/* Описание и характеристики: текст слева, баннер каталога справа */
.product-panel--with-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 320);
    column-gap: calc(var(--u) * 60);
    align-items: start;
}

.product-panel--with-banner[hidden] {
    display: none;
}

.product-panel__banner {
    width: calc(var(--u) * 320);
    height: calc(var(--u) * 414);
    margin-top: 0;
}

/* Характеристики: строки «название … значение» с точечным отбивом, примечание с «i» */
.product-attrs__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 24);
    font-weight: 700;
    line-height: calc(var(--u) * 30);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.product-attrs__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 12);
    max-width: calc(var(--u) * 1130);
    margin: calc(var(--u) * 24) 0 0;
}

.product-attrs__row {
    display: flex;
    align-items: baseline;
    gap: calc(var(--u) * 12);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.01em;
}

.product-attrs__row dt {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: calc(var(--u) * 12);
    min-width: 0;
    color: var(--c-gray-50);
}

.product-attrs__row dt::after {
    content: '';
    flex: 1;
    border-bottom: 1px dotted #C4C9CD;
}

.product-attrs__row dd {
    flex: none;
    margin: 0;
    font-weight: 600;
    color: var(--c-black);
    text-align: right;
}

.product-attrs__note {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 10);
    margin-top: calc(var(--u) * 36);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 22);
    color: var(--c-gray-50);
}

.product-attrs__note img {
    flex: none;
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 18);
    margin-top: calc(var(--u) * 2);
    /* Иконка синяя, в макете — серая */
    filter: grayscale(1);
    opacity: .45;
}

/* Доставка и оплата: вступление, две службы с логотипами, два способа оплаты с иконками */
.product-shipping__title {
    margin: 0;
    font-family: var(--f-head);
    font-size: calc(var(--u) * 24);
    font-weight: 700;
    line-height: calc(var(--u) * 30);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.product-shipping__title--payment {
    margin-top: calc(var(--u) * 40);
}

.product-shipping__intro {
    max-width: calc(var(--u) * 1060);
    margin: calc(var(--u) * 18) 0 0;
    font-size: calc(var(--u) * 17);
    line-height: calc(var(--u) * 28);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

.product-shipping__subtitle {
    margin: calc(var(--u) * 28) 0 0;
    font-family: var(--f-head);
    font-size: calc(var(--u) * 24);
    font-weight: 700;
    line-height: calc(var(--u) * 30);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.product-shipping__services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--u) * 30) calc(var(--u) * 50);
    margin-top: calc(var(--u) * 20);
}

.product-service {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 24);
}

.product-service__logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 130);
    height: calc(var(--u) * 80);
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 14);
    background: #fff;
}

.product-service__logo img {
    max-width: calc(var(--u) * 95);
    max-height: calc(var(--u) * 36);
}

.product-service__text {
    margin: 0;
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

.product-service__text b,
.product-payment__text b {
    font-weight: 700;
}

.product-shipping__payments {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 36);
    margin-top: calc(var(--u) * 22);
}

.product-payment {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--u) * 22);
}

/* Плитка иконки — белая с тонкой рамкой, как плитки логотипов служб */
.product-payment__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 62);
    height: calc(var(--u) * 62);
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 16);
    background: #fff;
}

.product-payment__icon img {
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
}

.product-payment__title {
    margin: 0;
    font-family: var(--f-head);
    font-size: calc(var(--u) * 26);
    font-weight: 700;
    line-height: calc(var(--u) * 32);
    letter-spacing: -0.03em;
    color: var(--c-dark-blue);
}

.product-payment__text {
    margin: calc(var(--u) * 6) 0 0;
    font-size: calc(var(--u) * 17);
    line-height: calc(var(--u) * 28);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

/* «Корпоративным клиентам»: рамка как на главной, картинки на верхней кромке */
.product-corp {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(var(--u) * 146);
    margin-top: calc(var(--u) * 100);
    padding: 0 calc(var(--u) * 30);
    border: calc(var(--u) * 3) solid var(--c-red);
    border-radius: calc(var(--u) * 25);
    background: #fff;
}

.product-corp__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 26);
    font-weight: 700;
    line-height: calc(var(--u) * 35);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.product-corp__text {
    margin-left: calc(var(--u) * 43);
    padding-left: calc(var(--u) * 40);
    border-left: 1px solid #FAD3DF;
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 25);
    letter-spacing: -0.03em;
    color: var(--c-black);
}

.product-corp__text b {
    font-weight: 700;
}

.product-corp .btn-big {
    width: calc(var(--u) * 310);
    margin: 0 0 0 auto;
    padding: calc(var(--u) * 9) calc(var(--u) * 10) calc(var(--u) * 9) calc(var(--u) * 9);
}

/* Те же картинки и позиции относительно рамки, что у блока на главной */
.product-corp__cane,
.product-corp__house,
.product-corp__decor {
    position: absolute;
    z-index: 1;
    max-width: none;
    pointer-events: none;
}

/* Пряник — только в мобильной версии блока */
.product-corp__decor {
    display: none;
}

.product-corp__cane {
    left: calc(var(--u) * 583);
    top: calc(var(--u) * -81);
    width: calc(var(--u) * 267);
    height: calc(var(--u) * 301);
}

.product-corp__house {
    left: calc(var(--u) * 669);
    top: calc(var(--u) * -59);
    width: calc(var(--u) * 403);
    height: calc(var(--u) * 199);
}

/* «Похожие товары»: слайдер карточек как на главной, без полей секции */
.m-page--inner .products--similar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--u) * 40);
    padding: calc(var(--u) * 110) 0 0;
}

.products--similar .products__top {
    align-items: center;
}

/* Вопросы и ответы: розовый фон с «подтёками» во всю ширину, пряник справа */
.faq {
    position: relative;
    margin: calc(var(--u) * 110) calc(var(--u) * -220) calc(var(--u) * -100);
    padding: calc(var(--u) * 230) calc(var(--u) * 220) calc(var(--u) * 120);
    overflow: hidden;
    background: #FFEFF5 var(--faq-bg) center top / 100% auto no-repeat;
}

.faq__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(var(--u) * 1070);
    max-width: 100%;
}

.faq__title {
    margin-top: calc(var(--u) * 14);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 56);
    font-weight: 700;
    line-height: calc(var(--u) * 60);
    letter-spacing: -0.04em;
    color: var(--c-dark-blue);
}

.faq__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 12);
    width: 100%;
    margin-top: calc(var(--u) * 32);
}

.faq__item {
    border-radius: calc(var(--u) * 16);
    background: #fff;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 16);
    width: 100%;
    padding: calc(var(--u) * 15) calc(var(--u) * 20);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 16);
    font-weight: 700;
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--c-dark-blue);
    cursor: pointer;
    transition: color .2s;
}

.faq__item.is-open .faq__question {
    color: var(--c-blue);
}

.faq__toggle {
    flex: none;
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
    border-radius: 50%;
    background: #F3F3F3 url(../img/icons/faq-chevron.svg) center / calc(var(--u) * 13) no-repeat;
    transition: background-color .2s, transform .2s;
}

/* Открытый вопрос: оранжевый кружок, белый шеврон вверх */
.faq__item.is-open .faq__toggle {
    background-color: #FFA51F;
    background-image: url(../img/icons/faq-chevron-white.svg);
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 calc(var(--u) * 20) calc(var(--u) * 20);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 24);
    letter-spacing: -0.01em;
    color: var(--c-black);
}

.faq__answer[hidden] {
    display: none;
}

.faq__answer p {
    margin: 0 0 calc(var(--u) * 10);
}

.faq__answer p:last-child {
    margin-bottom: 0;
}

.faq__image {
    position: absolute;
    top: calc(var(--u) * 96);
    right: calc(var(--u) * 19);
    width: calc(var(--u) * 852);
    max-width: none;
    pointer-events: none;
}

@media (max-width: 1279px) {
    .product-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

    .product-gallery {
        grid-row: 1 / 3;
    }

    .product-gallery__main {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .product-tabs,
    .faq {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .product-panel--with-banner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }

    .product-panel__banner {
        width: 100%;
        max-width: 420px;
    }

    .product-corp__cane,
    .product-corp__house {
        display: none;
    }

    .faq__content {
        width: 100%;
    }

    .faq__image {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Мобильный макет «Карточка товара.360»: метки и заголовок над галереей, под ней
       наличие и цена, потом описание и блок о доставке. Колонки «распаковываем» через
       display: contents и расставляем порядок. Размеры — из макета (720px = 2×360),
       боковые поля страницы 16px */
    .product-page {
        padding-top: 0;
    }

    .product-top {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 22px;
    }

    .product-gallery {
        width: 100%;
        min-width: 0;
    }

    .product-gallery__main,
    .product-gallery__thumbs {
        width: 100%;
    }

    .product-summary,
    .product-aside {
        display: contents;
    }

    .product-summary__tags { order: 1; }
    .product-summary__title { order: 2; }
    .product-gallery { order: 3; }
    .product-stock { order: 4; }
    .product-price { order: 5; }
    .product-summary__label,
    .product-summary__text,
    .product-summary__more { order: 6; }
    .product-delivery { order: 7; }

    /* Метки: в макете строчными, 32px высотой */
    .product-summary__tags {
        gap: 8px;
    }

    .product-summary .tag {
        padding: 0 12px;
        font-size: 15px;
        line-height: 32px;
        letter-spacing: -0.02em;
        text-transform: none;
    }

    .m-page--inner .product-summary__title {
        margin-top: 10px;
        font-size: 24px;
        line-height: 29px;
    }

    /* Галерея: фото во всю ширину, стрелки по бокам фото, четыре миниатюры в ряд */
    .product-gallery {
        margin-top: 24px;
    }

    .product-gallery__main {
        height: auto;
        aspect-ratio: 336 / 312;
        border-radius: 20px;
    }

    .product-gallery__arrows {
        top: 50%;
        right: 0;
        bottom: auto;
        left: 0;
        justify-content: space-between;
        padding: 0 10px;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .product-gallery__arrows .arrow-btn {
        width: 32px;
        height: 32px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        pointer-events: auto;
    }

    .product-gallery__arrows .arrow-btn img {
        width: 24px;
        height: 24px;
    }

    .product-gallery__thumbs {
        margin-top: 15px;
    }

    /* Четыре миниатюры заполняют ширину: между ними 10px (spaceBetween в base.js) */
    .product-gallery__thumb {
        width: calc((100% - 30px) / 4);
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
    }

    .product-gallery__play {
        width: 32px;
        height: 32px;
    }

    .product-gallery__play img {
        width: 11px;
        height: 13px;
    }

    /* Наличие и «Поделиться» — плашка в рамке, как в макете */
    .product-stock {
        height: 52px;
        margin-top: 20px;
        padding: 0 18px;
        border-radius: 16px;
    }

    .product-stock__status,
    .product-stock__share {
        font-size: 16px;
    }

    .product-stock__status img {
        width: 18px;
        height: 18px;
    }

    .product-stock__share img {
        width: 20px;
        height: 20px;
    }

    /* Цена: карточка с тенью, кнопка 64px */
    .product-price {
        margin-top: 12px;
        padding: 20px 20px 16px;
        border-radius: 16px;
    }

    .product-price__label {
        font-size: 18px;
        line-height: 24px;
    }

    .product-price__prices {
        gap: 8px;
        margin-top: 4px;
    }

    .product-price__price {
        font-size: 32px;
        line-height: 38px;
    }

    .product-price__old-price {
        font-size: 18px;
    }

    .product-buy {
        height: 64px;
        margin-top: 16px;
        padding-left: 70px;
        font-size: 18px;
    }

    .product-buy::before {
        top: 7px;
        left: 7px;
        width: 48px;
        height: 48px;
    }

    .product-buy img {
        top: 20px;
        left: 20px;
        width: 22px;
        height: 22px;
    }

    /* Описание, состав, результат: по две строки, ссылка на вкладку */
    .product-summary__label {
        margin-top: 24px;
        font-size: 18px;
        line-height: 24px;
    }

    .product-summary__more + .product-summary__label {
        margin-top: 20px;
    }

    .product-summary__text,
    .product-summary__more {
        font-size: 16px;
        line-height: 22px;
    }

    .product-summary__text {
        margin-top: 8px;
    }

    .product-summary__text--3 {
        -webkit-line-clamp: 2;
    }

    .product-summary__more {
        margin-top: 12px;
    }

    .product-summary__more img,
    .product-delivery__link img {
        width: 22px;
        height: 22px;
    }

    .product-delivery {
        margin-top: 24px;
        padding: 16px 16px 16px 68px;
        border-radius: 16px;
    }

    .product-delivery__icon {
        top: 16px;
        left: 16px;
        width: 41px;
        height: 41px;
        object-fit: contain;
    }

    .product-delivery__title {
        font-size: 18px;
        line-height: 24px;
    }

    .product-delivery__text {
        margin-top: 4px;
    }

    .product-delivery__text,
    .product-delivery__link {
        font-size: 16px;
        line-height: 22px;
    }

    .product-delivery__link {
        margin-top: 10px;
    }

    /* Вкладки — лента с прокруткой между двумя линиями, активная — голубая таблетка */
    .product-tabs {
        gap: 6px;
        margin: 20px -16px 0;
        padding: 14px 16px 12px;
        overflow-x: auto;
        background: none;
        white-space: nowrap;
        scrollbar-width: none;
    }

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

    .product-tabs__tab {
        flex: none;
        height: 38px;
        padding: 0 18px;
        border-radius: 900px;
        font-size: 16px;
    }

    .product-panels {
        margin-top: 36px;
    }

    .product-panel--with-banner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .product-panel__text,
    .faq__answer {
        font-size: 16px;
        line-height: 22px;
    }

    .product-panel__text h2,
    .product-panel__text h3 {
        margin-bottom: 14px;
        font-size: 22px;
        line-height: 28px;
    }

    .product-panel__text p,
    .product-panel__text ul,
    .product-panel__text ol {
        margin-bottom: 18px;
    }

    /* Баннер каталога под текстом — те же мобильные правила, что у баннера в каталоге */
    .product-panel__banner {
        max-width: none;
        height: auto;
        margin-top: 0;
    }

    /* Характеристики (макет 360): заголовок 24px, строки 17px с шагом 28px,
       примечание 17px с иконкой 20px */
    .product-attrs__title {
        font-size: 24px;
        line-height: 30px;
    }

    .product-attrs__list {
        gap: 6px;
        margin-top: 16px;
    }

    .product-attrs__row,
    .product-attrs__note {
        font-size: 17px;
        line-height: 22px;
    }

    .product-attrs__note {
        gap: 16px;
        margin-top: 30px;
    }

    .product-attrs__note img {
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    /* Доставка и оплата (макет 360): заголовки 24px, вступление 17/28, службы
       столбиком с плитками 94×58 и текстом 17/22, оплата с плитками 58px */
    .product-shipping__title,
    .product-shipping__subtitle {
        font-size: 24px;
        line-height: 30px;
    }

    .product-shipping__intro {
        margin-top: 12px;
        font-size: 17px;
        line-height: 28px;
    }

    .product-shipping__subtitle {
        margin-top: 12px;
    }

    .product-shipping__services {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 20px;
    }

    .product-service {
        gap: 18px;
    }

    .product-service__logo {
        width: 94px;
        height: 58px;
        border-radius: 12px;
    }

    .product-service__logo img {
        max-width: 64px;
        max-height: 26px;
    }

    /* Текст у служб и способов оплаты в макете мельче вступления — 14px: при нём
       строки переносятся ровно как в макете (проверено по ширине каждой строки) */
    .product-service__text {
        font-size: 14px;
        line-height: 22px;
    }

    .product-shipping__title--payment {
        margin-top: 12px;
    }

    .product-shipping__payments {
        gap: 12px;
        margin-top: 12px;
    }

    /* 12px: колонка текста 258px, как в макете, иначе первая строка переносится раньше */
    .product-payment {
        gap: 12px;
    }

    /* Заголовок способа оплаты в макете ниже верха плитки на 12px */
    .product-payment__body {
        padding-top: 12px;
    }

    .product-payment__icon {
        width: 58px;
        height: 58px;
        border-radius: 14px;
    }

    .product-payment__icon img {
        width: 24px;
        height: 24px;
    }

    .product-payment__title {
        font-size: 20px;
        line-height: 24px;
    }

    .product-payment__text {
        margin-top: 4px;
        font-size: 14px;
        line-height: 22px;
    }

    /* «Корпоративным клиентам»: карточка столбиком, леденец на верхней кромке справа,
       домик во всю ширину по низу карточки (как в блоке на главной), пряник слева на домике */
    .product-corp {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        margin-top: 40px;
        padding: 24px 20px 0;
        overflow: hidden;
        border-width: 2px;
        border-radius: 20px;
    }

    .product-corp__title {
        padding-right: 96px;
        font-size: 22px;
        line-height: 28px;
    }

    .product-corp__text {
        margin: 14px 0 0;
        padding: 0;
        border: 0;
        font-size: 16px;
        line-height: 24px;
    }

    /* Кнопка 52px: кружок 40px, подпись 15px — иначе не помещается в ширину карточки */
    .product-corp .btn-big {
        width: 100%;
        margin: 18px 0 0;
        padding: 6px 12px 6px 6px;
    }

    .product-corp .btn-big__icon {
        width: 40px;
        height: 40px;
    }

    .product-corp .btn-big__text {
        font-size: 15px;
    }

    .product-corp__cane {
        display: block;
        top: -14px;
        right: 12px;
        left: auto;
        width: 104px;
        height: auto;
    }

    /* Слева в картинке пустое поле под десктоп — обрезаем, показываем правую часть */
    .product-corp__house {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% + 40px);
        height: auto;
        aspect-ratio: 549 / 398;
        margin: 8px -20px 0;
        object-fit: cover;
        object-position: right center;
    }

    .product-corp__decor {
        display: block;
        bottom: 100px;
        left: 18px;
        width: 44px;
    }

    /* «Похожие товары»: плашка и заголовок, две компактные карточки в ряд,
       стрелки под ними по центру */
    .m-page--inner .products--similar {
        gap: 24px;
        padding: 40px 0 0;
    }

    .products--similar .products__top {
        display: contents;
    }

    .products--similar .products__head {
        order: 1;
        align-self: stretch;
        gap: 14px;
    }

    .products--similar .badge,
    .faq .badge {
        padding: 4px 14px;
        font-size: 15px;
        line-height: 23px;
    }

    .products--similar .badge img,
    .faq .badge img {
        width: 12px;
        height: 12px;
    }

    .products--similar .products__title {
        font-size: 34px;
        line-height: 38px;
    }

    .products--similar .products__slider {
        order: 2;
        width: 100%;
        margin: -24px 0;
        padding: 24px 0;
    }

    .products--similar .products__arrows {
        order: 3;
        align-self: center;
        display: flex;
        gap: 14px;
        margin-top: 8px;
    }

    .products--similar .products__arrows .arrow-btn {
        width: 54px;
        height: 54px;
    }

    .products.products--similar .product-card.swiper-slide {
        width: calc((100% - 12px) / 2);
        margin-right: 12px;
    }

    .products--similar .product-card {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .products--similar .product-card__media {
        height: auto;
        aspect-ratio: 162 / 152;
        border: 1px solid var(--c-gray-20);
        border-radius: 16px;
    }

    .products--similar .product-card__tags {
        top: auto;
        bottom: 8px;
        left: 8px;
        gap: 4px;
    }

    .products--similar .tag {
        padding: 0 7px;
        font-size: 11px;
        line-height: 20px;
    }

    .products--similar .product-card__body {
        gap: 10px;
        padding: 14px 0 0;
    }

    .products--similar .product-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 40px;
        font-size: 17px;
        line-height: 20px;
    }

    .products--similar .product-card__prices {
        gap: 5px;
        height: auto;
    }

    .products--similar .product-card__price {
        font-size: 22px;
        line-height: 26px;
    }

    .products--similar .product-card__old-price {
        font-size: 14px;
        line-height: 20px;
    }

    .products--similar .product-card__discount {
        padding: 2px 6px 2px 2px;
        font-size: 12px;
        line-height: 16px;
    }

    .products--similar .product-card__discount img {
        width: 16px;
        height: 16px;
        margin: 0;
    }

    .products--similar .product-card__specs {
        display: none;
    }

    .products--similar .product-card__cart {
        gap: 8px;
        margin-top: 2px;
        padding: 7px 10px;
        font-size: 15px;
        line-height: 20px;
    }

    .products--similar .product-card__cart img {
        width: 18px;
        height: 18px;
    }

    /* Вопросы и ответы: вопрос — белая плашка, ответ раскрывается под ней на розовом
       фоне. Леденец из макета уже нарисован в фоновой картинке — отдельный не нужен */
    .faq {
        margin: 40px -16px -56px;
        padding: 100px 16px 52px;
    }

    .faq__title {
        margin-top: 14px;
        font-size: 34px;
        line-height: 38px;
    }

    .faq__list {
        margin-top: 24px;
        gap: 10px;
    }

    .faq__item {
        border-radius: 0;
        background: none;
    }

    .faq__question {
        gap: 12px;
        padding: 13px 16px;
        border-radius: 16px;
        background: #fff;
        font-size: 18px;
        line-height: 22px;
    }

    .faq__toggle {
        width: 30px;
        height: 30px;
        background-size: 16px;
    }

    .faq__answer {
        padding: 12px 16px 2px;
    }
}

/* ============================================================
   Страница входа (login.php) — макет «Вход», 1920×1080
   ============================================================ */
.login-page {
    min-height: 100vh;
    background: #FBEFF1;
}

.login {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #FBEFF1 url(../img/login-bg.jpg) center bottom / cover no-repeat;
}

.login__back {
    position: absolute;
    top: calc(var(--u) * 86);
    right: calc(var(--u) * 219);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 15);
    height: calc(var(--u) * 60);
    padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 10);
    border-radius: 900px;
    background: var(--g-orange);
    font-size: calc(var(--u) * 16);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    transition: transform .2s;
}

.login__back:hover {
    transform: translateY(-2px);
}

.login__back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 40);
    height: calc(var(--u) * 40);
    border-radius: 50%;
    background: #fff;
}

.login__back-icon img {
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 18);
}

.login__side {
    position: absolute;
    top: calc(var(--u) * 64);
    left: calc(var(--u) * 220);
    width: calc(var(--u) * 400);
}

.login__logo {
    display: block;
    width: calc(var(--u) * 98);
}

.login__logo img {
    width: 100%;
    height: auto;
}

.login__title {
    margin-top: calc(var(--u) * 72);
    font-family: var(--f-head);
    font-size: calc(var(--u) * 64);
    font-weight: 700;
    line-height: calc(var(--u) * 68);
    letter-spacing: -0.06em;
    color: var(--c-black);
}

.login__text {
    max-width: calc(var(--u) * 365);
    margin-top: calc(var(--u) * 23);
    font-size: calc(var(--u) * 18);
    line-height: calc(var(--u) * 28);
    letter-spacing: -0.04em;
    color: var(--c-gray-50);
}

.login__benefits {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 20);
    margin: calc(var(--u) * 22) 0 0;
    padding: 0;
    list-style: none;
}

.login__benefit {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 17);
}

.login__benefit-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 54);
    height: calc(var(--u) * 54);
    border-radius: 50%;
    background: #fff;
}

.login__benefit-icon img {
    width: calc(var(--u) * 24);
    height: calc(var(--u) * 24);
}

.login__benefit-text {
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.02em;
    color: #7A8790;
}

.login__benefit-text b,
.login__benefit-text strong {
    font-weight: 600;
    color: var(--c-gray-50);
}

.login__card {
    position: absolute;
    top: calc(var(--u) * 301);
    left: calc(var(--u) * 1068);
    z-index: 1;
    width: calc(var(--u) * 462);
    padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 42);
    border-radius: calc(var(--u) * 20);
    background: #fff;
    box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(150, 70, 90, .08);
}

.login__star {
    position: absolute;
    top: calc(var(--u) * -70);
    left: calc(var(--u) * 304);
    width: calc(var(--u) * 220);
    height: auto;
    pointer-events: none;
}

/* Форма входа */
.auth {
    text-align: left;
}

.auth.is-busy {
    cursor: progress;
}

.auth [hidden] {
    display: none !important;
}

.auth__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: calc(var(--u) * 36);
    letter-spacing: -0.04em;
    color: var(--c-black);
}

.auth__text {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 27);
    color: var(--c-gray-50);
}

.auth__tabs {
    display: flex;
    gap: calc(var(--u) * 12);
    margin-top: calc(var(--u) * 18);
}

.auth__tab {
    flex: 1 1 0;
    height: calc(var(--u) * 48);
    padding: 0;
    border: 1px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 12);
    background: #fff;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 16);
    font-weight: 500;
    color: var(--c-black);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.auth__tab:hover {
    border-color: var(--c-gray-30);
}

.auth__tab.is-active {
    border-color: var(--c-red);
    background: var(--c-red);
    color: #fff;
}

.auth__error,
.auth__hint {
    margin-top: calc(var(--u) * 16);
    padding: calc(var(--u) * 10) calc(var(--u) * 14);
    border-radius: calc(var(--u) * 10);
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 20);
}

.auth__error {
    background: #FFF0F2;
    color: var(--c-red);
}

.auth__hint {
    background: #F0F7FB;
    color: var(--c-blue);
}

.auth-field {
    margin-top: calc(var(--u) * 21);
}

.auth-field + .auth-field {
    margin-top: calc(var(--u) * 14);
}

.auth-field__label {
    display: block;
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 20);
    color: var(--c-black);
}

.auth-field__req {
    color: var(--c-red);
}

.auth-field__box {
    position: relative;
    margin-top: calc(var(--u) * 4);
}

.auth-field__box--phone::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--u) * 19);
    width: calc(var(--u) * 16);
    height: calc(var(--u) * 16);
    background: url(../img/icons/input-phone.svg) center / contain no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-field__input {
    width: 100%;
    height: calc(var(--u) * 58);
    padding: 0 calc(var(--u) * 18);
    border: 1px solid #E6E6E6;
    border-radius: calc(var(--u) * 10);
    background: #fff;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 15);
    color: #242529;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.auth-field__box--phone .auth-field__input {
    padding-left: calc(var(--u) * 42);
}

.auth-field__input::placeholder {
    color: #A0A6AB;
}

.auth-field__input:focus {
    border-color: var(--c-blue);
    box-shadow: 0 0 0 calc(var(--u) * 3) rgba(46, 136, 189, .15);
}

.auth-code {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--u) * 10);
    margin-top: calc(var(--u) * 4);
}

.auth-code__digit {
    padding: 0 calc(var(--u) * 19);
    text-align: left;
}

.auth-code__digit::placeholder {
    color: #AEB2B5;
}

.auth-field.is-error .auth-field__input {
    border-color: var(--c-red);
}

.auth__btn {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 16);
    width: fit-content;
    max-width: 100%;
    height: calc(var(--u) * 66);
    margin: calc(var(--u) * 23) auto 0;
    padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 18);
    border: 0;
    border-radius: 900px;
    background: linear-gradient(180deg, #E4554F 0%, #C83A34 50%, #BE2D28 62%, #DC3A35 100%);
    box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(228, 85, 79, .35);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 16);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s, opacity .2s;
}

.auth__btn:hover {
    transform: translateY(-2px);
}

.auth__btn:disabled {
    background: #CCD0D1;
    box-shadow: none;
    color: #EFF0F2;
    transform: none;
    cursor: default;
}

.auth__btn:disabled .auth__btn-icon {
    background: #E6E8EA;
}

.auth__btn:disabled .auth__btn-icon img {
    filter: grayscale(1);
    opacity: .45;
}

.auth__btn-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 38);
    height: calc(var(--u) * 38);
    border-radius: 50%;
    background: #fff;
}

.auth__btn-icon img {
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 18);
}

.auth__link {
    display: block;
    width: fit-content;
    margin: calc(var(--u) * 19) auto 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--f-text);
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 20);
    color: var(--c-blue);
    text-decoration: underline dashed rgba(46, 136, 189, .5);
    text-underline-offset: calc(var(--u) * 4);
    cursor: pointer;
    transition: color .2s;
}

.auth__link:hover {
    color: var(--c-red);
}

.auth__link:disabled {
    color: var(--c-gray-30);
    text-decoration-color: rgba(174, 178, 181, .5);
    cursor: default;
}

.auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 8) calc(var(--u) * 20);
}

.auth__links .auth__link {
    margin-left: 0;
    margin-right: 0;
}

/* Планшет и телефон: колонкой */
@media (max-width: 1279px) {
    .login {
        --u: 1px;
        display: flex;
        flex-direction: column;
        padding: 24px 16px 40px;
        background-image: url(../img/login-bg-mobile.jpg);
        background-position: center top;
    }

    .login__back {
        position: static;
        order: -1;
        align-self: flex-end;
        height: 48px;
        gap: 10px;
        padding: 0 20px 0 6px;
        font-size: 14px;
    }

    .login__back-icon {
        width: 36px;
        height: 36px;
    }

    .login__side {
        position: static;
        order: 2;
        width: 100%;
        max-width: 462px;
        margin: 24px auto 0;
        padding: 24px 20px 28px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .login__logo {
        display: none;
    }

    .login__title {
        margin-top: 0;
        font-size: 40px;
        line-height: 42px;
    }

    .login__text {
        max-width: none;
        margin-top: 14px;
        font-size: 16px;
        line-height: 24px;
    }

    .login__benefits {
        gap: 14px;
        margin-top: 20px;
    }

    .login__benefit-icon {
        box-shadow: 0 4px 14px rgba(46, 136, 189, .12);
    }

    .login__card {
        position: relative;
        top: auto;
        left: auto;
        order: 1;
        width: 100%;
        max-width: 462px;
        margin: 28px auto 0;
        padding: 28px 20px 32px;
    }

    .login__star {
        top: -44px;
        right: -30px;
        left: auto;
        width: 140px;
    }

    .auth__title {
        font-size: 26px;
        line-height: 32px;
    }

    .auth__text {
        font-size: 15px;
        line-height: 23px;
    }

    .auth__btn {
        width: 100%;
        justify-content: center;
        padding: 0 24px 0 14px;
    }
}

/* Регистрация: широкая карточка, тип покупателя, поля в две колонки */
.login__card--wide {
    top: calc(var(--u) * 207.5);
    left: calc(var(--u) * 848);
    width: calc(var(--u) * 852);
}

.login__card--wide .login__star {
    top: calc(var(--u) * -37);
    left: calc(var(--u) * 439);
    width: calc(var(--u) * 139);
}

.login__card--wide .auth__tabs {
    max-width: calc(var(--u) * 382);
    margin: calc(var(--u) * 21) auto 0;
}

.auth-types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 20);
    margin-top: calc(var(--u) * 21);
}

.auth-type {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 15);
    min-height: calc(var(--u) * 89);
    padding: calc(var(--u) * 16) calc(var(--u) * 48) calc(var(--u) * 16) calc(var(--u) * 16);
    border: 1.5px solid var(--c-gray-20);
    border-radius: calc(var(--u) * 16);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.auth-type:hover {
    border-color: var(--c-gray-30);
}

.auth-type.is-active {
    border-color: var(--c-red);
    background: #FEF8FA;
}

.auth-type__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.auth-type__icon {
    flex-shrink: 0;
    width: calc(var(--u) * 54);
    height: calc(var(--u) * 54);
    border-radius: 50%;
    background: var(--c-gray-20) center / calc(var(--u) * 24) no-repeat;
    transition: background-color .2s;
}

.auth-type--person .auth-type__icon {
    background-image: url(../img/icons/auth-person-gray.svg);
}

.auth-type--company .auth-type__icon {
    background-image: url(../img/icons/auth-company-gray.svg);
}

.auth-type.is-active .auth-type__icon {
    background-color: #FED0DB;
}

.auth-type--person.is-active .auth-type__icon {
    background-image: url(../img/icons/auth-person.svg);
}

.auth-type--company.is-active .auth-type__icon {
    background-image: url(../img/icons/auth-company.svg);
}

.auth-type__body {
    display: block;
    min-width: 0;
}

.auth-type__title {
    display: block;
    font-size: calc(var(--u) * 17);
    font-weight: 600;
    line-height: calc(var(--u) * 22);
    letter-spacing: -0.02em;
    color: var(--c-black);
}

.auth-type__short {
    display: none;
}

.auth-type__text {
    display: block;
    margin-top: calc(var(--u) * 5);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 20);
    color: var(--c-gray-50);
}

.auth-type__radio {
    position: absolute;
    top: calc(var(--u) * 18);
    right: calc(var(--u) * 18);
    width: calc(var(--u) * 20);
    height: calc(var(--u) * 20);
    border: 2px solid var(--c-gray-20);
    border-radius: 50%;
    background: #fff;
    transition: border-color .2s;
}

.auth-type.is-active .auth-type__radio {
    border-color: var(--c-red);
}

.auth-type.is-active .auth-type__radio::after {
    content: '';
    position: absolute;
    inset: calc(var(--u) * 3);
    border-radius: 50%;
    background: var(--c-red);
}

.auth-type__input:focus-visible ~ .auth-type__radio {
    box-shadow: 0 0 0 calc(var(--u) * 3) rgba(244, 0, 52, .2);
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 calc(var(--u) * 20);
}

.auth-grid .auth-field,
.auth-grid .auth-field + .auth-field {
    margin-top: calc(var(--u) * 20);
}

.auth__resend {
    margin-top: calc(var(--u) * 20);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 20);
    text-align: center;
    color: var(--c-black);
}

.auth__resend .auth__link {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.auth__form--register .auth__btn {
    margin-top: calc(var(--u) * 24);
}

/* Попап «Отправка кода на Email» */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.auth-modal[hidden] {
    display: none;
}

body.is-modal-open {
    overflow: hidden;
}

.auth-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(32, 45, 63, .92);
}

.auth-modal__dialog {
    position: relative;
    width: calc(var(--u) * 484);
    max-width: 100%;
    padding: calc(var(--u) * 30) calc(var(--u) * 30) calc(var(--u) * 32);
    border-radius: calc(var(--u) * 24);
    background: #fff;
}

.auth-modal__close {
    position: absolute;
    top: calc(var(--u) * -10);
    right: calc(var(--u) * -19);
    width: calc(var(--u) * 31);
    height: calc(var(--u) * 31);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.auth-modal__close::before,
.auth-modal__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 1.5);
    background: #A7ABAE;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: background-color .2s;
}

.auth-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.auth-modal__close:hover::before,
.auth-modal__close:hover::after {
    background: #fff;
}

.auth-modal__title {
    font-family: var(--f-head);
    font-size: calc(var(--u) * 30);
    font-weight: 700;
    line-height: calc(var(--u) * 36);
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--c-black);
}

.auth-modal__text {
    margin-top: calc(var(--u) * 11);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 27);
    text-align: center;
    color: var(--c-gray-50);
}

.auth-modal__field.auth-field {
    margin-top: calc(var(--u) * 12);
}

.auth-modal__field .auth-code {
    margin-top: calc(var(--u) * 6);
}

.auth-modal .auth__error {
    margin-top: calc(var(--u) * 12);
}

.auth-modal__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--u) * 82);
    margin-top: calc(var(--u) * 16);
    padding: 0 calc(var(--u) * 82);
    border: 0;
    border-radius: 900px;
    background: var(--g-orange);
    font-family: var(--f-text);
    font-size: calc(var(--u) * 17);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: transform .2s;
}

.auth-modal__btn:hover {
    transform: translateY(-2px);
}

.auth-modal__btn:disabled {
    background: #CCD0D1;
    color: #EFF0F2;
    transform: none;
    cursor: default;
}

.auth-modal__btn-icon {
    position: absolute;
    top: calc(var(--u) * 10);
    left: calc(var(--u) * 10);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--u) * 62);
    height: calc(var(--u) * 62);
    border-radius: 50%;
    background: #fff;
}

.auth-modal__btn-icon img {
    width: calc(var(--u) * 18);
    height: calc(var(--u) * 18);
    filter: grayscale(1) brightness(.3);
}

.auth-modal__btn:disabled .auth-modal__btn-icon {
    background: #E6E8EA;
}

.auth-modal__btn:disabled .auth-modal__btn-icon img {
    opacity: .45;
}

.auth-modal__note {
    margin-top: calc(var(--u) * 14);
    font-size: calc(var(--u) * 15);
    line-height: calc(var(--u) * 20);
    text-align: center;
    color: var(--c-gray-50);
}

.auth-modal__note + .auth-modal__note {
    margin-top: calc(var(--u) * 16);
}

.auth-modal__note b {
    font-weight: 500;
    color: var(--c-black);
}

.auth-modal__note--dark {
    color: var(--c-black);
}

.auth-modal__note .auth__link {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* Телефон: макет «Вход» 360 */
@media (max-width: 767px) {
    .login {
        padding: 0 12px 48px;
        background: #FBEFF1 url(../img/login-bg-mobile.jpg) center top / 100% auto no-repeat;
    }

    .login__back {
        position: absolute;
        top: 34px;
        right: 13px;
        order: 0;
        height: 35px;
        gap: 8px;
        padding: 0 10px 0 4px;
        font-size: 13px;
    }

    .login__back-icon {
        width: 28px;
        height: 28px;
    }

    .login__back-icon img {
        width: 14px;
        height: 14px;
    }

    .login__side {
        order: 0;
        max-width: none;
        margin: 0;
        padding: 20px 0 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-align: center;
    }

    .login__logo {
        display: block;
        width: 63px;
    }

    .login__title {
        margin-top: 29px;
        font-size: 36px;
        line-height: 40px;
        letter-spacing: -0.06em;
    }

    .login__title br {
        display: none;
    }

    .login__text {
        max-width: 324px;
        margin: 14px auto 0;
        font-size: 16px;
        line-height: 22px;
    }

    .login__benefits {
        display: none;
    }

    .login__card {
        order: 1;
        max-width: none;
        margin: 34px 0 0;
        padding: 20px 20px 22px;
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(150, 70, 90, .1);
    }

    .login__star {
        top: -46px;
        right: -18px;
        left: auto;
        width: 132px;
    }

    .auth__title {
        font-size: 22px;
        line-height: 28px;
        text-align: center;
    }

    .auth__text {
        margin-top: 10px;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
    }

    .auth__tabs {
        margin-top: 20px;
    }

    .auth-field {
        margin-top: 19px;
    }

    .auth-field__box {
        margin-top: 6px;
    }

    .auth__btn {
        width: calc(100% + 8px);
        max-width: none;
        justify-content: flex-start;
        height: 60px;
        margin: 21px 0 0 -4px;
        padding: 0 20px 0 10px;
        gap: 20px;
        font-size: 15px;
    }

    .auth__btn-icon {
        width: 40px;
        height: 40px;
    }

    .auth__link {
        margin-top: 20px;
    }
}

/* Регистрация на планшете и телефоне: карточка той же ширины, что и вход */
@media (max-width: 1279px) {
    .login__card--wide {
        top: auto;
        left: auto;
        width: 100%;
    }

    .login__card--wide .login__star {
        top: -44px;
        right: -30px;
        left: auto;
        width: 140px;
    }

    .login__card--wide .auth__tabs {
        max-width: none;
    }

    .auth-types,
    .auth-grid {
        grid-template-columns: 1fr;
    }

    .auth-types {
        gap: 12px;
    }

    .auth-type {
        min-height: 0;
        padding: 14px 44px 14px 14px;
        border-radius: 14px;
    }

    .auth-type__title {
        font-size: 16px;
    }

    .auth-type__text {
        margin-top: 3px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .login__card--wide {
        padding-bottom: 16px;
    }

    .login__card--wide .login__star {
        top: -46px;
        right: -18px;
        width: 132px;
    }

    .login__card--wide .auth__tabs {
        max-width: none;
    }

    /* Тип покупателя — просто радиокнопки в два столбца, без карточек */
    .auth-types {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 21px;
    }

    .auth-type {
        display: grid;
        grid-template-columns: 22px 1fr;
        column-gap: 11px;
        align-items: start;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .auth-type.is-active {
        background: none;
    }

    .auth-type__icon {
        display: none;
    }

    .auth-type__radio {
        position: relative;
        top: auto;
        right: auto;
        grid-row: 1;
        width: 22px;
        height: 22px;
    }

    .auth-type.is-active .auth-type__radio::after {
        inset: 4px;
    }

    .auth-type__body {
        grid-column: 2;
    }

    .auth-type__title {
        font-size: 17px;
        line-height: 22px;
    }

    .auth-type__full {
        display: none;
    }

    .auth-type__short {
        display: inline;
    }

    .auth-type__text {
        margin-top: 5px;
        font-size: 15px;
        line-height: 22px;
        letter-spacing: -0.02em;
    }

    .auth-grid .auth-field,
    .auth-grid .auth-field + .auth-field {
        margin-top: 8px;
    }

    .auth__form--register .auth__btn,
    .auth__form--code .auth__btn {
        width: fit-content;
        justify-content: center;
        margin: 24px auto 0;
        padding: 0 30px 0 10px;
    }

    .auth-code {
        gap: 10px;
        margin-top: 6px;
    }

    .auth-code__digit {
        padding: 0 18px;
    }
}

/* Попап письма на телефоне — макет 360 */
@media (max-width: 767px) {
    .auth-modal {
        padding: 12px;
    }

    .auth-modal__dialog {
        width: 100%;
        padding: 20px 22px 22px;
        border-radius: 20px;
    }

    .auth-modal__close {
        top: 6px;
        right: 8px;
        width: 32px;
        height: 32px;
    }

    .auth-modal__close::before,
    .auth-modal__close::after {
        width: 16px;
        height: 1.5px;
    }

    .auth-modal__close:hover::before,
    .auth-modal__close:hover::after {
        background: var(--c-black);
    }

    .auth-modal__title {
        font-size: 22px;
        line-height: 28px;
    }

    .auth-modal__text {
        margin-top: 12px;
        font-size: 16px;
        line-height: 24px;
    }

    .auth-modal__field.auth-field {
        margin-top: 9px;
    }

    .auth-modal .auth__error {
        margin-top: 10px;
    }

    .auth-modal__btn {
        height: 60px;
        margin-top: 12px;
        padding: 0 60px;
        font-size: 15px;
    }

    .auth-modal__btn-icon {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
    }

    .auth-modal__note {
        margin-top: 10px;
        font-size: 15px;
        line-height: 21px;
    }

    .auth-modal__note + .auth-modal__note {
        margin-top: 11px;
    }

    .auth-modal__note--dark {
        font-size: 13px;
        line-height: 20px;
    }
}