/* ==========================================================================
   Страница товара: хлебные крошки, галерея, панель покупки, описание, характеристики.
   Использует токены из style.css — собственных цветов здесь не объявляем.
   ========================================================================== */

/* --- Хлебные крошки ----------------------------------------------------- */
.breadcrumbs { padding-block: var(--space-md); font-size: var(--fs-small); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--color-muted); }
.breadcrumbs__list li { display: flex; gap: 0.5rem; align-items: center; }
.breadcrumbs__list li + li::before { content: "/"; color: var(--color-border); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); }

/* --- Общая сетка страницы ----------------------------------------------- */
.product {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 60em) {
  .product { grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr); align-items: start; }
}

/* --- Галерея ------------------------------------------------------------ */
.gallery { display: grid; gap: var(--space-sm); }
.gallery__stage {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Горизонтальные жесты обрабатывает скрипт (свайп), вертикальные оставляем
     браузеру — иначе по фото нельзя прокрутить страницу пальцем. */
  touch-action: pan-y;
}

/* Ссылка на полный размер: без JS открывает файл, с JS — просмотр с зумом. */
.gallery__zoom {
  display: block;
  position: relative;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.gallery__zoom:hover,
.gallery__thumb:hover { text-decoration: none; }
.gallery__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-surface);
  transition: transform 0.25s ease;
  will-change: transform;
}
/* Лупа при наведении и перетаскивание пальцем должны следовать за рукой без задержки. */
.gallery__stage.is-magnified .gallery__image,
.gallery__stage.is-swiping .gallery__image { transition: none; }

.gallery__zoom-hint {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.15s ease;
}
.gallery__zoom-icon { color: var(--color-primary); }
.gallery__stage.is-magnified .gallery__zoom-hint { opacity: 0; }

.gallery__caption {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-small);
  color: var(--color-muted);
  pointer-events: none;
}
.gallery__counter {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 22, 31, 0.72);
  color: #fff;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.gallery__nav:hover { background: #fff; color: var(--color-primary); }
.gallery__nav--prev { left: var(--space-sm); }
.gallery__nav--next { right: var(--space-sm); }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}
.gallery__thumb {
  display: block;
  padding: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gallery__thumb img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.gallery__thumb:hover { border-color: var(--color-primary-soft); transform: translateY(-2px); }
.gallery__thumb[aria-current="true"] { border-color: var(--color-primary); }

/* --- Один-единственный кадр --------------------------------------------- */
/* У товара всего одно фото — листать нечего: полоса миниатюр, стрелки и
   счётчик «1 / 1» только мешают. Класс ставит скрипт (он же выставляет
   элементам hidden), но то же намерение записано и в стилях: разметку с
   единственным кадром можно пометить классом сразу, без участия JS. */
.gallery--single .gallery__thumbs,
.gallery--single .gallery__nav,
.gallery--single .gallery__counter,
.gallery--single [data-gallery-nav-hint] { display: none; }

/* --- Заглушка вместо незагрузившегося фото ------------------------------- */
/* Подставляется скриптом по событию error. object-fit: contain — чтобы
   надпись на заглушке не обрезалась кадрированием под квадрат. */
.gallery__image.is-fallback,
.gallery__thumb img.is-fallback {
  object-fit: contain;
  background: var(--color-surface-2);
}
/* Увеличивать нечего: лупа на заглушке выглядела бы поломкой. */
.gallery__image.is-fallback { transform: none !important; }

.gallery__hint { font-size: var(--fs-small); color: var(--color-muted); }
kbd {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 0.85em;
  color: var(--color-text);
}

/* --- Полноэкранный просмотр с зумом ------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: rgba(12, 13, 20, 0.95);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox :focus-visible { outline-color: #fff; }
body.has-lightbox { overflow: hidden; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.lightbox__title { font-size: var(--fs-small); font-weight: 600; }
.lightbox__counter { color: #a8adc4; font-variant-numeric: tabular-nums; margin-left: 0.5rem; }
.lightbox__tools { display: flex; align-items: center; gap: var(--space-xs); }
.lightbox__button {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.lightbox__button:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox__button--close { background: rgba(255, 255, 255, 0.16); }
.lightbox__scale {
  min-width: 3.5rem;
  text-align: center;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: #d7daea;
}

.lightbox__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Жесты — щипок и перетаскивание — целиком на скрипте. */
  touch-action: none;
}
.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.2s ease;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.lightbox.is-zoomed .lightbox__image { cursor: grab; transition: none; }
.lightbox.is-dragging .lightbox__image { cursor: grabbing; transition: none; }
.lightbox__image.is-fallback { background: var(--color-surface); }

