/* Creator — общий язык темы (foundation-агент). Источник измерений:
   nikkykash-shop.fourthwall.com — my-agent/output/fw-shots/nikkykash/
   {desktop,mobile}/home.metrics.md + fonts.json. Подключается ПОСЛЕ presets.css
   (_layout.html) — при равной специфичности выигрывает здесь.

   Геометрия hero/PDP/cart/checkout и токены/кнопки (.btn-primary/.btn-outline,
   --bg/--text/--accent/--cta-*) уже верны в presets.css (сверено с этими же
   метриками) — здесь НЕ дублируем, только то, что этот проход уточняет/
   добавляет: hairline-токен, карточка, header (иконка корзины + мобильное
   меню), footer-типографика. */

/* ── Hairline-токен: доуточнение под .preset-creator ─────────────────────────
   --sf-hairline/-strong объявлены ОДИН РАЗ на :root (storefront.input.css) и
   резолвят var(--text) там же (та же ловушка, что описана в presets.css для
   --sf-err/-ok/-warn) — на body.preset-creator наследуется уже посчитанное
   значение от :root-дефолтного --text (#171717), а не от бежевого --text
   темы. Переобъявляем здесь заново той же формулой (color-mix из --text), но
   с реальным процентом по метрикам: бордеры эталона — rgba(216,215,209,0.2). */
.preset-creator {
  --sf-hairline: color-mix(in srgb, var(--text) 20%, transparent);
  --sf-hairline-strong: color-mix(in srgb, var(--text) 32%, transparent);
}

/* ── Кнопки: доводка transition ───────────────────────────────────────────────
   Геометрия/цвета .btn-primary/.btn-outline уже верны (presets.css). Базовый
   класс transition’ит transform/box-shadow/filter (storefront.input.css) —
   Creator гасит их на hover и меняет только opacity, которая в этот список
   не входит → без transition менялась бы мгновенно. Метрика: "all 0.2s ease". */
.preset-creator .btn-primary,
.preset-creator .btn-outline {
  transition: all 0.2s ease;
}

/* ── Карточка товара (_group_card.html) — три уточнения по метрикам tile__* ──
   Фото/поле/сетка/имя(16px) уже верны в presets.css, менять не нужно. */

/* Цена: tile__price — Inter 14px/400, ПОЛНЫЙ цвет текста (не muted). Разметка
   рисует её как <div class="... sf-muted"> — тег div отличает её от span-
   счётчика «+N» (тоже .sf-muted, трогать не надо) и от .sf-muted вне карточек
   (футер/навигация), которых это правило не касается. */
.preset-creator .sf-card div.sf-muted {
  color: var(--text);
  font-weight: 400;
  /* Отступ от названия: было 4px (.mt-1 в шаблоне), эталон ~10px (раунд 2 фикс). */
  margin-top: 10px;
  /* text-sm (шаблон) даёт line-height 20px — эталон 24.5px (14px × 1.75,
     тот же body-ratio, что и остальная типографика темы) — раунд 4 фикс,
     зазор цена→свотчи. */
  line-height: 24.5px;
}

/* Свотчи: видимый кружок color-swatch__color — 16×16px (rect=16x16 в
   nikkykash spec.json). Раунд 4 мерил соседний .color-swatch__input
   (rect=13x13) — невидимый интерактивный слой, не сам кружок; раунд 2 фикс
   по свежей сверке с эталоном. Селектор сужен до .rounded-full — внутри
   .sf-swatches есть ещё span-счётчик «+N» (без этого класса), его трогать
   не нужно. */
.preset-creator .sf-swatches span.rounded-full {
  width: 16px;
  height: 16px;
}
/* Шаг между дотами у эталона: 26px между центрами, соседние 26×26 хит-área
   идут строго впритык (без CSS-gap на уровне хит-área). У нас нет отдельного
   хит-área вокруг кружка — тот же 26px шаг простым flex-gap: 16px дот +
   10px gap = 26px (раунд 2 фикс, было 13px+13px). */
.preset-creator .sf-swatches {
  gap: 10px;
}
/* Кольцо у свотча активного (показанного по умолчанию) цвета —
   data-swatch-active из _group_card.html (sw.image_url совпал с фото
   карточки). outline, не box-shadow: у кружка уже инлайновый box-shadow
   (контраст-обводка на тёмном фоне) — outline независимое свойство, не
   спорит с ним за специфичность (раунд 2 фикс). */
.preset-creator .sf-swatches span[data-swatch-active] {
  outline: 1.5px solid var(--text);
  outline-offset: 2px;
}

/* Hover фото: метрика "opacity 0.4s ease" ×10 (FW кросс-фейдит перед/спину —
   у нас пока один кадр на карточке, front_mockup_url без свапа, см. _group_
   card.html «под-этап A»). Адаптация: лёгкое затемнение самого фото на hover
   вместо lift+scale остальных пресетов (тот scale — base .sf-card:hover img,
   гасим explicitly). */
