/* presets/oasis/checkout.css — Oasis theme, checkout page (fw-teardown,
   docs/2026-07-11-oasis-parity/checkout.md). Standalone-разметка, тот же
   подход что и у Creator (presets/creator/checkout.css — образец структуры
   этого файла): чекаут FW — отдельное React (styled-components) приложение,
   поэтому источник чисел — ТОЛЬКО computed style (`st`) из
   my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/checkout.spec.json
   (wide=3072 — главный, потолок ширины виден только там). Разметка —
   app/templates/storefront/checkout.html + _order_summary.html, ветка
   preset_id == 'oasis' и FW pack. Общая геометрия скоуплена на эти темы. */

/* ── Standalone-хром: прячем витринный header/footer/промо-бар ───────────────
   _layout.html — общий для всех пресетов, править нельзя. :has() находит
   маркер .sf-oasis-checkout внутри <main> и гасит header/footer/промо-бар —
   прямых сиблингов <main> на уровне <body>. Тот же приём, что у Creator. */
body:is(.preset-oasis, .sf-fw-pack):has(.sf-oasis-checkout) > header,
body:is(.preset-oasis, .sf-fw-pack):has(.sf-oasis-checkout) > [data-theme-promo-bar],
body:is(.preset-oasis, .sf-fw-pack):has(.sf-oasis-checkout) > footer {
  display: none;
}

/* ── Локальные токены скоупа. --display-weight:700 — легенда секций (spec:
   nodes[92] "Leave a message..." fontWeight:700) И бренд-H1 (nodes[9]
   "NikkyKash" fontWeight:700) читают один и тот же var(--display-weight),
   поэтому один оверрайд закрывает оба места разом (приём Creator). Базовый
   токен темы --display-weight:600 (presets.css) НЕ трогаем — влияет на все
   страницы Oasis, здесь только локальный скоуп чекаута.
   --text/--muted НАМЕРЕННО не трогаем (в отличие от Creator) — checkout.md
   §9 фиксирует наблюдение rgb(23,23,23)≈#171717 vs текущий --text:#000000,
   но явно оставляет решение foundation-агенту (влияет на весь пресет, не
   только чекаут) — не мой файл, не моё решение.
   Три литерала ниже НЕ имеют готового токена в теме (--sf-hairline при 8%/
   14% на белом фоне даёт rgb(235)/rgb(219) — заметно светлее измеренных
   #B5B5B5/делителей на #F2F2F2), поэтому заводим их здесь, а не тянем чужой
   base.css (я пишу только этот файл). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout {
  --display-weight: 700;
  /* rgb(242,242,242) — плашка доставки (nodes[68]), карточка summary
     (nodes[129]), мобильный top-bar сводки (mobile nodes[6]) — один и тот
     же серый по трём разным узлам эталона. */
  --sf-oasis-checkout-plate: #F2F2F2;
  /* rgb(181,181,181) — border-top поля Name/Message (nodes[97],[105]). */
  --sf-oasis-checkout-field-border: #B5B5B5;
  /* Разделитель <hr> внутри summary-карточки не измерен явно (эталон не
     даёт цвет самого <hr>, только геометрию) — берём паттерн hairline-семьи
     темы, чуть плотнее дефолтных 8%, т.к. фон карточки уже серый (#F2F2F2),
     не белый — на нём бледный hairline теряется. */
  --sf-oasis-checkout-divider: color-mix(in srgb, var(--text) 12%, transparent);
}

/* FW pack keeps each family's surface, text contrast and display weight. */
.sf-fw-pack .sf-oasis-checkout {
  --display-weight: inherit;
  --sf-oasis-checkout-plate: color-mix(in srgb, var(--text) 5%, var(--surface));
  --sf-oasis-checkout-field-border: var(--sf-hairline-strong);
}

