/* ---------------------------------------------------------------------------
   components.css — шапка, тикер, бейдж корзины, меню, карточка товара,
   строка статуса, футер. Геометрия перенесена 1:1 из макета Figma
   (docs/ТЗ-верстка-astro.md §5) через Astro-версию компонентов.
   --------------------------------------------------------------------------- */

/* --- Шапка (§5.1) ------------------------------------------------------------
   Два варианта чёрного блока: hero (главная) и compact (остальные страницы).
   Внутренние Y-смещения фиксированы на всех ширинах, резиновая только ширина. */

.header {
  position: relative;
  height: 429px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-surface-dark);
  /* Без изоляции Chrome выносит анимированный трек тикера в отдельный
     GPU-слой, и тот игнорирует border-radius — текст «вылезает» на скругление. */
  isolation: isolate;
}

/* Высота задаётся геометрией бейджа корзины: у него те же отступы, что на
   главной (26/26, с 640px — 20/20), и снизу должен оставаться такой же зазор:
   26 + 44 + 26 = 96, на десктопе 20 + 44 + 20 = 84. */
.header--compact {
  height: 96px;
}

@media (min-width: 640px) {
  .header--compact {
    height: 84px;
  }
}

/* Высота текстового бокса логотипа в макете: 129/102 в hero, 66/52 в compact —
   отсюда line-height 1.269. Не округлять. */
.header__logo {
  position: absolute;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 102px;
  font-weight: 600;
  line-height: 1.269;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

/* Центр по высоте compact-шапки: бокс лого 52px × 1.269 ≈ 66px →
   (96 − 66) / 2 = 15, на десктопе (84 − 66) / 2 = 9. */
.header--compact .header__logo {
  top: 15px;
  left: 35px;
  transform: none;
  font-size: 52px;
}

@media (min-width: 640px) {
  .header--compact .header__logo {
    top: 9px;
  }
}

/* На внутренних страницах логотип — ссылка на главную. */
a.header__logo {
  transition: color 0.15s;
}

a.header__logo:hover {
  color: var(--color-accent);
}

a.header__logo:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Четыре снимка фурнитуры в группе 146×76 (узлы 12:764–12:767). */
.header__shots {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  width: 146px;
  height: 76px;
}

.header__shot {
  position: absolute;
}

/* Позиции снимков внутри группы — из макета. Порядок в разметке фиксирован
   (hero-1 … hero-4), поэтому адресуем по nth-child. */
.header__shot:nth-child(1) {
  left: 0;
  top: 0;
}

.header__shot:nth-child(2) {
  left: 44px;
  top: 0;
}

.header__shot:nth-child(3) {
  left: 90px;
  top: 14px;
}

.header__shot:nth-child(4) {
  left: 124px;
  top: 35px;
}

.header__tagline {
  position: absolute;
  top: 351px;
  left: 50%;
  transform: translateX(-50%);
  width: 189px;
  text-align: center;
  font-size: 12px;
  line-height: 1.22;
  font-weight: 400;
  color: var(--color-text);
  opacity: 0.8;
}

/* Тэглайн в три строки ≈ 37px: (96 − 37) / 2 ≈ 30, на десктопе ≈ 24. */
.header--compact .header__tagline {
  top: 30px;
  left: 102px;
  transform: none;
  width: 159px;
  text-align: left;
  font-size: 10px;
  opacity: 0.5;
}

@media (min-width: 640px) {
  .header--compact .header__tagline {
    top: 24px;
  }
}

.header__ticker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

/* Бейдж корзины — «прилипший»: fixed от вьюпорта, всегда виден при скролле.
   Координаты совпадают с прежним absolute-положением при нулевом скролле
   (отступ страницы + отступ в шапке): 12 + 26 = 38, с 640px — 20 + 20 = 40.
   На широких экранах правый отступ привязан к контейнеру 1280px, чтобы
   кнопка не уезжала к краю окна. Проценты (не vw) — чтобы не учитывать
   ширину скроллбара. */
.header-wrap__badge {
  position: fixed;
  z-index: 10;
  top: 38px;
  right: 38px;
}

@media (min-width: 640px) {
  .header-wrap__badge {
    top: 40px;
    right: max(40px, calc((100% - 1280px) / 2 + 20px));
  }
}

/* Compact-шапка (75px): у бейджа те же отступы, что и на главной (26/26,
   с 640px — 20/20 из базового правила), чтобы кнопка не прыгала между
   страницами. */

/* --- Тикер (§5.2) --------------------------------------------------------------
   Вертикальная лента 24px вдоль левого края блока, текст читается снизу вверх.
   Бесконечная прокрутка: две копии трека + translateY(-50%). */

.ticker {
  height: 100%;
  width: 24px;
  overflow: hidden;
  background-color: var(--color-accent);
}

.ticker__track {
  display: flex;
  flex-direction: column;
  height: max-content;
  animation: ticker-scroll 30s linear infinite;
}

.ticker__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.ticker__text {
  /* Только физический padding: у повёрнутого текста (writing-mode: vertical-rl)
     блочная ось горизонтальна, и padding-block слепил бы фразы в одну.
     10px с каждой стороны = 20px между фразами — уточнение заказчика. */
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-text);
  /* vertical-rl задаёт вертикальное письмо, rotate(180deg) переворачивает так,
     чтобы строка «поднималась». */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

@keyframes ticker-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* --- Бейдж корзины (§5.4) -------------------------------------------------------
   Пилюля 63×44 (паддинги 13px), радиус 20px. Это <button>, открывает попап
   корзины (js/cart.js). */

.cart-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--color-control);
  padding: 13px;
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s;
}

