/* страница pdp, тема creator
   Источник измерений: nikkykash-shop.fourthwall.com/products/... —
   my-agent/output/fw-shots/nikkykash/{desktop,mobile}/pdp.{metrics.md,spec.json}.
   Фото/тайтл/цена/аккордеон-плоскость уже верны в presets.css (foundation,
   раунд 2) — здесь НЕ дублируем, только то, что этот проход уточняет:
   галерея-миниатюры, свотчи стиля, размер-кнопки, CTA-large, доставка-бейдж
   (нейтрализация), аккордеон +/- маркер, related-заголовок. Хуки — в
   group.html/_related_strip.html, ветка preset_id == 'creator', else всегда
   byte-for-byte исходная разметка. */

/* ── Hero-грид: асимметричный сплит галерея/инфо ─────────────────────────
   FW nikkykash desktop: col-grid--7-5@sm rect=1376x1104 cols=784px 560px
   gap=32px — соотношение 7:5, НЕ 50/50. У нас `md:grid-cols-2 gap-8
   lg:gap-12` даёт равные треки и gap 48px на lg+ (1024px+). fr-юниты держат
   ratio 7:5 при любой фактической ширине контейнера (gap вычитается из
   доступного пространства ДО деления по fr) — не хардкодим px. Специфичность
   .preset-creator .sf-pdp-hero-grid (0,2,0) сама перебивает Tailwind
   .md\:grid-cols-2/.gap-8/.lg\:gap-12 (0,1,0 каждый) без !important. */
@media (min-width: 768px) {
  .preset-creator .sf-pdp-hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: 32px;
  }
}

/* ── Hero/related секции: асимметричный вертикальный паддинг ─────────────
   FW nikkykash: product--padding (hero) pt=24/pb=48 mobile, pt=32/pb=64
   desktop (АСИММЕТРИЧНО); product-recommendations--padding (related)
   pt=36/pb=36 mobile, pt=48/pb=48 desktop (симметрично, но другое число,
   чем generic py-12/md:py-16). Хуки — group.html:36 (внешний div, тот же
   store-container что держит галерею+инфо) и _related_strip.html:9
   (<section>). Специфичность .preset-creator .sf-pdp-*-pad (0,2,0)
   перебивает Tailwind .py-* и .md\:py-* (0,1,0) без !important — тот же
   приём, что и sf-pdp-hero-grid выше. */
/* Раунд 4 фикс: на мобильном экране .sf-pdp-hero-pad воспроизводимо
   проигрывала py-10 (40/40 вместо 24/48), несмотря на верную специфичность
   правила выше (0,2,0 > 0,1,0 — по спеке селекторов обязано побеждать).
   .sf-pdp-related-pad рядом с тем же паттерном специфичности на этой же
   мобильной странице применяется штатно — по коду расхождения не нашлось,
   но факт брейкпоинта воспроизводится на скринах. !important только на
   hero-pad (единственный подтверждённый сломанный узел) — ponytail: точечный
   костыль без переписывания остальных *-pad под тем же риском, апгрейд
   до чистой специфичности когда найдётся точный источник конфликта. */
