/* AUTOSTYLE SHOP — страница товара (мокап).
   Канон: ноль hex (только var), отступы только var(--shop-s-*),
   все классы страницы — с префиксом pdp-. Подключать после storefront.css. */

/* ---------- крошки ---------- */
.pdp-breadcrumbs { padding-block: var(--shop-s-4); font-size: 13px; color: var(--shop-text-muted); }
.pdp-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--shop-s-2); }
.pdp-breadcrumbs li { display: flex; align-items: center; gap: var(--shop-s-2); }
.pdp-breadcrumbs li + li::before { content: '/'; color: var(--shop-border-strong); }
.pdp-breadcrumbs a { padding-block: var(--shop-s-2); }
.pdp-breadcrumbs a:hover { color: var(--shop-link); }
.pdp-breadcrumbs [aria-current='page'] { color: var(--shop-text); font-weight: 500; }

/* ---------- верхний блок: галерея + покупка ---------- */
.pdp-top {
  display: grid;
  gap: var(--shop-s-8);
  padding-block: var(--shop-s-2) var(--shop-s-16);
}
@media (min-width: 1024px) {
  .pdp-top { grid-template-columns: 6fr 5fr; gap: var(--shop-s-12); align-items: start; }
}

/* галерея */
.pdp-gallery__main {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-lg);
  background: var(--shop-bg);
  overflow: hidden;
}
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--shop-s-6); }
.pdp-gallery__thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--shop-s-3);
  margin-top: var(--shop-s-3);
}
.pdp-thumb {
  aspect-ratio: 1 / 1;
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-md);
  background: var(--shop-bg);
  overflow: hidden;
  transition: border-color var(--shop-duration-base) var(--shop-ease-out);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: var(--shop-s-2); }
.pdp-thumb:hover { border-color: var(--shop-border-strong); }
.pdp-thumb.is-active { border-color: var(--shop-accent); box-shadow: inset 0 0 0 1px var(--shop-accent); }

/* колонка покупки */
.pdp-buy__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--shop-s-2) var(--shop-s-3);
  font-size: 13px;
}
.pdp-buy__brand {
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-wide);
  color: var(--shop-text-muted);
}
.pdp-buy__rating { font-weight: 600; color: var(--shop-text); }
.pdp-buy__rating::before { content: '★ '; color: var(--c-bordo); }
.pdp-buy__reviews-link { color: var(--shop-link); text-decoration: underline; padding-block: var(--shop-s-2); }
.pdp-buy__reviews-link:hover { color: var(--shop-accent); }

.pdp-buy__title {
  margin: var(--shop-s-3) 0 0;
  font-family: var(--shop-font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.3;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
}

/* цена */
.pdp-price {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--shop-s-3);
  margin-top: var(--shop-s-4);
}
.pdp-price del { color: var(--shop-text-muted); font-size: 16px; }
.pdp-price__now { font-size: clamp(1.7rem, 3vw, 2rem); font-weight: 800; color: var(--shop-text); }
.pdp-price__badge {
  padding: var(--shop-s-1) var(--shop-s-2);
  border-radius: var(--shop-radius-sm);
  background: var(--c-bordo); color: var(--c-paper);
  font-size: 13px; font-weight: 700;
}

/* наличие */
.pdp-stock {
  display: inline-flex; align-items: center; gap: var(--shop-s-2);
  margin-top: var(--shop-s-3);
  font-size: 14px; font-weight: 600;
  color: var(--c-success);
}
.pdp-stock::before {
  content: '';
  width: var(--shop-s-2); height: var(--shop-s-2);
  border-radius: var(--shop-radius-full);
  background: var(--c-success);
}

/* плашка «оплата частинами monobank» */
.pdp-parts {
  display: flex; align-items: center; gap: var(--shop-s-3);
  margin-top: var(--shop-s-5);
  padding: var(--shop-s-4) var(--shop-s-5);
  border-radius: var(--shop-radius-md);
  background: var(--c-bordo-pastel);
  color: var(--shop-text);
}
.pdp-parts img { width: var(--shop-s-6); height: var(--shop-s-6); flex: 0 0 auto; border-radius: var(--shop-radius-sm); }
.pdp-parts__main { display: block; font-weight: 700; font-size: 15px; }
.pdp-parts__note { display: block; margin-top: var(--shop-s-1); font-size: 13px; color: var(--c-bordo); }

