/* presets/oasis/pdp.css — Oasis theme and FW pack shared PDP geometry (/products/<slug>).
   Источник измерений: my-agent/output/fw-shots/nikkykash-oasis/{wide,desktop,mobile}/pdp.spec.json
   (wide=3072 — главный источник ширин, mobile=390 сверка брейкпоинтов) + живой
   css/theme.scss.css (грепом по классам, не на глаз). Числа перепроверены агентом
   этого файла напрямую по JSON/CSS-исходнику (не только по docs/2026-07-11-oasis-parity/pdp.md).
   Хуки — в group.html/_related_strip.html, ветка preset_id in ('oasis','creator')
   (уже расширена другим агентом), else всегда прежняя разметка без изменений.
   Образец структуры — presets/creator/pdp.css (та же FW-разметка, другие цифры/токены). */

/* ── Потолок ширины контента (`.container.wrapper` эталона = 1400px, центр) ──
   wide: x=836 w=1400 (836*2+1400=3072 ✓); desktop 1440: x=20 w=1400
   (20*2+1400=1440 ✓); mobile: full width, без потолка (390<1400 — media query
   не нужен, max-width просто не срабатывает). .store-container для oasis
   full-bleed (presets.css:306, max-width:none) — это верно для home/cart/
   checkout, но НЕ для PDP-контента, где эталон ограничивает ширину. pdp.css
   грузится ПОСЛЕ presets.css (_layout.html) → при равной специфичности
   (0,2,0 у обоих) моё правило перебивает max-width:none без !important.
   Хуки sf-pdp-hero-pad/sf-pdp-related-pad — те же элементы, что несут
   store-container (group.html:36, _related_strip.html:9). */
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-hero-pad,
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-related-pad {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero-грид: галерея/инфо 7:5, gap 32px (@640+ у эталона, держим общий
   проектный 768 — см. брейкпоинт-заметку в pdp.md, визуально неотличимо на
   390/1440/3072). fr-юниты держат пропорцию при любой факт. ширине. */
@media (min-width: 768px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-pdp-hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: 32px;
  }
}