.cart-badge:hover {
  background-color: #3d3d3d;
}

.cart-badge:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.cart-badge__icon {
  flex-shrink: 0;
}

.cart-badge__count {
  font-size: 14px;
  line-height: 1.22;
  font-weight: 600;
}

/* «Подпрыгивание» бейджа при добавлении товара (класс вешает cart-badge.js). */
.cart-badge--bump {
  animation: cart-bump 0.35s ease;
}

@keyframes cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-badge--bump {
    animation: none;
  }
}

/* --- Меню (§5.3) -----------------------------------------------------------------
   Ряд пилюль, gap 9px. На мобильном скроллится горизонтально, на ≥640 центрируется.
   Высота 43px не задаётся числом: 14px + 14px×1.22 + 12px дают её сами. */

@media (min-width: 640px) {
  .nav.scroll-x {
    overflow: visible;
    scroll-snap-type: none;
  }
}

.nav__list {
  display: flex;
  width: max-content;
  gap: 9px;
}

@media (min-width: 640px) {
  .nav__list {
    width: auto;
    justify-content: center;
  }
}

.nav__item {
  scroll-snap-align: start;
}

.nav__link {
  display: block;
  border-radius: var(--radius-control);
  background-color: var(--color-black);
  /* В макете паддинги 12/14, но браузер сажает строку ниже, чем Figma:
     заглавные без нижних выносных висят над центром. 14/12 центрируют оптически. */
  padding: 14px 10px 12px;
  font-size: 14px;
  line-height: 1.22;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
  transition: background-color 0.15s;
}

.nav__link:hover {
  background-color: var(--color-control);
}

.nav__link[aria-current='page'] {
  background-color: var(--color-accent);
}

.nav__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* --- Карточка товара (§5.5) -------------------------------------------------------
   Резиновая ширина из сетки, высота — контентом, кнопка прижата к низу.
   Цены на карточке нет. */

