/* страница cart, тема creator. Источник измерений: nikkykash cart.metrics.md +
   cart.spec.json (рект-числа cart-header/cart-items-header/cart-item/cart-totals)
   + states/pdp-after-add (дровер). Разметка — app/templates/storefront/cart.html
   (ветка preset_id=='creator'), _cart_drawer.html, _cross_sell.html,
   _drawer_upsell.html. Всё под .preset-creator — 0 влияния на другие пресеты. */

/* ── Обёртка страницы (creator branch, cart.html): узкий центр-контейнер —
   держит и заголовок, и раскладку товаров на ОДНОЙ левой границе
   (cart.spec.json: cart-header__heading и cart-container__cart-component
   оба rect.x=152, w=1136 при вьюпорте 1440 — сейчас у нас заголовок жил в
   обычном .store-container, а список товаров получал свой max-width
   отдельно, отсюда расхождение). 1136px = 1440 − 152×2 — центрирует блок
   ровно на x=152, заметно ýже секции рекомендаций ниже (та держит
   стандартный store-container gutter 32px — не трогаем). */
@media (min-width: 1024px) {
  .preset-creator .sf-creator-cart-inner {
    max-width: 1136px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Заголовок страницы: динамический, отдельно от общего .sf-page-title
   (тот класс шарится с /collections/all, откалиброван под 40px/center там —
   у cart другая геометрия по метрике cart-header__heading: 24px). Десктоп —
   слева; мобайл — по центру (mobile/cart.spec.json: cart-header__heading
   textAlign=center). */
.preset-creator .sf-creator-cart-title {
  font-size: 24px;
  /* было 1.3 (~31px) — cart.metrics.md: line-height 42px при font-size 24px. */
  line-height: 1.75;
  text-align: left;
  /* было 32px — cart.spec.json: heading bottom 163 → head-row top 211 = 48px. */
  margin-bottom: 48px;
}
@media (max-width: 767px) {
  .preset-creator .sf-creator-cart-title { text-align: center; }
}

/* ── Раскладка: список товаров — ОДНА строка на всю ширину контейнера
   (Item/Quantity/Price в одном ряду, как в FW), НЕ сайдбар-паттерн.
   cart.spec.json: cart__items (список) y=268-409, cart__footer (back +
   summary + checkout) y=425-597 — footer идёт НИЖЕ списка, не сбоку. Так
   и на мобиле, и на десктопе — единственная разница по брейкпоинтам живёт
   внутри .sf-creator-cart-footer (см. ниже), сама .sf-creator-cart-layout
   остаётся простым вертикальным стеком на обеих ширинах. */
.preset-creator .sf-creator-cart-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.preset-creator .sf-creator-cart-items { min-width: 0; }

/* ── Footer-строка: "Назад к покупкам" слева, сводка+"Оформить" справа, с
   пустым промежутком между ними (cart.metrics.md: обе кнопки rect=320x48,
   разнесены к краям контейнера, низ выровнен — над Checkout высится блок
   сводки, назад стоит один). Мобайл — footer/footer__right прозрачны
   (display:contents), их дети становятся обычными элементами вертикального
   стека .sf-creator-cart-layout и сортируются через order: несмотря на то,
   что в разметке "back" теперь стоит ПЕРЕД summary/checkout (десктопу нужен
   такой порядок — back слева), мобильный визуальный порядок остаётся
   прежним items → summary → checkout → back. */
.preset-creator .sf-creator-cart-footer,
.preset-creator .sf-creator-cart-footer__right {
  display: contents;
}
.preset-creator .sf-creator-cart-back { order: 3; }
.preset-creator .sf-creator-cart-summary { order: 1; }
.preset-creator .sf-creator-cart-checkout { order: 2; }

@media (min-width: 1024px) {
  .preset-creator .sf-creator-cart-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .preset-creator .sf-creator-cart-footer__right {
    display: flex;
    flex-direction: column;
    width: 320px;
    gap: 24px;
  }
  .preset-creator .sf-creator-cart-back,
  .preset-creator .sf-creator-cart-summary,
  .preset-creator .sf-creator-cart-checkout {
    /* Внутри реальных (не display:contents) флекс-контейнеров десктопа
       порядок снова задаёт разметка — mobile-only order выше не нужен. */
    order: initial;
  }
}

/* ── Табличная шапка (Товар/Кол-во/Цена). Мобайл — виден только сам ряд с
   подписью "Товар" + hairline снизу; "Кол-во"/"Цена" скрыты точечно (весь
   ряд — не display:none, mobile/cart.spec.json показывает ровно один
   видимый cart-items-header__item). Десктоп — полная грид-шапка в 5 колонок
   (cart-items-header в спеке: 14px, ОСНОВНОЙ цвет текста — FW не приглушает
   заголовки колонок, в отличие от muted-подписей вроде "Доставка"). */
.preset-creator .sf-creator-cart-head {
  display: block;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sf-hairline);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
.preset-creator .sf-creator-cart-head .sf-creator-cart-col-qty,
.preset-creator .sf-creator-cart-head .sf-creator-cart-col-price {
  display: none;
}
@media (min-width: 1024px) {
  .preset-creator .sf-creator-cart-head {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) 130px 100px 34px;
    grid-template-areas: "photo info qty price remove";
    column-gap: 16px;
  }
  .preset-creator .sf-creator-cart-head .sf-creator-cart-col-qty,
  .preset-creator .sf-creator-cart-head .sf-creator-cart-col-price {
    /* .sf-creator-cart-col-price переиспользован и шапкой, и ячейкой суммы —
       вес теперь одинаковый (400) в обеих ролях, отдельный override не нужен. */
    display: block;
  }
}

/* ── Список товаров: плоский (без sf-surface-flat плашки), hairline между
   строками через уже существующий .sf-divide-y. */
.preset-creator .sf-creator-cart-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Строка: мобильный дефолт — 2 колонки (фото + инфо), remove сверху-справа,
   цена и qty-бокс идут блоками под инфо. Десктоп — 5 колонок в одну линию,
   как cart-item в спеке (photo 88x117, qty select 116x52 → бокс,
   price/remove отдельными колонками). */
.preset-creator .sf-creator-cart-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 34px;
  grid-template-areas:
    "photo info   remove"
    "photo price  price"
    "photo qty    qty";
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  /* cart.spec.json (mobile+desktop): cart-item padding 12px сверху/снизу. */
  padding: 12px 0;
}
/* Фото: мобайл крупнее десктопа (мобильный cart-item__image в спеке —
   104x139, больше десктопных 88x117) — база под мобильный размер, десктоп
   уменьшает в media-запросе ниже. aspect-ratio 3/4 сам считает высоту. */
