/*
 * Адаптивные правки витрины.
 *
 * Отдельным файлом, а не правкой store.css (8266 строк) или
 * editorial-premium-v1.css: так видно, что именно поменяли, и откат — это
 * удаление одной строки в head.php. Подключается последним, поэтому
 * специфичность здесь минимальная — берём порядком, а не !important.
 *
 * Замеры до правок на 390×844 (карточка товара):
 *   шапка 184 px (22% экрана), панель покупки 89 px, таб-бар 57 px,
 *   кнопка «наверх» 48 px поверх них — постоянно занято 330 px, 39% экрана.
 *   H1 39 px в три строки = 115 px. В сетке товаров текст получал 108 px
 *   из 161 px ширины карточки — остальное съедали внутренние отступы.
 */

/* Корзина и checkout уже имеют собственные целевые кнопки. Плавающие
   чат и «наверх» перекрывали итог заказа даже на desktop. На этих двух
   транзакционных экранах убираем их на любой ширине. :has — страховка
   до того, как deferred-скрипт добавит body класс premium-cart-page. */
body.premium-cart-page .support-widget,
body.premium-cart-page .back-to-top,
body:has(.cart-page) .support-widget,
body:has(.cart-page) .back-to-top,
body.checkout-page .support-widget,
body.checkout-page .back-to-top {
    display: none;
}

/* На карточке товара вопрос уже можно задать в основном контенте, поэтому
   плавающий дубль не должен перекрывать цену, наличие и условия покупки. */
body.page-product .support-widget,
body.page-product .back-to-top {
    display: none;
}

/* До широкого desktop плавающие FAB попадают поверх карточек и proof-строки.
   Контакты остаются доступны в меню и подвале. */
@media (max-width: 1439.98px) {
    body .support-widget,
    body .back-to-top {
        display: none;
    }
}

/* На широком экране обе плавающие кнопки помещаются в боковой gutter.
   Делаем их компактнее и разводим по вертикали, чтобы они не закрывали
   proof-строку и не накладывались друг на друга после прокрутки. */
@media (min-width: 1440px) {
    body .support-widget {
        right: 12px;
    }

    body .support-widget__toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        border-radius: 14px;
        font-size: 1.15rem;
    }

    body .back-to-top {
        right: 12px;
        bottom: calc(88px + var(--cookie-consent-height, 0px));
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }
}

@media (max-width: 1199.98px) {
    /* Две колонки корзины на 1024 px оставляли названию около 130 px и
       дробили слова и цены. До большого desktop итог идёт полноценным блоком
       ниже товаров — так обе части остаются легко сканируемыми. */
    .cart-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart-summary {
        position: relative;
        top: auto;
        margin-top: 1.5rem;
    }
}

/* На небольшом landscape-планшете счётчик и CTA уже не помещаются в строку:
   действие получает полную ширину панели и остаётся одной строкой. */