.card {
  /* Высоту не задавать: в ленте карточки выравнивает flex-stretch,
     а заданный height (даже 100%) его отключает. */
  /* Якорь для растянутой ссылки CTA (::after) — кликабельна вся карточка. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 21px;
  border-radius: var(--radius-card);
  background-color: var(--color-surface-light);
  padding: 30px 1px 40px;
}

/* flex: 1 + растянутая фото-зона: у карточек в ленте одна высота, поэтому
   статусная строка и кнопка у всех оказываются на одном уровне — фото разной
   высоты (281/253/220/178) больше не «роняют» низ карточки. */
.card__top {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.card__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card__head--subtitle {
  gap: 20px;
}

.card__titles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card__title {
  margin-inline: auto;
  max-width: 253px;
  text-align: center;
  font-size: 32px;
  line-height: 1.06;
  font-weight: 700;
  color: var(--color-black);
}

.card__title a {
  border-radius: 2px;
}

/* Растянутая ссылка: клик по любому месту карточки (фото, текст) ведёт
   на страницу товара. Оверлей — у ссылки заголовка, а не у CTA: на CTA
   висят filter/transform (hover/active), а они делают элемент containing
   block для absolute — оверлей схлопывался бы до кнопки при наведении. */
.card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

.card__title a:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.card__subtitle {
  text-align: center;
  font-size: 18px;
  line-height: 1.06;
  font-weight: 500;
  color: var(--color-black);
}

/* §5.5: лейбл серый, значения чёрные — и в варианте A (размеры), и в B (веса). */
.card__spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-black);
}

.card__spec-muted {
  color: var(--color-text-muted);
}

.card__spec-sizes {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card__spec-sizes-list {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Точка и диапазон переносятся вместе: у Barbarian пять размеров,
   и строка не влезает в карточку 302px. */
.card__spec-range {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Три копии одного снимка рядом. Фон снимков непрозрачный, поэтому gap
   не бывает отрицательным — наложение срезало бы крючок соседней копии.
   333px = три фото Barbarian (111px) без зазора. */
.product-photos {
  margin-inline: auto;
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 333px;
  align-items: center;
  justify-content: center;
}

.product-photos__item {
  height: auto;
  min-width: 0;
  flex-shrink: 1;
}

.product-photos__item + .product-photos__item {
  margin-left: var(--photo-gap);
}

/* Временная заглушка вместо снимков, пока у товара нет фото. */
.product-photos__placeholder {
  display: flex;
  width: 100%;
  min-height: 178px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
}

.card__cta {
  /* Выше оверлея заголовка (обе ссылки позиционированы, CTA позже в DOM):
     кнопка остаётся кликабельной сама по себе — hover/active работают. */
  position: relative;
  margin-inline: auto;
  margin-top: auto;
  display: flex;
  width: 100%;
  max-width: 211px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  padding: 16px 19px;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text);
  transition: filter 0.15s, transform 0.15s;
}

.card__cta:hover,
.card:hover .card__cta {
  filter: brightness(0.92);
}

.card__cta:active {
  transform: scale(0.98);
}

.card__cta:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* --- Строка статуса (§5.6) ---------------------------------------------------------
   «В наличии» + «Доставка от 1 дня». Бейдж-галочка всегда зелёный;
   цвет текста и таймера зависит от фона — через переменные темы. */

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--status-text);
}

.status--light {
  --status-text: var(--color-black);
  --status-timer: var(--color-icon-dark);
}

.status--dark {
  --status-text: var(--color-text);
  --status-timer: #e5e5e5;
}

.status__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status__check {
  display: flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--color-badge-bg);
  color: var(--color-badge-icon);
}

.status__timer {
  flex-shrink: 0;
  color: var(--status-timer);
}

/* --- Футер (§5.11) --------------------------------------------------------------------
   Три слоя: фото рыбалки (object-fit: cover), градиент сверху (155px мобильный /
   492px десктоп), чёрная карточка. Блок full-bleed — контейнер применён внутри. */

.footer {
  position: relative;
  height: 665px;
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer__gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 155px;
  background: linear-gradient(to bottom, #1f1f1f 0%, rgba(31, 31, 31, 0) 100%);
}

@media (min-width: 1024px) {
  .footer__gradient {
    height: 492px;
  }
}

.footer__container {
  position: relative;
  display: flow-root;
  height: 100%;
}

.footer__card {
  position: relative;
  margin-top: 52px;
  /* Той же ширины, что карточка товара в сетке .cards-strip: на мобильном
     карточки во всю ширину контейнера, дальше — одна колонка из двух
     с тем же зазором 27px. */
  height: 429px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-surface-dark);
  /* См. .header: клип скругления для GPU-слоя анимированного тикера. */
  isolation: isolate;
}

