/* ==========================================================================
   MIROLINE — карточка товара: галерея, покупка, характеристики, отзывы
   ========================================================================== */

.pdp { padding-block: var(--sp-6) var(--sp-16); }

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 4rem;
  align-items: start;
}

/* --- Галерея ------------------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: var(--sp-3);
}

/* без фото из 1С thumbs не рендерятся — стейдж остаётся единственным
   ребёнком и должен занимать всю ширину, а не узкую колонку тумбов */
.gallery:has(> .gallery__stage:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

/* Колонка миниатюр со стрелками: сами кадры посередине, стрелки по краям.
   Стрелок нет, когда кадры влезли целиком — тогда рядов в сетке меньше. */
.gallery__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  align-content: start;
}

/* Видно семь кадров, остальные — прокруткой. Высота считается по самой
   миниатюре: ширина колонки (4.75rem из .gallery) при пропорции 3/4 плюс
   шесть зазоров между ними. То же число 7 продублировано в view.php —
   там оно решает, показывать ли стрелки. */
.gallery__thumbs {
  --thumb-h: calc(4.75rem * 4 / 3);
  display: grid;
  /* без явной высоты рядов сетка ужимает их под max-height, и кадры
     наползают друг на друга: ряд становится короче самой миниатюры */
  grid-auto-rows: max-content;
  gap: var(--sp-3);
  align-content: start;
  max-height: calc(7 * var(--thumb-h) + 6 * var(--sp-3));
  overflow-y: auto;
  /* полосу прокрутки прячем: она съедала бы ширину кадра, а листать
     колонку и без неё есть чем — стрелками, колесом, клавишами */
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.gallery__thumbs::-webkit-scrollbar { display: none; }

.gallery__thumbs-arrow {
  display: grid;
  place-items: center;
  height: 1.5rem;
  background: var(--c-surface);
  border-radius: var(--radius);
  color: var(--c-ink-2);
  transition: color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

.gallery__thumbs-arrow:hover:not(:disabled),
.gallery__thumbs-arrow:focus-visible { color: var(--c-ink); }

/* Край списка: стрелка гаснет и перестаёт нажиматься — так видно,
   что дальше кадров нет. */
.gallery__thumbs-arrow:disabled {
  opacity: .35;
  cursor: default;
}

.gallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--c-surface);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  /* Неактивные кадры приглушены: так видно, какой из них сейчас на стейдже.
     Одной рамки для этого мало - на светлых фото она теряется. */
  opacity: .5;
  transition: box-shadow var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

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

/* Рамка рисуется отдельным слоем поверх фотографии. Внутренняя тень самой
   кнопки не годится: миниатюра залита картинкой во всю площадь, и тень
   остаётся под ней - на экране её не видно вовсе. */
.gallery__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--c-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}

.gallery__thumb[aria-current] { opacity: 1; }
.gallery__thumb[aria-current]::after { opacity: 1; }

/* Наведение и клавиатурный фокус показывают кадр в полном цвете и намечают
   рамку светлее активной. */
.gallery__thumb:hover,
.gallery__thumb:focus-visible { opacity: 1; }

.gallery__thumb:hover::after,
.gallery__thumb:focus-visible::after {
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
  opacity: 1;
}

.gallery__thumb[aria-current]:hover::after {
  box-shadow: inset 0 0 0 1px var(--c-ink);
}

.gallery__stage {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--c-surface);
  border-radius: var(--radius);
  overflow: hidden;
}

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

/* Кадры лежат стопкой и переключаются прозрачностью: так нет подгрузки
   и скачка размера при смене изображения. */
.gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.gallery__slide[data-active] { opacity: 1; }

.gallery__badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
}

.gallery__badges .badge { position: static; }

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

.gallery__stage { cursor: grab; }

