/* ==========================================================================
   Магазин одежды. Черновик example7.
   Значения только из tokens.css. Хардкод hex здесь запрещён,
   кроме нейтральных rgba поверх изображений.
   ========================================================================== */

/* --- База ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

/* Русский текст. Длинные слова не должны рвать сетку. */
h1, h2, h3, p, a, button, li, figcaption { overflow-wrap: break-word; }

h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -6);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

/* --- Общие типо-роли ----------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin-top: var(--space-3);
}

.btn {
  display: inline-block;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn:hover,
.btn:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Знак рубля.
   Ни в Oswald, ни в Onest, ни в Martian Mono глифа U+20BD нет, проверено
   по таблице cmap загруженных файлов. Если написать ₽ текстом, браузер
   подставит символ из системного шрифта и в цене окажется чужая буква.
   Поэтому берём Р из нашей же гарнитуры и добавляем перекладину.
   Размеры в em, поэтому знак живёт при любом кегле. */
.rub {
  position: relative;
  display: inline-block;
}
.rub::after {
  content: '';
  position: absolute;
  left: 8%;
  width: 60%;
  bottom: 0.3em;   /* выше базовой линии, иначе читается как подчёркивание */
  height: 0.075em;
  background: currentColor;
}

/* Уголковые скобки на карточках убраны по просьбе заказчика 08.08.2026.
   Он попросил классический вид без рамок, как на raremodmafia.
   Если решим вернуть, это были две противоположные скобки
   через ::before и ::after на span.crop внутри медиа-блока. */

/* --- Заставка ------------------------------------------------------------ */

.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: var(--bg-deep);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.intro[hidden] { display: none; }
.intro.is-out { opacity: 0; pointer-events: none; }

/* Название длинное, поэтому кегль считается от ширины экрана,
   иначе на телефоне слово вылезает за край. */
.intro__mark {
  display: flex;
  gap: 0.04em;
  max-width: 100%;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8.4vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Задержка через --i, а не отдельным правилом на каждую букву.
   Так длина названия перестаёт влиять на стили. */
.intro__mark span {
  opacity: 0;
  transform: translateY(0.12em);
  animation: markIn var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(40ms + var(--i) * 55ms);
}

@keyframes markIn {
  to { opacity: 1; transform: translateY(0); }
}

.intro__skip {
  position: absolute;
  right: var(--gutter);
  bottom: var(--gutter);
  padding: var(--space-2) var(--space-4);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.intro__skip:hover { color: var(--ink); border-color: var(--ink); }

/* --- Шапка --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.header__in {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Пока логотип не прислали, в шапке стоит текстовое написание.
   Когда придёт вектор, сюда встанет img и это правило уйдёт. */
@media (max-width: 26rem) {
  .logo { font-size: var(--text-lg); }
}

.nav {
  display: flex;
  gap: var(--space-8);
  margin-inline: auto;
  min-width: 0;
}
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--ink); }

.cart {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  flex: 0 0 auto;
}
.cart:hover { color: var(--ink); }
.cart__count { margin-left: var(--space-2); color: var(--ink); }

.burger {
  display: none;
  width: 2.75rem; height: 2.75rem;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.burger__box,
.burger__box::before,
.burger__box::after {
  display: block;
  width: 1.125rem; height: 1px;
  margin-inline: auto;
  background: var(--ink);
}
.burger__box { position: relative; }
.burger__box::before,
.burger__box::after { content: ''; position: absolute; left: 0; }
.burger__box::before { top: -0.32rem; }
.burger__box::after { top: 0.32rem; }

.nav-mobile {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--gutter) var(--space-8);
  border-top: 1px solid var(--line-soft);
}
.nav-mobile[hidden] { display: none; }
.nav-mobile__link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  padding-block: var(--space-2);
}

/* --- Первый экран -------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-content: center;
  padding-block: var(--space-24) var(--space-32);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  background: var(--bg-deep);
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 58% at 68% 46%,
              var(--glow-core), var(--glow-mid) 38%, var(--glow-edge) 72%);
  opacity: 0.55;
}
/* Подпись слота стоит в углу, а не по центру, чтобы не спорить
   с заголовком. Когда придёт видео, весь этот блок уходит. */
.hero__slot {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-8);
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  text-align: right;
  padding: var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.hero__slot span:first-child { color: var(--ink-2); }

.hero__body {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin-top: var(--space-4);
}
.hero__lead {
  max-width: 32ch;
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--ink-2);
}

/* Подсказка стоит слева по краю набора, а не по центру. По центру она
   налезала на рамку слота под видео. */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Сетка вещей --------------------------------------------------------- */

.catalog { padding-block: var(--space-24); }

.grid {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-16);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

/* Две вещи в строку на всех ширинах, включая телефон. Просьба заказчика,
   как на присланном примере. Когда позиций станет больше, на широком
   экране можно поднять до трёх, но на телефоне остаётся две.

   Ширина ограничена. Без ограничения на мониторе две карточки
   разъезжаются до 650 пикселей каждая, и одна вещь занимает
   больше экрана по высоте, чем весь первый экран сайта. */
.grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 58rem;
}
.grid__item { min-width: 0; }

/* Классический вид без рамок. Ни подложки под медиа, ни панели под
   текстом, ни уголков. Вещь со светом лежит прямо на фоне страницы,
   под ней текст. Просьба заказчика 08.08.2026, ориентир raremodmafia. */
