/* presets/oasis/home.css — Oasis theme, home page (fw-parity, 2026-07-11).
   Источник чисел: docs/2026-07-11-oasis-parity/home.md, замеры на
   my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/home.spec.json
   (wide=3072 — главный источник ширин, mobile=390 — брейкпоинт <768).
   Подключается ПОСЛЕ presets.css (_layout.html) — при равной специфичности
   выигрывает здесь без !important.

   Scope: только то, что относится к секциям, уникальным для главной
   (Hero, «Хиты»/featured-грид) — по образцу presets/creator/home.css, где
   header/footer/кнопки живут в base.css, а не в home.css. Здесь НЕ включены
   (сознательно, не забыто):
   - Header — border/sticky, mobile-высота 64px, шрифт лого-фолбэка,
     мобильный бургер-дровер. Комментарий в _header.html прямо называет
     целевой файл: "presets/creator/base.css И presets/oasis/base.css" —
     это НЕ моя зона (я пишу ровно один файл, home.css). ⚠ Важно для
     оркестратора: сейчас _header.html рендерит бургер-блок и для oasis
     (`preset_id in ('oasis','creator')`), но поддерживающий CSS есть
     ТОЛЬКО под .preset-creator — без .preset-oasis-версии тех же правил
     (nav:none/логотип по центру/grid-column на бургере) грид хедера
     .sf-oasis-header__row ломается на мобиле (4 айтема на 3 явные ячейки
     1fr/auto/1fr, бургер без grid-column уезжает во вторую implicit-строку).
     Регрессия, не мелочь — нужно закрыть в oasis/base.css.
   - Footer, типографика кнопок — по home.md §5/§6 уже 1:1 с эталоном,
     правок нет.
   - Лимит свотчей (4 вместо 5) и dual-CTA разметка featured-секции —
     ОБА уже сделаны на уровне шаблона другим агентом (_group_card.html
     _swatch_limit, _section_featured.html cta-top/cta-bottom) — здесь
     только следующая из этого CSS-часть (видимость cta-top/bottom по
     брейкпоинту), см. ниже; сам лимит свотчей и рост точек до 16px —
     НЕ трогаю (home.md отмечает как опционально/неуверенно измерено,
     а collections.md предлагает конфликтующие адаптивные числа для того
     же .sf-swatches — пусть решает тот файл, чтобы не гнаться двумя
     разными версиями за одним селектором). */

/* ── Hero ──────────────────────────────────────────────────────────────────
   Паддинг секции (70/70) и max-width контента (933px) уже верны в
   presets.css — не трогаю. Три расхождения по home.md §2: */

/* (A) Мобильный заголовок: presets.css даёт 28px — эталон 40px/48px lh
   (mobile node #90). Десктопный 64px из presets.css (@min-width:768px)
   переопределяю тем же числом здесь же, иначе базовое правило без media
   ниже по каскаду (loading-порядок) перебило бы его на широких экранах —
   presets.css грузится РАНЬШЕ этого файла, поэтому его @768-правило
   проигрывает моему безусловному, если я его не повторю. */
.preset-oasis h1[data-theme-hero-title] {
  font-size: 40px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .preset-oasis h1[data-theme-hero-title] {
    font-size: 64px;
  }
}

/* (B) Зазор заголовок→кнопка: в разметке hero — <div class="mt-8 ..."> —
   32px везде; эталон 24px на мобиле, 32px desktop/wide (mobile node #91). */
.preset-oasis .sf-oasis-hero__content .mt-8 {
  margin-top: 24px;
}
@media (min-width: 768px) {
  .preset-oasis .sf-oasis-hero__content .mt-8 {
    margin-top: 32px;
  }
}

/* (C) Кнопка «Shop now» на мобиле — full-width (mobile node #93, w=358 =
   ширина hero-контента), на wide/desktop — intrinsic (116px). Скоуп через
   .sf-oasis-hero__content — НЕ трогает .btn-primary в других местах страницы
   (например кнопку hero там же на других пресетах, или featured CTA — та
   вообще .btn-outline, другой класс). */
@media (max-width: 767px) {
  .preset-oasis .sf-oasis-hero__content .btn-primary {
    width: 100%;
  }
}

/* ── Featured collection / «Хиты» ─────────────────────────────────────────
   Флекс-раскладка заголовок+CTA в одну строку уже даёт сам шаблон
   (_section_featured.html) — не трогаю. */

/* (A) Заголовок секции: presets.css сейчас даёт 28px/40px — это перепутанные
   с .sf-page-title цифры (round-1 оценка); эталон .section-header__heading
   даёт 24px mobile / 32px desktop (node #50 wide, #100 mobile). */
.preset-oasis .sf-oasis-featured__title {
  font-size: 24px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .preset-oasis .sf-oasis-featured__title {
    font-size: 32px;
  }
}