.gallery__stage[data-dragging] {
  cursor: grabbing;
  user-select: none;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: var(--c-ink);
  background: rgb(253 251 248 / .84);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.gallery__arrow--prev { left: var(--sp-3); }
.gallery__arrow--next { right: var(--sp-3); }

.gallery__stage:hover .gallery__arrow,
.gallery__arrow:focus-visible { opacity: 1; }

.gallery__arrow:hover { background: var(--c-bg); }

/* точки-указатели: нужны только на мобильной ленте */
.gallery__dots { display: none; }

/* --- Правая колонка -------------------------------------------------------------- */

.pdp__info {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}

.pdp__sku {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

/* служебная ссылка — видна только сотруднику с правом на правку товаров */
.pdp__admin {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.pdp__title {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: 2.375rem;
}

.pdp__rating {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.pdp__rating a {
  color: var(--c-ink-2);
  text-decoration: underline;
  text-underline-offset: .1875rem;
}

.pdp__stock {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--c-success);
}

.pdp__stock::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: currentColor;
}

/* --- Цена ------------------------------------------------------------------------- */

.pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
}

.pdp__price .price {
  font-family: var(--f-display);
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.pdp__discount {
  padding: .25rem var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-white);
  background: var(--c-accent);
  border-radius: var(--radius-sm);
}

/* --- Оптовая плашка ---------------------------------------------------------------- */

.pdp__wholesale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* ступеней две — между их строками нужен воздух */
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-accent-soft);
  border-radius: var(--radius);
}

.pdp__wholesale-price {
  font-family: var(--f-display);
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pdp__wholesale-text {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  /* на тёплой подложке обычный --c-ink-2 даёт 4.43:1 — чуть темнее ради AA */
  color: var(--c-ink-on-soft);
}

.pdp__wholesale-text strong {
  display: block;
  color: var(--c-ink);
  font-weight: 500;
}

/* --- Варианты: цвет и размер --------------------------------------------------------- */

.pdp__option { margin-top: var(--sp-8); }

.pdp__option-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}

.pdp__option-name {
  color: var(--c-ink-2);
}

.pdp__option-value { font-weight: 500; }

.pdp__size-guide {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  text-decoration: underline;
  text-underline-offset: .1875rem;
  background: none;
  cursor: pointer;
}

.pdp__size-guide:hover { color: var(--c-accent); }

/* цветовые варианты — миниатюрами, а не точками: по кружку 12 px
   не понять, чем отличается графит от чёрного */
.pdp__colors {
  display: flex;
  gap: var(--sp-3);
}

.pdp__color {
  position: relative;
  width: 3.25rem;
  aspect-ratio: 3 / 4;
  /* без img (нет фото по цвету) красим фоном из --swatch (см. AttributeValue::color_hex),
     без него — нейтральная подложка, как раньше */
  background: var(--swatch, var(--c-surface));
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease);
}

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

/* Выбранный цвет обводим снаружи, акцентным цветом кнопки «Каталог». Внутренняя
   тень тут не работает: образец залит либо фотографией, либо собственным цветом,
   и тёмная рамка на тёмном образце пропадала вовсе. Первое кольцо цвета фона
   даёт зазор, чтобы обводка не сливалась с самим образцом. */
.pdp__color[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);
}

.pdp__color:hover {
  box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3px var(--c-line-strong);
}

.pdp__color[aria-pressed="true"]:hover {
  box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);
}

.pdp__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pdp__size {
  min-width: 3.25rem;
  height: 2.75rem;
  padding-inline: var(--sp-3);
  display: grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.pdp__size:hover:not(:disabled) { border-color: var(--c-ink); }

.pdp__size[aria-pressed="true"] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}

/* размер, которого нет: перечёркнут, но остаётся в списке —
   покупателю важно видеть, что размер существует */
.pdp__size:disabled {
  color: var(--c-ink-2);
  cursor: default;
  background:
    linear-gradient(to top right,
      transparent calc(50% - .0312rem), var(--c-line-strong) 50%,
      transparent calc(50% + .0312rem));
}

.pdp__size-error,
.pdp__color-error {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-error);
}

/* --- Покупка ------------------------------------------------------------------------ */

