/* ==========================================================================
   CART & CHECKOUT — follows site design system
   ========================================================================== */

/* ===== SHARED PAGE BASE ===== */
/* Минимальная высота - чтобы на совсем короткой странице подвал не
   вставал посреди экрана. Раньше было calc(100vh - 180px): под контентом
   кабинета оставалось ~330px пустоты, а подвал (464px) начинался ниже
   первого экрана - до него приходилось долго крутить. */
.cart-page,
.checkout-page {
    padding: var(--spacing-lg) 0 var(--spacing-xxl);
    min-height: calc(100vh - 460px);
}

/* Пустая корзина — как страница избранного: блок «Ваша корзина пуста», и
   сразу под ним подвал. Растяжка на высоту экрана оставляла под блоком
   около 400 пикселей пустоты, и страница выглядела оборванной. Для корзины
   с товарами растяжка остаётся: она удерживает подвал внизу, когда товар
   один-два.

   Старые браузеры без :has() просто сохранят прежний отступ — на
   работоспособность это не влияет. */
.cart-page:has(.cart-empty) {
    min-height: 0;
    /* И нижний отступ страницы тоже убираем: у избранного его нет, подвал
       начинается сразу под блоком. Своё поле в 48px у блока остаётся. */
    padding-bottom: 0;
}

/* Содержимое корзины лежит в колонке шириной 900px, прижатой к левому краю
   (.cart-inner). Для списка товаров это правильно, но пустое состояние
   центрировалось внутри этой колонки, а не по странице: надпись «Ваша
   корзина пуста» оказывалась заметно левее середины экрана — на 1320px
   сдвиг составлял 174 пикселя. На странице избранного такого ограничения
   нет, блок занимает всю ширину. Для пустой корзины снимаем ограничение. */
.cart-page:has(.cart-empty) .cart-inner {
    max-width: none;
}

/* Cart uses a narrower inner container */
.cart-inner {
    max-width: 900px;
}

/* 26px/600 — общий размер заголовка страницы по всему сайту (см. также
   .about-page__title, .catalog-page-title, .account-title,
   .auth-page__title). В макете заголовок был 36px. */
.cart-page__title,
.checkout-page__title {
    font-family: var(--font-headers);
    font-size: var(--heading-page);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg);
    line-height: var(--heading-page-lh);
}

/* ===== BACK LINK ===== */
.cart-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-default);
}
.cart-back:hover { color: var(--color-accent); }
.cart-back svg { flex-shrink: 0; }

/* ===== CART BAR (coupon + total + action) ===== */
.cart-bar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--spacing-sm);
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.cart-coupon {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    max-width: 360px;
    background: #fff;
    position: relative;
}

.coupon-hint {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
    flex-shrink: 0;
    /* Стала кнопкой — гасим её собственное оформление. */
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.coupon-hint__icon {
    color: var(--color-text-secondary);
    cursor: pointer;
    display: block;
    transition: color 0.2s;
}

.coupon-hint:hover .coupon-hint__icon {
    color: var(--color-accent);
}

.coupon-hint__tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    /* Прижимаем к правому краю значка, а не центрируем по нему: значок стоит
       у правой границы блока купона, и подсказка шириной 240px при
       центрировании наполовину уезжала за экран и обрезалась. */
    right: 0;
    left: auto;
    transform: none;
    background: var(--color-text-primary);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 6px;
    /* Ширина по месту: 240px там, где они есть, иначе по ширине экрана. */
    width: max-content;
    max-width: min(240px, calc(100vw - 32px));
    text-align: left;
    white-space: normal;
    z-index: 10;
    pointer-events: none;
}

.coupon-hint__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    /* Хвостик — под самим значком, то есть у правого края подсказки. */
    right: 14px;
    border: 6px solid transparent;
    border-top-color: var(--color-text-primary);
}

