/* Oasis — общий язык темы (foundation-агент, fw-parity 2026-07-11). Источник
   измерений: nikkykash-shop.fourthwall.com/{theme=oasis} —
   my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/*.spec.json
   (wide=3072 — главный источник ширин, ловушка «1440 врёт» не в игре для base)
   + css/theme.scss.css (живой CSS) + css/css-variables.scss.css (токены).
   Спеки прочитаны все шесть (docs/2026-07-11-oasis-parity/*.md) — здесь
   вынесено общее для всех страниц: hairline-токены, хедер (sticky/бордер,
   лого-фолбэк, мобильная высота, иконка корзины, мобильное меню), кнопки
   (transition), карточка товара (общий компонент home/collections/cart-
   рекомендации/related — сама разметка _group_card.html одна на все страницы).
   Подключается ПОСЛЕ presets.css (_layout.html) — при равной специфичности
   выигрывает здесь.

   Геометрия .store-container (full-bleed 16/32), .sf-tile (3:4), .sf-grid
   (32px), .btn-primary/.btn-outline (цвет/размер/hover-opacity), хедер-грид
   (1fr/auto/1fr, 85px), hero, featured-заголовок, футер — уже верны в
   presets.css (раунд 1, сверено с этими же метриками) — здесь НЕ дублируем.
   Капнутые контейнеры конкретных страниц (collections 1400px, cart 933px,
   checkout 1180px) — не общий паттерн (разные числа на разных страницах),
   заводятся отдельно каждым page-агентом в своём presets/oasis/<page>.css. */

/* ── Hairline-токены: доуточнение под .preset-oasis ──────────────────────────
   --sf-hairline/-strong объявлены ОДИН РАЗ на :root (storefront.input.css) и
   резолвят var(--text) там же (та же ловушка, что у Creator, см. его
   base.css) — на body.preset-oasis наследуется уже посчитанное значение от
   :root-дефолтного --text (#171717), а не от var(--text) темы (#000000).
   Переобъявляем здесь заново той же формулой (color-mix из --text), но с
   реальными процентами по метрикам:
   - hairline (обычный): бордеры эталона в PDP-аккордеоне и cart-разделителях
     — rgba(0,0,0,0.1) (pdp.md §9, cart.md §3/§7.1) = 10%, не 8%.
   - hairline-strong: бордер невыбранной size-кнопки на PDP — rgba(0,0,0,0.3)
     (pdp.md §7) И независимо бордер поля на чекауте — rgb(181,181,181) ≈
     29.5% чёрного на белом (checkout.md §10) — два независимых замера сошлись
     на 30%, не 14% (замер Creator, другая тема). */
.preset-oasis {
  --sf-hairline: color-mix(in srgb, var(--text) 10%, transparent);
  --sf-hairline-strong: color-mix(in srgb, var(--text) 30%, transparent);
}

/* ── Хедер: sticky/рамка ──────────────────────────────────────────────────────
   _header.html даёт oasis классы `sticky top-0 z-30 border-b` (та же ветка,
   что у остальных не-creator пресетов) — эталон Oasis: position:relative
   (НЕ sticky), borderBottomWidth:0, boxShadow:none (home.md §1(A)). Чинится
   чисто CSS-ом: специфичность `.preset-oasis header` (0,1,1) > `.sticky`/
   `.border-b` (0,1,0) — выигрывает по каскаду без !important, z-30/top-0 в
   разметке остаются, но становятся no-op при position:relative. */
.preset-oasis header {
  position: relative;
  border-bottom-width: 0;
}

/* Лого-фолбэк (`<span data-theme-logo-fallback>`, когда партнёр не загрузил
   лого-картинку) — НЕ h1/h2/.sf-display, значит не подхватывает общий
   [class*="preset-"] h1,h2 селектор автоматически. Эталон `.text-logo`:
   Plus Jakarta Sans 600 (home.md §1(B); размер оставляем text-xl=20px —
   это наш собственный текст-лого, не копия FW-контента, важно только
   семейство/начертание). */
