/* presets/oasis/collections.css — Oasis theme and FW pack shared collection geometry.
   Источники чисел: docs/2026-07-11-oasis-parity/collections.md,
   my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/collections.spec.json
   (wide=3072 — единственный вьюпорт, на котором виден потолок ширины
   контейнера; на 1440 потолок 1400px неотличим от full-width, см. doc)
   + живой css/theme.scss.css эталона. Брейкпоинт 768 везде (не FW-шные
   640/1024) — обоснование в doc, раздел «Брейкпоинт: 768, не 640/1024»:
   ни один из наших трёх вьюпортов съёмки (390/1440/3072) не лежит между
   640 и 1024, выбор точки переключения не виден на скринах, держим тот
   же брейкпоинт, что уже использует .store-container и Creator. */

/* Потолок ширины контента коллекции: эталон капает .container.wrapper на
   max-width:1400px + margin:auto (doc «Главная находка»). У нас на этом
   же <section> уже висит класс .store-container, а он в presets.css даёт
   .preset-oasis .store-container{max-width:none} (раунд 1, писался для
   full-bleed главной — там это верно, здесь нет). Обе пары селекторов —
   .preset-oasis .store-container и .preset-oasis .sf-oasis-collection —
   это компаунды из 2 классов, равная специфичность (0,2,0); этот файл
   подключён в _layout.html ПОСЛЕ presets.css, поэтому по порядку каскада
   наш max-width:1400 побеждает max-width:none. Явный оверрайд правила
   presets.css, а не правка самого presets.css (там оно верно для других
   страниц) — тот же приём, что уже использует Creator (presets.css:656-664).
   Паддинги 16/32 не трогаем — их уже даёт .store-container, box-sizing
   border-box (Tailwind preflight) держит их ВНУТРИ 1400, что подтверждено
   в doc арифметикой 836×2+1400=3072 и шириной h1=1336=1400-32×2. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-collection {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Вертикальный ритм секции: FW `collection--padding` = 27px (мобайл) /
   36px (десктоп, оригинальный брейкпоинт 640 — доверяем doc, что на
   390/1440/3072 разница с 768 не видна). Перебивает Tailwind `py-6`
   (24px статично) из разметки — компаунд-селектор (0,2,0) сильнее
   класса-утилиты (0,1,0) независимо от порядка файлов. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-collection {
  padding-top: 27px;
  padding-bottom: 27px;
}
@media (min-width: 768px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-oasis-collection {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* Заголовок «Все товары»: 32px мобайл → 40px десктоп (не 28→40, как
   унаследовано от общего .sf-page-title в presets.css:356-363 — то
   значение верно для cart/checkout/thanks, но не для коллекции, см. doc
   §1). Точечный оверрайд ТОЛЬКО внутри .sf-oasis-collection — общий
   .sf-page-title не трогаем, он держит другие страницы. Заодно отступ до
   сетки: 24px мобайл → 48px десктоп (эталон col-grid margin-top),
   перебивает статичный Tailwind `mb-6` на h1. */
.preset-oasis .sf-oasis-collection .sf-page-title {
  font-size: 32px;
  margin-bottom: 24px;
}
.sf-fw-pack .sf-oasis-collection .sf-page-title {
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .preset-oasis .sf-oasis-collection .sf-page-title {
    font-size: 40px;
    margin-bottom: 48px;
  }
  .sf-fw-pack .sf-oasis-collection .sf-page-title {
    margin-bottom: 48px;
  }
}

/* Сетка карточек: колонки уже верны (Tailwind grid-cols-2/md:grid-cols-4
   в разметке — резиновые доли, тот же механизм, что и у FW-грида col-grid,
   доп. правки не нужны, см. doc §3). Только gap: 16px мобайл → 32px
   десктоп — общий .sf-grid (presets.css:349-351) держит 32px всегда,
   сужаем на мобильном отдельным крючком-классом на том же узле (доп.
   класс из collection.html), тройная цепочка (0,3,0) сильнее двойной
   (0,2,0) вне зависимости от порядка каскада. */
.preset-oasis .sf-grid.sf-oasis-collection-grid {
  gap: var(--card-gap, 16px);
}
@media (min-width: 768px) {
  .preset-oasis .sf-grid.sf-oasis-collection-grid {
    gap: var(--card-gap, 32px);
  }
}

/* Название товара в карточке: presets.css:340-342 уже чинит размер
   (16px), здесь — остальные три параметра, которые Tailwind
   (font-medium/leading-snug/tracking-[-0.01em]) держит неверными
   (эталон: 400/1.2/normal, doc §4). Скоуп внутри .sf-oasis-collection —
   карточка на главной (_group_card.html общий для home+collections)
   получает свою типографику из presets/oasis/home.css, не отсюда. */
.preset-oasis .sf-oasis-collection .sf-tile + div h3 {
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
}

/* Цена в карточке: эталон 16px/400/чёрный (var(--text)), margin-top:8px
   (doc §4) — у нас Tailwind даёт 14px/500/`sf-muted`(серый)/mt-1(4px).
   `> .sf-muted` (прямой потомок), а не просто `.sf-muted` — у соседнего
   `.sf-swatches` внутри тоже есть узел с классом sf-muted (бейдж «+N»,
   ниже по дереву, не прямой потомок) — без `>` это правило задело бы и
   его. */
.preset-oasis .sf-oasis-collection .sf-tile + div > .sf-muted {
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  margin-top: 8px;
}

/* Цветовые свотчи: упрощённая разметка (декоративные span, не
   radio+label эталона) — воспроизводим только размер кружка и шаг
   между ними по двум брейкпоинтам (doc §5, «прагматичный» путь без
   переписывания на radio/label; hover-growth эталона — вне зоны).
   `span.rounded-full` — только кружки-цвета, у бейджа «+N» этого класса
   нет (см. ниже). */
.preset-oasis .sf-oasis-collection .sf-swatches {
  gap: 8px; /* ~шаг эталона (20px) минус диаметр кружка (12px) на мобайле */
}
.preset-oasis .sf-oasis-collection .sf-swatches span.rounded-full {
  width: 12px;
  height: 12px;
}
@media (min-width: 768px) {
  .preset-oasis .sf-oasis-collection .sf-swatches {
    gap: 10px; /* шаг эталона (26px) минус диаметр кружка (16px) на десктопе */
  }
  .preset-oasis .sf-oasis-collection .sf-swatches span.rounded-full {
    width: 16px;
    height: 16px;
  }
}

/* Бейдж «+N» (доп. цвета сверх лимита показа): эталон 12px мобайл →
   16px десктоп, цвет полный чёрный (не приглушённый sf-muted-серый),
   doc §5. `.sf-swatches .sf-muted` не пересекается с ценой выше — цена
   висит на другом узле (`.sf-tile + div > .sf-muted`, прямой потомок
   инфо-блока), бейдж — внутри `.sf-swatches`. */
.preset-oasis .sf-oasis-collection .sf-swatches .sf-muted {
  color: var(--text);
  font-size: 12px;
}
@media (min-width: 768px) {
  .preset-oasis .sf-oasis-collection .sf-swatches .sf-muted {
    font-size: 16px;
  }
}

/* Пустая коллекция: у эталона nikkykash нет пустых коллекций (не снято),
   тот же нейтральный подход, что у Creator (presets/creator/collections.css) —
   центрированный текст с отступом на общих Oasis-токенах. */
:is(.preset-oasis, .sf-fw-pack) .sf-oasis-collection-empty {
  display: block;
  text-align: center;
  padding: 48px 0;
}