.preset-creator .sf-creator-cart-col-photo { grid-area: photo; display: block; width: 104px; aspect-ratio: 3 / 4; background: transparent; }
.preset-creator .sf-creator-cart-col-photo img { width: 100%; height: 100%; object-fit: contain; }
.preset-creator .sf-creator-cart-col-info { grid-area: info; min-width: 0; }
.preset-creator .sf-creator-cart-col-qty { grid-area: qty; justify-self: start; margin-top: 4px; }
/* было font-weight:600 — cart.spec.json cart-item__price-value: 16px/400,
   тот же обычный вес что у соседних ячеек (жирный остаётся только у Итого). */
.preset-creator .sf-creator-cart-col-price { grid-area: price; font-weight: 400; white-space: nowrap; }
.preset-creator .sf-creator-cart-col-remove { grid-area: remove; justify-self: end; }

/* Зазор «кнопки корзины → заголовок апсейла»: у эталона секция корзины
   асимметрична (32px сверху / 80px снизу), а секция рекомендаций добавляет
   свои 80px сверху. Наш .py-8/.md:py-16 давал симметричные 32/64 — на
   десктопе добираем до эталонных величин. */
@media (min-width: 1024px) {
  .preset-creator .sf-creator-cart-section { padding-bottom: 80px; }
  .preset-creator .sf-creator-upsell { padding-top: 80px; }
}

@media (min-width: 1024px) {
  .preset-creator .sf-creator-cart-row {
    grid-template-columns: 88px minmax(0, 1fr) 130px 100px 34px;
    grid-template-areas: "photo info qty price remove";
    row-gap: 0;
    align-items: center;
    padding: 12px 0;
  }
  .preset-creator .sf-creator-cart-col-photo { width: 88px; }
  .preset-creator .sf-creator-cart-col-qty { margin-top: 0; }
  .preset-creator .sf-creator-cart-col-price { justify-self: end; text-align: right; }
  /* ── Раунд 4 фикс: единый column-gap:16px даёт одинаковый зазор ВСЕМ
     соседним колонкам, но эталон держит фото→инфо шире (30px), чем
     остальные пары (16px, уже совпадают). Класс .sf-creator-cart-col-info
     общий у шапки (span "Товар") и строки (div с названием) — одно правило
     чинит обе роли разом, не трогая info→qty/qty→price. */
  .preset-creator .sf-creator-cart-col-info { margin-left: 14px; }
}