/* Наведение — для мыши, фокус — для касания и клавиатуры. */
.coupon-hint:hover .coupon-hint__tooltip,
.coupon-hint:focus .coupon-hint__tooltip,
.coupon-hint:focus-visible .coupon-hint__tooltip {
    display: block;
}
.cart-coupon__input {
    flex: 1;
    height: 44px;
    border: none;
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    outline: none;
    background: transparent;
}
.cart-coupon__input::placeholder { color: var(--color-placeholder); }
.cart-coupon__btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color var(--transition-default), background var(--transition-default);
    flex-shrink: 0;
}
.cart-coupon__btn:hover { color: var(--color-accent); background: var(--color-accent-bg); }

.cart-bar__total {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.cart-bar__order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 var(--spacing-lg);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    border: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-default);
}
.cart-bar__order-btn:hover { background: var(--color-accent-hover); }

/* ===== CART ITEMS ===== */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    gap: var(--spacing-sm) var(--spacing-md);
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}
.cart-item:first-child { border-top: 1px solid var(--color-border); }

.cart-item__img {
    width: 100px;
    height: 72px;
    object-fit: contain;
    background: var(--color-bg-secondary);
    display: block;
}

.cart-item__info {
    min-width: 0;
}
.cart-item__name {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 6px;
}
.cart-item__name:hover { color: var(--color-accent); }
.cart-item__delivery {
    font-size: 13px;
    color: var(--color-text-secondary);
}
.cart-item__delivery span { color: var(--color-accent); font-weight: 500; }

.cart-item__price {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.cart-item__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    height: 40px;
}
.cart-qty__btn {
    width: 36px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 18px;
    line-height: 1;
    transition: color var(--transition-default), background var(--transition-default);
}
.cart-qty__btn:hover { color: var(--color-accent); background: var(--color-accent-bg); }
.cart-qty__val {
    min-width: 36px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item__actions {
    display: flex;
    gap: 6px;
}
.cart-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-bg);
    border: none;
    cursor: pointer;
    color: var(--color-accent);
    transition: background var(--transition-default), color var(--transition-default);
}
.cart-icon-btn:hover { background: var(--color-accent); color: #fff; }

/* ===== CHECKOUT LAYOUT ===== */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-xl);
    align-items: start;
}

/* ===== CHECKOUT ALERT ===== */
.checkout-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.checkout-alert__icon { flex-shrink: 0; color: #52c41a; margin-top: 2px; }
.checkout-alert__text {
    font-size: 14px;
    color: #3a7a1e;
    line-height: 1.6;
}

/* ===== CHECKOUT STEPS ===== */
.checkout-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.checkout-step {
    border: 1px solid var(--color-border);
    margin-bottom: -1px;
}

.checkout-step__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
}

.checkout-step__num-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.checkout-step__num {
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
}
.checkout-step--done .checkout-step__num {
    background: var(--color-accent);
    color: #fff;
}

.checkout-step__title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.checkout-step__edit {
    font-size: 13px;
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-body);
    transition: opacity var(--transition-default);
}
.checkout-step__edit:hover { text-decoration: underline; }

/* Step body */
.checkout-step__body {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    background: #fff;
    display: none;
}
.checkout-step--active .checkout-step__body { display: block; }

/* Done summary (collapsed view) */
.checkout-step__summary {
    padding: 10px var(--spacing-md);
    background: #fff;
    font-size: 14px;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    display: none;
}
.checkout-step--done .checkout-step__summary { display: block; }

/* ===== STEP 1: ORDER ITEMS ===== */
.co-product {
    display: grid;
    grid-template-columns: 56px 1fr auto auto auto;
    gap: var(--spacing-sm);
    align-items: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
}
.co-product__img {
    width: 56px;
    height: 40px;
    object-fit: contain;
    background: var(--color-bg-secondary);
}
.co-product__name { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.co-product__col-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.co-product__col-val { font-size: 14px; color: var(--color-text-secondary); }
.co-product__sum { font-size: 15px; font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }

.co-extra-link {
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
    display: inline-block;
    margin-bottom: var(--spacing-md);
}
.co-extra-link:hover { text-decoration: underline; }

.co-coupon-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}
.co-coupon {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    max-width: 240px;
    margin-bottom: var(--spacing-md);
}
.co-coupon input {
    flex: 1;
    height: 42px;
    border: none;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
    background: transparent;
}
.co-coupon__btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color var(--transition-default);
}
.co-coupon__btn:hover { color: var(--color-accent); }