/* (B) Margin-bottom заголовочного блока: шаблон даёт Tailwind mb-7 md:mb-9
   (28px/36px). Живой CSS эталона: .section-header{margin-bottom:24px} —
   флэт, без брейкпоинт-варианта. Специфичность класса-хука (0,2,0) выше
   .mb-7/.md:mb-9 (0,1,0) — выигрывает по каскаду без !important. */
.preset-oasis .sf-oasis-featured__header {
  margin-bottom: 24px;
}

/* (C) Dual-CTA видимость по брейкпоинту — разметка (cta-top в заголовочной
   строке + cta-bottom отдельным блоком после грида) уже в
   _section_featured.html, комментарий там прямо называет этот файл
   ответственным за переключение видимости. Эталон: desktop/wide — только
   верхний CTA в строке с заголовком; mobile — верхний скрыт, снизу
   отдельный центрированный (mobile node #208, x=(390-86)/2 — по центру).
   margin-top у нижнего блока не измерен отдельно в спеке (есть только
   абсолютный x/y) — беру тот же флэт-ритм 24px, что и margin-bottom (B)
   выше, а не гадаю произвольное число. */
.preset-oasis .sf-oasis-featured__cta-bottom {
  display: none;
}
@media (max-width: 767px) {
  .preset-oasis .sf-oasis-featured__cta-top {
    display: none;
  }
  .preset-oasis .sf-oasis-featured__cta-bottom {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
}

/* (D) Паддинг самой секции (catalog + featured, хук sf-oasis-grid-section в
   обоих шаблонах). Источник — живой CSS FW (research/fw-extract/
   featured-collection/section.html, инлайновый <style> на обёртке секции):
   padding-top/bottom 36px mobile, 48px @640+.

   Правило УДАЛЕНО 2026-08-11. Оно было подпоркой под тогдашний базовый
   шаблон, который давал py-12 md:py-16 (48/64px на 768px) — мимо эталона и
   по числам, и по брейкпоинту. Подпорка повторяла верные числа, но тоже на
   768px, и её специфичность (0,2,0) била Tailwind-утилиты (0,1,0).

   Теперь базовый шаблон даёт py-9 sm:py-12 = ровно 36/48 на 640px для всех
   пресетов, поэтому хук стал не нужен и вреден: он молча возвращал бы Oasis
   и Creator на брейкпоинт 768, то есть отменял бы паритет именно в двух
   темах, которые и есть точные реплики FW. Класс sf-oasis-grid-section в
   разметке оставлен — он ничего не красит, но служит якорем, если Oasis
   когда-нибудь понадобится свой отступ. */

/* ── Сетка товаров / карточка (.sf-grid/.sf-tile, используется и в
   featured-гриде на home) ────────────────────────────────────────────────
   Фото 3:4, флэт-поле карточки, центр-текст — уже верны в presets.css. */

/* (A) Gap сетки: presets.css даёт 32px всегда — эталон 16px mobile
   (позиции карточек: (358-16)/2=171), 32px desktop/wide (col-grid--product-gap
   → gap:32px). .sf-grid — общий класс с /collections/all; правило здесь
   действует сайт-wide (все presets/oasis/*.css грузятся на каждой
   странице безусловно, см. _layout.html) — это ожидаемо и совпадает с тем,
   что нужно collections тоже (может задваиваться с collections.css, если
   тот агент добавит то же правило — безвредно, те же значения). */
.preset-oasis .sf-grid {
  gap: var(--card-gap, 16px);
}
@media (min-width: 768px) {
  .preset-oasis .sf-grid {
    gap: var(--card-gap, 32px);
  }
}

/* (B) Описание карточки: разметка (_group_card.html) — <div class="mt-3
   px-0.5"> (margin-top 12px, padding-x 2px). Эталон .tile__description —
   padding: 16px 0 8px mobile, 24px 0 12px @640px (не margin), padding-x 0
   (live CSS подтверждён). Раунд 3 фикс: было без брейкпоинта (десктопные
   24/12 на всех ширинах) — добавлен мобильный вариант, брейкпоинт 768 по
   конвенции файла (FW 640 → наш 768, см. (A)/(B) hero выше). */
.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;
  }
}

/* (C) Цена: разметка рисует её как <div class="... sf-muted"> — 14px/500/
   приглушённая. Эталон .tile__price — 16px/400, ПОЛНОСТЬЮ чёрная
   (var(--color-on-background), не muted), margin-top:8px от имени (live CSS
   подтверждён). Селектор — div.sf-muted, НЕ просто .sf-muted: счётчик "+N"
   у свотчей (_group_card.html) — тоже .sf-muted, но это <span>, не <div> —
   тег отличает его от цены (тот же приём, что в presets/creator/base.css
   для .sf-card div.sf-muted) — без этого уточнения правило случайно красило
   бы и "+N" в 16px/чёрный/margin-top:8px, ломая его вертикальное
   выравнивание внутри строки свотчей. */
.preset-oasis .sf-tile + div div.sf-muted {
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  margin-top: 8px;
}