@media (min-width: 640px) {
  .footer__card {
    max-width: calc((100% - 27px) / 2);
  }
}

.footer__logo {
  position: absolute;
  top: 16px;
  left: 45px;
  font-size: 62px;
  font-weight: 600;
  line-height: 1.269;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.footer__brand {
  position: absolute;
  top: 84px;
  left: 45px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
}

.footer__text {
  position: absolute;
  top: 275px;
  left: 45px;
  width: 259px;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 400;
  color: var(--color-text);
}

.footer__made {
  position: absolute;
  top: 389px;
  left: 45px;
  font-size: 12px;
  line-height: 1.22;
  font-weight: 500;
  color: var(--color-text);
  opacity: 0.5;
}

/* Юридические ссылки лежат на фото, поэтому с тенью и подчёркиванием
   для читаемости. На мобильном остаются под карточкой, с планшета
   становятся самостоятельным блоком в левом нижнем углу футера. */
.footer__legal {
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.22;
  font-weight: 500;
  color: var(--color-text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
  .footer__legal {
    position: absolute;
    left: 20px;
    bottom: 32px;
    width: 360px;
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 24px;
    text-align: left;
  }
}

@media (min-width: 1200px) {
  .footer__legal {
    width: max-content;
    flex-wrap: nowrap;
  }
}

.footer__legal a {
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  opacity: 1;
}

.footer__legal-copy {
  opacity: 0.5;
}

/* --- ВРЕМЕННАЯ плашка «сайт наполняется» (js/site-notice.js) -----------------------
   Sticky-полоса во всю ширину вьюпорта: липнет к верху при скролле,
   закрывается крестиком. z-index ниже бейджа корзины (10) — бейдж может
   перекрывать плашку, это осознанно. На мобильном — одна строка 12px.
   Удалить вместе со скриптом. */
.site-notice {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--color-accent);
  /* Боковые отступы симметричные, под крестик справа: центровка текста
     не съезжает. 32px — впритык, чтобы текст на 375px остался одной строкой. */
  padding: 8px 32px;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text);
}

@media (min-width: 640px) {
  .site-notice {
    padding: 10px 48px;
    font-size: 14px;
  }
}

.site-notice__close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

.site-notice__close:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.site-notice__close:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

@media (min-width: 640px) {
  .site-notice__close {
    right: 12px;
  }
}

/* --- Cookie-consent (152-ФЗ) -------------------------------------------------------
   Плашка при первом визите: «Принять» включает аналитические cookie
   (Метрика подключается только после согласия — см. js/cookie-notice.js),
   «Только необходимые» оставляет один localStorage корзины. */
.cookie-note {
  /* Левый нижний угол вьюпорта с небольшим зазором от краёв. */
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 20;
  display: flex;
  max-width: 560px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  border-radius: var(--radius-control);
  /* Прозрачна только подложка (90%) — текст и кнопки непрозрачные,
     поэтому rgba на фоне, а не opacity на всём блоке. */
  background-color: rgba(1, 1, 1, 0.9);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* На узких экранах 560px не влезает — отступ справа не даёт плашке
   упереться в край. */
@media (max-width: 600px) {
  .cookie-note {
    right: 20px;
    max-width: none;
  }
}

.cookie-note__text {
  flex: 1 1 320px;
}

.cookie-note__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-note__ok {
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  padding: 10px 22px;
  font: inherit;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: filter 0.15s;
}

.cookie-note__ok:hover {
  filter: brightness(0.92);
}

.cookie-note__ok:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.cookie-note__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Отказ — вторичная кнопка: та же геометрия, но без заливки. */
.cookie-note__decline {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-control);
  background: none;
  padding: 10px 22px;
  font: inherit;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s;
}

.cookie-note__decline:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.cookie-note__decline:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* --- Контентная плашка внутренних страниц (delivery / about / contacts) ----- */

/* Та же «чёрная карточка», что .header и .footer__card, но высота — по контенту. */
.page-plate {
  margin-top: 24px;
  border-radius: var(--radius-card);
  background-color: var(--color-surface-dark);
  padding: 30px 20px 40px;
}