/* ===== STEP 2: DELIVERY REGION ===== */
.co-radio-group {
    margin-bottom: var(--spacing-md);
}
.co-radio-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}
.co-radio-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.co-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-text-primary);
}
.co-radio input[type="radio"] { accent-color: var(--color-accent); width: 18px; height: 18px; }

.co-location {
    margin-bottom: var(--spacing-md);
}
.co-location__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.co-location__label em { color: var(--color-error); font-style: normal; }
.co-location__wrap {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    background: #fff;
}
.co-location__icon { position: absolute; left: 12px; color: var(--color-text-secondary); flex-shrink: 0; }
.co-location__input {
    width: 100%;
    height: 44px;
    border: none;
    padding: 0 36px 0 38px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-primary);
    outline: none;
    background: transparent;
}
.co-location__input:focus { outline: none; }
.co-location__clear {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    transition: color var(--transition-default);
}
.co-location__clear:hover { color: var(--color-error); }
.co-location__hint {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 6px;
    line-height: 1.5;
}

/* ===== STEP 3: DELIVERY METHODS ===== */
.co-delivery-grid {
    display: flex;
    gap: var(--spacing-md);
    align-items: start;
}
.co-delivery-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    flex: 1;
}
.co-delivery-card {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-default);
    position: relative;
    user-select: none;
}
.co-delivery-card:hover { border-color: var(--color-accent); }
.co-delivery-card--selected { border-color: var(--color-accent); }
.co-delivery-card__check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-delivery-card--selected .co-delivery-card__check {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.co-delivery-card__img {
    height: 56px;
    object-fit: contain;
    margin: 0 auto var(--spacing-xs);
    display: block;
}
.co-delivery-card__name {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 8px;
}
.co-delivery-card__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-top: 4px;
}

.co-delivery-detail {
    width: 220px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    display: none;
}
.co-delivery-detail.is-visible { display: block; }
.co-delivery-detail__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}
.co-delivery-detail__img {
    width: 100%;
    max-height: 60px;
    object-fit: contain;
    background: #fff;
    padding: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    display: block;
}
.co-delivery-detail__desc {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}
.co-delivery-detail__price-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.co-delivery-detail__price-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

/* ===== STEP NAVIGATION BUTTONS ===== */
.co-step-nav {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}
.co-btn {
    height: 44px;
    padding: 0 var(--spacing-lg);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background var(--transition-default), color var(--transition-default);
}
.co-btn--primary { background: var(--color-accent); color: #fff; }
.co-btn--primary:hover { background: var(--color-accent-hover); }
.co-btn--secondary {
    background: #fff;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
}
.co-btn--secondary:hover { background: var(--color-accent-bg); }

/* ===== ORDER SIDEBAR ===== */
.co-summary {
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    position: sticky;
    top: 20px;
}

.co-summary__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}
.co-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--color-text-secondary);
    gap: var(--spacing-sm);
}
.co-summary__row--discount {
    color: var(--color-accent);
    font-weight: 600;
}
.co-summary__row-val { font-weight: 600; color: var(--color-text-primary); white-space: nowrap; }
.co-summary__row--discount .co-summary__row-val { color: var(--color-accent); }

.co-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-md);
}
.co-summary__total-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}
.co-summary__total-val {
    font-family: var(--font-headers);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.co-summary__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-default);
}
.co-summary__btn:hover { background: var(--color-accent-hover); }

/* ===== STEP 4: PAYMENT ===== */
.co-payment-grid {
    display: flex;
    gap: var(--spacing-lg);
    align-items: start;
}