/* выбор температуры — радио-чипы */
.pdp-option { margin-top: var(--shop-s-6); border: 0; padding: 0; }
.pdp-option legend {
  padding: 0; margin-bottom: var(--shop-s-2);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
  color: var(--shop-text-muted);
}
.pdp-chips { display: flex; flex-wrap: wrap; gap: var(--shop-s-2); }
.pdp-chip { position: relative; }
/* сам input скрыт визуально (не display:none — фокус и :checked работают) */
.pdp-chip input {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pdp-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--shop-s-2) var(--shop-s-5);
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background var(--shop-duration-base), color var(--shop-duration-base), border-color var(--shop-duration-base);
}
.pdp-chip span:hover { border-color: var(--shop-accent); }
.pdp-chip input:checked + span {
  background: var(--shop-accent); color: var(--shop-accent-on);
  border-color: var(--shop-accent);
}
.pdp-chip input:focus-visible + span { outline: 2px solid var(--shop-focus-ring); outline-offset: 2px; }

/* количество + кнопки */
.pdp-cta { display: flex; flex-wrap: wrap; gap: var(--shop-s-3); margin-top: var(--shop-s-6); }
.pdp-qty {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  overflow: hidden;
}
.pdp-qty button {
  width: 48px; min-height: 48px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 600;
  color: var(--shop-text-muted);
  transition: color var(--shop-duration-base), background var(--shop-duration-base);
}
.pdp-qty button:hover { color: var(--shop-text); background: var(--shop-bg-alt); }
.pdp-qty input {
  width: 48px;
  border: 0; text-align: center;
  font: inherit; font-weight: 700;
  color: var(--shop-text); background: var(--shop-bg);
}
.pdp-qty input:focus { outline: none; }
.pdp-cta__cart { flex: 1 1 auto; }
.pdp-fav {
  width: 48px; min-height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  color: var(--shop-text-muted);
  transition: color var(--shop-duration-base), border-color var(--shop-duration-base);
}
.pdp-fav:hover { color: var(--c-bordo); border-color: var(--c-bordo); }
.pdp-cta__oneclick { width: 100%; }

/* блок доверия */
.pdp-trust {
  margin-top: var(--shop-s-6);
  padding: var(--shop-s-4) var(--shop-s-5);
  border-radius: var(--shop-radius-md);
  background: var(--shop-bg-alt);
}
.pdp-trust__text { margin: 0; font-size: 14px; line-height: 1.6; }
.pdp-trust__text a { color: var(--shop-link); text-decoration: underline; font-weight: 600; }
.pdp-trust__text a:hover { color: var(--shop-accent); }
.pdp-trust__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--shop-s-2) var(--shop-s-5);
  margin: var(--shop-s-3) 0 0; padding: 0;
  list-style: none;
  font-size: 13px; color: var(--shop-text-muted);
}
.pdp-trust__meta li { display: flex; align-items: center; gap: var(--shop-s-2); }
.pdp-trust__meta li::before {
  content: '';
  width: var(--shop-s-4); height: 2px; flex: 0 0 auto;
  border-radius: var(--shop-radius-full);
  background: var(--c-ice-deep);
}

/* ---------- липкая навигация по странице ---------- */
.pdp-subnav {
  position: sticky; top: var(--shop-header-h);
  z-index: calc(var(--shop-z-header) - 1);
  background: var(--shop-bg);
  border-bottom: 1px solid var(--shop-border);
}
@media (min-width: 768px) { .pdp-subnav { top: var(--shop-header-h-md); } }
.pdp-subnav__inner { display: flex; gap: var(--shop-s-2); overflow-x: auto; }
.pdp-subnav a {
  display: inline-flex; align-items: center;
  min-height: 48px;
  padding: var(--shop-s-2) var(--shop-s-3);
  border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--shop-text-muted);
  transition: color var(--shop-duration-base), border-color var(--shop-duration-base);
}
.pdp-subnav a:hover { color: var(--shop-text); }
.pdp-subnav a.is-active { color: var(--shop-text); border-bottom-color: var(--shop-accent); }
/* якоря приземляются ниже липких шапки и навигации */
.pdp-block, .pdp-columns__reviews, .pdp-related {
  scroll-margin-top: calc(var(--shop-header-h-md) + var(--shop-s-16));
}