@media (min-width: 640px) {
  .page-plate {
    /* 45px слева — как отступ текста в .footer__card. */
    padding: 40px 45px 48px;
  }
}

/* Отступ сверху даёт сама плашка, а не заголовок. */
.page-plate > .page-title {
  margin-top: 0;
}

/* Типографика «прозного» контента: глобальных стилей тегов в проекте нет,
   поэтому скоупим внутрь плашки — карточки и футер не задеваются. */
.page-plate h2 {
  margin-top: 36px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
}

.page-plate h3 {
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
}

.page-plate p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}

/* base.css глушит маркеры у всех ul — здесь возвращаем. */
.page-plate ul {
  margin-top: 14px;
  padding-left: 1.25em;
  list-style: disc;
}

.page-plate li {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
}

/* Ссылки в тексте: белые без подчёркивания, при наведении — фирменный красный. */
.page-plate a {
  transition: color 0.15s ease;
}

.page-plate a:hover,
.page-plate a:focus-visible {
  color: var(--color-accent);
}

/* --- Страница товара (§5.7–5.9, макет 10:855 / 76:519) ------------------------
   Статус под заголовком, лента фич-кругляшков, светлая плашка с табами
   размеров и таблицей вариантов, статичная фото-карточка. */

/* Кнопка «← Назад» в каталог над заголовком товара. */
.back-link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--color-accent);
}

.back-link + .page-title {
  margin-top: 10px;
}

.product-status {
  margin-top: 18px;
  justify-content: flex-start;
}