.co-payment-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.co-payment-card {
    width: 200px;
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--transition-default);
    position: relative;
    user-select: none;
}
.co-payment-card:hover { border-color: var(--color-accent); }
.co-payment-card--selected { border-color: var(--color-accent); }
.co-payment-card__check {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--color-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-payment-card--selected .co-payment-card__check {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.co-payment-card__img {
    width: 100%;
    height: 64px;
    object-fit: contain;
    display: block;
}
.co-payment-card__name {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.co-payment-detail {
    flex: 1;
    border: 1px solid var(--color-border);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    display: none;
}
.co-payment-detail.is-visible { display: block; }
.co-payment-detail__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}
.co-payment-detail__img {
    max-width: 160px;
    height: 60px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 8px;
    display: block;
    margin-bottom: var(--spacing-sm);
    box-sizing: border-box;
}
.co-payment-detail__desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ===== STEP 5: BUYER ===== */
.co-buyer-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.co-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.co-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.co-field--full {
    grid-column: 1 / -1;
}
.co-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
}
.co-field__label em { color: var(--color-error); font-style: normal; margin-right: 4px; }
.co-field__input {
    width: 100%;
    height: 48px;
    border: var(--input-border-width) solid var(--color-border);
    padding: 0 14px;
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-default);
}
.co-field__input:focus { border-color: var(--color-accent); }
.co-field__textarea {
    width: 100%;
    min-height: 120px;
    border: var(--input-border-width) solid var(--color-border);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: #fff;
    box-sizing: border-box;
    outline: none;
    resize: vertical;
    transition: border-color var(--transition-default);
}
.co-field__textarea:focus { border-color: var(--color-accent); }

.co-comment-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.co-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    margin-top: 4px;
}
.co-consent input { accent-color: var(--color-accent); margin-top: 2px; flex-shrink: 0; }

.co-final-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 var(--spacing-xl);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background var(--transition-default);
    margin-top: var(--spacing-sm);
}
.co-final-btn:hover { background: var(--color-accent-hover); }

/* ===== AUTH CHOICE POPUP ===== */
.auth-choice-popup {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}
.auth-choice-popup.is-open {
    pointer-events: auto;
    visibility: visible;
}
.auth-choice-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(9, 30, 66, 0.45);
    opacity: 0;
    transition: opacity 0.25s;
}
.auth-choice-popup.is-open .auth-choice-popup__overlay {
    opacity: 1;
}
.auth-choice-popup__box {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 440px;
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    margin: var(--spacing-sm);
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.25s, opacity 0.25s;
}
.auth-choice-popup.is-open .auth-choice-popup__box {
    transform: translateY(0);
    opacity: 1;
}
.auth-choice-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 4px;
    line-height: 0;
}
.auth-choice-popup__close:hover { color: var(--color-text-primary); }

.auth-choice-popup__title {
    font-family: var(--font-headers);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}
.auth-choice-popup__subtitle {
    font-size: 15px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}
.auth-choice-popup__btns {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.auth-choice-popup__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition-default), color var(--transition-default);
}
.auth-choice-popup__btn--yes {
    background: var(--color-accent);
    color: #fff;
}
.auth-choice-popup__btn--yes:hover { background: var(--color-accent-hover); }
.auth-choice-popup__btn--no {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.auth-choice-popup__btn--no:hover { background: #efefef; }

.auth-choice-popup__test-note {
    margin-top: var(--spacing-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    opacity: 0.6;
    text-align: center;
}

/* ===== CHECKOUT AUTH STEP ===== */
.co-auth-heading {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm);
}

.co-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 400px;
}

.co-auth-options {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.co-auth-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.co-auth-forgot {
    font-size: 14px;
    color: var(--color-accent);
    text-decoration: none;
}
.co-auth-forgot:hover { text-decoration: underline; }

.co-auth-register-hint {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    max-width: 480px;
}

.co-auth-register-hint p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm);
    line-height: 1.6;
}