.pdp__buy {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.pdp__add {
  flex: 1;
  padding-block: 1rem;
}

/* Кончившийся товар: место количества и кнопки покупки занимает заявка
   на поступление, избранное остаётся справа от неё. */
.pdp__notify-lead {
  margin: var(--sp-8) 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.pdp__notify-lead + .pdp__buy { margin-top: 0; }

.pdp__notify {
  flex: 1;
  min-width: 0;
}

.pdp__fav {
  flex-shrink: 0;
  /* квадрат в высоту кнопки «В корзину»: у неё 1rem отступа сверху и снизу
     плюс строка текста — те же 3.5rem. Обе величины в rem, поэтому равенство
     сохраняется и на узких экранах, где корневой кегль меньше */
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.pdp__fav:hover { border-color: var(--c-ink); color: var(--c-accent); }

.pdp__fav[aria-pressed="true"] { color: var(--c-accent); }

.pdp__fav[aria-pressed="true"] svg path {
  fill: currentColor;
  stroke: currentColor;
}

.pdp__hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

/* --- Условия -------------------------------------------------------------------------- */

.pdp__perks {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-line);
}

.pdp__perk {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}

.pdp__perk svg {
  margin-top: .125rem;
  color: var(--c-neutral);
}

.pdp__perk span { color: var(--c-ink-2); }

.pdp__perk strong {
  display: block;
  font-weight: 500;
  color: var(--c-ink);
}

/* --- Описание и характеристики ---------------------------------------------------------- */

.pdp__details {
  margin-top: var(--sp-16);
}

.pdp__details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}

.pdp__text p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink-2);
}

.pdp__text h2 { margin-bottom: var(--sp-6); }

/* Описание ведётся в редакторе админки: кроме абзацев там бывают подзаголовки
   и списки — без этих правил они выпадали бы из типографики карточки. */
.pdp__text h3 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink);
}

.pdp__text ul,
.pdp__text ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.2em;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-ink-2);
}

.pdp__text li { margin-bottom: var(--sp-1); }

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.specs caption {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 500;
  text-align: left;
}

.specs th,
.specs td {
  padding: var(--sp-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}

.specs th {
  width: 45%;
  font-weight: 400;
  color: var(--c-ink-2);
}

/* значение-ссылка ведёт в каталог с этим фильтром */
.specs td a {
  text-decoration: underline;
  text-underline-offset: .1875rem;
  text-decoration-color: var(--c-line-strong);
  transition: color var(--t-fast) var(--ease),
              text-decoration-color var(--t-fast) var(--ease);
}

.specs td a:hover { text-decoration-color: currentColor; }

/* --- Таблица размеров ------------------------------------------------------------------- */

/* окно по ссылке «Таблица размеров» рядом с выбором размера */
.guide {
  width: min(44rem, 100vw - var(--sp-8));
  max-height: min(40rem, 100vh - var(--sp-8));
  padding: 0;
  margin: auto;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3rem rgb(28 24 21 / .22);
  overflow: hidden;
}

/* только у открытого: закрытый dialog браузер прячет своим display: none,
   а авторское display перебило бы его и окно висело бы на странице */
.guide[open] {
  display: flex;
  flex-direction: column;
}

.guide::backdrop { background: rgb(28 24 21 / .45); }

.guide__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}

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

.guide__body {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  /* шапка остаётся на месте, длинная таблица прокручивается внутри окна */
  overflow-y: auto;
}

.guide__body p {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.sizes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.sizes-table th,
.sizes-table td {
  padding: var(--sp-3);
  /* в таблице одни числа — по центру колонки они читаются как ряд */
  text-align: center;
  border-bottom: 1px solid var(--c-line);
}

.sizes-table thead th {
  font-weight: 500;
  white-space: nowrap;
  border-bottom-color: var(--c-line-strong);
}

.sizes-table tbody th { font-weight: 500; }

.sizes-table__wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

/* --- Отзывы ------------------------------------------------------------------------------ */

.pdp-reviews { margin-top: var(--sp-16); }

.pdp-reviews__inner {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}

.score {
  padding: var(--sp-8);
  background: var(--c-surface);
  border-radius: var(--radius);
}

.score__value {
  font-family: var(--f-display);
  font-size: 3rem;
  line-height: 1;
}

.score__stars {
  margin-top: var(--sp-2);
  color: var(--c-neutral);
  letter-spacing: .12em;
}

.score__count {
  margin: var(--sp-2) 0 var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

.score__bars {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
}

.score__row {
  display: grid;
  /* последняя колонка шире прежней: в ней и количество отзывов, и процент */
  grid-template-columns: 1rem minmax(0, 1fr) 4.75rem;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.score__row dd {
  margin: 0;
  text-align: right;
}

/* доля — вторична по отношению к количеству отзывов */
.score__pct { opacity: .65; }

.score__line {
  height: .1875rem;
  background: var(--c-surface-2);
  border-radius: .1875rem;
  overflow: hidden;
}

.score__line span {
  display: block;
  height: 100%;
  background: var(--c-neutral);
}

.pdp-reviews__list {
  display: grid;
  gap: var(--sp-6);
}

.pdp-review {
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}

.pdp-review:last-child { border-bottom: 0; padding-bottom: 0; }

.pdp-review__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.pdp-review__author { font-weight: 500; font-size: var(--fs-sm); }

.pdp-review__date { font-size: var(--fs-xs); color: var(--c-ink-2); }

.pdp-review__stars {
  color: var(--c-neutral);
  letter-spacing: .12em;
  font-size: var(--fs-sm);
}

.pdp-review__params {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
}

.pdp-review__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* --- Липкая панель покупки на мобильном --------------------------------------------------- */

.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dropdown);
  display: none;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--container-pad);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  transform: translateY(100%);
  transition: transform var(--t-base) var(--ease);
}