.product-subtitle {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Лента фич: на мобильном скроллится (тач + drag мышью через drag-scroll.js),
   с 640px вся лента (5 × 96 + зазоры ≈ 536px) влезает — скролл отключается. */
.features {
  margin-top: 24px;
}

.features__list {
  display: flex;
  width: max-content;
  gap: 14px;
}

.features__item {
  width: 96px;
  scroll-snap-align: start;
}

.features__icon {
  display: block;
  width: 80px;
  height: 80px;
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background-color: #d9d9d9;
  overflow: hidden;
}

.features__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features__label {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.32;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
}

/* С 640px вся лента (5 × 96 + зазоры ≈ 536px) влезает — скролл отключается,
   лента прижата к левому краю, как заголовок и статус (аннотация). */
@media (min-width: 640px) {
  .features.scroll-x {
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* Перетаскивание лент мышью (drag-scroll.js). */
[data-drag-scroll] {
  cursor: grab;
}

[data-drag-scroll].is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

/* Светлая плашка с вариантами. */
.variants {
  margin-top: 24px;
  border-radius: var(--radius-card);
  background-color: var(--color-surface-light);
  padding: 20px 20px 8px;
  color: #111111;
}

/* Без табов размера первая строка таблицы начинается выше (§6.2). */
.variants--no-sizes {
  padding-top: 26px;
}

/* С ≥768px плашке больше внутреннего воздуха; таблица (306px) центрирована
   margin-inline: auto, поэтому рост паддингов её не сдвигает. */
@media (min-width: 768px) {
  .variants {
    padding: 28px 28px 16px;
  }

  .variants--no-sizes {
    padding-top: 34px;
  }
}

/* Табы размеров: скрытые радио + label-пилюли. */
.size-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.size-picker__legend {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black);
}

.size-picker__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.size-picker__pill {
  display: inline-flex;
  min-width: 45px;
  height: 35px;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  border-radius: var(--radius-pill);
  background-color: var(--color-black);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s;
}

.size-picker__input:checked + .size-picker__pill {
  background-color: var(--color-accent);
}

.size-picker__input:focus-visible + .size-picker__pill {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Таблица вариантов — визуально таблица, семантически список (§5.8).
   Колонки 72/90/58/86 = 306px: пропорции из макета, ужаты под паддинг
   плашки 20px (375 − 24 − 40 = 311 доступно). Первые три сжимаемые:
   на экранах уже 375px таблица ужимается и не вылезает за плашку. */
.variants__head,
.variant {
  display: grid;
  grid-template-columns: minmax(52px, 72px) minmax(40px, 90px) minmax(56px, 58px) 86px;
  align-items: center;
  max-width: 306px;
  margin-inline: auto;
}


.variants__head {
  margin-top: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-black);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.variants--no-sizes .variants__head {
  margin-top: 0;
}

.variants__list {
  max-width: 306px;
  margin-inline: auto;
}

.variant {
  height: 76px;
  border-bottom: 1px solid #bababa;
  font-size: 14px;
  font-weight: 500;
  color: #111111;
}

.variant:last-child {
  border-bottom: 0;
}

/* Десктоп: плашка занимает всю левую колонку .product-cols (~850px — в 2,5–3
   раза шире мобильных 306px, просьба клиента 18.07). Снимаем max-width,
   свободное место делят колонки веса и упаковки, степпер и кнопка крупнее. */
@media (min-width: 1024px) {
  .variants__head,
  .variant {
    max-width: none;
    grid-template-columns: minmax(90px, 1fr) minmax(110px, 1fr) 88px 132px;
    column-gap: 16px;
  }

  .variants__list {
    max-width: none;
  }

  .qty {
    width: 72px;
    padding-inline: 8px;
  }

  .variant__add {
    width: 132px;
  }
}

.variant[hidden] {
  display: none;
}

.variants__noscript {
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}

/* Счётчик упаковок: пилюля 56px с числом и −/+ по краям — кнопки видны
   сразу, чтобы было понятно, что количество меняется. Не растягивается. */
.qty {
  display: inline-flex;
  width: 56px;
  height: 36px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 5px;
  border-radius: var(--radius-control);
  background-color: #cfcfcf;
}

.qty__btn {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  width: 14px;
  height: 36px;
  font-size: 16px;
  line-height: 1;
  color: #4c4c4c;
  cursor: pointer;
}

/* Тап-зона кнопок −/+ шире видимой: выше/ниже пилюли и чуть в стороны. */
.qty__btn::before {
  content: '';
  position: absolute;
  inset: -6px -4px;
}

.qty__value {
  min-width: 20px;
  text-align: center;
  font-weight: 500;
  color: #111111;
}

.qty__btn:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

/* Кнопка «добавить»: тёмная при qty 0, красная при qty ≥ 1. */
.variant__add {
  display: inline-flex;
  width: 86px;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--color-control);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.variant__add:active {
  transform: scale(0.96);
}

.variant__add:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.variant__plus {
  flex-shrink: 0;
  stroke: #939393;
  transition: stroke 0.15s;
}

.variant__add--active {
  background-color: var(--color-accent);
}

.variant__add--active .variant__plus {
  stroke: #ffffff;
}

/* Летящий к бейджу клон кнопки (fly-to-cart, product.js). */
.fly-clone {
  position: fixed;
  z-index: 100;
  margin: 0;
  pointer-events: none;
}

/* Галерея живых фото товара (§5.10): горизонтальная лента карточек 337px
   со scroll-snap; трек переиспользует .scroll-x и data-drag-scroll.
   Кнопка «›» скрыта разметкой (hidden), gallery.js включает её при 2+ слайдах. */
.product-gallery {
  position: relative;
  margin-top: 24px;
}

.product-gallery__track {
  display: flex;
  gap: 12px;
}

/* Плавная прокрутка кнопкой — только если пользователь не против анимаций. */
@media (prefers-reduced-motion: no-preference) {
  .product-gallery__track {
    scroll-behavior: smooth;
  }
}

/* Слайд чуть уже трека — следующий выглядывает справа (~32px + зазор).
   Единственный слайд занимает карточку целиком: 351 × 337, как в макете. */
.product-gallery__slide {
  flex: 0 0 calc(100% - 44px);
  height: 337px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--color-surface-light);
  scroll-snap-align: start;
}

.product-gallery__slide:only-child {
  flex-basis: 100%;
}

.product-gallery__slide picture,
.product-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

.product-gallery__slide img {
  object-fit: cover;
}

/* Круглая полупрозрачная кнопка «›» в правом верхнем углу карточки. */
.product-gallery__next {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgba(1, 1, 1, 0.35);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s;
}

.product-gallery__next:hover {
  background-color: rgba(1, 1, 1, 0.55);
}

.product-gallery__next:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* display: flex перебил бы UA-стиль [hidden] — возвращаем скрытие явно. */
.product-gallery__next[hidden] {
  display: none;
}

/* --- Корзина-попап (js/cart.js) ----------------------------------------------------
   Нативный <dialog>: showModal() даёт focus trap, Esc и ::backdrop бесплатно.
   Светлая плашка как .variants — существующий степпер .qty переиспользуется 1:1.
   На мобильном (<640px) — полноэкранный лист, на десктопе — центр. */

.cart-modal {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--color-surface-light);
  color: #111111;
}

.cart-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

@media (min-width: 640px) {
  .cart-modal {
    width: calc(100% - 32px);
    max-width: 480px;
    /* Именно fit-content, как в UA-стилях: height: auto при inset: 0 +
       margin: auto решается растяжением до max-height, а не по контенту. */
    height: fit-content;
    max-height: calc(100dvh - 80px);
    margin: auto;
    border-radius: var(--radius-card);
  }
}

/* Клик по подложке ловится на самом dialog (e.target === dialog): у диалога
   нет паддингов, весь контент — внутри __inner, так что мимо неё не попасть. */
.cart-modal__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  max-height: inherit;
  padding: 20px;
  overflow-y: auto;
}