.co-auth-register-link {
    display: inline-block;
    padding: 8px 20px;
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-default);
}
.co-auth-register-link:hover { background: #ede0fa; }

.co-auth-notice {
    margin-top: var(--spacing-md);
    max-width: 600px;
}
.co-auth-notice p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 8px;
}

.co-field__input-wrap {
    position: relative;
}

.co-final-row {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .co-summary { position: static; order: -1; }
}

@media (max-width: 600px) {
    .cart-bar {
        grid-template-columns: 1fr;
    }
    .cart-bar__total { font-size: 18px; }
    .cart-item {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto auto;
    }
    .cart-item__price { grid-column: 2; }
    .cart-item__controls { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }

    .co-delivery-grid { flex-direction: column; }
    .co-delivery-detail { width: 100%; }
    .co-product {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto auto;
    }
    .co-product__sum { grid-column: 2; }

    /* Payment step */
    .co-payment-grid { flex-direction: column; }
    .co-payment-card { width: 100%; box-sizing: border-box; }
    .co-payment-detail { width: 100%; box-sizing: border-box; }

    /* Sidebar totals */
    .co-summary__row { flex-wrap: wrap; gap: 4px; }
    .co-summary__row-val { white-space: normal; }
    .co-summary__total-val { font-size: 20px; }

    /* Buyer fields */
    .co-fields { grid-template-columns: 1fr; }
    .co-field--full { grid-column: 1; }
}

/* ==========================================================================
   ДОПОЛНЕНИЯ К МАКЕТУ — эпик 5
   Разметку рисует bitrix:sale.basket.basket, поэтому к макетным классам
   добавляются состояния и служебные блоки компонента, которых в макете нет.
   Правила с пометкой /assets снимаются вместе со старым слоем стилей.
   ========================================================================== */

@media (max-width: 600px) {
    .cart-page__title,
    .checkout-page__title { font-size: var(--heading-page-mobile); }
}

/* Фото позиции: в макете это сам <img>, у компонента — ссылка на товар. */
.cart-item {
    position: relative;
}

/* В макете ячейка фото — сам <img>, он ужимается по max-width вместе с
   колонкой; обёртке это нужно задать явно, иначе на узких экранах фото
   наезжает на название. */
.cart-item__img {
    max-width: 100%;
}

.cart-item__img a,
.cart-item__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* /assets растягивает значки, у символов спрайта своих размеров нет. */
.cart-back svg,
.cart-qty__btn svg,
.cart-icon-btn svg,
.cart-coupon__btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.cart-qty__btn svg {
    width: 14px;
    height: 14px;
}

.cart-empty__icon svg {
    width: 48px;
    height: 48px;
}

/* Счётчик: в макете значение — текст, у компонента поле ввода. */
input.cart-qty__val {
    width: 36px;
    min-width: 36px;
    padding: 0;
    background: none;
    outline: none;
    border-top: none;
    border-bottom: none;
    font-family: var(--font-body);
}