/* Единственный кадр: в просмотре тоже нечего листать. */
.lightbox--single .gallery__nav,
.lightbox--single .lightbox__counter { display: none; }

.lightbox__hint { text-align: center; font-size: var(--fs-small); color: #a8adc4; }
.lightbox__hint kbd {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

@media (max-width: 40em) {
  .lightbox__title { max-width: 100%; }
  .lightbox__hint { display: none; }
}

/* --- Панель покупки ----------------------------------------------------- */
.purchase { display: grid; gap: var(--space-md); align-content: start; }
@media (min-width: 60em) {
  .purchase { position: sticky; top: calc(var(--header-height) + 1rem); }
}

.purchase__brand {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-muted);
}
.purchase__title { margin-top: 0.25rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); }

.purchase__rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.purchase__rating-value { font-weight: 700; color: var(--color-text); font-size: 1rem; }

.price-box {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: grid;
  gap: var(--space-sm);
}
.price-box__row { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.price-box__current { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; }
.price-box__old { color: var(--color-muted); text-decoration: line-through; }
.price-box__saving { font-size: var(--fs-small); font-weight: 600; color: var(--color-success); }
.price-box__note { font-size: var(--fs-small); color: var(--color-muted); }
.price-box__actions { display: grid; gap: var(--space-xs); }
.price-box__status { font-size: var(--fs-small); color: var(--color-success); min-height: 1.4em; }
/* Мелкий шрифт под кнопками: снимает вопрос «а это точно итоговая цена?». */
.price-box__legal { font-size: 0.8125rem; line-height: 1.5; color: var(--color-muted); }

/* Наличие (US-004). Белая плашка на цветной панели цены: значок сохраняет свою
   заливку, а состояние дополнительно подсвечено полосой слева. Цвет здесь
   только дублирует подпись — «● В наличии» и «○ Нет в наличии» отличаются и
   текстом, и маркером, поэтому состояние понятно и без различения цветов. */
.stock {
  display: grid;
  gap: 0.3rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
}
.stock__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.stock__note { font-size: var(--fs-small); color: var(--color-text); }
.stock__message { font-size: var(--fs-small); color: var(--color-muted); }

.stock--success { border-left-color: var(--color-success); }
.stock--warning { border-left-color: var(--color-warning); }
.stock--accent { border-left-color: var(--color-primary); }
.stock--danger { border-left-color: var(--color-danger); }

/* Группы комплектаций пересобираются скриптом целиком, поэтому отступ между
   ними задаёт контейнер, а не соседи. */
.purchase__options { display: grid; gap: var(--space-md); }

.options { display: grid; gap: var(--space-xs); }
.options__label { font-size: var(--fs-small); font-weight: 600; }
.options__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.options__row .btn { padding: 0.45rem 0.9rem; font-size: var(--fs-small); font-weight: 500; }
.options__row .btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.delivery { display: grid; gap: var(--space-xs); font-size: var(--fs-small); }
.delivery li { display: flex; gap: 0.6rem; align-items: flex-start; }
.delivery__icon { color: var(--color-primary); }
.delivery strong { color: var(--color-text); }
.delivery span { color: var(--color-muted); }

/* --- Легальность и происхождение (фича 85, US-002) ----------------------- */
/* Отдельный раздел под галереей и панелью покупки, во всю ширину страницы:
   обещание «аппарат легальный» — не сноска, его читают перед решением купить.
   Своих цветов не заводим — только токены из style.css. */
.legality {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legality__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.legality__title { margin: 0; font-size: var(--fs-h3); }

/* Значок доверия: зелёный, когда IMEI пробит и аппарат вёз официальный
   дистрибьютор, и жёлтый «Уточняем» во всех остальных случаях. */
.legality__badge {
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--fs-small);
  font-weight: 600;
}
.legality__badge--pending {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.legality__summary { margin: 0; color: var(--color-muted); font-size: var(--fs-small); }

.legality__list { display: grid; gap: var(--space-sm); margin: 0; font-size: var(--fs-small); }
.legality__row { display: grid; gap: 0.15rem; }
@media (min-width: 30em) {
  .legality__row { grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr); gap: var(--space-sm); }
}
/* На широком экране пять коротких ответов встают в две колонки — раздел не
   вытягивается в простыню. */
@media (min-width: 60em) {
  .legality__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
}

.legality__term {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--color-muted);
  font-weight: 600;
}
.legality__icon { color: var(--color-primary); }

.legality__value { margin: 0; color: var(--color-text); font-weight: 600; }

/* Кнопка раскрытия: без скриптов её нет вовсе (атрибут hidden), поэтому
   неработающего элемента покупатель не видит. */
