/* presets/oasis/cart.css — тема Oasis, страница «Корзина» (/cart).
   Источники: docs/2026-07-11-oasis-parity/cart.md (числа) +
   my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/cart.spec.json +
   my-agent/output/fw-shots/nikkykash-oasis/css/theme.scss.css (грепом по
   .cart-item/.cart-footer/.cart-totals/.select-field и т.д. — реальные правила
   эталона, не реконструкция на глаз). Разметка — app/templates/storefront/
   cart.html (ветка preset_id=='oasis') и _cross_sell.html (та же ветка).
   Общая геометрия Oasis и восьми тем FW pack; остальные пресеты не затронуты.

   Брейкпоинт для собственно cart-разметки (шапка колонок/строка товара/
   футер) — 1024px, а не FW-шные 640px: так решено для Creator (тот же
   fw-teardown) и здесь для консистентности — на трёх реально проверяемых
   вьюпортах (390/1440/3072) оба брейкпоинта дают одинаковый результат.
   Для секции рекомендаций — общий проектный 768px (как collections/pdp). */

/* ── Потолки ширины (cart.md §0, §2, §8) ────────────────────────────────────
   У эталона узкий контейнер списка (.container.container--8.wrapper,
   max-width 933.333px) и контейнер рекомендаций (.container.wrapper,
   max-width 1400px) — ОДИН и тот же элемент, что несёт и max-width, и
   padding 16/32, центрированный margin:auto НАПРЯМУЮ относительно viewport
   (не вложен в доп. full-bleed паддинг-контейнер — см. cart.md §0).

   У нас .sf-oasis-cart-section и .sf-oasis-cart-upsell — это САМ
   .store-container (одноимённый класс висит на том же элементе), который
   presets.css уже красит в padding 16px/32px@768 (см. presets.css
   ".preset-oasis .store-container"), но той же строкой обнуляет
   max-width:none — верно для full-bleed секций (хедер/футер/hero/главная),
   но НЕВЕРНО для cart: здесь max-width нужен на этом же элементе.
   Правило ниже — та самая точечная перекрышка, о которой предупреждает
   задание: presets.css не трогаем, .store-container остаётся full-bleed
   для всех остальных пресетов и для остальных oasis-секций, а тут — та же
   специфичность (0,2,0), но наш файл грузится ПОСЛЕ presets.css → по
   каскаду побеждает max-width ниже, .store-container-падинг остаётся как
   есть и (за счёт глобального box-sizing:border-box) вычитается из
   max-width — числа сходятся 1:1 с эталоном на всех трёх вьюпортах:
     wide 3072:    933.333 → content 869.33, x=(3072-933.333)/2=1069.3 ✓
     desktop 1440: 933.333 → content 869.33, x=(1440-933.333)/2=253.3  ✓
     mobile 390:   933.333>390 → падинг съедает всё, content=390-32=358 ✓
     upsell wide:  1400 → content 1336, x=(3072-1400)/2=836            ✓
     upsell 1440:  1400>1440-разница мала → content 1336, x=20         ✓ */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-section {
  max-width: 933.333px;
  margin-left: auto;
  margin-right: auto;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-upsell {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
/* fw-pack/base.css loads later and gives every .store-container a 1440px cap. */
.sf-fw-pack .store-container.sf-oasis-cart-section { max-width: 933.333px; }
.sf-fw-pack .store-container.sf-oasis-cart-upsell { max-width: 1400px; }

/* ── Заголовок — cart-header__heading (cart.md §1) ──────────────────────── */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-title {
  /* шрифт/вес/transform уже приходят от generic-правила [class*="preset-"] h1
     (var(--font-display)=Plus Jakarta Sans, var(--display-weight)=600 у Oasis) —
     здесь только то, что для этого h1 отличается от .sf-page-title. */
  font-size: 24px;
  line-height: 1.5; /* 36px */
  text-align: center;
  margin-bottom: 32px; /* mobile */
}
@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-title {
    text-align: left;
    margin-bottom: 48px;
  }
}

/* ── Шапка колонок — cart-items-header (cart.md §3) ─────────────────────── *
   Мобайл: виден только «Товар», hairline снизу. Десктоп: полная 5-колоночная
   грид-шапка (photo/remove — пустые именованные области, без markup-детей —
   валидно в CSS Grid). grid-area переиспользуется тем же классом и в строке
   товара ниже — один набор имён на шапку и на cart-item. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-head {
  padding-bottom: 15px; /* CSS: .cart-items-header + .cart-items-header__price/…: border 1px + hairline */
  margin-bottom: 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); /* rgba(0,0,0,.1) */
  font-family: var(--font-display);
  font-weight: 600; /* .cart-items-header: font-weight:var(--font-weight-heading) */
  font-size: 14px; /* calc(0.875rem) */
  line-height: 1.2;
  color: var(--text); /* НЕ muted — .cart-items-header: color:var(--color-on-background) */
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-head .sf-oasis-cart-col-qty,
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-head .sf-oasis-cart-col-price {
  display: none;
}
@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-head {
    display: grid;
    /* Ревью-фикс: шапка (cart.html:175-178) рендерит только info/qty/price —
       без photo/remove. Раньше сюда лился тот же grid-template, что и у
       строки товара (photo/info/qty/price/remove) — Grid резервирует
       ширину именованной области, даже когда для неё нет ребёнка с этим
       grid-area, поэтому «Товар» уезжал на 88+15px вправо (плюс ещё 15px
       от общего .sf-oasis-cart-col-info margin-left, см. правило ниже).
       Эталон (.cart-items-header, flex — wide/desktop cart.spec.json)
       photo-колонки не имеет вовсе: item стоит впритык к левому краю
       контейнера (x совпадает с x самого .cart-items-header). */
    grid-template-columns: minmax(0, 1fr) 180px 80px;
    grid-template-areas: "info qty price";
    column-gap: 15px;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-head .sf-oasis-cart-col-qty,
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-head .sf-oasis-cart-col-price {
    display: block;
  }
}