/* ── Бренд-H1 вместо заголовка «Оформление заказа» ────────────────────────
   Эталон: nodes[9] "NikkyKash" — Plus Jakarta Sans 700 24px/44px, по центру
   колонки (x=1248 в колонке 1008..1608 → центр). text-transform не задаём
   явно — читает var(--display-transform) через generic h1-правило
   (presets.css:197-204), у Oasis это none, совпадает с измеренным tt=none. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__brand {
  margin: 0;
  /* 52px = высота "шапки" минус сам h1: header(84px, nodes[6]) + отступ
     main(12px, nodes[10]→[11]) − h1(44px высота строки) = 40+12 = 52.
     Express Checkout (PayPal/GPay), который в эталоне стоит между шапкой и
     Contact, мы не переносим (ТЗ п.4/§0) — 52px даёт ровно тот же зазор
     "шапка → первая секция", который был бы у эталона без этого блока. */
  padding: 0 0 52px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 24px;
  line-height: 44px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__brand a {
  color: var(--text);
  transition: opacity 0.2s ease;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__brand a:hover { opacity: 0.7; }

/* ── Сетка: форма + summary ───────────────────────────────────────────────
   Мобайл (<1024, тот же lg-брейкпоинт, что у Creator — в спеке нет
   промежуточного снимка 768–1023, изобретать новый незачем): одна колонка,
   summary — fixed top-bar. padding-top:80px = высота мобильного top-bar
   (48px, mobile nodes[6]) + тот же верхний гуттер 32px, что на wide/desktop
   (мера сходится: mobile nodes[5] paddingTop=80px, nodes[5].paddingBottom
   =16px — оба взяты как есть). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 80px 16px 16px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__summary {
  order: -1;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: var(--sf-oasis-checkout-plate);
}
@media (min-width: 1024px) {
  /* wide (3072): контейнер x=946 w=1180 (потолок 1180px, НЕ full-bleed —
     подтверждено тем же потолком на desktop/1440, nodes[4]). Колонки —
     форма 600 фикс (nodes[5]) + aside 400 фикс (nodes[128]), gap 56.
     justify-content:center вместо margin-эквилибристики эталона (62/56/62)
     — визуально идентично: 600+56+400=1056, (1180−1056)/2=62 на каждый
     край, ровно то, что даёт центрирование грида. */
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__grid {
    grid-template-columns: 600px 400px;
    justify-content: center;
    align-items: start;
    column-gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 0 96px;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__summary {
    order: 0;
    position: sticky;
    top: 32px;
    left: auto; right: auto; z-index: auto;
    background: transparent;
  }
}

/* ── Мобильный toggle-бар сводки — fixed 48px (mobile nodes[6], bg сразу
   #F2F2F2 — та же плашка, что и summary-карточка, В ОТЛИЧИЕ от Creator, где
   top-bar var(--surface); тут это не совпадает с --surface Oasis=белый). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary-bar__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary-bar__total {
  display: flex;
  align-items: center;
  gap: 10px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary-bar__chev { transition: transform 0.2s ease; }
@media (max-width: 1023px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary-bar__body {
    display: none;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border-top: 1px solid var(--sf-oasis-checkout-divider);
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary-bar__body.is-open { display: block; }
}
@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary-bar__toggle { display: none; }
  /* __body: без override — обычный div, всегда display:block. */
}

/* ── Секции формы: без плашек-карточек — поля прямо на фоне страницы (та же
   структура, что у Creator). Разрыв 32px между секциями (checkout.md §2:
   "у каждого marginTop:32px"), первая секция после бренда — 0 (зазор уже
   даёт __brand padding-bottom выше). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields {
  display: flex;
  flex-direction: column;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-section { padding-top: 32px; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__brand + .sf-oasis-section { padding-top: 0; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-section__title {
  /* Раунд-2 presets.css уже даёт font-family/text-transform/font-weight на
     .sf-panel-title (читает var(--display-weight), которую скоуп чекаута
     переопределил на 700 выше) — здесь только числа, которых там нет.
     legend (nodes[92]): fontSize:16px letterSpacing:-0.2px, строка-обёртка
     легенды (nodes[91]) marginBottom:12px до первого поля. */
  font-size: 16px;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}