/* ---------- секции описания ---------- */
.pdp-section__title {
  margin: 0 0 var(--shop-s-5);
  font-family: var(--shop-font-display); font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
}

/* нижняя часть: 2 колонки (описание/характеристики/доставка + отзывы) */
.pdp-columns { display: grid; gap: var(--shop-s-10); padding-block: var(--shop-s-10) var(--shop-s-16); }
@media (min-width: 1024px) {
  .pdp-columns { grid-template-columns: 7fr 5fr; gap: var(--shop-s-12); align-items: start; }
}
.pdp-columns__main { display: grid; gap: var(--shop-s-10); align-content: start; }

.pdp-desc p { margin: 0 0 var(--shop-s-4); font-size: 15px; line-height: 1.7; color: var(--shop-text); max-width: 68ch; }
.pdp-desc p:last-child { margin-bottom: 0; }

/* характеристики */
.pdp-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.pdp-specs th, .pdp-specs td {
  padding: var(--shop-s-3) 0;
  border-bottom: 1px solid var(--shop-border);
  text-align: left; vertical-align: top;
}
.pdp-specs th { font-weight: 400; color: var(--shop-text-muted); width: 50%; padding-right: var(--shop-s-4); }
.pdp-specs td { font-weight: 600; }

/* доставка и оплата */
.pdp-delivery ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--shop-s-3); }
.pdp-delivery li { display: flex; align-items: baseline; gap: var(--shop-s-3); font-size: 15px; line-height: 1.6; }
.pdp-delivery li::before {
  content: '';
  align-self: center;
  width: var(--shop-s-6); height: 2px; flex: 0 0 auto;
  border-radius: var(--shop-radius-full);
  background: var(--c-ice-deep);
}
.pdp-delivery__more {
  display: inline-block;
  margin-top: var(--shop-s-4);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--shop-tracking-brand);
  color: var(--shop-link);
  padding-block: var(--shop-s-2);
}
.pdp-delivery__more:hover { color: var(--shop-accent); }

/* ---------- отзывы (правая колонка) ---------- */
.pdp-reviews-panel {
  background: var(--shop-bg-alt);
  border-radius: var(--shop-radius-lg);
  padding: var(--shop-s-6);
}
.pdp-reviews-panel .pdp-section__title { margin-bottom: var(--shop-s-2); }

.pdp-reviews__summary { display: flex; align-items: center; gap: var(--shop-s-3); margin-bottom: var(--shop-s-5); }
.pdp-reviews__score { font-family: var(--shop-font-display); font-weight: 700; font-size: 2rem; }
.pdp-stars { color: var(--c-bordo); letter-spacing: 0.12em; font-size: 15px; }
.pdp-stars i { font-style: normal; color: var(--shop-border-strong); }
.pdp-reviews__count { font-size: 13px; color: var(--shop-text-muted); }

.pdp-review-list { display: grid; gap: var(--shop-s-4); }
.pdp-review {
  background: var(--shop-bg);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-md);
  padding: var(--shop-s-5);
}
.pdp-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--shop-s-2) var(--shop-s-3); }
.pdp-review__name { font-weight: 700; font-size: 15px; }
.pdp-review__date { font-size: 12px; color: var(--shop-text-muted); }
.pdp-review__text { margin: var(--shop-s-3) 0 0; font-size: 14px; line-height: 1.65; color: var(--shop-text); }

/* кнопка «Залишити відгук» раскрывает форму ниже */
.pdp-reviews__open { width: 100%; margin-top: var(--shop-s-5); }

