/* ==========================================================================
   Сторінка товару: галерея, інформація, блок купівлі, характеристики,
   застосовність, схожі товари, нижня смужка на телефоні (RULES.md П4–П20)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Головний блок: галерея | назва, ключові характеристики (+ купівля на менших екранах)
   -------------------------------------------------------------------------- */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  padding: var(--s-6);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.product--state {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

/* --- Галерея --- */
.pgallery {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.pgallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  background: var(--c-media);
  overflow: hidden;
  /* multiply фото — лише всередині блоку */
  isolation: isolate;
}

/* Стрічка фото: свайп на телефоні, мініатюри й стрілки клавіатури на ПК */
.pgallery__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.pgallery__track:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
  border-radius: inherit;
}

.pgallery__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.pgallery__slide .pcard__img {
  padding: var(--s-10);
}

.pgallery__slide .pcard__ph svg.lucide {
  width: 72px;
  height: 72px;
  stroke-width: 1;
}

.pgallery .pcard__badges {
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
}

.pgallery__slide .pcard__img {
  cursor: pointer;
}

/* «Збільшити» — біла кнопка в правому нижньому куті фото */
.pgallery__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
}

.pgallery__zoom:hover {
  background: var(--c-hover-on-bg);
  box-shadow: none;
}

.pgallery__main > .sk {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.pgallery__thumbs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
}

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

/* Мініатюра: активна — помаранчеве кільце (тінь, не рамка) */
.pgallery__thumb {
  flex: none;
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: var(--r-lg);
  background: var(--c-media);
  isolation: isolate;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.pgallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.pgallery__thumb:hover {
  box-shadow: inset 0 0 0 2px var(--c-active);
}

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

.pgallery__thumb.is-active {
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

/* --- Інформація --- */
.pinfo {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.pinfo__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pinfo__title {
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.pinfo__key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.pinfo__key .specs {
  align-self: stretch;
}

.pinfo__key .btn svg.lucide {
  transition: transform var(--t) var(--ease);
}

.pinfo__key .btn:hover svg.lucide {
  transform: translateY(2px);
}

/* --------------------------------------------------------------------------
   Блок купівлі: права панель (ПК) / у контенті (менші екрани). Дві групи:
   1) «Купівля» — сірий блок: ціна + наявність в одному рядку, кнопки, сумісність з авто;
   2) «Доставка та оплата» — список рядків з тонкими роздільниками
   -------------------------------------------------------------------------- */
.pbuy {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.panel--buy .pbuy {
  padding: var(--s-4);
}

.pbuy--sk > .sk {
  border-radius: var(--r-lg);
}

.pbuy__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--c-surface-2);
}

/* Ціна зліва, наявність справа — по верхньому краю ціни */
.pbuy__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  min-width: 0;
}

.pbuy__head .status {
  min-height: 1.3em;
  padding-top: 1px;
}

.pbuy__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pbuy__old {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-14);
  line-height: 1.3;
  color: var(--c-text-3);
  white-space: nowrap;
}

.pbuy__old s {
  text-decoration-thickness: 1px;
}

.pbuy__now {
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pbuy__price.is-sale .pbuy__now {
  color: var(--c-danger);
}

.pbuy__price.is-muted .pbuy__now {
  color: var(--c-text-3);
}

.pbuy__actions {
  display: flex;
  gap: var(--s-2);
}

.pbuy__actions .buy {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.pbuy__actions .buy > .btn,
.pbuy__actions .buy > .stepper {
  height: var(--control-h-lg);
  font-size: var(--fs-15);
}

/* Біла кнопка на сірому фоні — hover нейтральний, темніший */
.pbuy__main .qv__fav:not(.is-active):hover {
  background: var(--c-hover-on-bg);
  box-shadow: none;
}

/* Сумісність з авто — біла картка-кнопка всередині сірого блоку */
.pfit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
  text-align: left;
  transition: box-shadow var(--t) var(--ease), transform var(--t-fast) var(--ease);
}

.pfit:hover {
  box-shadow: var(--sh-md);
}

.pfit:active {
  transform: scale(0.99);
}

.pfit__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--c-info-soft);
  color: var(--c-info);
}

.pfit__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--c-text-3);
}

.pfit__text b {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.pfit__chev {
  flex: none;
  color: var(--c-text-3);
  transition: transform var(--t) var(--ease);
}

.pfit:hover .pfit__chev {
  transform: translateX(2px);
}

.pfit--ok .pfit__ico {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.pfit--ok .pfit__text b {
  color: var(--c-success);
}

.pfit--no .pfit__ico {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.pfit--no .pfit__text b {
  color: var(--c-warning);
}

/* --- Доставка та оплата --- */
.pterms {
  display: flex;
  flex-direction: column;
}

.pterms__title {
  padding-bottom: var(--s-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--c-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pterms__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  box-shadow: inset 0 -1px 0 var(--c-line);
}

.pterms__row:last-child {
  padding-bottom: 0;
  box-shadow: none;
}

.pterms__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--c-info-soft);
  color: var(--c-info);
}

.pterms__ico--np {
  background: var(--c-danger-soft);
}

.pterms__ico img {
  display: block;
}

.pterms__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-13);
  line-height: 1.35;
  color: var(--c-text-3);
}