.preset-creator .sf-creator-cart-row__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.25;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.preset-creator .sf-creator-cart-row__title:hover { opacity: 0.7; }
.preset-creator .sf-creator-cart-row__variant {
  margin-top: 4px;
  /* было 14px — cart.spec.json cart-item__variant-title: fontSize=16px
     lineHeight=28px. */
  font-size: 16px;
  line-height: 28px;
  /* было var(--muted) — cart.spec.json cart-item__variant-title: color
     полный rgb(216, 215, 209), тот же что у заголовка, БЕЗ приглушения. */
  color: var(--text);
}

/* Qty-бокс: select-подобная рамка (по спеке — select-field: обёртка
   120×56, border 2px/14% alpha, шеврон справа). Кликабельная область —
   поведение прежнее: 2 прозрачные sf-creator-cart-qtyhit (лев/прав
   половина рамки), каждая submit'ит свою форму POST /cart/update (контракт
   cart.invariants.md). Видимых +/− больше нет — только число + декоративный
   шеврон, как у настоящего <select>. */
.preset-creator .sf-creator-cart-qtybox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 120px;
  height: 56px;
  padding: 0 16px;
  border: 2px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.preset-creator .sf-creator-cart-qtynum {
  /* pointer-events:none — иначе цифра (в DOM после qtyhit--dec) перехватывает
     клик на себя и «−» перестаёт срабатывать именно там, где стоит текст. */
  font-size: 14px;
  color: var(--text);
  pointer-events: none;
}
.preset-creator .sf-creator-cart-qtychevron {
  width: 10px;
  height: 7px;
  color: var(--muted);
  pointer-events: none;
}
.preset-creator .sf-creator-cart-qtyhit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: background-color 0.2s ease;
}
.preset-creator .sf-creator-cart-qtyhit:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.preset-creator .sf-creator-cart-qtyhit--dec { left: 0; }
.preset-creator .sf-creator-cart-qtyhit--inc { right: 0; }

.preset-creator .sf-creator-cart-removebtn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* было var(--muted) — cart.spec.json cart-item__remove-button: полный
     цвет текста, крестик не приглушён относительно остального ряда. */
  color: var(--text);
  transition: color 0.2s ease;
}
.preset-creator .sf-creator-cart-removebtn:hover { color: var(--sf-err); }

/* "Назад к покупкам" + "Оформить заказ" — часть общего footer-flex (см.
   выше): на десктопе back — фикс. 320px в левой части footer'а; checkout
   остаётся 100% своего родителя (.sf-creator-cart-footer__right, тоже
   320px) — оба визуально одной ширины, как в cart.metrics.md (rect=320x48
   у обеих). На мобиле — обычные элементы вертикального стека, порядок
   задаёт order выше (summary → checkout → back). */
.preset-creator .sf-creator-cart-back,
.preset-creator .sf-creator-cart-checkout {
  width: 100%;
}
@media (min-width: 1024px) {
  .preset-creator .sf-creator-cart-back {
    width: 320px;
  }
}

/* ── Сводка: без карточки-плашки (в FW cart-totals — plain текст на фоне
   страницы, не sf-surface). */
.preset-creator .sf-creator-cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
  padding: 6px 0;
}
.preset-creator .sf-creator-cart-summary__row--muted { color: var(--muted); font-size: 13px; }
.preset-creator .sf-creator-cart-summary__row--total {
  font-weight: 700;
  font-size: 16px;
  /* было "4px 0 24px": лишние 24px снизу дублировали gap контейнера
     .sf-creator-cart-footer__right (теперь Checkout — соседний flex-item,
     не последний child этого aside). */
  padding: 4px 0;
}
.preset-creator .sf-creator-cart-summary__divider {
  border: 0;
  /* 0.1 по cart.spec.json (cart-footer__totals borderTopColor), локально —
     не трогаем общий --sf-hairline (20%, используется по всей теме). */
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  margin: 12px 0;
}

/* ── "Вам также понравится" на полной странице /cart — заголовок 32px по
   метрике section-header__heading (archivo/uppercase уже общим h2-правилом). */