.cart-qty.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Цена: старая цена и процент скидки — состояния компонента. */
.cart-item__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cart-item__price-old {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

/* /assets прибивает метку скидки к левому нижнему углу позиции —
   там она наезжает на разделитель. Ставим её строкой в описании. */
.cart-item__discount {
    position: static;
    font-size: 13px;
    color: var(--color-accent);
    margin-top: 4px;
}

/* Свойства, скрытые на узких экранах параметром компонента. */
@media (max-width: 600px) {
    .cart-item__prop--desktop { display: none; }
}

/* Итог: экономия и старая сумма. */
.cart-bar__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cart-bar__total-old {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

.cart-bar__economy {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.cart-bar__economy span {
    color: var(--color-accent);
    font-weight: 600;
    white-space: nowrap;
}

.cart-bar__order-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Купоны, применённые к корзине. */
.cart-coupons:empty { display: none; }

.cart-coupons {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.cart-coupons__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.cart-coupons__item--danger { color: var(--color-error); }

.cart-coupons__delete {
    color: var(--color-text-secondary);
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.cart-coupons__delete:hover { color: var(--color-accent); }

/* Предупреждения компонента: общие и по позиции. */
.cart-warning,
.cart-item__note {
    position: relative;
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 32px 10px 14px;
    margin-bottom: var(--spacing-md);
}

.cart-item__note {
    margin: 8px 0 0;
    padding: 8px 28px 8px 12px;
}

.cart-item__note:not(.cart-item__note--warning) {
    background: var(--color-accent-bg);
    border-color: transparent;
}

.cart-warning__close,
.cart-item__note-close {
    position: absolute;
    top: 6px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--color-text-secondary);
}

/* Позиция ждёт ответа сервера. */
.cart-item__overlay,
.cart-items__overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .6);
    z-index: 2;
}

.cart-items {
    position: relative;
}

/* Удалённая позиция с предложением вернуть её. */
.cart-item__restore {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.cart-item__restore-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cart-item__restore-actions a { color: var(--color-accent); }

.cart-item__restore-close {
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

/* Свойства-варианты (торговые предложения). Товаров с ними сейчас нет,
   разметка оставлена рабочей на случай, если их заведут. */
.cart-item__sku {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 6px;
}

.cart-item__sku-list {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-item__sku-value {
    border: 1px solid var(--color-border);
    padding: 2px 8px;
    cursor: pointer;
    background-size: cover;
}

.cart-item__sku-value.is-selected { border-color: var(--color-accent); }
.cart-item__sku-value.is-disabled { opacity: .4; }

/* Пустая корзина и пустой результат поиска по корзине. */
.cart-empty,
.cart-empty-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl) 0;
    text-align: center;
    color: var(--color-text-secondary);
}

.cart-empty__icon { color: var(--color-placeholder); }

.cart-empty__text {
    font-family: var(--font-headers);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.cart-empty__link {
    color: var(--color-accent);
    font-weight: 500;
}

.cart-empty__link:hover { color: var(--color-accent-hover); }

/* /assets отбивает соседние блоки внутри позиции полем в 72 пикселя —
   в сетке макета это лишняя ширина у колонок цены и управления. */
.cart-item > * {
    margin: 0;
}

/* Строка применённых купонов пустует, пока купон не введён: в mustache
   внутри остаются переносы строк, поэтому :empty здесь не работает. */
.cart-bar .cart-coupons:not(:has(.cart-coupons__item)) {
    display: none;
}

/* На узких экранах колонка фото сужается до 72 пикселей. В макете
   размер подтягивает max-width у <img>, у нас фото — ссылка на товар,
   поэтому ширину задаём явно. */
@media (max-width: 600px) {
    .cart-item__img {
        width: 72px;
        height: 72px;
    }
}

/* /assets снимает нижний отступ у последнего элемента списка — последняя
   позиция прижималась к своей же линии-разделителю. */
.cart-items .cart-item {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* На узких экранах после списка оставалось 80 пикселей пустоты до
   подвала — в макете этот отступ рассчитан на десктоп. */
@media (max-width: 600px) {
    .cart-page {
        padding-bottom: var(--spacing-lg);
    }
}

/* Поле купона занимает первую колонку панели и по умолчанию не сжимается
   ниже своей ширины: на экранах уже 320 оно выдавливало панель за край. */
.cart-coupon,
.cart-coupon__input {
    min-width: 0;
}

/* Страница «почта подтверждена» — её видит тот, кто открыл ссылку из
   письма там, где корзины нет: обычно в телефоне, пока заказ собирается
   на компьютере. */
.checkout-confirm-landing {
    max-width: 560px;
    padding: 24px 28px;
    border: 1px solid var(--color-border, #e6e6ef);
    border-radius: var(--radius-md, 8px);
    background: #fff;
}

.checkout-confirm-landing__text {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.5;
}

.checkout-confirm-landing__note {
    margin: 0 0 20px;
    color: var(--color-text-secondary, #6b6b76);
}

.checkout-confirm-landing .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    text-decoration: none;
}