.pterms__text b {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* Заголовок рядка зліва, значення (ціна доставки) справа — в одному рядку */
.pterms__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.pterms__val {
  flex: none;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-text-2);
  white-space: nowrap;
}

/* Повернення і гарантія — коротко, в один рядок */
.pterms__row--pair {
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--c-text-2);
}

.pterms__row--pair svg.lucide {
  color: var(--c-success);
}

/* Вузька права панель: компактніші відступи, ціна і наявність одна під одною */
.panel--buy .pbuy__main {
  padding: var(--s-3);
}

.panel--buy .pfit {
  gap: 10px;
  padding-right: 8px;
}

/* Вузька права панель: ціна і наявність одна під одною */
.panel--buy .pbuy__head {
  flex-direction: column;
  gap: var(--s-2);
}

/* У контенті (екрани <1280) — той самий блок */
.pbuy--inline {
  display: none;
}

/* --------------------------------------------------------------------------
   Секції під товаром
   -------------------------------------------------------------------------- */
.pblock {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.pblock__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.pblock__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.pblock__count {
  height: 22px;
  padding: 0 8px;
  font-size: var(--fs-13);
}

.pblock__note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  color: var(--c-success);
}

.pblock .fits {
  padding: 0;
}

/* Застосовність — сірі теги: не кнопки, без білого фону й тіні, без hover */
.fit-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h-sm);
  padding: 0 12px;
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-text-2);
  white-space: nowrap;
}

/* Марка обраного авто — зелена з галочкою */
.fit-tag--ok {
  background: var(--c-success-soft);
  color: var(--c-success);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Переглядач фото — на весь екран: темний фон, фото по центру, стрілки по боках,
   угорі назва, лічильник і хрестик, унизу мініатюри (ПК і телефон однаково)
   -------------------------------------------------------------------------- */
.modal--zoom {
  grid-template-columns: minmax(0, 1fr);
}

.modal--zoom.is-open .modal__backdrop {
  background: rgb(10, 13, 20);
}

/* Вікно = весь екран, прозоре: видно лише темний фон (селектор сильніший за «шторку» телефона) */
.modal.modal--zoom[data-variant="center"] .modal__dialog {
  place-self: stretch;
  width: 100%;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--t) var(--ease), transform var(--t-slow) var(--ease-ios);
}

.modal.modal--zoom[data-variant="center"].is-open .modal__dialog {
  opacity: 1;
  transform: none;
}

.modal.modal--zoom[data-variant="center"] .modal__handle {
  display: none;
}

.modal.modal--zoom .modal__head {
  min-height: 0;
  padding: 16px 16px 8px 24px;
  box-shadow: none;
  color: #fff;
}

.modal--zoom .modal__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.86);
}

.zoom__count {
  flex: none;
  /* Та сама висота, що й у хрестика поруч */
  height: var(--control-h);
  padding: 0 12px;
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}

/* Кнопки на темному фоні — напівпрозорі світлі, hover світліший */
/* Хрестик — квадратний, не стискається довгою назвою */
.modal--zoom .modal__head .btn {
  flex: none;
  width: var(--control-h);
  height: var(--control-h);
}

.modal--zoom .modal__head .btn,
.zoom__nav {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

.modal--zoom .modal__head .btn:hover,
.zoom__nav:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  box-shadow: none;
}

.modal--zoom .modal__body {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.zoom {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.zoom__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.zoom__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.zoom__track:focus-visible {
  outline: none;
}

/* Слайд на всю ширину; місце по боках — під стрілки */
.zoom__slide {
  display: grid;
  place-items: center;
  flex: 0 0 100%;
  height: 100%;
  padding: 16px 96px;
  scroll-snap-align: start;
}

.zoom__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--r-xl);
  background: #fff;
}

.zoom__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 52px;
  height: 52px;
  translate: 0 -50%;
  transition: opacity var(--t) var(--ease), background-color var(--t-fast), transform var(--t-fast);
}

.zoom__nav svg.lucide {
  width: 24px;
  height: 24px;
}

.zoom__nav--prev {
  left: 24px;
}

.zoom__nav--next {
  right: 24px;
}

