/* redesign-941: рекомендации «Дополните покупку» под каждым товаром в
   корзине (/basket/), см. js/redesign/basket-recommendations.js. */

/* Строка с рекомендациями выводится через colspan-TD внутри `<table>`
   корзины (auto table layout) — без фикса ниже таблица считает ширину
   колонок по min-content содержимого ЭТОЙ ячейки, и горизонтальный ряд
   карточек (даже с overflow-x:auto внутри) "распирал" таблицу шире
   вьюпорта, из-за чего соседняя колонка с кнопками "Купить в один
   клик"/"Перейти к оформлению" уезжала за край экрана.
   Перепробовано и НЕ помогло: `display:block` на tr/td (Chrome переставал
   честно учитывать colspan и ломал расчёт остальных колонок ещё сильнее);
   `width:0` на самой td (минимальный, но всё равно остаточный вклад в
   intrinsic-width — таблица была шире baseline на ~280px).
   Сработал классический "shrink-to-fit avoidance" приём — `width:1px` +
   `min-width:100%` на НЕПОСРЕДСТВЕННОМ контент-обёртке (.basket-reco, не
   на td): table-layout считает intrinsic-ширину по явному `width:1px`
   (то есть ноль вклада в расчёт колонок), а `min-width:100%` побеждает
   `width:1px` при реальном рендере (CSS: min-width имеет приоритет над
   width), так что фактически блок всё равно растягивается на всю
   доступную ширину ячейки — просто эта ширина уже не зависит от его
   собственного контента. Подтверждено живьём: таблица вернулась к
   исходной ширине, прокрутка карточек (`.basket-reco__grid`,
   overflow-x:auto) при этом продолжает работать. */
tr.js-basket-reco-row > td {
    padding: 0 !important;
    border: none !important;
}

.basket-reco {
    display: block;
    width: 1px; /* + min-width:100% ниже — см. комментарий у tr.js-basket-reco-row > td выше */
    min-width: 100%;
    box-sizing: border-box;
    margin: 4px 0 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
}

.basket-reco__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--redesign-dark, #323232);
    margin-bottom: 10px;
}

.basket-reco__title-icon {
    color: #f5a623;
}

.basket-reco__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    /* свайп на тач-устройствах плавный, без "резинового" оттягивания всей страницы */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 10px;
    padding-bottom: 4px;
    /* containment страховка: даже если соседний tr/td override когда-то
       уберут — этот блок сам не должен растягивать предков шире себя */
    max-width: 100%;
}

.basket-reco__card {
    flex: 0 0 150px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 12px;
    transition: border-color 0.15s ease;
}

.basket-reco__card:hover {
    border-color: var(--redesign-accent, #228be6);
}

/* Карточки в ряду одинаковой высоты (align-items:stretch на .basket-reco__grid),
   а .basket-reco__card-link растёт и занимает всё свободное место — кнопка
   "В корзину" (flex: 0 0 auto) остаётся последней и оказывается прижатой к
   низу карточки независимо от длины названия, поэтому все кнопки в ряду
   выстраиваются на одной горизонтальной линии. */
.basket-reco__card-link {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.basket-reco__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 8px;
    background: var(--redesign-bg, #eaeff0);
}

.basket-reco__name {
    font-size: 12px;
    line-height: 1.3;
    color: var(--redesign-dark, #323232);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4em;
}

.basket-reco__price {
    font-size: 13px;
    font-weight: 700;
    color: var(--redesign-dark, #323232);
}

.basket-reco__add {
    flex: 0 0 auto;
    border: none;
    border-radius: 8px;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: #313132;
    color: #fff;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.basket-reco__add:hover {
    opacity: 0.88;
}

.basket-reco__add.is-added {
    background: #1D1D1F;
    cursor: default;
    opacity: 1;
}

/* Планшет/узкий десктоп (≤991px) — таблица корзины здесь ЕЩЁ классическая
   (Aspro переключает её в display:flex только при ≤550px, см. ниже), наш
   `width:1px`/`min-width:100%` трюк работает как на десктопе, просто
   немного ужимаем карточки и паддинги. */
@media (max-width: 991px) {
    .basket-reco {
        padding: 12px;
    }

    .basket-reco__card {
        flex: 0 0 140px;
    }
}

/* ВАЖНО: при max-width:550px сам Aspro переключает `.basket-items-list-table`
   в `display: flex !important; flex-wrap: wrap !important;` (см.
   v2/style.css) — таблица перестаёт быть таблицей в смысле column-width
   алгоритма, и наша строка-`<tr>` становится обычным flex-элементом этого
   wrap-контейнера. Без явного `flex: 1 0 100%` она не гарантированно
   растягивается на всю строку (флекс-элементы по умолчанию садятся по
   контенту) и может "прилипнуть" не на новую строку, а встык к соседним
   ячейкам. Этот override держим строго на том же брейкпоинте 550px, на
   котором сам Aspro переключает режим — не на 600/767, чтобы не разойтись
   с реальным моментом переключения. */
@media (max-width: 550px) {
    tr.js-basket-reco-row {
        display: flex !important;
        flex: 1 0 100% !important;
        width: 100%;
    }

    tr.js-basket-reco-row > td {
        display: block;
        width: 100%;
    }

    .basket-reco {
        padding: 12px;
        margin: 0 0 12px;
        border-radius: 12px;
    }

    .basket-reco__title {
        font-size: 13px;
    }

    .basket-reco__card {
        flex: 0 0 118px;
        padding: 8px;
    }

    .basket-reco__name {
        font-size: 11px;
    }

    .basket-reco__price {
        font-size: 12px;
    }

    .basket-reco__add {
        padding: 8px 0; /* чуть выше тап-зона на тач-экране */
        font-size: 11px;
    }
}

/* Самые маленькие экраны (iPhone SE и т.п.) — ещё немного сожмём карточку,
   чтобы в неё помещалось 2+ штуки видимыми без обрезки по краю. */
@media (max-width: 360px) {
    .basket-reco__card {
        flex: 0 0 104px;
    }

    .basket-reco__name {
        min-height: 2.2em;
    }
}