.preset-oasis [data-theme-logo-fallback] {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Высота хедера на мобиле: 64px (mobile node #6), не 85 — общий грид-хук
   .sf-oasis-header__row уже даёт 85px на всех ширинах (presets.css, раунд 1,
   общий для oasis+creator), мобильного оверрайда для oasis не было
   (home.md §1(C)). */
@media (max-width: 767px) {
  .preset-oasis .sf-oasis-header__row {
    height: 64px;
  }
}

/* Иконка корзины — 18×18 (home.md §1, таблица: "cart-icon (18×18)" — и на
   wide/desktop, и на mobile, тот же FW-компонент, что уже смерен для Creator
   на этой же разметке). Разметка сейчас даёт w-[22px] h-[22px] Tailwind-
   классом — перебиваем явным px. Подпись "Корзина" рядом с иконкой у FW не
   отображается ни в одном снимке (только aria-label) — тот же вывод, что уже
   сделан для Creator на идентичном компоненте. */
.preset-oasis .sf-header-cart-icon {
  width: 18px;
  height: 18px;
}
.preset-oasis .sf-header-cart-label {
  display: none;
}

/* ── Хедер: мобильное меню (бургер → узкий drawer слева) ──────────────────────
   _header.html (fw-parity, 2026-07-11) расширил бургер-блок Creator
   (`.sf-creator-burger-wrap` и потомки) на `preset_id in ('oasis','creator')`
   — теперь эта разметка рендерится и для Oasis, но CSS под неё в
   presets/creator/base.css скоупен ТОЛЬКО на .preset-creator. Без своей копии
   правил меню на Oasis было бы неуправляемым блоком (drawer лежит в потоке
   документа вместо fixed-панели). home.md §1 (открытый вопрос) подтверждает
   структуру эталона — «бургер слева + лого по центру, нав скрыт» — но не даёт
   отдельных чисел для самого drawer'а: это тот же FW nav-компонент, что и у
   Creator (см. pdp.md «Главная находка» — одна и та же разметка движка на
   обеих темах, различаются только цвета/шрифты), поэтому геометрия
   (260px-панель, паддинги, транзишены) переиспользуется 1:1, только токены
   цвета (var(--text)/var(--bg)) резолвятся уже в палитру Oasis автоматически. */
@media (max-width: 767px) {
  .preset-oasis .sf-oasis-header__nav {
    display: none;
  }
  .preset-oasis .sf-oasis-header__logo {
    grid-column: 2;
    justify-self: center;
  }
}
.preset-oasis .sf-creator-burger-wrap {
  grid-column: 1;
  justify-self: start;
}
/* Explicit safety net (тот же приём, что у Creator): md:hidden в разметке
   требует Tailwind-класса, которого может не быть в собранном storefront.css
   (бандл собирается вручную, без пересборки — см. CLAUDE.md). Без этого
   правила бургер виден и на десктопе. */
@media (min-width: 768px) {
  .preset-oasis .sf-creator-burger-wrap {
    display: none;
  }
}
.preset-oasis .sf-creator-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: -8px;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.preset-oasis .sf-creator-burger:hover {
  opacity: 0.7;
}
/* Скрим: НЕ var(--bg) (тот приём у Creator работает только на тёмной теме —
   85% тёмного bg-тона реально затемняет; на светлом Oasis 85% белого было бы
   почти невидимым «затемнением»). Берём тот же чёрный тон, что уже везде на
   сайте у общего cart-drawer backdrop (_cart_drawer.html: bg-black/40) —
   единый визуальный язык скрима платформы, не изобретаем новый на глаз. */
.preset-oasis .sf-creator-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.4);
}
.preset-oasis .sf-creator-menu-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 61;
  width: 260px;
  max-width: 85vw;
  box-sizing: border-box;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 90px 20px 24px;
  overflow-y: auto;
}
.preset-oasis .sf-creator-menu-panel--transition {
  transition: transform 220ms ease-out;
}
.preset-oasis .sf-creator-menu-panel--closed {
  transform: translateX(-100%);
}
.preset-oasis .sf-creator-menu-close {
  position: absolute;
  top: 20px;
  left: 16px;
  padding: 10px;
  margin: -10px;
  display: inline-flex;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.preset-oasis .sf-creator-menu-close:hover {
  opacity: 0.7;
}
.preset-oasis .sf-creator-menu-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.preset-oasis .sf-creator-menu-links a {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.preset-oasis .sf-creator-menu-links a:hover {
  opacity: 0.7;
}

/* ── Кнопки: доводка transition ────────────────────────────────────────────
   Геометрия/цвета/hover-opacity .btn-primary/.btn-outline уже верны
   (presets.css, «уже верно, не трогать» — home.md §6). Базовый класс
   transition’ит transform/box-shadow/filter (storefront.input.css) — Oasis
   на hover меняет только opacity (0.8/0.6), которая в этот список не входит
   → без transition менялась бы мгновенно (тот же паттерн, что уже
   зафиксирован у Creator, здесь сужен до opacity — transform/box-shadow и
   так зафиксированы на "none" в обоих состояниях, транзишенить их незачем). */
.preset-oasis .btn-primary,
.preset-oasis .btn-outline {
  transition: opacity 0.2s ease;
}

/* ── Карточка товара (_group_card.html) — общий компонент для всех страниц
   (home/«Хиты», /collections/all, cart «Вам также понравится», PDP
   «Ещё принты») — правим один раз здесь, не в каждом page-файле.
   Источники чисел: collections.md §4/§5 (детальнее, отдельные mobile/desktop
   значения) и home.md §4 (сверка десктопных чисел — совпадает). Разметка:
   <div class="sf-surface sf-tile ..."> (фото) → сосед <div class="mt-3
   px-0.5"> (имя h3 + опционально цена div.sf-muted + опционально
   div.sf-swatches со span-точками и span.sf-muted "+N"). */

/* Текстовый блок под фото: было margin-top:12px (mt-3) + padding-left/right
   2px (px-0.5) — эталон: padding 24px 0 12px desktop (≥768), 16px 0 8px
   mobile (collections.md: живой CSS `.tile__description{padding:24px 0
   12px}` desktop, узлы mobile дают 16/8), margin-top:0 (не margin). */
.preset-oasis .sf-tile + div {
  margin-top: 0;
  padding: 16px 0 8px;
}
@media (min-width: 768px) {
  .preset-oasis .sf-tile + div {
    padding: 24px 0 12px;
  }
}

/* Имя товара: 16px уже есть (presets.css) — добавляем вес/lh/tracking по
   живому CSS `.tile__heading` (collections.md §4): 400 (не 500), line-height
   1.2 (не leading-snug≈1.375), letter-spacing normal (не -0.01em). */
.preset-oasis .sf-tile + div h3 {
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}

/* Цена: `<div class="mt-1 text-sm font-medium sf-muted">` — эталон
   `.tile__price`: 16px/400, ПОЛНЫЙ цвет (не приглушённый), margin-top:8px
   (живой CSS, collections.md/home.md сходятся 1:1). Тег div отличает цену от
   span-счётчика "+N" (тоже .sf-muted, отдельное правило ниже) — не задевает
   .sf-muted на других частях сайта (футер/навигация/PDP). */
.preset-oasis .sf-tile + div div.sf-muted {
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  margin-top: 8px;
}

/* Свотчи: контейнер `.sf-swatches` уже центрирован (presets.css). Точки —
   `<span class="w-3 h-3 rounded-full">` (12px, gap-1.5=6px) всегда; эталон —
   контейнер-бокс 20×20(моб)/26×26(десктоп) с кружком 12×12/16×16 внутри, шаг
   edge-to-edge 20/26px (collections.md §5). Без клик-бокса ближайший аналог —
   кружок 12→16px + gap ≈ шаг минус диаметр: 8px mobile / 10px desktop
   (collections.md: "с учётом отсутствующего клик-бокса ближайший аналог").
   "+N" бейдж — тот же span, класс .sf-muted (без rounded-full) отличает его
   от точек-кружков. */
.preset-oasis .sf-tile + div .sf-swatches {
  gap: 8px;
}
.preset-oasis .sf-tile + div .sf-swatches span.rounded-full {
  width: 12px;
  height: 12px;
}
.preset-oasis .sf-tile + div .sf-swatches span.sf-muted {
  font-size: 12px;
  color: var(--text);
}
@media (min-width: 768px) {
  .preset-oasis .sf-tile + div .sf-swatches {
    gap: 10px;
  }
  .preset-oasis .sf-tile + div .sf-swatches span.rounded-full {
    width: 16px;
    height: 16px;
  }
  .preset-oasis .sf-tile + div .sf-swatches span.sf-muted {
    font-size: 16px;
  }
}