/* На крайньому фото відповідна стрілка ховається */
.zoom__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.zoom__thumbs {
  display: flex;
  /* Мало фото — по центру; багато — гортаються з початку */
  justify-content: safe center;
  flex: none;
  gap: var(--s-2);
  padding: 8px 24px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.zoom__thumbs .pgallery__thumb {
  background: #fff;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.zoom__thumbs .pgallery__thumb:hover,
.zoom__thumbs .pgallery__thumb.is-active {
  opacity: 1;
}

.zoom__thumbs .pgallery__thumb.is-active {
  box-shadow: inset 0 0 0 2px var(--c-accent);
}

.psection {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* Нижня смужка — лише на телефоні */
.pbar {
  display: none;
}

/* --------------------------------------------------------------------------
   Адаптивність
   -------------------------------------------------------------------------- */
/* Характеристики у два стовпчики; «зебра» — по рядках обох стовпчиків */
@media (min-width: 1024px) {
  .specs--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-6);
  }

  .specs--cols .specs__row:nth-child(odd) {
    background: none;
  }

  .specs--cols .specs__row:nth-child(4n + 1),
  .specs--cols .specs__row:nth-child(4n + 2) {
    background: var(--c-surface-2);
  }
}

@media (max-width: 1439px) {
  .product {
    gap: var(--s-6);
  }
}

/* Права панель ховається — купівля переходить у контент */
@media (max-width: 1279px) {
  .shell--product .panel--buy {
    display: none;
  }

  .pbuy--inline {
    display: flex;
  }
}

@media (max-width: 1023px) {
  .pinfo__title {
    font-size: var(--fs-22);
  }

}

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

  .pgallery {
    gap: var(--s-2);
  }

  .pgallery__slide .pcard__img {
    padding: var(--s-6);
  }

  .pgallery .pcard__badges {
    top: 10px;
    left: 10px;
  }

  /* Переглядач на телефоні — так само на весь екран, стрілки менші */
  .modal.modal--zoom .modal__head {
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px 16px;
  }

  .zoom__slide {
    padding: 8px 0;
  }

  .zoom__nav {
    width: 40px;
    height: 40px;
  }

  .zoom__nav--prev {
    left: 8px;
  }

  .zoom__nav--next {
    right: 8px;
  }

  .zoom__thumbs {
    justify-content: safe center;
    padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  }

  .zoom__thumbs .pgallery__thumb {
    width: 52px;
    height: 52px;
  }

  .pgallery__zoom {
    right: 8px;
    bottom: 8px;
  }

  .pgallery__thumb {
    width: 56px;
    height: 56px;
    padding: 4px;
  }

  .pinfo {
    gap: var(--s-4);
    padding: 0 var(--s-1) var(--s-1);
  }

  .pinfo__title {
    font-size: var(--fs-20);
  }

  .pbuy__main {
    padding: var(--s-3);
    gap: var(--s-3);
  }

  .pblock {
    padding: var(--s-4);
    gap: var(--s-3);
  }

  .pblock__title {
    font-size: var(--fs-18);
  }

  .psection {
    gap: var(--section-gap);
  }

  /* Крихти: назва товару є в заголовку одразу під ними — останній пункт на телефоні не дублюємо */
  .shell--product .crumbs__current,
  .shell--product .crumbs > svg.lucide:has(+ .crumbs__current) {
    display: none;
  }

  /* Нижня смужка «ціна + Купити»: виїжджає, коли кнопка купівлі в контенті пішла з екрана */
  .pbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--c-surface);
    box-shadow: 0 -1px 0 var(--c-line), 0 -10px 24px -16px rgba(16, 24, 40, 0.22);
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform var(--t-slow) var(--ease-ios), visibility 0s linear var(--t-slow);
  }

  .pbar.is-shown {
    transform: none;
    visibility: visible;
    transition: transform var(--t-slow) var(--ease-ios), visibility 0s;
  }

  .pbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
  }

  .pbar .pbuy__price {
    min-width: 0;
  }

  .pbar .pbuy__old {
    font-size: var(--fs-12);
  }

  .pbar .pbuy__old .badge {
    display: none;
  }

  .pbar .pbuy__now {
    font-size: var(--fs-20);
  }

  .pbar .buy {
    width: 160px;
  }

  .pbar .buy > .btn,
  .pbar .buy > .stepper {
    height: var(--control-h-lg);
  }

  /* Місце під смужкою внизу сторінки — заброньоване заздалегідь (без зсувів) */
  .page-product .footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body.has-pbar .toasts {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pbar,
  .pbar.is-shown {
    transition: none;
  }
}

/* Товар не знайдено / помилка — купувати нічого, права панель лишає лише своє місце в сітці */
.is-product-missing .panel--buy {
  visibility: hidden;
}

/* Лічильник біля «Схожі товари»: заголовок майже з малих літер — центруємо по середині тексту,
   а не по великих літерах (без зсуву вгору, як у h1 каталогу); на телефоні — під менший шрифт */
.psection .section-head .page-head__count {
  translate: none;
}

@media (max-width: 767px) {
  .psection .section-head .page-head__count {
    height: 22px;
    padding: 0 8px;
  }
}