.card { display: grid; }
.card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(48% 46% at 50% 48%,
              var(--glow-core), var(--glow-mid) 40%, var(--glow-edge) 68%);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.card__media img {
  position: relative;
  width: 72%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card__media:hover img { transform: scale(1.03); }
.card__media:hover .card__glow { opacity: 0.72; }

.card__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0 0;
}
.card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  text-transform: uppercase;
}
.card__price {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
}
.card__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.card__sizes {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.card__sizes:hover { color: var(--ink); }
/* Кнопка без рамки, только сам знак. Область нажатия остаётся
   полноразмерной, её держит width и height. */
.card__add {
  width: 2.75rem; height: 2.75rem;
  flex: 0 0 auto;
  margin-right: calc(var(--space-3) * -1);
  background: none;
  border: 0;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.card__add:hover { color: var(--ink); transform: scale(1.12); }

/* --- О бренде ------------------------------------------------------------ */

.manifest { padding-block: var(--space-32); }
.manifest__text {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: var(--leading-snug);
}
/* Базовое состояние - текст читаем. Скрипт только добавляет проявление. */
.manifest__text .w { transition: opacity var(--dur-base) linear; }

/* --- Подвал -------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: var(--space-16) var(--space-8);
}
.footer__cols {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.footer__col { min-width: 0; }
.footer__text { margin-top: var(--space-3); color: var(--ink-2); }
.footer__link { border-bottom: 1px solid var(--line); }
.footer__link:hover { color: var(--ink); }

.footer__mark {
  margin-top: var(--space-24);
  font-family: var(--font-display);
  /* Кегль от ширины, чтобы длинное название не резалось на телефоне. */
  font-size: clamp(2rem, 13vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--surface-2);
}

/* --- Отметка черновика --------------------------------------------------- */

.draft {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.draft[hidden] { display: none; }
.draft__close {
  background: none;
  border: 0;
  padding: 0 var(--space-1);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}
.draft__close:hover { color: var(--ink); }

/* --- Проявление при прокрутке -------------------------------------------
   Важно. Без скрипта и при уменьшенной анимации контент виден сразу.
   Скрытое состояние живёт только под .js, поэтому сломанный скрипт
   не может спрятать товар. */

.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .intro__mark span { opacity: 1; transform: none; animation: none; }
}

/* --- Страница товара -----------------------------------------------------
   Порядок блоков привычный, ломать его нельзя. Отличаемся только
   тем, что вся страница остаётся чёрной, включая галерею. */

.back {
  display: inline-block;
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.back:hover { color: var(--ink); }

.product { padding-block: var(--space-8) var(--space-24); }
.product__in {
  display: grid;
  gap: var(--space-16);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.product__gallery, .product__panel { min-width: 0; }

.product__view {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.product__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 48% at 50% 48%,
              var(--glow-core), var(--glow-mid) 42%, var(--glow-edge) 70%);
}
.product__img {
  position: absolute;
  width: 66%;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.product__img.is-active { opacity: 1; }
.no-js .product__img { position: relative; opacity: 1; }
.no-js .product__img + .product__img { display: none; }

.product__thumbs {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
/* Миниатюры тоже без рамок. Активный кадр отмечен яркостью
   и чертой снизу, а не коробкой вокруг. */
.pthumb {
  width: 5.5rem;
  padding: var(--space-2) var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pthumb:hover { opacity: 0.8; }
.pthumb.is-active { opacity: 1; border-bottom-color: var(--line); }
.pthumb img { width: 100%; }

.product__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  margin-top: var(--space-3);
}
.product__price {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
}

.product__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.product__sizes { margin-top: var(--space-8); }

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.size {
  min-width: 3.25rem;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.size:hover:not(:disabled) { border-color: var(--ink); }
.size.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.size.is-out,
.size:disabled {
  color: var(--muted);
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
}

.product__buy {
  width: 100%;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-8);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.product__buy:hover { opacity: 0.86; }

.product__hint {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--muted);
}

.product__text { margin-top: var(--space-12); color: var(--ink-2); }
.product__text > * + * { margin-top: var(--space-4); }
.product__sub {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
}

.dots { display: grid; gap: var(--space-2); }
.dots li { position: relative; padding-left: var(--space-6); }
.dots li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: var(--space-3); height: 1px;
  background: var(--line);
}

.table-scroll { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.table th,
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}
.table thead th {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.table tbody th { color: var(--ink); font-weight: 600; }

/* --- Адаптив ------------------------------------------------------------- */

@media (max-width: 60rem) {
  .nav, .cart { display: none; }
  .burger { display: block; }
  .section-title { font-size: var(--text-3xl); }
  .manifest__text { font-size: var(--text-2xl); }
  .product__in { gap: var(--space-12); }
}

/* Две колонки на телефоне. Карточка становится узкой, поэтому вся
   типографика внутри уменьшается, иначе название переносится по слогам,
   а подвал карточки не помещается в одну строку. */
@media (max-width: 34rem) {
  .grid--two { gap: var(--space-8) var(--space-3); margin-top: var(--space-8); }

  .card__body { padding: var(--space-3) 0 0; gap: var(--space-1); }
  .card__name { font-size: var(--text-base); }
  .card__price { font-size: var(--text-base); }
  .card__note { font-size: 0.6875rem; letter-spacing: 0.04em; }

  .card__foot { gap: var(--space-2); margin-top: var(--space-2); }
  .card__sizes { letter-spacing: 0.04em; }
  .card__sizes-arr { display: none; }
  .card__add {
    width: 2.5rem; height: 2.5rem;
    margin-right: 0;
    font-size: var(--text-lg);
  }
}

@media (max-width: 30rem) {
  .product__name { font-size: var(--text-2xl); }
  /* На узком экране отметка черновика занимала две строки и закрывала
     цену, поэтому оставляем только слово. */
  .draft__long { display: none; }
}