/* ── Галерея: колонка миниатюр 90px слева, миниатюра 3:4 (90×120 wide/desktop,
   92×111 mobile — тот же аспект, просто другая абсолютная ширина). Плюс
   правый паддинг колонки галереи 70px и зазор миниатюры→фото 8px (эталон:
   .product__gallery{padding-right:70px}, .gallery__thumbs{flex:0 0 98px} =
   90px миниатюра+8px зазор, .gallery__main{flex:1 0 auto}=остаток). Без них
   фото растягивается на всю оставшуюся ширину колонки: при 760.66 получаем
   760.66-90-12(Tailwind md:gap-3)=658.66 вместо целевых 760.66-70-90-8=
   592.66. Структурные селекторы (нет своего класса-хука на обёртке галереи
   и на flex-ряду thumbs+photo в group.html) — тот же паттерн, что уже
   использует .sf-pdp-info > .sf-pdp-buy-cta ниже по файлу; выше specificity
   Tailwind-класса md:gap-3, порядок каскада не важен. Только desktop-
   брейкпоинт (тот же 768px, где миниатюры становятся колонкой слева) — на
   mobile у эталона padding-right:0, текущая мобильная раскладка не трогается. */
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-thumb {
  aspect-ratio: var(--photo-ratio, 3 / 4);
}
@media (min-width: 768px) {
  :is(.preset-oasis, .sf-fw-pack) .sf-pdp-hero-grid > div:first-child {
    padding-right: 70px;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-pdp-hero-grid > div:first-child > div {
    gap: 8px;
  }
}


/* ── Заголовок: 40px на ВСЕХ брейкпоинтах (product-info__title — измерено
   одинаково на wide/desktop/mobile, media-query у эталона для этого класса
   нет вообще). presets.css:1135-1137 сейчас форсит 32px ниже 640px — устаревший
   оверрайд времён round 1 (до живого замера), контр против эталона.
   presets.css не трогаем — перебиваем тем же брейкпоинтом здесь (pdp.css
   грузится позже → тот же 640px max-width побеждает по порядку каскада). */
@media (max-width: 640px) {
  .preset-oasis .pdp-title {
    font-size: 40px;
  }
}

/* ── Описание товара: product-info__description (measured wide/desktop/
   mobile pdp.spec.json) — 16px/400, line-height 24px, margin-top 32px
   (30px mobile), color rgb(0,0,0) СПЛОШНОЙ, БЕЗ приглушения (opacity:1 в
   спеке, нет отдельного правила .product-info__description в theme.scss.css
   → просто дефолтный цвет текста темы). Ревью-фикс: group.html:161 отдаёт
   sf-pdp-description без sf-muted для oasis/creator (там же, где раньше был
   fallback-класс sf-muted для остальных пресетов) — но правила для oasis
   не было вовсе, класс молча падал на UA-дефолт. var(--text) здесь тот же
   #000000, что и в спеке — но пишем явно, а не полагаемся на наследование,
   чтобы не зависеть от того, где в DOM окажется класс завтра. */
.preset-oasis .sf-pdp-description {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: normal;
  color: var(--text);
  margin-top: 32px;
}
/* FW families supply their own type scale; these are shared page spacings. */
.sf-fw-pack .sf-pdp-description {
  margin-top: 32px;
}
@media (max-width: 767px) {
  .preset-oasis .sf-pdp-description {
    margin-top: 30px;
  }
  .sf-fw-pack .sf-pdp-description {
    margin-top: 30px;
  }
}

/* ── Доп-секции товара (S4, под описанием) — минимальный стиль, без FW-замера. */
:is(.preset-oasis, .sf-fw-pack) .pdp-sections {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.preset-oasis .pdp-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}
.sf-fw-pack .pdp-section-title {
  margin: 0 0 8px;
}
.preset-oasis .pdp-section-body {
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}

/* ── Цена: 16px/700 (measured: .product-info__price fontWeight:700 на обоих
   брейкпоинтах — не text-3xl/30px, как у нас сейчас), полный цвет текста,
   не приглушённый (снимаем sf-muted с варианта «от N ₽»). */
.preset-oasis .pdp-price {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
}
.preset-oasis .pdp-price.sf-muted {
  color: var(--text);
}
.sf-fw-pack .pdp-price {
  font-size: 20px;
  line-height: 1.3;
}
.sf-fw-pack .pdp-price.sf-muted {
  color: var(--text);
}

/* ── Кнопка «В корзину»: product-info__cta margin-top:40px (measured, не 28px
   как у нашего mt-7) + large-модификатор (56px высота, pad 0 20px). Хук
   sf-pdp-buy-cta висит и на <form>, и на 2 fallback-<p> (scheduled/closed
   drop-состояния) — margin-top применяется одинаково ко всем трём. */
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-buy-cta {
  margin-top: 40px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-cta-large {
  min-height: 56px;
  padding: 0 20px;
}

/* ── Инфо-колонка: CTA раньше аккордеонов (эталон: product-info__cta стоит
   НАД product-info__additional-info). DOM не трогаем — только визуальный
   порядок через flex-order на самой .sf-reveal-колонке (group.html:96). */
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-info {
  display: flex;
  flex-direction: column;
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-info > .sf-pdp-buy-cta,
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-info > #interest-form {
  order: 1;
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-info > details.sf-surface-flat {
  order: 2;
}

/* ── Количество: на PDP эталона степпер не показывается (только в корзине).
   hidden input quantity остаётся в форме (qty из Alpine, дефолт 1). */
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-qty-hidden {
  display: none;
}

/* ── Пикер цвета: свотчи (product-option--COLOR, measured wide). Ячейка 54×54
   (шаг между кружками получается из padding, не gap) — берём gap:8px как
   визуальный эквивалент на flex-wrap-разметке. Кликабельная область 46×46,
   радиус 14px, рамка 3px прозрачная. Кружок цвета 40×40, у активного —
   ужимается до 30×30 (освобождает место под кольцо 3px по --text). */
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-swatches {
  gap: 8px;
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-swatch {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  transition: border-color var(--sf-dur-fast) var(--sf-ease);
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-swatch.is-active {
  border-color: var(--text);
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-swatch__color {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Белый/светлый бланк на белом фоне Oasis иначе сливается с подложкой. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent);
  transition: width var(--sf-dur-fast) var(--sf-ease),
              height var(--sf-dur-fast) var(--sf-ease);
}
:is(.preset-oasis, .sf-fw-pack) .sf-pdp-swatch.is-active .sf-pdp-swatch__color {
  width: 30px;
  height: 30px;
}

/* ── Опции — размер: кнопка 56×56 (radio-button__label), рамка 2px 30%-
   непрозрачности (measured: rgba(0,0,0,0.3) — НЕ 14%, дефолт токена ниже).
   border-color на самой кнопке ставится инлайн Alpine :style через
   var(--sf-hairline-strong) — переопределяем токен точечно только для
   size-btn (не трогаем дефолт 14% storefront.input.css, он используется
   и другими элементами интерфейса за пределами этой кнопки). */
.preset-oasis .sf-pdp-size-btn {
  min-width: 56px;
  min-height: 56px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 700;
  --sf-hairline-strong: color-mix(in srgb, var(--text) 30%, transparent);
}
.sf-fw-pack .sf-pdp-size-btn {
  min-width: 56px;
  min-height: 56px;
}

/* ── Аккордеоны «Материалы/Доставка/Возврат»: presets.css уже даёт плоский
   вид (фон/рамка/паддинг-x) через глобальное `.preset-oasis details.sf-
   surface-flat` — но border-bottom и padding-y там устарели против эталона:
   живой CSS (`.accordion+.accordion{border-top:1px solid rgba(0,0,0,.1)}`,
   смежный-сиблинг-комбинатор!) даёт линию МЕЖДУ блоками (верх — у всех,
   КРОМЕ первого), а не снизу у каждого. Проверено и по computed-style: 1-й
   accordion в спеке borderTopWidth:0px, 2-й и 3-й — 1px. presets.css сейчас
   вешает border-bottom на все три (включая последний, у эталона трейлинг-
   линии нет) — контр против эталона, presets.css не трогаем (правило
   ниже перебивает его на PDP через одинаковую специфичность + порядок
   подключения). padding-header у эталона — 34px сверху/снизу (не 16px из
   Tailwind p-4, зафиксированного presets.css только по x). */
:is(.preset-oasis, .sf-fw-pack) .sf-reveal details.sf-surface-flat {
  padding-top: 34px;
  padding-bottom: 34px;
  border-bottom: none;
}
:is(.preset-oasis, .sf-fw-pack) .sf-reveal details.sf-surface-flat + details.sf-surface-flat {
  border-top: 1px solid var(--sf-hairline);
}
:is(.preset-oasis, .sf-fw-pack) .sf-reveal details.sf-surface-flat > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}
:is(.preset-oasis, .sf-fw-pack) .sf-reveal details.sf-surface-flat > summary::-webkit-details-marker {
  display: none;
}
:is(.preset-oasis, .sf-fw-pack) .sf-reveal details.sf-surface-flat > summary::after {
  /* measured: .accordion__header:after font-size:0.875rem = 14px */
  content: "+";
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
:is(.preset-oasis, .sf-fw-pack) .sf-reveal details.sf-surface-flat[open] > summary::after {
  content: "\2212";
}

/* ── Related — «Ещё принты…»: заголовок 32px→24px mobile (section-header__
   heading, measured), letter-spacing normal (сбрасывает Tailwind tracking-
   tight на h2 в _related_strip.html). font-family/weight/transform уже
   верные через generic `[class*="preset-"] h2` (presets.css:197-204),
   здесь только кегль. Grid gap — 32px база (уже даёт .sf-grid глобально),
   на mobile у ЭТОЙ секции эталон даёт 16px (не 32, в отличие от
   /collections/all — другой раздел FW, другое брейкпоинт-поведение). */
.preset-oasis .sf-pdp-related-heading {
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: normal;
}
@media (max-width: 767px) {
  .preset-oasis .sf-pdp-related-heading {
    font-size: 24px;
    line-height: 28.8px;
  }
  :is(.preset-oasis, .sf-fw-pack) .sf-pdp-related-grid {
    gap: 16px;
  }
}