.buybar[data-visible] { transform: translateY(0); }

.buybar__price {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.buybar__old {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-ink-3);
}

.buybar .btn { flex: 1; }

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

@media (max-width: 1023px) {
  .pdp__grid { grid-template-columns: minmax(0, 1fr); }

  .pdp__info { position: static; }

  .pdp__details-grid,
  .pdp-reviews__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* Галерея становится лентой с прокруткой: колонка миниатюр
     на узком экране съедает половину кадра. */
  .gallery { grid-template-columns: minmax(0, 1fr); }

  .gallery__rail { display: none; }

  /* лента листается пальцем — стрелки и «рука» тут лишние */
  .gallery__arrow { display: none; }

  .gallery__stage { cursor: auto; }

  .gallery__stage {
    aspect-ratio: auto;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    background: none;
    border-radius: 0;
  }

  .gallery__stage::-webkit-scrollbar { display: none; }

  .gallery__slide {
    position: static;
    flex: 0 0 100%;
    aspect-ratio: 3 / 4;
    opacity: 1;
    scroll-snap-align: start;
    background: var(--c-surface);
    border-radius: var(--radius);
  }

  .gallery__dots {
    display: flex;
    justify-content: center;
    gap: .375rem;
    margin-top: var(--sp-3);
  }

  .gallery__dots span {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--c-line-strong);
    transition: background var(--t-fast) var(--ease);
  }

  .gallery__dots span[data-active] { background: var(--c-ink); }

  .pdp__title { margin-top: var(--sp-4); }

  .pdp__wholesale {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-2);
  }

  .buybar { display: flex; }

  /* место под липкую панель, иначе она перекрывает подвал */
  body.has-buybar { padding-bottom: 4.5rem; }
}

/* --- Ответ магазина на отзыв ---------------------------------------------- */

.pdp-review__reply {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--radius);
}

.pdp-review__reply-head {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-ink);
}

.pdp-review__reply-text {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-ink-2);
}

/* --- Форма отзыва --------------------------------------------------------- */

.review-form { margin-bottom: var(--sp-8); }

.review-form__note {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.review-form__body {
  display: grid;
  gap: var(--sp-4);
  max-width: 34rem;
  margin-top: var(--sp-4);
}

/* Оценка звёздами: подпись сверху, сами звёзды — отдельной строкой. Звёзды
   лежат в разметке от 5 к 1, поэтому соседний селектор красит выбранную и все
   младшие; row-reverse возвращает читателю привычный порядок слева направо. */
.rating-input {
  border: 0;
  padding: 0;
  margin: 0;
}

.rating-input legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.rating-input__stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--sp-1);
}

