/* =============================================================
   Product Detail Page
   ============================================================= */

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

/* ── Сетка: mobile → tablet → desktop ─────────────────────── */
.product-layout {
  display: grid;
  /* Default: mobile — 1 колонка, порядок: media → content → promo → specs.
     Корзина (promo) выше характеристик (specs) */
  grid-template-areas:
    "media"
    "content"
    "promo"
    "specs";
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-10);
}

.product-gallery { grid-area: media; }
.product-info    { grid-area: content; }
.product-sidebar { grid-area: promo; }
.product-specs   { grid-area: specs; }

/* ── Центральная колонка: инфо ─────────────────────────────── */
.product-info {
  position: relative;
  min-width: 0;
}

/* Brand icon — временно скрыт, позже вернём */
.product-info__brand {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: flex-end;
  max-width: 140px;
  max-height: 60px;
  z-index: 1;
}
.product-info__brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.product-info__brand-link:hover { opacity: 0.75; }
.product-info__brand-img {
  max-width: 120px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.product-info__brand-text {
  font-size: 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.product-info__brand-text:hover { color: var(--color-brand); }
.product-info__brand-label { color: var(--color-text-tertiary); margin-right: 4px; }

.product-info__badges {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.product-info__title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: var(--sp-3);
}

.product-info__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

.product-info__sku { color: var(--color-text-tertiary); }

/* Артикул производителя с кнопкой copy */
.product-info__article {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
}

.product-info__article-label {
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.product-info__article-value {
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-all;
}

.product-info__article-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--sp-6);
  height: var(--sp-6);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
}

.product-info__article-copy:hover {
  color: var(--color-brand);
  background: var(--color-brand-light);
}

.product-info__article-copy:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.product-info__article-copy.is-copied {
  color: var(--color-brand);
}

/* Невидимый textarea для fallback-копирования (execCommand) — вне потока, не виден */
.copy-fallback-textarea {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Price */
.product-info__price-block {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.product-info__price {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.product-info__price-old {
  font-size: 18px;
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

/* Мобильный блок цены — скрыт на десктопе/планшете (цена там в sidebar) */
.product-info__price-block--mobile { display: none; }

/* Cart (корзина в sidebar или inline на мобилке) */
.product-info__cart {
  display: flex;
  gap: var(--sp-3);
}

.product-info__qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.product-info__qty-btn {
  width: 44px;
  height: 52px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-brand);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.product-info__qty-btn:hover { background: var(--color-brand-light); }

.product-info__qty-val {
  min-width: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.product-info__add-btn {
  flex: 1;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--transition), transform var(--transition);
}
.product-info__add-btn:hover { background: var(--color-brand-hover); }
.product-info__add-btn:active { transform: scale(0.98); }
.product-info__add-btn svg { width: 18px; height: 18px; }

/* Под заказ / нет в наличии — детальная страница */
.product-info__on-order {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.product-info__on-order--out {
  color: var(--color-text-tertiary, #9ca3af);
}
.product-sticky-cta__label {
  flex: 1;
  height: 52px;
}

/* ── Характеристики в центральной колонке ──────────────────── */
.product-info__specs { margin-top: var(--sp-5); }

.product-info__section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--sp-4);
}

/* Spec rows — grid 1fr 1fr с solid-leader линией под термином
   (текст термина перекрывает линию фоном, как в Yandex). */
.product-info__spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.product-info__spec-row {
  display: contents;
}

.product-info__spec-name {
  position: relative;
  padding-right: var(--sp-2);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0;
  text-align: left;
}

.product-info__spec-name::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(25, 26, 26, 0.2);
  z-index: 0;
}

.product-info__spec-name-text {
  position: relative;
  z-index: 1;
  background: var(--color-bg-primary, #fff);
  padding-right: var(--sp-2);
}

.product-info__spec-val {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text-primary);
  word-break: break-word;
}

.product-info__spec-more {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.product-info__spec-more svg { width: 14px; height: 14px; }
.product-info__spec-more:hover { color: var(--color-brand-hover); }

/* ── Правая колонка: sidebar ───────────────────────────────── */
.product-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.product-sidebar__price-card {
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary, #fff);
}

.product-sidebar__price-card .product-info__price-block {
  margin-bottom: var(--sp-4);
}

/* ── Табы ──────────────────────────────────────────────────── */
.product-tabs-section { margin-bottom: var(--sp-12); scroll-margin-top: 80px; }

.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr:nth-child(odd) td { background: var(--color-bg-secondary); }
.specs-table td {
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
}
.specs-table td:first-child { color: var(--color-text-secondary); width: 45%; }
.specs-table td:last-child  { font-weight: 600; }

/* ── Похожие товары ────────────────────────────────────────── */
.related-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-10);
}
.related-section__title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: var(--sp-6);
}

/* Fallback «Описание не указано» в табе Описание */
.product-detail__no-desc {
  color: var(--color-text-tertiary);
}

/* ── Sticky CTA (мобилка) ──────────────────────────────────── */
.product-sticky-cta { display: none; }

.product-sticky-cta__btn {
  flex: 1;
  background: var(--color-text-primary, #111);
  color: #fff;
  font-size: 15px;
}
.product-sticky-cta__btn:hover { background: #000; }

.product-sticky-cta__qty {
  flex: 0 0 auto;
  border-radius: 999px;
  height: 52px;
}

/* ── Responsive (mobile-first, как в эталоне Yandex) ───────── */

/* Планшет ≥768px: 2 колонки — media слева (спан 3 строки);
   справа сверху вниз: content → promo → specs */
@media (min-width: 768px) {
  .product-layout {
    grid-template-areas:
      "media content"
      "media promo"
      "media specs";
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: var(--sp-4);
  }

  .product-gallery {
    align-self: start;
    position: sticky;
    top: calc(var(--sp-4) + 64px);
  }

  .product-info { max-width: 440px; }
}

/* ≥1024px — больший gap */
@media (min-width: 1024px) {
  .product-layout { gap: var(--sp-8); }
}

/* Десктоп ≥1200px: 3 колонки, media на 2 строки слева,
   content сверху-центре, specs снизу-центре, promo справа на 2 строки */
@media (min-width: 1200px) {
  .product-layout {
    grid-template-areas:
      "media content promo"
      "media specs   promo";
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 320px);
  }
  .product-sidebar {
    margin-top: 0;
    position: sticky;
    top: calc(var(--sp-4) + 64px);
    align-self: start;
  }
}

@media (max-width: 1024px) {
  .product-info__title { font-size: 20px; }
  .product-info__price { font-size: 26px; }
}

@media (max-width: 767px) {
  .product-page {
    padding-block: var(--sp-4) var(--sp-8);
    padding-bottom: 96px; /* место под sticky */
  }

  .product-info__title { font-size: 22px; }
  .product-info__price { font-size: 24px; }

  /* На мобилке видна мобильная цена в info, а в sidebar price-card — скрываем дубль */
  .product-info__price-block--mobile { display: flex; }
  .product-sidebar__price-card .product-info__price-block { display: none; }
  .product-sidebar__price-card { padding: 0; border: none; background: transparent; }

  /* inline-корзина на мобилке не показываем — единственная точка: sticky */
  .product-sidebar__price-card .product-info__cart { display: none; }

  .product-info__brand {
    position: static;
    justify-content: flex-start;
    max-width: none;
    margin-bottom: var(--sp-3);
  }
  .product-info__brand-img { max-height: 40px; }

  .product-info__spec-row { font-size: 13px; }

  .product-sidebar {
    position: static;
    gap: var(--sp-3);
  }

}

/* Sticky CTA — только на мобилке (≤767px). На планшете и десктопе inline-корзина. */
@media (max-width: 767px) {
  .product-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    gap: 10px;
    align-items: center;
    z-index: 80;
  }
}

/* =============================================================
   Brand card (sidebar)
   ============================================================= */

.product-brand-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
}

.product-brand-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.product-brand-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.product-brand-card__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
}