/* Внутри секции — 12px между полями (checkout.md §2). Шаблон использует
   готовые Tailwind-утилиты space-y-4(16px)/gap-4(16px) — не 12px; шаблон
   вне зоны этого файла (правится другим агентом), поэтому докручиваем
   зазор здесь через более специфичный селектор (без !important, порядок
   каскада — этот файл грузится после storefront.css). space-y-3(12px) в
   секции "Способ доставки" уже совпадает, трогать не нужно. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields .sf-oasis-section .space-y-4 > * + * {
  margin-top: 12px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields .sf-oasis-section .gap-4 {
  gap: 12px;
}

/* ── Поля (Контакт/Адрес/Сообщение) — border-top-only, БЕЗ полного бокса
   (checkout.md §3: обёртка nodes[97]/[105] — border ТОЛЬКО top, 1px,
   #B5B5B5, background rgb(255,255,255)≈прозрачно на белой Oasis-теме,
   radius 0). Скоуп — только __fields (НЕ весь .sf-oasis-checkout): промокод
   -инпут внутри aside/summary — отдельный узел эталона (не Stripe, не этот
   паттерн), остаётся на обычном боксовом .sf-input из storefront.input.css. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields .sf-input {
  display: block;
  min-height: 56px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--sf-oasis-checkout-field-border);
  border-radius: 0;
  font-size: 16px;
}
/* Floating-label: снимок статичен (пустое несфокусированное поле) — реального
   перехода label→маленькая подпись в данных нет. Тот же прагматичный приём,
   что уже принят у Creator (checkout.md §3: "рекомендую то же самое для
   Oasis") — подпись всегда маленькая сверху, без анимации под один кадр. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields label.block { position: relative; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields label.block > span:first-child {
  position: absolute;
  top: 9px;
  left: 16px;
  margin: 0;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields label.block > .sf-input {
  padding: 22px 16px 7px;
}
/* Textarea (Сообщение) — честный placeholder, без floating-label (у секции
   уже есть свой заголовок-легенда). Высота 76px (nodes[106], rows="3" в
   разметке даёт больше — атрибут не трогаем, только паддинг/высота). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout__fields textarea.sf-input {
  padding: 14px 16px;
  min-height: auto;
  height: 76px;
}

/* ── Радио «Способ доставки» — своя разметка (у эталона этого шага нет: FW
   авто-считает доставку по адресу через Stripe/сервис, не рисует радио).
   Границы — hairline темы (Oasis не переопределяет sf-hairline, дефолт
   8%/14% уместен здесь — это не измеренный FW-узел, а собственный дизайн).
   Выбранный вариант — border-color:var(--text), БЕЗ цветного accent (Oasis
   чёрно-белая, checkout.md таблица п.7). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--sf-hairline);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-radio:hover { border-color: var(--sf-hairline-strong); }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-radio.is-selected { border-color: var(--text); }

/* ── «Плашка» статуса доставки (кнопки calcDoor/openPvz) — заглушка эталона
   ("Enter your shipping address to show delivery options"; nodes[68]: bg
   rgb(242,242,242), padding 16px 20px, без рамки, muted-текст 16px/18.4px).
   .btn-outline остаётся инвариант-классом (фокус-кольцо/disabled из
   storefront.input.css) — .sf-oasis-plate только переопределяет
   геометрию/цвет, подключается позже presets.css → выигрывает порядок. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-plate {
  display: block;
  min-height: 50px;
  padding: 16px 20px;
  border: none;
  background: var(--sf-oasis-checkout-plate);
  color: var(--muted);
  font-weight: 400;
  font-size: 16px;
  text-align: left;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-plate:hover { color: var(--text); }

/* ── Consent-чекбокс — низ формы. НЕ предзаполняется (152-ФЗ), разметка не
   трогается, только позиция/отступ. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 32px;
  cursor: pointer;
}

/* ── Ошибка формы — err-токены темы, без хардкод-красного. Геометрия не в
   эталоне (formError — динамическое состояние, снимок его не покрывает),
   переносим уже принятый у Creator паттерн (checkout.md §11). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-formerror {
  margin-top: 24px;
  padding: 12px 16px;
  font-size: 14px;
  background: var(--sf-err-bg);
  border: 1px solid color-mix(in srgb, var(--sf-err) 28%, var(--surface));
  color: var(--sf-err);
}

/* ── CTA "Перейти к оплате →" (эталон: "Complete order", nodes[115]).
   .btn-primary/.preset-oasis уже даёт чёрный фон/белый текст/radius0/bold
   700 16px (presets.css:371-391) — здесь только высота/паддинг, которые в
   эталоне различаются по вьюпорту (mobile 358×48 pad 0/20, wide/desktop
   600×56 pad 0/24). Отступ сверху — 32px (в эталоне это marginTop секции
   доната, которую мы не переносим; у нас CTA идёт сразу после
   сообщения/consent — сохраняем то же число). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-cta {
  margin-top: 32px;
  padding: 0 20px;
}
@media (min-width: 1024px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-cta {
    min-height: 56px;
    padding: 0 24px;
  }
}

/* ── Легальный текст под кнопкой (nodes[118]: marginTop:44px, fontSize:12px,
   color:rgb(23,23,23) — ОСНОВНОЙ текст, не muted, просто мелкий кегль). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-checkout .sf-oasis-legal {
  margin-top: 44px;
  font-size: 12px;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   _order_summary.html — oasis-плашка заказа. Рендерится ОДИН раз на
   странице (checkout.html включает её только в <aside>, без второй mobile-
   копии — переставляется между top-bar/sticky-aside через CSS order у
   .sf-oasis-checkout__summary выше). ВСЯ карточка — один серый блок
   (checkout.md §7: nodes[129] background rgb(242,242,242), padding:20px 0
   — только top/bottom, горизонтальный инсет 24px задают ВНУТРЕННИЕ строки,
   а не сама карточка; оба <hr> эталона идут на всю ширину карточки БЕЗ
   инсета — реализовано border-bottom на padded-блоках ниже, граница рисуется
   по внешнему краю padding-box, то есть во всю ширину 400px несмотря на то,
   что текст внутри отступает на 24px). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary {
  background: var(--sf-oasis-checkout-plate);
  padding: 20px 0;
}

/* Строка товара: фото 60×80 + бейдж qty поверх угла (nodes[130..138]).
   Заголовка «Ваш заказ» нет — карточка начинается сразу со строки товара
   (текст «Ваш заказ» — только в мобильном toggle-баре, checkout.html). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__items {
  list-style: none;
  /* padding-bottom + margin-bottom = 16+16=32px общий зазор вокруг hr
     (item-bottom→hr = 16px, hr→totals = 16px, nodes[130]/[139]/[142]). */
  margin: 0 0 16px;
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--sf-oasis-checkout-divider);
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}
/* Зазор между товарами не измерен (в снимке 1 товар) — переиспользуем тот
   же 16px, что и остальные внутренние отступы карточки. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item + .sf-oasis-summary__item { margin-top: 16px; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-photo {
  position: relative;
  flex: 0 0 60px;
  width: 60px;
  height: 80px;
  /* nodes[134]: border oklab(...,0.15) ≈ 15%-микс текста на прозрачном. */
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Бейдж (nodes[135]): inset -6/-6 от фото, border 2px = цвет карточки
   (вырез-эффект), bg=var(--text), текст=var(--bg) — эталон rgb(23,23,23)/
   rgb(252,252,252), у Oasis --text:#000000/--bg:#ffffff, тот же контраст. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sf-oasis-checkout-plate);
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-info { flex: 1; min-width: 0; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-name { font-weight: 500; }
/* nodes[137] "Black, S": fontSize:14px color:rgb(110,110,110) — совпадает
   с var(--muted):#6b6b6b Oasis без правок (checkout.md §10). */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-variant {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}
/* nodes[138]: fontSize:14px textAlign:right minWidth:64px marginLeft:12px. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__item-price {
  white-space: nowrap;
  min-width: 64px;
  margin-left: 12px;
  text-align: right;
}

/* Итоги (footer, nodes[142..147]): Subtotal 14px/400, Total 16px/700 с
   margin-top:12px (gap между subtotal-row и total-row в эталоне). Наш
   Total — ОТДЕЛЬНЫЙ блок .sf-oasis-summary__grand (не вложен в __totals,
   разметка _order_summary.html), поэтому 12px и hr-паддинг лежат на нём. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 24px;
  font-size: 14px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__row { display: flex; justify-content: space-between; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-summary__grand {
  display: flex;
  justify-content: space-between;
  /* top:12 — зазор от __totals (nodes[144]→[147]: 198−186=12).
     bottom:16 — зазор ПОСЛЕ hr до промо (nodes[155]→[158]: 255−239=16),
     padding-bottom:16 — зазор ДО hr (nodes[147]bottom→[155]: 238−222=16). */
  margin: 12px 0 16px;
  padding: 0 24px 16px;
  border-bottom: 1px solid var(--sf-oasis-checkout-divider);
  font-size: 16px;
  font-weight: 700;
}

/* Промокод — inline-тоггл ВНУТРИ карточки (checkout.md §7.3/§14): в отличие
   от Creator (full-width justify-content:space-between), у Oasis-эталона
   кнопка inline-flex по контенту (nodes[159]: width:168.75px "по контенту",
   НЕ full-width), текст+шеврон слева направо через gap:6px. margin-top не
   нужен — зазор уже даёт margin-bottom __grand выше. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-promo { padding: 0 24px; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-promo__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-promo__chev { transition: transform 0.2s ease; }
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-promo__body { margin-top: 12px; }