/* клип вместо opacity: поле остаётся фокусируемым и доступным скринридеру */
.rating-input input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.rating-input label {
  display: grid;
  place-items: center;
  padding: var(--sp-1);
  color: var(--c-line-strong);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label { color: var(--c-accent); }

.rating-input label:hover { transform: translateY(-1px); }

.rating-input input:focus-visible + label {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* --- Страница отзывов о товаре ---------------------------------------------
   Служебная страница, а не витринная: заголовок здесь только называет предмет
   разговора, поэтому кегль на ступень ниже, чем на страницах о компании и
   доставке — иначе название модели в кавычках занимает три строки. */

/* Шапке отдана вся ширина контейнера: «Отзывы о модели «Название (42-54)»»
   занимает ~834 px из 1368 и встаёт в одну строку. Длинные названия перенесутся
   сами — жёсткого nowrap здесь нет, иначе строка вылезала бы за контейнер. */
.page--reviews .page__head {
  max-width: none;
  margin-bottom: var(--sp-8);
}

.page--reviews .page__head h1 {
  /* тот же размер, что у остальных внутренних страниц (page.css) */
  font-size: 2.6rem;
  margin-top: 0;
}

/* Пустая страница отзывов — единственный блок на экране, поэтому в отличие от
   пустой корзины ему дана подложка: без неё текст висит посреди белого поля. */
.blank--reviews {
  padding: var(--sp-16) var(--sp-8);
  background: var(--c-surface);
  border-radius: var(--radius);
}

/* на тёплой подложке --c-ink-2 даёт 4.64:1 — берём тот же затемнённый тон,
   что у оптовой плашки, и заодно даём тексту нормальную длину строки */
.blank--reviews p {
  max-width: 30rem;
  color: var(--c-ink-on-soft);
}

.blank--reviews .blank__icon {
  color: var(--c-accent);
  background: var(--c-bg);
}

/* Форма отзыва внутри пустого состояния: кнопка по центру, раскрытая форма —
   слева направо, как обычная форма, но не шире читаемой колонки. */
.blank--reviews .review-form__body {
  gap: var(--sp-6);
  margin: var(--sp-8) auto 0;
  text-align: left;
}

/* В обычных формах под полем зарезервировано место для ошибки, чтобы разметка
   не прыгала при проверке на лету. Здесь проверка серверная, страница и так
   перерисовывается — резерв только рвёт ритм блока. */
.blank--reviews .field-row { padding-bottom: 0; }

@media (max-width: 640px) {
  /* на узком экране 40 px дают три строки заголовка — забирают весь первый экран */
  .page--reviews .page__head h1 { font-size: 1.75rem; }

  .blank--reviews { padding: var(--sp-12) var(--sp-6); }

  /* в столбик кнопки одной ширины читаются как список действий, а не как обрывки */
  .blank--reviews .blank__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Быстрый просмотр из сетки -------------------------------------------------- */

.quick-view {
  width: min(52rem, 100vw - var(--sp-8));
  /* dvh, а не vh: на телефоне 100vh считается по экрану без адресной строки,
     и окно оказывалось выше видимой части — верх уезжал за край. */
  max-height: min(44rem, 100vh - var(--sp-8));
  max-height: min(44rem, 100dvh - var(--sp-8));
  padding: 0;
  /* fixed и inset задаём сами: без них окно привязано к странице, а не к
     экрану, и с прокрученной выдачи открывалось выше видимой области.
     margin: auto центрирует его в этих границах. */
  position: fixed;
  inset: 0;
  margin: auto;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 1.5rem 3rem rgb(28 24 21 / .22);
  overflow: auto;
}

.quick-view::backdrop { background: rgb(28 24 21 / .45); }

.quick-view__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  background: var(--c-bg);
  border-radius: var(--radius-pill);
}

.quick {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--sp-8);
  padding: var(--sp-6);
}

.quick__media {
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}

.quick__media img {
  display: block;
  width: 100%;
  height: auto;
}

.quick__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /* заголовок и цена сверху, кнопка внизу — как в карточке товара */
  align-content: start;
}

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

.quick__price .price { font-size: var(--fs-h3); }

.quick__tiers {
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.quick__buy {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.quick__buy .btn { flex: 1; min-width: 10rem; }

/* размеры списком: подпись над полем, как у обычной формы */
.quick__size-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.quick__size {
  width: 100%;
  padding-block: var(--sp-3);
  font-size: var(--fs-body);
}

.quick__more {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}

.quick__loading {
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  color: var(--c-ink-2);
}

@media (max-width: 767px) {
  .quick {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-4);
  }

  /* на узком экране фото занимает пол-экрана и отжимает выбор вниз */
  .quick__media { max-width: 12rem; }
}