.preset-creator .sf-creator-cart-upsell-title {
  font-size: 32px;
  line-height: 1.2;
  /* переопределяет mb-5 (20px) из разметки — cart.metrics.md: заголовок
     заканчивается на y=801, грид апсейлов начинается на y=841 → 40px. */
  margin-bottom: 40px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Cart drawer (_cart_drawer.html) — глобальный оверлей, грузится на КАЖДОЙ
   странице. Источник — states/pdp-after-add (drawer__content rect=480x900,
   transform 0.225s cubic-bezier(0,0,.2,1)). Наши Alpine-хендлеры/upsell не
   трогаются, только визуальный слой. ══════════════════════════════════════ */

.preset-creator .sf-creator-cart-drawer {
  /* Один always-on transition полностью перебивает Tailwind-классы
     transition/duration-200/ease-out и duration-150/ease-in одновременно
     (наш селектор специфичнее любого одиночного класса .duration-* и .ease-*)
     — enter и leave получают одну и ту же премиальную кривую по метрике. */
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1);
}
@media (min-width: 640px) {
  .preset-creator .sf-creator-cart-drawer { width: 480px; }
}
.preset-creator .sf-creator-cart-drawer__title {
  font-size: 20px;
}

.preset-creator .sf-creator-cart-drawer__actions {
  display: flex;
  gap: 8px;
}
.preset-creator .sf-creator-cart-drawer__actions > a {
  flex: 1 1 0;
}

/* Айтем дровера: имя — archivo caps, разрешаем перенос на неск. строк
   (было truncate в один ряд). Фото — 3:4 без surface-плашки. Upsell-строки
   внутри дровера переиспользуют .sf-card (общий компонент), но их 40px
   padding-bottom (нужный для грид-плиток) здесь лишний — гасим точечно,
   только внутри дровера, не трогая .sf-card на остальной странице. */
.preset-creator .sf-creator-cart-drawer .sf-card {
  padding-bottom: 0;
}
.preset-creator .sf-creator-cart-drawer__upsell-title {
  color: var(--text);
}
.preset-creator .sf-creator-cart-drawer__item-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  /* было 13px/1.35 (17.55px) — states/pdp-after-add.spec.json:
     inline-image__heading = 16px/900/uppercase/lineHeight 19.2px, одинаково
     и у добавленного товара, и у 4 карточек апсейла (общий класс). */
  font-size: 16px;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.preset-creator .sf-creator-cart-drawer__item-photo {
  /* было 72x96 — states/pdp-after-add: product-drawer__recommended-item
     фото 104x139, тот же размер что у добавленного товара (__added-photo
     ниже). Явные width+height (не aspect-ratio) — у <img> тут остаются
     Tailwind w-14/h-14 (upsell) и w-16/h-16 (обычный список), они бы
     выиграли battle за height, останься это свойство необъявленным здесь. */
  width: 104px;
  height: 139px;
}
.preset-creator .sf-creator-cart-drawer__item-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  height: 40px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--cta-text);
  background: var(--cta-bg);
}
.preset-creator .sf-creator-cart-drawer__item-photo.sf-surface-flat {
  background: transparent;
  border: 0;
}

/* ── Confirmation-состояние "Добавлено в корзину" (states/pdp-after-add):
   заголовок с чекмарком — та же archivo-caps трактовка, что у остальных
   drawer-заголовков (product-drawer__heading в спеке: 20px/900/uppercase,
   тот же размер что .sf-creator-cart-drawer__title). Фото добавленного
   товара — 104x139 (product-drawer__item в спеке), тот же размер что и у
   строк списка/апсейла теперь — aspect-ratio считает высоту сама (тут у
   <img> нет конкурирующего Tailwind h-*, в отличие от __item-photo выше). */
.preset-creator .sf-creator-cart-drawer__added-heading {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  font-size: 20px;
  color: var(--text);
}
.preset-creator .sf-creator-cart-drawer__added-photo {
  width: 104px;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  flex-shrink: 0;
}
/* Шапка дровера в confirmation-состоянии: заголовок должен сидеть заметно
   ниже верхнего края, чем обычная "Корзина" (states/pdp-after-add.spec.json:
   product-drawer__heading top=72 при drawer__content top=5 → ~64px net,
   у нас — общий p-4=16px на _cart_drawer.html:76). :has() адресует именно
   confirmation-заголовок внутри общей шапки, не трогая обычное состояние
   "Корзина" (там своя, невалидированная в этом раунде геометрия) — тот же
   приём, что уже используется в presets/creator/checkout.css. */
.preset-creator .sf-creator-cart-drawer__header:has(.sf-creator-cart-drawer__added-heading) {
  padding-top: 64px;
}