/* ── Строка товара — cart-item (cart.md §4) ─────────────────────────────── *
   Grid вместо flex: колонки info/qty/price/remove в разметке — прямые
   сиблинги <li> (не обёрнуты общим "main"), grid размещает их по именованным
   областям без лишних wrapper-ов. Мобайл: photo слева, инфо/цена/кол-во
   стопкой справа (каждая своим отдельным margin-top — .cart-item__price
   margin-top:4px, .cart-item__quantity margin-top:10px), remove — абсолютом,
   вертикально по центру строки, "наезжает" на цену/кол-во (осознанно, так у
   эталона). Десктоп: одна строка, 5 колонок. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-photo { grid-area: photo; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-info { grid-area: info; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-qty { grid-area: qty; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-price { grid-area: price; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-remove { grid-area: remove; }

:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-row {
  position: relative; /* якорь для абсолютного remove на мобиле */
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 34px;
  grid-template-areas:
    "photo info  remove"
    "photo price price"
    "photo qty   qty";
  column-gap: 22px; /* .cart-item__main margin-left:22px (mobile) */
  align-items: start;
  padding: 12px 0; /* .cart-item padding-top/bottom:12px, оба брейкпоинта */
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-photo {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--tile-bg); /* эталон: rgba(0,0,0,.1) на белом ≈ наш --tile-bg */
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-price { margin-top: 4px; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-qty { margin-top: 10px; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-remove {
  position: absolute;
  top: 50%;
  right: -4px; /* лёгкий "вылет" за край, как у desktop margin-right:-10px */
  transform: translateY(-50%);
}

@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-row {
    grid-template-columns: 88px minmax(0, 1fr) 180px 80px 30px;
    grid-template-areas: "photo info qty price remove";
    column-gap: 15px;
    align-items: center;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-row .sf-oasis-cart-col-info {
    /* базовый column-gap:15 + эти 15 = 30px, .cart-item__main margin-left:30px —
       верно только для СТРОКИ товара (перед info там есть photo-колонка).
       Ревью-фикс: раньше правило не было scope-нуто на .sf-oasis-cart-row и
       утекало в .sf-oasis-cart-head (там своего photo нет вообще) — «Товар»
       получал лишний сдвиг сверх фантомной photo-колонки шапки. */
    margin-left: 15px;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-price,
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-qty {
    margin-top: 0;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-remove {
    position: static;
    transform: none;
    justify-self: end;
    margin-right: -10px; /* .cart-item__remove-button margin-right:-10px */
  }
}

:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-row__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600; /* .cart-item__title: font-weight:var(--font-weight-heading) */
  font-size: 16px;
  line-height: 1.2; /* 19.2px */
  color: var(--text);
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-row__variant {
  margin-top: 4px; /* .cart-item__variant-title: margin-top:4px */
  font-size: 16px;
  line-height: 24px;
  color: var(--text); /* ПОЛНЫЙ чёрный, не sf-muted — эталон не приглушает */
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-col-price {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; /* .cart-item__price-value — обычный вес, не bold */
  color: var(--text);
}

/* ── Селектор количества — select-field (cart.md §5) ────────────────────── */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtybox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 90px; /* mobile */
  height: 48px; /* .select-field--cart-item: height:47.6px */
  padding: 0 16px;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); /* rgba(...,.3) */
  border-radius: 0; /* --input-corner-radius у Oasis = 0 */
}
@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtybox { width: 120px; }
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtybox:hover {
  border-color: color-mix(in srgb, var(--text) 40%, transparent);
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtybox:focus-within {
  border-color: color-mix(in srgb, var(--text) 60%, transparent);
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtynum {
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  pointer-events: none; /* иначе цифра (после dec-кнопки в DOM) перехватывает клик у левой половины */
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtychevron {
  width: 12px;
  height: 8px; /* сохраняем родной аспект viewBox 12x8 нашего svg, не тянем */
  opacity: 0.3; /* .select-field__dropdown-icon: opacity:0.3 */
  color: var(--text);
  pointer-events: none;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtyhit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: background-color 0.15s ease;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtyhit:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtyhit--dec { left: 0; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-qtyhit--inc { right: 0; }

/* ── Кнопка удаления — cart-item__remove-button (cart.md §6) ────────────── */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-removebtn {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.4;
  transition: opacity 150ms;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-removebtn:hover { opacity: 1; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-removebtn svg {
  width: 14px;
  height: 14px;
}

/* ── Футер корзины — cart-footer (cart.md §7) ────────────────────────────
   Мобайл: .sf-oasis-cart-footer/__right становятся прозрачными
   (display:contents), их дети — обычные элементы .sf-oasis-cart-layout
   (flex-column) и сортируются через order: totals → checkout → back
   (back ПОСЛЕДНИЙ, хотя в DOM стоит первым — cart.md §7.2). Десктоп —
   реальный flex-row, space-between (эталон: justify-content:flex-end +
   order:-1/margin-right:auto у back — визуально то же самое, что
   space-between, см. cart.md §7.1). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-layout {
  display: flex;
  flex-direction: column;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-items {
  min-width: 0;
  margin-bottom: 16px; /* footer margin-top:16px от списка — задаём с этой стороны */
}

:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-footer,
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-footer__right {
  display: contents;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary { order: 1; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-checkout { order: 2; margin-top: 35px; } /* .cart-footer__cta margin-top:35px mobile */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-back { order: 3; margin-top: 20px; } /* .cart-footer__continue margin-top:20px mobile */

/* Базовая (мобильная) ширина/высота кнопок. ОБЯЗАНА стоять ДО @media min-width:1024px:
   специфичность у обоих правил одинаковая, поэтому десктопные 320px победят только если
   идут ПОЗЖЕ в файле. Когда этот блок стоял ниже медиазапроса, width:100% перебивал
   320px → «Назад» растягивался на всю строку, flex-wrap переносил сводку и «Оформить
   заказ» на строку ниже, и весь футер уезжал влево вместо правой колонки. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-back,
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-checkout {
  width: 100%;
  height: 56px; /* .button--large: --btn-height:56px */
}

@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-footer__right {
    display: flex;
    flex-direction: column;
    width: 320px; /* .cart-footer__cta-container: flex:0 1 320px */
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-back,
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary,
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-checkout {
    order: initial;
    margin-top: 0;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-checkout { margin-top: 45px; } /* .cart-footer__cta margin-top:45px desktop */
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-back { width: 320px; }
}

/* Сводка — без карточки-плашки (эталон: cart-totals лежит прямо на фоне
   страницы, не sf-surface). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary {
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); /* .cart-footer__totals border-top rgba(...,.1) */
  padding-top: 40px; /* mobile */
}
@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary { padding-top: 50px; }
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700; /* .cart-totals: font-weight:var(--font-weight-base-bold) */
  color: var(--text);
  padding: 4px 0;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary__row span:last-child {
  text-align: right; /* .cart-totals__amount: text-align:right */
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary__row--muted {
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary__row--total {
  font-size: 16px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-summary__divider {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  margin: 8px 0;
}

/* ── «Вам также понравится» — секция рекомендаций (cart.md §8) ──────────── *
   Карточка переиспользует уже готовые .preset-oasis .sf-tile/.sf-card из
   presets.css один в один (_group_card.html через _cross_sell.html) — здесь
   только заголовок секции и точечный фикс gap на мобиле. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-upsell-title {
  font-size: 24px; /* mobile */
  line-height: 1.2;
  text-align: center;
  margin-bottom: 53px; /* cart.md §8: зазор heading→grid на мобиле */
}
@media (min-width: 768px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-upsell-title {
    font-size: 32px;
    text-align: left;
    margin-bottom: 76px; /* зазор heading→grid на wide/desktop */
  }
}

/* Точечный фикс (cart.md §8): .preset-oasis .sf-grid задаёт gap:32px без
   media-запроса (общий баг presets.css, вне периметра этой правки — не
   трогаем общее правило) — здесь у эталона на мобиле 16px. Специфичность
   та же (0,2,0), побеждает порядком загрузки (этот файл — после presets.css). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-upsell-grid {
  gap: 16px;
}
@media (min-width: 768px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-cart-upsell-grid { gap: 32px; }
}