.preset-creator .sf-tile img {
  transition: opacity 0.4s ease;
}
.preset-creator .sf-card:hover img {
  transform: none;
  opacity: 0.85;
}

/* ── Header: иконка корзины ────────────────────────────────────────────────
   FW: bag-иконка 18×18, без текстовой подписи "Cart" — только aria-label.
   Хуки — _header.html, ветка preset_id in ('oasis','creator') (разметка
   общая с Oasis), здесь узкий override только для Creator. */
.preset-creator .sf-header-cart-icon {
  width: 18px;
  height: 18px;
}
.preset-creator .sf-header-cart-label {
  display: none;
}

/* ── Header: мобильное меню (бургер → узкий drawer слева) ─────────────────────
   Раунд 4 фикс (fw-teardown pixel-parity): эталон — 260px drawer поверх
   полупрозрачного скрима, не полноэкранный оверлей (был на раунде 1-3,
   намеренное упрощение — заменено по итогам ревью на точную копию). Разметка
   — creator-only блок в _header.html, локальный x-data (не глобальный
   store). Скрим (.sf-creator-menu-scrim) и панель (.sf-creator-menu-panel) —
   отдельные x-show-сиблинги, тот же паттерн, что backdrop/aside в
   _cart_drawer.html (там же проверено, что translate-x-full/-0 есть в
   собранном storefront.css — здесь transform свой, CSS, не Tailwind-класс,
   чтобы не зависеть от отсутствующего в бандле -translate-x-full). Бургер
   виден только <768px, на десктопе — обычная nav-строка не трогается. */
@media (max-width: 767px) {
  .preset-creator .sf-oasis-header__nav {
    display: none;
  }
  .preset-creator .sf-oasis-header__logo {
    grid-column: 2;
    justify-self: center;
  }
}
.preset-creator .sf-creator-burger-wrap {
  grid-column: 1;
  justify-self: start;
}
/* Explicit safety net: md:hidden в разметке (_header.html) требует Tailwind-
   класса, которого сейчас нет в собранном storefront.css (бандл собирается
   вручную, без пересборки — см. CLAUDE.md). Без этого правила бургер виден
   и на десктопе, а оба узла с grid-column:1 (бургер+лого) авто-переносятся
   в 2 строки. Дублируем явным CSS, не полагаясь на Tailwind-бандл. */
@media (min-width: 768px) {
  .preset-creator .sf-creator-burger-wrap {
    display: none;
  }
}
.preset-creator .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-creator .sf-creator-burger:hover {
  opacity: 0.7;
}
/* Скрим: полноэкранный, полупрозрачный (var(--bg) 85% — тот же тёмный тон
   темы, страница слегка видна сквозь него), клик закрывает меню. */
.preset-creator .sf-creator-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
/* Панель: 260px, прижата слева, едет transform'ом (не Tailwind-utility —
   see комментарий выше про -translate-x-full). */
.preset-creator .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;
  /* 90px (было 64px) top — раунд 4 фикс: замер эталона держит ~49px зазор
     от низа close-иконки до первой ссылки, у нас было заметно теснее. */
  padding: 90px 20px 24px;
  overflow-y: auto;
}
.preset-creator .sf-creator-menu-panel--transition {
  transition: transform 220ms ease-out;
}
.preset-creator .sf-creator-menu-panel--closed {
  transform: translateX(-100%);
}
.preset-creator .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-creator .sf-creator-menu-close:hover {
  opacity: 0.7;
}
/* Ссылки — левый край, Inter 16/400 (эталон: footer__menu-link-подобный
   некрупный список, НЕ крупный display-заголовок центрированного оверлея). */
.preset-creator .sf-creator-menu-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.preset-creator .sf-creator-menu-links a {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  transition: opacity 0.2s ease;
}
.preset-creator .sf-creator-menu-links a:hover {
  opacity: 0.7;
}

/* ── Footer ────────────────────────────────────────────────────────────────
   Раскладка (центр/reorder/паддинги) уже верна в presets.css. Здесь —
   типографика по метрикам footer__menu-link (16px, ПОЛНЫЙ цвет — не muted) и
   footer__copy (12px, rgba(216,215,209,.5) — тот же оттенок через color-mix).
   Специфичность `nav a.sf-muted` (3 типа) выше общего `footer .sf-muted`
   (1 тип) — ссылки получают полный цвет, копирайт/юр.строка остаются
   приглушёнными вне зависимости от порядка правил. */
.preset-creator footer .sf-muted {
  color: color-mix(in srgb, var(--text) 50%, transparent);
  font-size: 12px;
}
.preset-creator footer nav a.sf-muted {
  color: var(--text);
  font-size: 16px;
}
.preset-creator footer nav {
  column-gap: 28px;
  row-gap: 12px;
}
@media (max-width: 767px) {
  /* footer__list--menu (nikkykash mobile): flex-column, по одной ссылке в
     строке, gap 20px (раунд 4 фикс, было flex-wrap в 2-3 колонки). */
  .preset-creator footer .store-container > div:first-child > nav {
    flex-direction: column;
    gap: 20px;
  }
}