/* Storefront product detail. One compact product surface above and one
   information surface below; shared components keep behavior consistent with
   catalog cards without duplicating their visual geometry. */

.product-page {
  padding-block: 18px 0;
}

.product-page__hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}

.product-block {
  min-width: 0;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: #0f1216;
}

.product-gallery {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.product-gallery.has-thumbs {
  --product-thumb-gap: 6px;
  --product-thumb-size: clamp(63.2px, calc((34vw - 24px) / 5), 87.2px);
  grid-template-columns: var(--product-thumb-size) minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
  align-items: stretch;
}

.product-gallery__stage {
  position: relative;
  display: grid;
  height: clamp(340px, 34vw, 460px);
  /* The breathing room around the photo belongs to the stage, not to the
     <img>. Padding on the image itself shrank the box that object-fit then
     centred the photo inside, while the stage's own centring still worked
     off the full box - the two disagreed, and the photo sat off-centre.
     With the padding here, the image simply fills what is left and
     object-fit: contain centres the photo in exactly that area. */
  /* Small on purpose: the product photos carry generous white margins of
     their own inside the frame, so a large padding here just stacked more
     empty white around an already-floating subject. */
  padding: clamp(8px, 1vw, 12px);
  /* Explicit track, not the implicit `auto` one: an auto row is sized by its
     content, so the image's own `height: 100%` had nothing definite to
     resolve against and fell back to `auto`. It then took the file's full
     500px height, fitted only by width, and `overflow: hidden` clipped the
     rest - which is what made a centred photo look pushed down. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 12px;
  background: var(--site-surface-light);
  outline: 1px solid rgba(255, 255, 255, .10);
  outline-offset: -1px;
  place-items: center;
}

.product-gallery.has-thumbs .product-gallery__stage {
  grid-column: 2;
  grid-row: 1;
}

.product-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  cursor: zoom-in;
}

.product-gallery__placeholder {
  width: 72px;
  height: 72px;
  color: #929991;
}

.product-gallery__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 21, 25, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: zoom-in;
  place-items: center;
  transition: background-color 120ms var(--site-ease), scale 120ms var(--site-ease);
}

.product-gallery__zoom:hover {
  background: rgba(40, 44, 50, .82);
}

.product-gallery__zoom:active {
  scale: .96;
}

.product-gallery__zoom svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--product-thumb-gap, 6px);
  overflow-x: auto;
  scrollbar-width: none;
}

.product-gallery.has-thumbs .product-gallery__thumbs {
  grid-column: 1;
  grid-row: 1;
  width: var(--product-thumb-size);
  height: clamp(340px, 34vw, 460px);
  max-height: clamp(340px, 34vw, 460px);
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.product-gallery__thumb {
  width: var(--product-thumb-size, 56px);
  height: var(--product-thumb-size, 56px);
  flex: 0 0 var(--product-thumb-size, 56px);
  padding: 4px;
  border: 1px solid var(--site-border);
  border-radius: 9px;
  background: var(--site-surface-light);
  cursor: pointer;
  transition: border-color 120ms var(--site-ease), box-shadow 120ms var(--site-ease);
}

.product-gallery__thumb:hover {
  border-color: var(--site-border-strong);
}

.product-gallery__thumb[aria-pressed="true"] {
  border-color: var(--site-accent);
  box-shadow: 0 0 0 2px rgba(139, 200, 80, .14);
}

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

.product-summary {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(24px, 2.35vw, 30px);
}

.product-page__favorite {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
}

.product-summary__meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  /* No bottom margin of its own: .product-summary__commerce below already
     brings 14px, and margins do not collapse inside a flex column, so any
     value here is added on top of it - which is what made the gap above the
     price larger than the 14px under it. */
  margin-block-end: 0;
  padding-inline-end: 48px;
}

.product-summary__stock {
  display: inline-flex;
  align-items: center;
}

.product-summary__stock .home-product-card__stock {
  min-height: 26px;
  padding: 6px 10px;
}

.product-summary__sku {
  color: var(--site-text-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.product-page__title {
  width: 100%;
  max-width: 1180px;
  margin: 0 0 14px;
  color: var(--site-text);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.14;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.product-summary__commerce {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-block-start: 14px;
}

.product-summary__prices {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
}

/* Discount and old price are one secondary pair next to the current price:
   the chip states the saving, the struck price backs it up underneath. */
.product-summary__compare {
  display: grid;
  justify-items: start;
  gap: 4px;
}

.product-summary__old-price {
  color: var(--site-text-subtle);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: line-through;
}

.product-summary__discount {
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(238, 97, 103, .12);
  color: var(--site-danger);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.product-summary__price {
  color: var(--site-text);
  font-size: clamp(26px, 2.35vw, 34px);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
}

.product-summary__price.is-discounted {
  color: var(--site-danger);
}

.product-summary__purchase {
  display: flex;
  width: 260px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-block-start: 14px;
  transition: gap 150ms cubic-bezier(0.2, 0, 0, 1);
}

.product-summary__purchase .home-product-card__quantity {
  width: 125px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 125px;
  grid-template-columns: 40px minmax(44px, 1fr) 40px;
  border-radius: 12px;
  transform-origin: center;
  transition:
    width 150ms cubic-bezier(0.2, 0, 0, 1),
    flex-basis 150ms cubic-bezier(0.2, 0, 0, 1),
    opacity 100ms ease-out,
    scale 150ms cubic-bezier(0.2, 0, 0, 1),
    border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.product-summary__purchase.is-in-cart {
  gap: 0;
}

.product-summary__purchase.is-in-cart .home-product-card__quantity {
  width: 0;
  flex-basis: 0;
  border-color: transparent;
  opacity: 0;
  scale: .96;
  pointer-events: none;
}

.product-summary__purchase .product-page__buy {
  width: 125px;
  min-width: 125px;
  flex: 0 0 125px;
  transition:
    width 150ms cubic-bezier(0.2, 0, 0, 1),
    min-width 150ms cubic-bezier(0.2, 0, 0, 1),
    flex-basis 150ms cubic-bezier(0.2, 0, 0, 1),
    gap 150ms cubic-bezier(0.2, 0, 0, 1),
    background-color 120ms var(--site-ease),
    scale 120ms var(--site-ease);
}

.product-summary__purchase.is-in-cart .product-page__buy {
  gap: 9px;
  width: 260px;
  min-width: 260px;
  flex-basis: 260px;
}

.product-summary__purchase .home-product-card__quantity-button,
.product-summary__purchase .home-product-card__quantity-input {
  width: 100%;
  height: 40px;
  min-height: 40px;
}

.product-summary__purchase .home-product-card__quantity-input {
  font-size: 14px;
  line-height: 40px;
}

.product-page__buy {
  /* min-width keeps the button from resizing when the label swaps to
     "Добавлено", which would otherwise shift the row on every click. */
  width: 100%;
  min-width: 120px;
  height: 42px;
  min-height: 42px;
  /* The collapsed cart icon still takes a gap slot; open it only with the icon. */
  gap: 0;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px;
}

.product-page__buy-icon {
  position: relative;
  display: inline-flex;
  width: 0;
  height: 19px;
  flex: 0 0 0;
  opacity: 0;
  scale: .25;
  filter: blur(4px);
  overflow: hidden;
  transition:
    width 150ms cubic-bezier(0.2, 0, 0, 1),
    flex-basis 150ms cubic-bezier(0.2, 0, 0, 1),
    opacity 150ms cubic-bezier(0.2, 0, 0, 1),
    scale 150ms cubic-bezier(0.2, 0, 0, 1),
    filter 150ms cubic-bezier(0.2, 0, 0, 1);
}

.product-summary__purchase.is-in-cart .product-page__buy-icon {
  width: 19px;
  flex-basis: 19px;
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

.product-page__buy svg {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

.product-page__buy-cart,
.product-page__buy-check {
  position: absolute;
  inset: 0;
}

.product-page__buy-check {
  display: none;
}

.product-page__buy:disabled {
  border-color: var(--site-border);
  background: var(--site-surface-soft);
  color: var(--site-text-subtle);
  cursor: not-allowed;
}

.product-summary__fulfillment {
  display: grid;
  gap: 10px;
  margin-block-start: 16px;
}

.product-summary__fulfillment[hidden] {
  display: none !important;
}

.product-summary__fulfillment-card {
  min-width: 0;
  padding: 13px 14px 14px;
  border: 1px solid var(--site-border);
  border-radius: 11px;
  background: var(--site-bg);
}

.product-summary__fulfillment-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-summary__fulfillment-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(139, 200, 80, .16);
  border-radius: 9px;
  background: rgba(139, 200, 80, .09);
  color: var(--site-accent);
  place-items: center;
}

.product-summary__fulfillment-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-summary__fulfillment-head h2 {
  margin: 0;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.product-summary__fulfillment-list {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.product-summary__fulfillment-list li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--site-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.product-summary__fulfillment-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--site-accent);
}

.product-summary__fulfillment-more {
  width: fit-content;
  color: var(--site-text-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 120ms var(--site-ease);
}

.product-summary__fulfillment-more:hover,
.product-summary__fulfillment-more:focus-visible {
  color: var(--site-accent);
  text-decoration: underline;
}

.product-page__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-block-start: 16px;
}

.product-page__details {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: #0f1216;
}

/* A long list scrolls inside the card instead of growing the page. */
.product-reviews {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-block-end: 20px;
  overflow: hidden;
}

.product-reviews__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 6px 14px;
}

/* Same pill as the details tabs, with one static active label. */
.product-reviews__header .product-reviews__tabs {
  margin: 0;
}

.product-reviews__title.product-detail-tabs__tab {
  margin: 0;
  cursor: default;
}

.product-detail-tabs__tab.is-active,
.product-detail-tabs__tab.is-active:hover {
  background: var(--site-accent);
  color: var(--site-accent-contrast);
}

/* Rating overview tile: big average + stars on the left, a short note on
   the right, split by a vertical rule. */
.product-reviews__overview {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  margin: 10px 20px 0;
  padding: 20px 24px;
  border: 1px solid var(--site-border);
  border-radius: 11px;
  background: var(--site-bg);
}

/* Score and note come from SSR/JS as siblings; flatten them into the
   overview grid so the auth prompt can take the note's column for guests. */
.product-reviews__overview-summary {
  display: contents;
}

.product-reviews__overview:has(> .product-reviews__auth:not([hidden])) .product-reviews__overview-note {
  display: none;
}

.product-reviews__overview > .product-reviews__auth {
  min-height: 0;
  padding: 0;
}

.product-reviews__score {
  display: grid;
  gap: 6px;
  padding-inline-end: 24px;
  border-inline-end: 1px solid var(--site-border);
}

.product-reviews__score-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.product-reviews__score .product-reviews__average {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.product-reviews__score .product-reviews__stars {
  gap: 6px;
}

.product-recent {
  margin-block-start: 16px;
  padding: 18px 20px 20px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-lg);
  background: #0f1216;
}

.product-recent[hidden] {
  display: none !important;
}

.product-recent__header {
  display: flex;
  min-height: 36px;
  align-items: center;
  margin-block-end: 12px;
}

.product-recent__header h2 {
  margin: 0;
  color: var(--site-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.product-recent__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1180px) {
  .product-recent__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .product-recent__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .product-recent__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .product-recent {
    padding: 14px;
  }

  .product-recent__grid {
    grid-template-columns: 1fr;
  }
}

.product-reviews__score .product-reviews__stars svg {
  width: 26px;
  height: 26px;
}

.product-reviews__basis {
  color: var(--site-text-muted);
  font-size: 13px;
}

.product-reviews__overview-note {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-reviews__overview-note strong {
  color: var(--site-text);
  font-size: 14px;
  font-weight: 750;
}

.product-reviews__overview-note span {
  color: var(--site-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.product-review-form__hint {
  color: var(--site-text-muted);
  font-size: 12px;
}

.product-review-form__counter {
  justify-self: end;
  color: var(--site-text-subtle);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}


.product-reviews__auth[hidden],
[data-product-review-cancel][hidden],
.product-review-form[hidden],
.product-review-form__error[hidden],
.product-reviews__notice[hidden] {
  display: none !important;
}

.product-reviews__stars {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  color: var(--site-accent);
}

.product-reviews__stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.product-reviews__stars .is-empty {
  color: var(--site-border-strong);
}

.product-reviews__average {
  color: var(--site-text);
  font-size: 14px;
  font-weight: 800;
}

.product-reviews__count {
  color: var(--site-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.product-reviews__notice {
  margin: 14px 20px 0;
  padding: 10px 12px;
  border: 1px solid rgba(139, 200, 80, .28);
  border-radius: 8px;
  background: rgba(139, 200, 80, .08);
  color: var(--site-accent);
  font-size: 13px;
  line-height: 1.4;
}

.product-reviews__notice.is-error {
  border-color: rgba(238, 97, 103, .28);
  background: rgba(238, 97, 103, .08);
  color: var(--site-danger);
}

.product-reviews__list {
  display: grid;
  max-height: 420px;
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 10px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  list-style: none;
}

.product-reviews__list:empty {
  display: none;
}

.product-reviews__item {
  min-width: 0;
  padding: 16px 24px;
  border: 1px solid var(--site-border);
  border-radius: 11px;
  background: var(--site-bg);
}

.product-reviews__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin-block-end: 7px;
}

.product-reviews__item-head .product-reviews__stars {
  order: 2;
  margin-inline-start: auto;
}

.product-reviews__author {
  color: var(--site-text);
  font-size: 13px;
  font-weight: 750;
}

.product-reviews__date {
  color: var(--site-text-subtle);
  font-size: 12px;
}

.product-reviews__text {
  margin: 0;
  color: var(--site-text-muted);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.product-reviews__composer {
  margin: 10px 20px 0;
  border: 1px solid var(--site-border);
  border-radius: 11px;
  background: var(--site-bg);
}

.product-reviews__auth {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
}

.product-reviews__item[hidden] {
  display: none;
}

/* Swap between a review and its edit form. */
.is-revealing {
  animation: product-review-reveal 220ms var(--site-ease) both;
}

@keyframes product-review-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

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

.product-reviews__edit {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--site-text-muted);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.product-reviews__edit:hover,
.product-reviews__edit:focus-visible {
  color: var(--site-accent);
}

/* Nothing to show below the list once the customer has reviewed. */
.product-reviews__composer:not(:has(> :not([hidden]))) {
  display: none;
}

.product-reviews__auth-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.product-reviews__auth-copy strong {
  color: var(--site-text);
  font-size: 13px;
  font-weight: 700;
}

.product-reviews__auth-copy span {
  color: var(--site-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.product-reviews__login {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  font-size: 12px;
}

.product-review-form {
  display: grid;
  gap: 16px;
  padding: 20px 24px 24px;
}

.product-review-form__head {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.product-review-form__title {
  color: var(--site-text);
  font-size: 17px;
  font-weight: 750;
}

.product-review-form__identity {
  margin: 0;
  color: var(--site-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.product-review-form__rating-field {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-review-form__rating-field legend,
.product-review-form__field > span {
  color: var(--site-text);
  font-size: 13px;
  font-weight: 650;
}

.product-review-form__rating {
  display: flex;
  width: fit-content;
  gap: 2px;
}

.product-review-form__rating label {
  display: grid;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: var(--site-border-strong);
  cursor: pointer;
  place-items: center;
  transition: color 120ms var(--site-ease), background-color 120ms var(--site-ease);
}

.product-review-form__rating label.is-filled {
  color: var(--site-accent);
  background: rgba(139, 200, 80, .08);
}

@media (hover: hover) {
  .product-review-form__rating label:hover {
    color: var(--site-accent);
    background: rgba(139, 200, 80, .08);
  }
}

.product-review-form__rating svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.product-review-form__rating input:focus-visible + label {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.product-review-form__field {
  display: grid;
  gap: 7px;
}

.product-review-form__field textarea {
  width: 100%;
  min-height: 88px;
  padding: 12px 14px;
  resize: vertical;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  outline: 0;
  background: var(--site-surface);
  color: var(--site-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 120ms var(--site-ease), box-shadow 120ms var(--site-ease);
}

.product-review-form__field textarea::placeholder {
  color: var(--site-text-subtle);
}

.product-review-form__field textarea:focus-visible {
  border-color: var(--site-accent);
  box-shadow: none;
}

.product-review-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-review-form__actions .site-button {
  min-height: 36px;
  padding-inline: 14px;
}

.product-review-form__error {
  margin: 0;
  color: var(--site-danger);
  font-size: 12px;
  line-height: 1.4;
}

/* Two-column desktop: reviews take their natural height and the details
   card stretches to the same row height, as in the design mockup. */
@media (min-width: 981px) {
  .product-page__info {
    align-items: stretch;
  }
}

/* If a product has neither attributes nor a description, .product-page__details
   stays hidden and drops out of grid flow - without this, reviews would sit
   in the first 1fr track instead of taking the row's full width. */
.product-page__details[hidden] + .product-reviews {
  grid-column: 1 / -1;
}

.product-page__details[hidden],
.product-detail-panel[hidden],
.product-detail-tabs[hidden],
.product-detail-tabs__tab[hidden] {
  display: none !important;
}

.product-detail-tabs {
  display: inline-flex;
  width: fit-content;
  flex: 0 0 auto;
  min-width: 0;
  gap: 0;
  margin: 14px 14px 0;
  padding: 3px;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  background: var(--site-surface);
  transition: border-color 120ms var(--site-ease);
}

.product-detail-tabs:hover {
  border-color: var(--site-border-strong);
}

.product-detail-tabs__tab {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--site-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 120ms var(--site-ease),
    color 120ms var(--site-ease);
}

.product-detail-tabs__tab:hover {
  background: var(--site-surface-raised);
  color: var(--site-text);
}

.product-detail-tabs__tab[aria-selected="true"] {
  background: var(--site-accent);
  color: var(--site-accent-contrast);
}

.product-detail-tabs__tab[aria-selected="true"]:hover {
  background: var(--site-accent-hover);
  color: var(--site-accent-contrast);
}

.product-detail-tabs__tab:focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 2px;
}

.product-detail-panel {
  min-width: 0;
  padding: 20px 28px 28px;
}

/* Spec table: one framed list with hairline dividers between plain rows,
   so even a single "Бренд" row reads as a table, not loose text. */
.product-detail-panel:has(> .product-specs) {
  padding: 18px 28px 28px;
}

.product-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
}

.product-specs__row {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(0, 1.25fr);
  gap: 14px;
  padding: 12px 16px;
}

.product-specs__row + .product-specs__row {
  border-block-start: 1px solid var(--site-border);
}

.product-specs dt {
  color: var(--site-text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.product-specs dd {
  margin: 0;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Compatible models: search + brand select above a framed, fixed-height
   scroll box (sticky column header) that
   loads more rows as it is scrolled. */
/* The panel lines up with the tab strip above it (same 14px inset) and is
   the size container for the column grid: brand/model widths are a share
   of the panel width (cqi), not of each grid's own width, so the header,
   the rows (narrower by the scrollbar) and the toolbar keep identical
   column starts. The toolbar uses that grid too (table border + padding =
   17px inset): the search spans brand + model, the brand picker starts
   exactly at the "Заводские коды" column and runs to the table's edge. */
.product-detail-panel[data-product-panel="models"] {
  --product-models-columns: minmax(0, 20cqi) minmax(0, 30cqi) minmax(0, 1fr);
  container-type: inline-size;
  padding: 16px 14px 14px;
}

.product-models__toolbar {
  display: grid;
  grid-template-columns: var(--product-models-columns);
  gap: 14px;
  margin-bottom: 14px;
  padding-inline: 17px;
}

.product-models__search {
  height: 42px;
  min-width: 0;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  outline: 0;
  background-color: var(--site-surface);
  color: var(--site-text);
  font: inherit;
  font-size: 14px;
  transition: border-color 120ms var(--site-ease);
}

.product-models__search {
  grid-column: 1 / 3;
  margin-inline-start: -17px;
  padding-inline: 14px;
}

/* No brand picker: the search takes the whole row. */
.product-models__toolbar:has(.product-models__brand[hidden]) .product-models__search {
  grid-column: 1 / -1;
  margin-inline-end: -17px;
}

.product-models__search::placeholder {
  color: var(--site-text-muted);
}

.product-models__brand {
  grid-column: 3;
  min-width: 0;
  margin-inline-end: -17px;
}

/* The shared site dropdown (components.css .catalog-sort__*), stretched to
   the toolbar's 42px field height and the control's width. */
.product-models__brand .catalog-sort__trigger {
  width: 100%;
  min-height: 42px;
  justify-content: space-between;
  padding-inline: 14px 12px;
  font-weight: 400;
}

.product-models__brand .catalog-sort__trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-models__brand .catalog-sort__menu {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.product-models__search:hover {
  border-color: var(--site-border-strong);
}

.product-models__search:focus-visible {
  border-color: var(--site-accent);
}

.product-models__brand[hidden],
.product-models__table[hidden],
.product-models__status[hidden] {
  display: none;
}

.product-models__table {
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
}

.product-models__head,
.product-models__row {
  display: grid;
  grid-template-columns: var(--product-models-columns);
  gap: 14px;
  padding: 11px 16px;
}

.product-models__head {
  border-block-end: 1px solid var(--site-border);
  background: var(--site-surface-soft);
  color: var(--site-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.product-models__scroll {
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--site-border) transparent;
}

.product-models__scroll:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: -2px;
}

.product-models__row {
  align-items: baseline;
  font-size: 14px;
  line-height: 1.4;
}

.product-models__row + .product-models__row {
  border-block-start: 1px solid var(--site-border);
}

.product-models__row {
  transition: background-color 120ms var(--site-ease);
}

.product-models__row:hover {
  background: var(--site-surface-raised);
}

.product-models__brand-name,
.product-models__codes {
  color: var(--site-text-muted);
  overflow-wrap: anywhere;
}

.product-models__model {
  color: var(--site-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

a.product-models__model {
  justify-self: start;
  text-decoration: none;
  transition: color 120ms var(--site-ease);
}

a.product-models__model:hover {
  color: var(--site-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.product-models__model:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.product-models__codes {
  font-size: 13px;
}

.product-models__status {
  margin: 10px 2px 0;
  color: var(--site-text-muted);
  font-size: 13px;
}

@media (max-width: 520px) {
  .product-models__toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-inline: 0;
  }

  .product-models__search,
  .product-models__brand,
  .product-models__toolbar:has(.product-models__brand[hidden]) .product-models__search {
    grid-column: 1;
    margin-inline: 0;
  }

  .product-models__head {
    display: none;
  }

  .product-models__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 4px 12px;
  }

  .product-models__codes {
    grid-column: 1 / -1;
  }

  .product-models__codes:empty {
    display: none;
  }

  .product-models__scroll {
    max-height: 360px;
  }
}

.product-description {
  max-width: 1080px;
  color: #c4cad2;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.product-description > :first-child {
  margin-block-start: 0;
}

.product-description > :last-child {
  margin-block-end: 0;
}

.product-description p,
.product-description ul,
.product-description ol,
.product-description table,
.product-description h2,
.product-description h3,
.product-description h4 {
  margin-block: 0 14px;
}

.product-description h2,
.product-description h3,
.product-description h4 {
  color: var(--site-text);
  font-weight: 750;
  line-height: 1.3;
}

.product-description ul,
.product-description ol {
  padding-inline-start: 22px;
}

.product-description a {
  color: var(--site-accent);
  text-underline-offset: 3px;
}

.product-description table {
  width: 100%;
  border-collapse: collapse;
}

.product-description th,
.product-description td {
  padding: 9px 11px;
  border: 1px solid var(--site-border);
  text-align: start;
  vertical-align: top;
}

.product-description th {
  color: var(--site-text);
  background: var(--site-surface-soft);
}

@media (max-width: 980px) {
  .product-page__hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-page__details {
    width: 100%;
  }

  .product-page__info {
    grid-template-columns: 1fr;
  }

  .product-gallery__stage {
    height: clamp(320px, 42vw, 400px);
  }

  .product-summary {
    padding: 22px;
  }

  .product-specs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .product-page__hero {
    grid-template-columns: 1fr;
  }

  .product-gallery,
  .product-gallery.has-thumbs {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .product-gallery.has-thumbs .product-gallery__stage {
    grid-column: 1;
    grid-row: 1;
  }

  .product-gallery.has-thumbs {
    --product-thumb-size: 56px;
  }

  .product-gallery.has-thumbs .product-gallery__thumbs {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: 2px;
  }

  .product-gallery__stage {
    height: min(76vw, 430px);
  }

}

@media (max-width: 620px) {
  .product-page {
    padding-block-start: 12px;
  }

  .product-page__hero,
  .product-page__details,
  .product-reviews {
    border-radius: 14px;
  }

  .product-reviews {
    padding: 0 0 18px;
  }

  .product-reviews__header,
  .product-reviews__list,
  .product-reviews__auth,
  .product-review-form {
    padding-inline-start: 18px;
    padding-inline-end: 18px;
  }

  .product-reviews__header {
    align-items: center;
  }

  .product-reviews__overview {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-inline: 18px;
    padding: 18px;
  }

  .product-reviews__score {
    padding-inline-end: 0;
    padding-block-end: 14px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--site-border);
  }

  .product-reviews__auth {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .product-review-form__field textarea {
    font-size: 16px;
  }

  .product-gallery {
    padding: 10px;
  }

  .product-gallery__stage {
    height: 82vw;
    padding: 8px;
  }

  .product-gallery__thumb {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .product-summary {
    padding: 20px;
  }

  .product-page__title {
    margin-block-end: 12px;
    font-size: 22px;
  }

  .product-summary__purchase {
    width: min(100%, 260px);
  }

  .product-summary__purchase .home-product-card__quantity {
    min-width: 0;
    flex: 0 1 125px;
    grid-template-columns: 40px minmax(44px, 1fr) 40px;
  }

  .product-summary__purchase .product-page__buy {
    min-width: 0;
    flex: 1 1 125px;
  }

  .product-summary__purchase.is-in-cart {
    gap: 0;
  }

  .product-summary__purchase.is-in-cart .product-page__buy {
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
  }

  .product-detail-section {
    padding: 20px;
  }

  .product-specs__row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Full-screen photo viewer, opened from the gallery's zoom trigger. Ported
   from the admin product editor's lightbox (product-lightbox.css) - same
   near-fullscreen glass-chrome pattern (dark backdrop, borderless floating
   image, circular glass pill controls) - retokenized to the storefront's
   own --site- palette instead of the admin's --bs- / --control- one.

   Every reset below is load-bearing, not defensive boilerplate: a <dialog>
   with no author styling keeps Chrome's UA defaults (border: solid,
   padding: 1em, overflow: auto, width: fit-content, background: canvas),
   which is exactly a white-framed, scrollbar-bearing, too-narrow box. */
.product-lightbox {
  width: min(1400px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--site-text);
  user-select: none;
}

/* The dialog takes initial focus so nothing inside it lights up on open
   (see product-lightbox.js). It is a container, not a control, so it needs
   no focus indicator of its own - the controls inside keep theirs for real
   keyboard navigation. */
.product-lightbox:focus,
.product-lightbox:focus-visible {
  outline: none;
}

.product-lightbox::backdrop {
  background: rgba(6, 7, 9, .82);
  backdrop-filter: blur(6px);
}

.product-lightbox__shell {
  position: relative;
  height: min(860px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
}

.product-lightbox__counter {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(18, 21, 25, .82);
  backdrop-filter: blur(6px);
  color: #d7dbe0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.product-lightbox__close,
.product-lightbox__nav {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 21, 25, .82);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms var(--site-ease), scale 150ms var(--site-ease);
}

.product-lightbox__close:hover,
.product-lightbox__nav:hover {
  background: rgba(40, 44, 50, .9);
}

.product-lightbox__close:active,
.product-lightbox__nav:active {
  scale: .96;
}

.product-lightbox__close:focus-visible,
.product-lightbox__nav:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.product-lightbox__close svg,
.product-lightbox__nav svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.product-lightbox__body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 800px) 40px;
  grid-template-rows: minmax(0, 1fr);
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 44px;
}

.product-lightbox__nav--prev {
  grid-column: 1;
}

.product-lightbox__nav--next {
  grid-column: 3;
}

.product-lightbox__image {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--site-radius-lg);
  background: var(--site-surface-light);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: scale(.98);
  transition: opacity 180ms var(--site-ease), transform 180ms var(--site-ease);
}

.product-lightbox__image.is-visible {
  opacity: 1;
  transform: none;
}

.product-lightbox__thumbs {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 20px 20px;
}

.product-lightbox__thumbs[hidden],
.product-lightbox__nav[hidden],
.product-lightbox__counter[hidden] {
  display: none;
}

.product-lightbox__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--site-radius-sm);
  background: var(--site-surface-light);
  cursor: pointer;
  opacity: .55;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: opacity 150ms var(--site-ease), outline-color 150ms var(--site-ease);
}

.product-lightbox__thumb:hover {
  opacity: .85;
}

.product-lightbox__thumb.is-current {
  opacity: 1;
  outline-color: var(--site-accent);
}

.product-lightbox__thumb:focus-visible {
  opacity: 1;
  outline-color: var(--site-accent);
}

.product-lightbox__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* whole photo, never cropped */
  background: #fff;
  border-radius: inherit;
}

@media (max-width: 600px) {
  .product-lightbox {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
  }

  .product-lightbox__shell {
    height: calc(100vh - 12px);
  }

  .product-lightbox__body {
    padding: 20px;
    gap: 8px;
  }

  .product-lightbox__thumbs {
    padding: 0 12px 12px;
  }

  .product-lightbox__thumb {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-lightbox__image,
  .product-lightbox__close,
  .product-lightbox__nav,
  .product-lightbox__thumb {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-summary__purchase,
  .product-summary__purchase .home-product-card__quantity,
  .product-summary__purchase .product-page__buy,
  .product-page__buy-icon {
    transition: none;
  }
}

/* Chosen quantity above the known stock (storefront.js applyStockLimit):
   looks disabled, stays focusable so its label/title can be read. */
.product-page__buy.is-over-stock,
.product-page__buy.is-over-stock:hover {
  border-color: var(--site-border);
  background: var(--site-surface-soft);
  color: var(--site-text-subtle);
  cursor: not-allowed;
}


/* Minimum order hint under the buy button (only when a minimum is set):
   a small plaque in the same surface/border language as the fulfillment
   cards below, as wide as the buy row above it. */
.product-summary__minimum {
  align-self: flex-start;
  box-sizing: border-box;
  display: flex;
  width: 260px;
  max-width: 100%;
  align-items: center;
  margin: 12px 0 0;
  padding: 7px 12px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);
  background: var(--site-surface-raised);
  color: var(--site-text-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.product-summary__minimum strong {
  color: var(--site-text);
  font-weight: 800;
  white-space: nowrap;
}

/* Same gap below the plaque as above it. */
.product-summary__minimum:not([hidden]) + .product-summary__fulfillment {
  margin-block-start: 12px;
}

.product-summary__minimum[hidden] {
  display: none;
}

/* Two-column hero: the photo and the summary blocks share the row height
   and the photo fills it. The photo and the thumbnail column are taken out
   of the height calculation (absolute image, zero-height thumbs that grow
   to the row), so the row is as tall as the summary's content - but never
   below the photo's usual size - and neither block keeps an empty strip.
   When the photo's minimum is the taller one, the summary pushes its
   payment/delivery cards to the bottom. */
@media (min-width: 761px) {
  .product-gallery,
  .product-gallery.has-thumbs {
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
  }

  .product-gallery__stage {
    height: auto;
    min-height: clamp(340px, 34vw, 460px);
  }

  .product-gallery__image {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: clamp(8px, 1vw, 12px);
  }

  .product-gallery.has-thumbs .product-gallery__thumbs {
    height: 0;
    min-height: 100%;
    max-height: none;
  }

  .product-summary__fulfillment {
    margin-block-start: auto;
    padding-block-start: 16px;
  }

  .product-summary__minimum:not([hidden]) + .product-summary__fulfillment,
  .product-compat-check:not([hidden]) + .product-summary__fulfillment {
    margin-block-start: auto;
    padding-block-start: 14px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .product-gallery__stage {
    min-height: clamp(320px, 42vw, 400px);
  }
}

/* "Проверить совместимость": a plaque in the minimum-order plaque's shape
   (same 260px column, surface and border) with accent text and a chevron;
   opens the compatible models tab. */
.product-compat-check {
  align-self: flex-start;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 260px;
  max-width: 100%;
  margin-block-start: 12px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-sm);
  background: var(--site-surface-raised);
  color: var(--site-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: border-color 120ms var(--site-ease), background-color 120ms var(--site-ease);
}

.product-compat-check[hidden] {
  display: none;
}

.product-compat-check svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 120ms var(--site-ease);
}

.product-compat-check:hover {
  border-color: var(--site-accent);
  background: rgba(139, 200, 80, .08);
}

.product-compat-check:hover svg {
  translate: 2px 0;
}

.product-compat-check:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}