@media (min-width: 992px) and (max-width: 1099.98px) {
    .page-product .add-to-cart-section {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .page-product .add-to-cart-btn {
        flex-basis: 100%;
        min-width: 0;
        padding: 0.9rem 1rem;
        white-space: nowrap;
    }
}

/* Планшеты: стационарная боковая колонка каталога занимала почти
   весь первый экран. Меню уже есть в шапке, а фильтры открываются
   отдельной кнопкой, поэтому показываем сразу товары. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .catalog-layout > .store-sidebar {
        display: none !important;
    }

    /* Первый экран на 800 px: текст и обложки снова стоят рядом. Так
       заголовок не выталкивает витрину за сгиб, а масштаб остаётся читаемым. */
    .commercial-hero.has-premium-products {
        grid-template-columns: minmax(0, 1.12fr) minmax(286px, 0.88fr);
        min-height: 455px;
    }

    .commercial-hero.has-premium-products .commercial-hero__content {
        grid-area: 1 / 1;
        align-self: center;
        padding: clamp(1.75rem, 3vw, 2.25rem);
    }

    .commercial-hero h1 {
        max-width: 14ch;
        margin-bottom: 1rem;
        font-size: clamp(2.75rem, 5.4vw, 3.35rem);
        line-height: 0.98;
    }

    .commercial-hero__subtitle {
        margin-bottom: 1rem;
        font-size: 0.96rem;
        line-height: 1.48;
    }

    .premium-hero-products {
        grid-area: 1 / 2;
        min-height: 455px;
    }

    .commercial-hero.has-premium-products .commercial-hero__audiences {
        grid-area: 1 / 2;
        margin: 0 0.75rem 0.75rem;
        padding: 0.65rem 0.75rem;
    }

    .premium-hero-product--1 {
        left: 27%;
        width: clamp(132px, 18vw, 158px);
    }

    .premium-hero-product--2 {
        right: 1%;
        width: clamp(104px, 14vw, 128px);
    }

    .premium-hero-product--3 {
        left: 0;
        width: clamp(96px, 13vw, 118px);
    }

    /* В двухколоночной карточке товара даём покупке больше места:
       кнопка больше не дробится на три строки. */
    .product-page .product-container {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 1.08fr);
        column-gap: 1.5rem;
    }

    .product-page .price-section {
        padding: 1rem;
    }

    .product-page .price-wrapper {
        flex-wrap: wrap;
        gap: 0.55rem 0.75rem;
    }

    .product-page .add-to-cart-section {
        gap: 0.65rem;
    }

    .product-page .price-section .quantity-btn {
        min-width: 42px;
        padding: 0.55rem 0.65rem;
    }

    .product-page .price-section .quantity-value {
        min-width: 40px;
        padding: 0.55rem 0.6rem;
    }

    .product-page .add-to-cart-btn {
        min-width: 0;
        padding: 0.75rem 0.65rem;
        font-size: 0.9rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* На планшете плавающие FAB перекрывают фильтры и содержимое карточек.
       Контакты остаются в подвале и основном меню. */
    body .support-widget,
    body .back-to-top {
        display: none;
    }

}

/* Topic cards keep three fixed-width elements in one flex row: a 40px icon,
   a 32px arrow and the name. In the two-column phone grid this left every
   name only 32px at 390px, so long Russian words painted into the arrow.
   Wrapping is also a safety net for the compact three-column tablet grid. */