/* height: 100% нужен только полноэкранному листу; на десктопе он растянул бы
   диалог до max-height даже при коротком содержимом. */
@media (min-width: 640px) {
  .cart-modal__inner {
    height: auto;
    padding: 28px;
  }
}

.cart-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-modal__title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
}

.cart-modal__close {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: -8px -8px -8px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  color: #4c4c4c;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.cart-modal__close:hover {
  background-color: #dcdcdc;
  color: #111111;
}

.cart-modal__close:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Пустая корзина. */
.cart-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 0 12px;
  text-align: center;
  font-size: 16px;
}

.cart-modal__empty[hidden],
.cart-modal [data-cart-body][hidden] {
  display: none;
}

.cart-modal__catalog-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  padding: 16px 24px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text);
  transition: filter 0.15s;
}

.cart-modal__catalog-link:hover {
  filter: brightness(0.92);
}

.cart-modal__catalog-link:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Позиции: превью / название+мета / степпер / цена / удалить. */
.cart-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #bababa;
}

.cart-modal__list .cart-item:first-child {
  padding-top: 0;
}

.cart-item__thumb {
  display: flex;
  width: 48px;
  height: 64px;
  align-items: center;
  justify-content: center;
}

.cart-item__thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cart-item__thumb--placeholder {
  border-radius: 10px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  font-size: 10px;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
}

.cart-item__title {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
}