.preset-creator .sf-pdp-hero-pad {
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}
.preset-creator .sf-pdp-related-pad {
  padding-top: 36px;
  padding-bottom: 36px;
}
@media (min-width: 768px) {
  .preset-creator .sf-pdp-hero-pad {
    padding-top: 32px !important;
    padding-bottom: 64px !important;
  }
  .preset-creator .sf-pdp-related-pad {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ── Галерея: колонка миниатюр ────────────────────────────────────────────
   FW: миниатюра 90×120 (портрет 3:4, та же пропорция что и .pdp-photo),
   колонка шириной 90px на десктопе. У нас миниатюра была квадратной
   (Tailwind aspect-square) — .sf-pdp-thumb её заменяет только для creator
   (хук в group.html). Мобильный ряд (grid-cols-5) той же пропорции не
   переопределяем по ширине — только аспект, ширина колонки там задаётся
   Tailwind-гридом самой разметки. */
.preset-creator .sf-pdp-thumb {
  aspect-ratio: var(--photo-ratio, 3 / 4);
}
@media (min-width: 768px) {
  .preset-creator .sf-pdp-thumbs-col {
    width: 90px;
  }
}

/* ── Галерея mobile: скрыть overlay-стрелки ───────────────────────────────
   FW mobile-галерея — только свайп + тап по миниатюрам, никаких overlay-
   кнопок поверх фото. group.html:79,87 держит carousel-prev/next видимыми
   на mobile через max-md:!opacity-100 (нужно для др. пресетов) — здесь
   гасим через display:none, свайп (_handleSwipe) и миниатюры не трогаем,
   разметку не меняем, чистый CSS-хук на существующие классы. */
@media (max-width: 767px) {
  .preset-creator .carousel-prev,
  .preset-creator .carousel-next {
    display: none;
  }
}

/* ── Цена и описание: типографика по спеке (18px, не Tailwind text-base/
   text-3xl+tracking-tight). .pdp-price уже существует (presets.css:1022,
   16px/400) — та же специфичность .preset-creator .pdp-price (0,2,0), но
   pdp.css грузится ПОСЛЕ presets.css (_layout.html) → каскад решает без
   !important, перебиваем только font-size и letter-spacing (сбрасывает
   Tailwind tracking-tight на span в group.html). Описание — новый хук-класс
   sf-pdp-description (group.html:161), т.к. голого текстового класса для
   переопределения раньше не было. */
.preset-creator .pdp-price {
  font-size: 18px;
  letter-spacing: normal;
}
/* Цена «от N ₽» (пока SKU не выбран) — полным цветом текста, как у эталона:
   в разметке на ней висит sf-muted (нужный другим пресетам). */
.preset-creator .pdp-price.sf-muted {
  color: var(--text);
}
.preset-creator .sf-pdp-description {
  font-size: 18px;
  line-height: 32.4px;
}

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

/* ── Цвет/стиль-пикер (тайлы с мокапом — наша фича шире, чем плоские FW-
   свотчи, сохраняем: rule 8 «фичи которых нет в эталоне — сохранить»).
   FW: color-swatch — единственный скруглённый элемент в остальном остром
   интерфейсе (радиус ~14px на 46px боксе) — эхо этого акцента на тайле.
   Бейдж-галочка — наша избыточная индикация (рамка/тень уже сигналят
   выбор через :style-биндинг в Alpine, спека даёт только "рамка светлая"
   без бейджа) — гасим, aria-hidden="true" уже decorative-only, без потери
   функциональности. */
.preset-creator .sf-pdp-style-tile {
  border-radius: 10px;
  overflow: hidden;
}
.preset-creator .sf-pdp-style-badge {
  display: none;
}

/* ── Размер-кнопки: мин. ширина/высота по спеке (radio-button__label
   rect≈62-67×56). border-color НЕ трогаем — Alpine :style уже ставит его
   инлайном (border-color/background/color), инлайн всегда бьёт класс. */
.preset-creator .sf-pdp-size-btn {
  min-width: 56px;
  min-height: 56px;
  padding: 0 24px;
  /* Раунд 2 фикс: было 14px/500 (Tailwind text-sm font-medium, ничем не
     перебито) — nikkykash radio-button__label даёт 16px/700 Inter. */
  font-size: 16px;
  font-weight: 700;
  /* border-color сам НЕ трогаем — Alpine :style ставит его инлайном как
     var(--sf-hairline-strong), инлайн бьёт любой класс. Но var() резолвится
     по каскаду ЭТОГО кастом-property на элементе — переопределяем токен
     точечно только для size-btn (creator/base.css держит 32% для остальных
     хэйрлайнов темы осознанно, здесь эталон даёт еле видимую линию 14%,
     как база storefront.input.css без бустa creator). */
  --sf-hairline-strong: color-mix(in srgb, var(--text) 14%, transparent);
}

/* ── CTA «В корзину»: large-модификатор (FW button--large: 56px высота,
   pad 0/20px) — только на основную PDP-кнопку, sticky-бар/interest-форма
   остаются на обычной 48px геометрии .btn-primary. */
.preset-creator .sf-pdp-cta-large {
  min-height: 56px;
  padding: 0 20px;
}

/* ── Инфо-колонка: CTA ВЫШЕ аккордеонов ───────────────────────────────────
   FW: product-info__cta (кнопка покупки) стоит НАД product-info__additional-
   info (аккордеоны More details/Size & Fit/Quality Guarantee). У нас в DOM
   аккордеоны идут раньше формы — сохраняем DOM/инварианты (формы/name=/
   Alpine без изменений), меняем только ВИЗУАЛЬНЫЙ порядок через flex-order
   на info-колонке. Точечные селекторы прямых детей — классы не добавляли
   там, где тег/id и так уникален среди прямых детей .sf-pdp-info:
   <form> (единственная форма в колонке), #interest-form (id уникален).
   .sf-pdp-buy-cta — явный хук на <form> и на 2 fallback-<p> (drop
   scheduled/closed), т.к. голый `<p>` там не уникален (есть ещё <p> с
   описанием товара выше по колонке, его трогать нельзя). */
.preset-creator .sf-pdp-info {
  display: flex;
  flex-direction: column;
}
.preset-creator .sf-pdp-info > .sf-pdp-buy-cta,
.preset-creator .sf-pdp-info > #interest-form {
  order: 1;
}
.preset-creator .sf-pdp-info > details.sf-surface-flat {
  order: 2;
}

/* ── Кол-во: в creator количество не выбирается на PDP (правится в
   корзине) — хук скрывает только визуальный степпер, hidden input
   quantity (Alpine qty, дефолт 1) продолжает уходить с формой. */
.preset-creator .sf-pdp-qty-hidden {
  display: none;
}

/* ── Аккордеоны «Материалы/Доставка/Возврат»: чистый CSS, разметку не
   трогаем (details.sf-surface-flat уникален для PDP в шаблонах витрины).
   Паддинг/верхняя линия/кегль по спеке; +/- вместо нативного треугольника
   (::-webkit-details-marker + list-style гасят нативный маркер, ::after
   рисует свой, [open] переключает знак). Плавную анимацию раскрытия
   сознательно НЕ делаем: единственный надёжный кросс-браузерный способ
   анимировать native <details> — форсить content на display:block поверх
   UA-скрытия закрытого состояния, а это ломает то, что закрытый контент
   реально исключён из a11y-дерева (WCAG-регресс ради transition). */
.preset-creator .sf-reveal details.sf-surface-flat {
  padding-top: 32px;
  padding-bottom: 32px;
}
.preset-creator .sf-reveal details.sf-surface-flat:first-of-type {
  border-top: 1px solid var(--sf-hairline);
}
.preset-creator .sf-reveal details.sf-surface-flat > summary {
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.preset-creator .sf-reveal details.sf-surface-flat > summary::-webkit-details-marker {
  display: none;
}
.preset-creator .sf-reveal details.sf-surface-flat > summary::after {
  content: "+";
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.preset-creator .sf-reveal details.sf-surface-flat[open] > summary::after {
  content: "\2212";
}

/* ── Related strip («Ещё принты…») ────────────────────────────────────────
   Заголовок: [class*="preset-"] h2 (presets.css) уже даёт Archivo/uppercase/
   900 — здесь только кегль (спека: 32px оба брейкпоинта, без адаптива).
   Грид: sf-grid уже 4/2-колоночный и 32px-gap (presets.css) — на мобиле
   FW-спека для ЭТОЙ секции даёт 16px (не 32, в отличие от /collections/all,
   который remains 32 на всех размерах — разные секции, разная спека). */
.preset-creator .sf-pdp-related-heading {
  font-size: 32px;
  /* Раунд 2 фикс: -0.8px тянулся из Tailwind tracking-tight на h2
     (_related_strip.html), ничем не сброшен. nikkykash section-header__heading
     даёт letterSp:normal на 32px/900 uppercase — тот же сброс, что уже
     сделан на .pdp-title (presets.css:1008). */
  letter-spacing: normal;
  /* Раунд 4 фикс: line-height оставался Tailwind text-xl=28px (унаследован
     с h2, отдельно не переопределялся) — меньше самого font-size (ratio
     0.875), сжимал leading для кириллических нисходящих («Щ»/«Ц»).
     nikkykash даёт 38.4px = ratio 1.2, как у .pdp-title (presets.css:1014). */
  line-height: 38.4px;
}
@media (max-width: 767px) {
  .preset-creator .sf-pdp-related-grid {
    gap: 16px;
  }
}

/* ── Пикер цвета: свотчи (эталон pdp.spec wide, product-option--COLOR) ───────
   Ячейка 54×54 (шаг между свотчами), кликабельная область 46×46 со скруглением
   14px, внутри кружок 40×40. Активный — кольцо border 3px по --text, и кружок
   ужимается до 30×30, освобождая место под кольцо (у эталона ровно так: span
   30px у выбранного против 40px у остальных). */
.preset-creator .sf-pdp-swatches {
  gap: 8px;
}
.preset-creator .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);
}
.preset-creator .sf-pdp-swatch.is-active {
  border-color: var(--text);
}
.preset-creator .sf-pdp-swatch__color {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Чёрный бланк на чёрном фоне темы иначе сливается с подложкой. */
  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);
}
.preset-creator .sf-pdp-swatch.is-active .sf-pdp-swatch__color {
  width: 30px;
  height: 30px;
}