/* форма отзыва (скрыта атрибутом hidden, пока отзывы есть) */
.pdp-review-form {
  margin-top: var(--shop-s-4);
  background: var(--shop-bg);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-lg);
  padding: var(--shop-s-6);
}
.pdp-review-form[hidden] { display: none; }
.pdp-review-form__title { margin: 0 0 var(--shop-s-4); font-size: 16px; font-weight: 700; }
.pdp-field { margin-bottom: var(--shop-s-4); }
.pdp-field label { display: block; margin-bottom: var(--shop-s-2); font-size: 13px; font-weight: 600; }
.pdp-field small { font-weight: 400; color: var(--shop-text-muted); }
.pdp-field input, .pdp-field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--shop-s-3) var(--shop-s-4);
  border: 1px solid var(--shop-border-strong);
  border-radius: var(--shop-radius-sm);
  font: inherit; font-size: 14px;
  color: var(--shop-text); background: var(--shop-bg);
}
.pdp-field textarea { min-height: 112px; resize: vertical; }
.pdp-field input:focus, .pdp-field textarea:focus {
  outline: none;
  border-color: var(--shop-focus-ring);
  box-shadow: inset 0 0 0 1px var(--shop-focus-ring);
}

/* радио-звёзды: DOM 5→1 + row-reverse, checked ~ label подсвечивает слева */
.pdp-rate { display: inline-flex; flex-direction: row-reverse; }
.pdp-rate input {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pdp-rate label {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 24px; line-height: 1;
  color: var(--shop-border-strong);
  cursor: pointer;
  transition: color var(--shop-duration-base);
}
.pdp-rate label:hover,
.pdp-rate label:hover ~ label,
.pdp-rate input:checked ~ label { color: var(--c-bordo); }
.pdp-rate input:focus-visible + label { outline: 2px solid var(--shop-focus-ring); outline-offset: -2px; border-radius: var(--shop-radius-sm); }
.pdp-review-form .storefront-btn { width: 100%; }

/* ---------- схожі товари ---------- */
.pdp-related { padding-block: var(--shop-s-16); }
.pdp-related__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--shop-s-4);
  margin-top: var(--shop-s-10);
}
@media (min-width: 1024px) { .pdp-related__grid { grid-template-columns: repeat(4, 1fr); } }

/* карточки: иконка корзины вместо «＋» */
.shop-card__cart svg { width: 20px; height: 20px; }

/* ---------- купують разом: мини-карточки ---------- */
.pdp-addons { padding-block: 0 var(--shop-s-16); }
.pdp-addons__grid { display: grid; gap: var(--shop-s-3); margin-top: var(--shop-s-6); }
@media (min-width: 768px) { .pdp-addons__grid { grid-template-columns: repeat(3, 1fr); } }
.pdp-addon {
  display: flex; align-items: center; gap: var(--shop-s-3);
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-md);
  background: var(--shop-bg);
  padding: var(--shop-s-3);
  transition: border-color var(--shop-duration-base), box-shadow var(--shop-duration-base);
}
.pdp-addon:hover { border-color: var(--shop-border-strong); box-shadow: var(--shop-shadow-md); }
.pdp-addon__img {
  width: var(--shop-s-16); height: var(--shop-s-16); flex: 0 0 auto;
  border: 1px solid var(--shop-border);
  border-radius: var(--shop-radius-sm);
  overflow: hidden;
  background: var(--shop-bg);
}
.pdp-addon__img img { width: 100%; height: 100%; object-fit: contain; padding: var(--shop-s-1); }
.pdp-addon__body { flex: 1 1 auto; min-width: 0; }
.pdp-addon__name { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; }
.pdp-addon__name:hover { color: var(--shop-link); }
.pdp-addon__price { display: block; margin-top: var(--shop-s-1); font-size: 15px; font-weight: 700; }
.pdp-addon__cart {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--shop-radius-sm);
  background: var(--shop-accent); color: var(--shop-accent-on);
  transition: background var(--shop-duration-base);
}
.pdp-addon__cart:hover { background: var(--shop-accent-hover); }
.pdp-addon__cart svg { width: 20px; height: 20px; }

/* ---------- нещодавно переглянуті ---------- */
.pdp-viewed { padding-block: 0 var(--shop-s-16); }
.pdp-viewed__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--shop-s-4);
  margin-top: var(--shop-s-6);
}
@media (min-width: 1024px) { .pdp-viewed__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- catbar: кнопка «Перегляд категорій» ровно в высоту строки ---------- */
/* без вертикальных паддингов кнопка тянется stretch-ем точно на высоту строки,
   а inset-линия сверху не даёт ей перекрывать нижний бордер хедера при зуме */
.storefront-catbar__toggle {
  padding-block: 0;
  min-height: 44px;
  box-shadow: inset 0 1px 0 var(--sf-frame-line);
}