.legality__toggle {
  justify-self: start;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.legality__toggle:hover { color: var(--color-primary-dark); }
.legality__toggle[hidden] { display: none; }

.legality__details {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}
.legality__details[hidden] { display: none; }

.legality__detail { margin: 0; color: var(--color-muted); font-size: var(--fs-small); }
/* Подпись поля — первой строкой и тоном страницы, сам текст тише. */
.legality__detail-label {
  display: block;
  color: var(--color-text);
  font-weight: 600;
}
.legality__link { font-weight: 600; }

/* Ссылка на страницу «Как мы проверяем легальность» (legality.html, US-003):
   стоит последней строкой раздела и уводит к подробному разбору проверки. */
.legality__guide {
  justify-self: start;
  font-size: var(--fs-small);
  font-weight: 600;
}

.purchase__jump { font-size: var(--fs-small); font-weight: 600; }

/* --- Описание и характеристики (US-003) ---------------------------------- */
/* Полоса карточек с главным идёт над двумя колонками и на широком экране
   растягивается на всю их ширину. */
.details {
  display: grid;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}
@media (min-width: 60em) {
  .details {
    grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr);
    align-items: start;
    column-gap: var(--space-xl);
  }
  .spec-highlights { grid-column: 1 / -1; }
}

.spec-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-sm);
}
.spec-card {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.spec-card__label { font-size: var(--fs-small); color: var(--color-muted); }
.spec-card__value { font-weight: 600; line-height: 1.35; }

.description p + p { margin-top: var(--space-sm); }
.description p { color: var(--color-muted); }
.description h3 { margin-top: var(--space-md); margin-bottom: var(--space-xs); color: var(--color-text); }
.description__list { display: grid; gap: 0.4rem; color: var(--color-muted); margin-top: var(--space-xs); }
.description__list li { padding-left: 1.4rem; position: relative; }
.description__list li::before { content: "—"; position: absolute; left: 0; color: var(--color-primary); }

.specs {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}
.specs__head { padding: var(--space-md); border-bottom: 1px solid var(--color-border); }
.specs__title { font-size: var(--fs-h3); }
.specs__lead { margin-top: 0.2rem; font-size: var(--fs-small); color: var(--color-muted); }

.specs__table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.specs__table th, .specs__table td { text-align: left; padding: 0.7rem var(--space-md); vertical-align: top; }
.specs__table th { font-weight: 500; color: var(--color-muted); width: 45%; }
.specs__table td { font-weight: 600; }

/* Раздел таблицы: заголовок на всю ширину, строки под ним — зеброй.
   Первый ряд каждого tbody — как раз заголовок, поэтому чередование
   начинается с чётных. */
.specs__group + .specs__group { border-top: 1px solid var(--color-border); }
.specs__group tr + tr { border-top: 1px solid var(--color-border); }
.specs__group tr:nth-child(even) { background: var(--color-surface); }
/* Селектор с двумя классами намеренно: иначе `.specs__table th` выше
   перебьёт и цвет, и насыщенность, и ширину заголовка раздела. */
.specs__table .specs__group-title {
  width: auto;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* --- Другие модели ------------------------------------------------------- */
/* Блок целиком зависит от JS: ссылки вида product.html?slug=… разбирает
   js/product-page.js. Без скриптов такая ссылка открыла бы товар по умолчанию,
   поэтому до появления класса has-js на <html> полосу не показываем. */
[data-js-only] { display: none; }
.has-js [data-js-only] { display: block; }

.related { padding-bottom: var(--space-xl); }
.related__list {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (min-width: 40em) {
  .related__list { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.related__link {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  height: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.related__link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  text-decoration: none;
  color: var(--color-text);
}
.related__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.related__body { display: grid; gap: 0.35rem; align-content: center; }
.related__name { font-weight: 700; }
.related__summary { font-size: var(--fs-small); color: var(--color-muted); }
.related__price { font-weight: 700; }
.related__old {
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--color-muted);
  text-decoration: line-through;
}
.related__body .badge { justify-self: start; }

/* --- Товар не найден ----------------------------------------------------- */
/* Сам блок — общий компонент пустого состояния (.empty-state в css/style.css):
   тем же оформлены пустая выдача каталога и список отзывов без отзывов. Здесь
   остаётся место в потоке страницы и то, чего у других пустых экранов нет, —
   крупный номер ошибки вместо значка. */
.not-found {
  max-width: 38rem;
  margin: var(--space-lg) auto var(--space-xl);
}
.not-found__code {
  width: auto;
  height: auto;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);
  background: transparent;
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.04em;
}
/* Заголовок ненайденного товара — единственный h1 на экране, поэтому он крупнее
   заголовка обычного пустого состояния. */
.not-found__title { font-size: var(--fs-h2); }