.cart-item__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.cart-item__price {
  min-width: 56px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.cart-item__remove:hover {
  color: var(--color-accent);
}

.cart-item__remove:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Итого и дисклеймер — один смысловой блок, поэтому своя обёртка:
   иначе gap формы (14px) развёл бы их как самостоятельные поля. */
.cart-modal__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-modal__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cart-modal__total-label {
  font-size: 13px;
  font-weight: 400;
  color: #111111;
}

.cart-modal__total-value {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Доставку покупатель оплачивает перевозчику при получении — в сумму она не входит.
   Цвет основного текста, а не приглушённый: это условие сделки, а не сноска. */
.cart-modal__note {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #111111;
}

.cart-modal__note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cart-modal__note a:hover,
.cart-modal__note a:focus-visible {
  color: var(--color-accent);
}

/* Форма заказа. Своей border-top нет: разделителем работает border-bottom
   последней позиции списка — иначе на стыке вышли бы две линии подряд. */
.order-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.order-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.order-form__input {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-control);
  background-color: #cfcfcf;
  font: inherit;
  font-size: 16px; /* <16px на iOS вызывает зум при фокусе */
  color: #111111;
}

/* Цвет из макета: на сером фоне поля это 1.6:1, ниже AA. Осознанно — подсказка
   дословно дублирует лейбл над полем, читать её не обязательно. */
.order-form__input::placeholder {
  color: #9e9e9e;
}

.order-form__input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

.order-form__hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Способ доставки — сегмент-контрол. Паттерн .size-picker (скрытое радио +
   label-пилюля), но геометрия и палитра свои: 50/50 во всю ширину на светлой
   плашке, поэтому отдельный блок, а не модификатор size-picker. */
.order-form__delivery {
  margin: 0;
  padding: 0;
  border: 0;
}

/* fieldset остаётся блоком: display:flex на нём ведёт себя по-разному
   в браузерах — воздух под легендой даёт margin-top строки. */
.order-form__delivery-legend {
  display: block;
  width: 100%;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

/* Тумблер: оба сегмента сидят в одной капсуле, по ней ездит красный ползунок.
   Это один контрол, а не две кнопки рядом. Вёрстка рассчитана ровно на два
   способа (Delivery::METHODS): ползунок — половина трека. */
.order-form__delivery-row {
  position: relative;
  display: flex;
  margin-top: 6px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background-color: #cfcfcf;
}

.order-form__delivery-pill {
  position: relative;
  z-index: 1; /* подпись поверх ползунка */
  display: flex;
  flex: 1 1 0; /* ровно 50/50 независимо от длины подписи */
  min-width: 0;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: #111111;
  cursor: pointer;
  transition: color 0.15s;
}

/* Вес шрифта не меняем: при font-synthesis: none скачок 500→600 дёргает текст. */
.order-form__delivery-input:checked + .order-form__delivery-pill {
  color: var(--color-text);
}

.order-form__delivery-thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px); /* половина трека за вычетом его паддинга */
  height: 40px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  /* Быстрый старт, долгое мягкое торможение — тумблер «доезжает», а не дёргается.
     Без overshoot: ползунок упирается в край трека, вылет читался бы как баг. */
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Сдвиг ровно на свою ширину — правый край ложится на паддинг трека. */
.order-form__delivery-input[value='cdek']:checked ~ .order-form__delivery-thumb {
  transform: translateX(100%);
}

.order-form__delivery-input:focus-visible + .order-form__delivery-pill {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
  .order-form__delivery-thumb {
    transition: none;
  }
}

/* Способ оплаты — инфо-блок (единственный метод, выбора нет): покупатель
   заранее видит, что уйдёт на платёжную страницу Ozon Pay. */
.order-form__payment {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.order-form__payment-method {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px 14px;
  border: 1px solid #bababa;
  border-radius: var(--radius-control);
  background-color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.order-form__payment-logo {
  display: block;
  width: auto;
  height: 18px;
  flex-shrink: 0;
}

.order-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  color: #4c4c4c;
  cursor: pointer;
}

.order-form__consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.order-form__consent a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.order-form__consent a:hover,
.order-form__consent a:focus-visible {
  color: var(--color-accent);
}

.order-form__submit {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 12px 19px; /* меньше 16px: высоту добирает вторая строка */
  border: 0;
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

/* Только размер и вес: белый на акценте — 4.92:1, любая прозрачность
   уронит подпись ниже AA. */
.order-form__submit-note {
  font-size: 13px;
  font-weight: 400;
}

.order-form__submit:hover {
  filter: brightness(0.92);
}

.order-form__submit:active {
  transform: scale(0.98);
}

.order-form__submit:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* Пока ждём payLink от бэкенда: повторный клик невозможен. */
.order-form__submit:disabled {
  cursor: wait;
  filter: grayscale(0.4) brightness(0.96);
  transform: none;
}

/* ВРЕМЕННО, режим «сайт наполняется» (js/site-notice.js): кнопка выключена
   не из-за ожидания сети — курсор «ждите» ввёл бы в заблуждение. */
.order-form__submit--blocked:disabled {
  cursor: not-allowed;
}

/* Ошибка создания заказа (сеть/бэкенд) — под кнопкой, корзина не трогается. */
.order-form__error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c0392b;
}

/* Статусы на страницах /order/success/ и /order/fail/. */
.order-result {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 16px 24px;
  text-align: center;
}

.order-result__title {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}

.order-result__text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
}

.order-result__link {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--radius-control);
  background-color: var(--color-accent);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.order-result__link:hover {
  filter: brightness(0.92);
}