@media (max-width: 991.98px) {
    .home-categories > .home-categories__grid > .home-category-card > .home-category-card__name {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* From 375px the topic grid fits two tracks but each card is still too narrow
   for icon + name + arrow in one line. Give the name its own full-width row.
   Below 375px the grid naturally becomes one column, so its horizontal card
   layout remains compact. Brand cards use .home-categories-rail and are not
   part of this selector. */
@media (min-width: 375px) and (max-width: 575.98px) {
    .home-categories > .home-categories__grid > .home-category-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-content: center;
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        padding: 12px;
    }

    .home-categories > .home-categories__grid > .home-category-card > .home-category-card__icon {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .home-categories > .home-categories__grid > .home-category-card > .home-category-card__arrow {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .home-categories > .home-categories__grid > .home-category-card > .home-category-card__name {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }
}

/* Featured products: two tracks must be allowed to shrink at ordinary phone
   widths. At 320–340px the usable rail is too narrow even for two compact
   cards, so the carousel deliberately shows one complete card per page. */
@media (max-width: 639.98px) {
    .page-home .featured-products-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .featured-product-item {
        min-width: 0;
    }
}

@media (max-width: 389.98px) {
    .page-home .featured-header {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.75rem;
    }

    .page-home .featured-nav {
        margin-left: auto;
    }
}

@media (max-width: 340px) {
    .page-home .featured-products-container {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {

    /* ── Шапка: 184 → ~115 px ─────────────────────────────────────────── */

    /* Верхний ряд с городом и телефоном. Город всё равно выбирается в
       чекауте, а телефон есть в футере и в меню — на первом экране он стоил
       55 px из 844. */
    .store-header .header-top-bar {
        display: none;
    }

    /* Поиск: поле было 56 px при собственной высоте 44. */
    .store-header .header-center {
        height: auto;
    }
    .store-header .header-center .search-form,
    .store-header .header-center input[type="search"],
    .store-header .header-center input[type="text"] {
        height: 44px;
        min-height: 44px;
    }

    /* Шапка во всю ширину. Контейнер отъедал 56 px из 360: по 12 px внешних
       отступов и по 16 внутренних с каждой стороны. На телефоне эти поля стоят
       дороже, чем выглядят — именно их не хватало названию магазина. */
    /* Ширину контейнера держит не padding, а width: min(100% - 1.5rem, 1320px)
       из медиазапроса — поэтому обнуления полей мало, ширину задаём явно. */
    .store-header > .container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Названию «Звездный маркет» нужно 163 px. До уплотнения ему доставалось
       166 на 390 px, 136 на 360 и 96 на 320 — то есть обрезалось на всех
       распространённых телефонах, кроме самых широких. Отжимаем всё, что стоит
       рядом: бургер, логотип, зазоры и кнопки справа. */
    .store-header .mobile-menu-toggle {
        width: 40px;
        min-width: 40px;
        height: 40px;
    }
    .store-header .header-left {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px;
    }
    .store-header .header-left img {
        max-height: 26px;
        width: auto;
    }
    .store-header .header-right {
        gap: 2px;
        flex: 0 0 auto;
    }
    .store-header .header-right > * {
        margin-left: 0;
    }
    .store-header .header-right a,
    .store-header .header-right button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
    }
    .store-header .store-brand {
        min-width: 0;
    }

    /* Текст названия лежит не в .store-brand, а во вложенном .store-title —
       со своим кеглем и nowrap, поэтому уменьшение родителя на него не влияло.
       «Звездный маркет» требует 158 px, а рядом с логотипом и тремя кнопками на
       360 px остаётся около 102: в одну строку он не помещается ни при каком
       читаемом кегле. Поэтому разрешаем две строки — они укладываются в высоту
       ряда с иконками, и название видно целиком, а не «Звездный марк…».
       Клампом в две строки страхуемся от совсем длинных названий. */
    .store-header .store-title {
        font-size: 13.5px;
        line-height: 1.15;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: clip;
    }

    /* На совсем узких экранах 40-пиксельные кнопки всё равно не оставляют
       названию 163 px, поэтому там разрешаем ему ужаться ещё. */
    @media (max-width: 374.98px) {
        .store-header .store-title {
            font-size: 12.5px;
        }
        .store-header .header-left {
            gap: 6px;
        }
        .store-header .header-left img {
            max-height: 24px;
        }
        .store-header .header-right a,
        .store-header .header-right button {
            width: 38px;
            min-width: 38px;
            height: 38px;
        }
    }

    /* ── Заголовок карточки товара: 39 → 24 px ────────────────────────── */

    .product-page h1,
    .product-details h1,
    .product-container h1 {
        font-size: 24px;
        line-height: 1.25;
    }

    /* ── Главная: компактный первый экран ──────────────────────────────── */

    /* На 390×844 hero занимал 659 px, а три гарантии ещё 204 px. Оффер и CTA
       остаются полными, но заголовок не дробится на шесть–семь строк, а
       витрина обложек не повторяет высоту текстового блока. */
    .commercial-hero {
        border-radius: 20px;
    }

    .commercial-hero__content,
    .commercial-hero.has-premium-products .commercial-hero__content {
        padding: 1.1rem 1rem 0.9rem;
    }

    .commercial-hero h1 {
        max-width: 20ch;
        margin-bottom: 0.7rem;
        font-size: clamp(1.75rem, 7.4vw, 2rem);
        line-height: 1.05;
        letter-spacing: -0.045em;
    }

    .commercial-hero__subtitle {
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .commercial-hero__cta {
        min-height: 46px;
        padding: 11px 18px;
        font-size: 15px;
    }

    .premium-hero-products {
        min-height: 190px;
    }

    .premium-hero-product--1 {
        width: clamp(102px, 32vw, 132px);
    }

    .premium-hero-product--2 {
        width: clamp(78px, 24vw, 100px);
    }

    .premium-hero-product--3 {
        width: clamp(74px, 23vw, 96px);
    }

    .commercial-hero.has-premium-products .commercial-hero__audiences {
        margin: 0 0.6rem 0.6rem;
        padding: 0.5rem 0.65rem;
    }

    /* Гарантии остаются рядом с hero и читаются целиком. Край следующей
       карточки служит естественной подсказкой горизонтального скролла. */
    .commercial-proof {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(245px, 78vw);
        gap: 8px;
        margin: 0.55rem 0 1.25rem;
        padding: 0 0 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
    }

    .commercial-proof::-webkit-scrollbar {
        display: none;
    }

    .commercial-proof > li {
        align-items: flex-start;
        min-height: 62px;
        padding: 0.55rem 0.65rem;
        border-radius: 12px;
        font-size: 0.78rem;
        line-height: 1.3;
        scroll-snap-align: start;
    }

    /* Сетка товаров правится не здесь, а в shop/components/product-card-styles.php:
       там мобильные правила карточки стоят с !important, и держать их в двух
       местах значит гарантированно однажды разъехаться. */

    /* ── Низ: убрать дублирование ─────────────────────────────────────── */

    /* На карточке товара внизу было три слоя: панель покупки, таб-бар из
       пяти вкладок и кнопка «наверх» поверх них. Панель покупки важнее —
       таб-бар на этих страницах прячем. */
    body.page-product .mobile-bottom-nav,
    body:has(.product-sticky-buy) .mobile-bottom-nav {
        display: none;
    }

    /* Панель покупки отступает снизу на высоту баннера cookies
       (bottom: var(--cookie-consent-height)). Но на этой витрине баннер стоит
       в потоке сверху, а не плашкой снизу, поэтому отступ лишний: под панелью
       оставалась пустая полоса. Раньше её закрывал таб-бар, а после его
       скрытия панель повисла в воздухе. */
    body.page-product .product-sticky-buy,
    body:has(.cookie-consent--in-flow) .product-sticky-buy {
        bottom: 0;
    }

    body.page-product .product-sticky-buy__inner {
        padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }

    body.page-product .product-page {
        padding-bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* Резерв внутри product-page заканчивается до общего футера, а padding у
       flex-body не увеличивает область прокрутки. Поэтому безопасную зону под
       sticky-buy добавляем самому футеру: его ссылки уходят выше панели. */
    body.page-product .store-footer {
        padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Финальный P1-контракт: на узком экране не больше одного постоянного
       нижнего слоя. Скрываем весь support-widget, а не только FAB: так полноэкранная
       панель и её focusable-элементы тоже не остаются в мобильном UI. */
    body .support-widget,
    body .back-to-top {
        display: none;
    }

    /* Menu/search лежали ниже product bar (2000/3000 против 3000), поэтому
       buy button оставалась кликабельной поверх открытого меню. */
    .mobile-search-overlay,
    .mobile-side-menu {
        z-index: 4000;
    }

    /* Checkout — транзакционная поверхность. Внизу остаётся только submit bar,
       а в шапке — бренд. Ссылка на корзину уже есть в .checkout-header. */
    body.checkout-page .mobile-bottom-nav,
    body.checkout-page .mobile-search-overlay,
    body.checkout-page .mobile-side-menu {
        display: none;
    }

    /* Bootstrap открывает city modal через inline display:block; эти три
       отвлекающие поверхности на checkout должны оставаться выключенными. */
    body.checkout-page #cookieConsent,
    body.checkout-page .city-notification,
    body.checkout-page #cityModal {
        display: none !important;
    }

    body.checkout-page .store-header .mobile-menu-toggle,
    body.checkout-page .store-header .header-center,
    body.checkout-page .store-header .header-right {
        display: none;
    }

    /* editorial-premium-v1.css возвращает центр шапки через !important. */
    body.checkout-page .store-header .header-center {
        display: none !important;
    }

    body.checkout-page .store-header .header-content {
        display: flex;
        justify-content: center;
        min-height: 52px;
        padding: 6px 0;
    }

    body.checkout-page .store-header .header-left {
        flex: 0 1 auto;
        justify-content: center;
    }

    body.checkout-page .checkout-mobile-bar {
        bottom: 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    body.checkout-page {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Каталог: фильтры как управляемая нижняя панель ───────────────── */
    body.filters-open {
        overflow: hidden;
        touch-action: none;
    }

    .catalog-active-filters {
        flex-wrap: nowrap;
        margin: -0.2rem 0 0.75rem;
        padding-bottom: 0.25rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .catalog-active-filters::-webkit-scrollbar {
        display: none;
    }

    .catalog-active-filters__label,
    .catalog-active-filters__chip,
    .catalog-active-filters__reset {
        flex: 0 0 auto;
    }

    .catalog-layout .filters-panel.is-open {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 4200;
        display: block !important;
        width: 100%;
        max-height: min(86dvh, 760px);
        margin: 0;
        padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        overflow: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 24px 24px 0 0;
        background: #fff;
        box-shadow: 0 -18px 48px rgba(24, 32, 29, 0.18), 0 0 0 100vmax rgba(12, 18, 16, 0.34);
        animation: zmp-filter-sheet-in 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .filters-panel__mobile-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
        margin: 0 -1rem 0.4rem;
        padding: 0 1rem;
        border-bottom: 1px solid rgba(24, 32, 29, 0.1);
        background: #fff;
        font-size: 1.1rem;
    }

    .filters-panel__close {
        width: 44px;
        height: 44px;
        display: inline-grid;
        place-items: center;
        border: 1px solid rgba(24, 32, 29, 0.12);
        border-radius: 12px;
        color: #26312d;
        background: #fff;
    }

    .catalog-layout .filters-panel.is-open .filter-actions {
        position: sticky;
        bottom: calc(-1rem - env(safe-area-inset-bottom, 0px));
        z-index: 2;
        margin: 0 -1rem -1rem;
        padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(24, 32, 29, 0.1);
        background: #fff;
    }

    .catalog-load-more {
        width: min(100%, 320px);
    }

    /* Grid-треки 1fr в корзине считали min-content цены и кнопок и расширяли
       layout viewport 320 px до 353 px. minmax(0, 1fr) разрешает второй колонке
       сжаться внутри карточки. Фото выравниваем с началом описания, а контролы
       выводим на полную строку: раньше оно центрировалось по высоте сразу трёх
       строк и оказывалось почти на 100 px ниже названия. */
    .cart-item {
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-areas:
            "image info"
            "controls controls"
            "total total";
        align-items: start;
    }

    .cart-item-info,
    .cart-item-price,
    .cart-item-controls,
    .cart-item-total {
        min-width: 0;
        max-width: 100%;
    }

    .cart-item-controls {
        width: 100%;
        justify-content: space-between;
    }

    .cart-item .remove-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0.4rem;
    }

    /* 1fr без нулевого минимума так же складывал нижнюю навигацию до ширины
       самой длинной подписи. */
    .mobile-bottom-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
    }

    .mobile-bottom-nav__item {
        min-width: 0;
        max-width: 100%;
    }

    .mobile-bottom-nav__item > span:last-child:not(.mobile-bottom-nav__icon-wrap) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Боковое меню ─────────────────────────────────────────────────── */

    /* Шапка меню шла градиентом от фирменного синего к --accent-secondary,
       который этот магазин не задаёт, — и подставлялся дефолтный фиолетовый
       #8b5cf6. Получалась сине-фиолетовая полоса, не имеющая отношения к
       оформлению витрины. Оставляем фирменный цвет. */
    .mobile-menu-header {
        background: var(--accent-primary, #0079b7);
    }

    /* Пункты меню без иконки («Литур», «Весна-Дизайн») начинали текст там, где
       у соседей стоит иконка, — левый край получался рваным, и они читались
       как подпункты «Каталога», хотя это самостоятельные разделы магазина.
       Резервируем под иконку столько же места. */
    .mobile-menu-item i {
        flex: 0 0 24px;
        width: 24px;
        text-align: center;
    }
    .mobile-menu-item:not(:has(i)) {
        padding-left: 60px;
    }

    /* Настоящие подпункты каталога — со сдвигом, чтобы вложенность читалась. */
    .mobile-submenu-item {
        padding-left: 60px;
        font-size: 0.9rem;
        opacity: .85;
    }

    /* ── Баннер cookies: 121 → ~80 px ─────────────────────────────────── */

    /* Он стоит в потоке и сдвигает вниз весь первый экран, поэтому каждая
       строка тут стоит дорого. Текст мельче, поля уже, кнопки ниже. */
    .cookie-consent__inner {
        gap: 0.4rem;
        padding-block: 0.4rem;
    }
    .cookie-consent__text {
        font-size: 0.7rem;
        line-height: 1.3;
    }
    .cookie-consent__actions .cookie-consent__accept,
    .cookie-consent__actions .cookie-consent__reject {
        min-height: 36px;
        padding-block: 0.3rem;
        font-size: 0.72rem;
    }
}

@keyframes zmp-filter-sheet-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-layout .filters-panel.is-open {
        animation: none;
    }
}

@media (max-width: 374.98px) {
    /* На 320–360 px уменьшаем только изображение, сохраняя полную строку
       контролов и 44-px touch-цели. */
    .cart-item {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "image info"
            "controls controls"
            "total total";
        column-gap: 0.625rem;
    }

    .cart-item-image {
        width: 72px;
        height: 72px;
    }

    .cart-item-controls {
        width: 100%;
        justify-content: space-between;
        padding-top: 0.25rem;
    }

    .cart-item-total {
        width: 100%;
        text-align: right;
    }
}