.product-brand-card__all {
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.product-brand-card__all:hover {
  color: var(--color-brand);
  text-decoration: underline;
}

.product-brand-card__logo-wrap {
  flex-shrink: 0;
}

.product-brand-card__logo {
  max-width: 100px;
  max-height: 52px;
  object-fit: contain;
}

.product-brand-card__countries {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.product-brand-card__country {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.product-brand-card__flag {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Документы (вкладка INSTRUCTIONS) ─────────────────────── */
.product-docs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.product-docs__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
}

.product-docs__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-neutral);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-docs__icon--pdf  { background: transparent; color: #dc2626; }
.product-docs__icon--doc,
.product-docs__icon--docx { background: #dbeafe; color: #2563eb; }
.product-docs__icon--xls,
.product-docs__icon--xlsx { background: #dcfce7; color: #16a34a; }

.product-docs__name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  word-break: break-word;
}
.product-docs__name:hover { color: var(--color-brand); }

.product-docs__size {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.product-docs__download { flex-shrink: 0; }

@media (max-width: 767px) {
  .product-docs__item { flex-wrap: wrap; }
  .product-docs__download { width: 100%; justify-content: center; }
}

/* Blog article tip */
.product-article-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-bg-secondary);
  border-left: var(--sp-1) solid var(--color-brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--sp-10);
}

.product-article-tip__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-brand);
  margin-top: 0;
}

.product-article-tip__body {
  flex: 1;
  min-width: 0;
}

.product-article-tip__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--sp-1);
}

.product-article-tip__title {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: var(--sp-1);
  line-height: var(--lh-tight);
}

.product-article-tip__title:hover { color: var(--color-brand); }

.product-article-tip__teaser {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
}

.product-article-tip__cta {
  flex-shrink: 0;
  align-self: flex-end;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-brand);
  text-decoration: none;
  white-space: nowrap;
  padding-left: var(--sp-4);
}

.product-article-tip__cta:hover { text-decoration: underline; }

/* 600px — mobile breakpoint; CSS custom properties недоступны в @media */
@media (max-width: 600px) {
  .product-article-tip { flex-wrap: wrap; }
  .product-article-tip__cta {
    padding-left: 0;
    margin-top: var(--sp-2);
    align-self: flex-start;
  }
}