/**
 * products.css — современный дизайн карточки товара.
 * v2.2: редизайн + фикс цветных свотчей (pvc-swatch).
 *
 * Подключается через хук headStyles в ProductsController::show().
 * Переопределяет inline-стили из show.php через !important.
 *
 * ВАЖНО: все правила .pv-opt исключают .pvc-swatch через :not(),
 * чтобы не ломать цветные квадратики вариаций из variation-colors.css.
 *
 * Все значения — через CSS-переменные из /admin/assets/variables.
 */

/* ============================================================
   РАСКЛАДКА: ВЕРХНИЙ БЛОК
============================================================ */
.pv-top {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-l, 32px) !important;
  align-items: start !important;
  margin-top: var(--space-l, 32px) !important;
}

/* ============================================================
   ГАЛЕРЕЯ
============================================================ */
.pv-gallery {
  position: sticky !important;
  top: var(--space-l, 32px) !important;
}
.pv-gallery__img {
  width: 100% !important;
  border-radius: var(--radius-l, 18px) !important;
  box-shadow: var(--shadow-card-hover, 0 8px 28px rgba(28, 31, 38, 0.14)) !important;
  display: block !important;
  transition: opacity var(--transition-base, 0.25s ease), transform var(--transition-base, 0.25s ease) !important;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-alt, #f7f8fa);
}
.pv-gallery__img:hover { transform: scale(1.015); }
.pv-gallery__img.is-loading { opacity: 0.4 !important; }

/* ============================================================
БЕЙДЖИ ГАЛЕРЕИ (ИЗБРАННОЕ / СРАВНЕНИЕ)
Полупрозрачная подложка с эффектом матового стекла,
скругление pill, наложение на изображение товара.
Все значения — через CSS-переменные из /admin/assets/variables.
============================================================ */
.pv-gallery__badges {
position: absolute;
top: var(--space-m, 16px);
right: var(--space-m, 16px);
z-index: var(--z-index-dropdown, 100);
display: inline-flex;
align-items: center;
gap: var(--space-xs, 4px);
padding: var(--space-xs, 4px) var(--space-s, 8px);
border-radius: var(--radius-pill, 999px);
background: color-mix(in srgb, var(--color-bg, #ffffff) 35%, transparent);
-webkit-backdrop-filter: blur(var(--space-m, 16px)) saturate(140%);
backdrop-filter: blur(var(--space-m, 16px)) saturate(140%);
border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1));
box-shadow: var(--shadow-card, 0 2px 12px rgba(28, 31, 38, 0.08));
transition: background-color var(--transition-base, 0.25s ease), box-shadow var(--transition-base, 0.25s ease);
}

.pv-gallery__badges:hover {
background: color-mix(in srgb, var(--color-bg, #ffffff) 50%, transparent);
box-shadow: var(--shadow-card-hover, 0 8px 28px rgba(28, 31, 38, 0.14));
}

/* На мобильных .pv-gallery становится static — возвращаем
контекст позиционирования, чтобы бейджи остались на изображении */
@media (max-width: 900px) {
.pv-gallery { position: relative !important; }
}

/* ============================================================
   ИНФОРМАЦИЯ О ТОВАРЕ
============================================================ */
.pv-info { padding: var(--space-s, 8px) 0; }
.pv-info .page__header { margin-bottom: var(--space-m, 16px) !important; }
.pv-info .page__title {
  font-family: var(--font-display, 'Unbounded', 'Segoe UI', system-ui, sans-serif) !important;
  font-size: clamp(var(--font-size-xl, 22px), 4vw, 32px) !important;
  font-weight: var(--font-weight-bold, 800) !important;
  line-height: 1.2 !important;
  color: var(--color-text, #111827) !important;
  letter-spacing: -0.02em;
}

/* ============================================================
   ЦЕНА
============================================================ */
.pv-info__price {
  display: flex !important;
  align-items: baseline !important;
  gap: var(--space-m, 16px) !important;
  flex-wrap: wrap !important;
  margin: var(--space-s, 8px) 0 var(--space-m, 16px) !important;
}
.pv-price-current {
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: var(--font-weight-bold, 800) !important;
  color: var(--color-primary, #4d3843) !important;
  line-height: 1 !important;
  font-family: var(--font-display, 'Unbounded', 'Segoe UI', system-ui, sans-serif);
  letter-spacing: -0.02em;
}
.pv-price-old {
  font-size: var(--font-size-lg, 18px) !important;
  color: var(--color-text-muted, #9ca3af) !important;
  text-decoration: line-through !important;
}

/* ============================================================
   НАЛИЧИЕ
============================================================ */
.pv-stock {
display: inline-flex !important;
align-items: center !important;
gap: var(--space-s, 8px) !important;
padding: var(--space-s, 8px) var(--space-m, 16px) !important;
border-radius: var(--radius-pill, 999px) !important;
font-size: var(--font-size-sm, 14px) !important;
font-weight: var(--font-weight-medium, 600) !important;
margin-bottom: var(--space-l, 32px) !important;
width: fit-content !important;
max-width: 100% !important;
white-space: nowrap !important;
}
.pv-stock--in {
  background: color-mix(in srgb, var(--color-success, #2f9e44) 12%, transparent) !important;
  color: var(--color-success, #2f9e44) !important;
}
.pv-stock--out {
  background: color-mix(in srgb, var(--color-danger, #e03131) 12%, transparent) !important;
  color: var(--color-danger, #e03131) !important;
}

/* ============================================================
   КРАТКОЕ ОПИСАНИЕ
============================================================ */
.pv-short {
  font-size: var(--font-size-base, 16px) !important;
  color: var(--color-text-muted, #4b5563) !important;
  line-height: var(--font-line-height, 1.6) !important;
  margin: 0 0 var(--space-l, 32px) !important;
}

/* ============================================================
   КНОПКИ ДЕЙСТВИЙ
============================================================ */
.pv-actions {
display: flex !important;
gap: var(--space-m, 16px) !important;
flex-wrap: wrap !important;
margin-bottom: var(--space-l, 32px) !important;
align-items: center !important;
}

/* ============================================================
СТЕППЕР КОЛИЧЕСТВА (.pv-qty)
============================================================ */
.pv-qty {
display: inline-flex !important;
align-items: center !important;
border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
border-radius: var(--radius-m, 12px) !important;
background: var(--color-bg, #ffffff) !important;
overflow: hidden !important;
flex-shrink: 0 !important;
}

.pv-qty__btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: calc(var(--space-l, 32px) + var(--space-m, 16px)) !important;
height: calc(var(--space-l, 32px) + var(--space-m, 16px)) !important;
border: none !important;
background: transparent !important;
color: var(--color-text, #111827) !important;
font-size: var(--font-size-lg, 18px) !important;
font-weight: var(--font-weight-bold, 800) !important;
cursor: pointer !important;
transition:
background-color var(--transition-fast, 0.15s ease),
color var(--transition-fast, 0.15s ease) !important;
user-select: none !important;
line-height: 1 !important;
}

.pv-qty__btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-primary, #4d3843) 8%, transparent) !important;
color: var(--color-primary, #4d3843) !important;
}

.pv-qty__btn:focus-visible {
outline: calc(var(--space-xs, 4px) / 2) solid var(--color-primary, #4d3843) !important;
outline-offset: calc(var(--space-xs, 4px) / 2 * -1) !important;
}

.pv-qty__btn:disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
}

.pv-qty__input {
width: calc(var(--space-l, 32px) + var(--space-s, 8px)) !important;
height: calc(var(--space-l, 32px) + var(--space-m, 16px)) !important;
border: none !important;
border-left: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
border-right: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
background: transparent !important;
text-align: center !important;
font-size: var(--font-size-base, 16px) !important;
font-weight: var(--font-weight-medium, 600) !important;
color: var(--color-text, #111827) !important;
font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif) !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
padding: 0 !important;
}

.pv-qty__input:focus {
outline: none !important;
background: color-mix(in srgb, var(--color-primary, #4d3843) 4%, transparent) !important;
}

.pv-qty__input:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
/* SVG-иконки «−» и «+» внутри кнопок степпера */
.pv-qty__icon {
display: block !important;
width: var(--space-m, 16px) !important;
height: var(--space-m, 16px) !important;
pointer-events: none !important;
flex-shrink: 0 !important;
}
.pv-qty__btn svg {
display: block !important;
}
@media (prefers-reduced-motion: reduce) {
.pv-qty__btn { transition: none !important; }
}

.pv-btn {
  padding: var(--space-m, 16px) var(--space-l, 32px) !important;
  border-radius: var(--radius-m, 12px) !important;
  font-size: var(--font-size-base, 16px) !important;
  font-weight: var(--font-weight-bold, 800) !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
  transition:
    transform var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease),
    background-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-s, 8px) !important;
  font-family: var(--font-body, 'Manrope', 'Segoe UI', system-ui, sans-serif);
}
.pv-btn--primary {
  background: var(--color-primary, #4d3843) !important;
  color: var(--color-text-inverse, #ffffff) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary, #4d3843) 35%, transparent);
}
.pv-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover, #1f5bd6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary-hover, #1f5bd6) 35%, transparent) !important;
}
.pv-btn--primary:disabled {
  background: var(--color-border-strong, rgba(28, 31, 38, 0.2)) !important;
  cursor: not-allowed !important;
  box-shadow: none;
}
.pv-btn--ghost {
  background: var(--color-bg-alt, #f7f8fa) !important;
  color: var(--color-text, #374151) !important;
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
}
.pv-btn--ghost:hover {
  background: var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  transform: translateY(-1px);
}
.pv-btn--ghost.is-active {
  background: var(--color-primary, #4d3843) !important;
  color: var(--color-text-inverse, #ffffff) !important;
  border-color: var(--color-primary, #4d3843) !important;
}
.pv-btn--ghost.is-active:hover {
  background: var(--color-primary-hover, #1f5bd6) !important;
}
.pv-btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }

/* ============================================================
   ВАРИАЦИИ (контейнер)
============================================================ */
.pv-variants {
  background: var(--color-bg, #ffffff) !important;
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  border-radius: var(--radius-l, 18px) !important;
  padding: var(--space-l, 32px) !important;
  margin-bottom: var(--space-l, 32px) !important;
  box-shadow: var(--shadow-card, 0 2px 12px rgba(28, 31, 38, 0.08));
}
.pv-variants__title {
  font-size: var(--font-size-base, 16px) !important;
  font-weight: var(--font-weight-bold, 800) !important;
  margin: 0 0 var(--space-m, 16px) !important;
  color: var(--color-text, #111827);
}
.pv-attr { margin-bottom: var(--space-m, 16px) !important; }
.pv-attr:last-child { margin-bottom: 0 !important; }
.pv-attr__name {
  font-size: var(--font-size-xs, 12px) !important;
  font-weight: var(--font-weight-bold, 800) !important;
  color: var(--color-text-muted, #6b7280) !important;
  margin: 0 0 var(--space-s, 8px) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.pv-attr__values {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-s, 8px) !important;
}

/* ============================================================
   КНОПКИ ВАРИАЦИЙ (кроме цветных свотчей .pvc-swatch!)
   :not(.pvc-swatch) предотвращает перекрытие стилей
   из variation-colors.css, которые навешиваются JS
   поверх штатных .pv-opt группы «Цвет».
============================================================ */
.pv-opt:not(.pvc-swatch) {
  padding: var(--space-s, 8px) var(--space-m, 16px) !important;
  border: 2px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  border-radius: var(--radius-s, 6px) !important;
  background: var(--color-bg, #ffffff) !important;
  font-size: var(--font-size-sm, 14px) !important;
  font-weight: var(--font-weight-medium, 600) !important;
  color: var(--color-text, #374151) !important;
  cursor: pointer !important;
  transition:
    border-color var(--transition-fast, 0.15s ease),
    background-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease) !important;
}
.pv-opt:not(.pvc-swatch):hover {
  border-color: var(--color-primary, #4d3843) !important;
  transform: translateY(-1px);
}
.pv-opt:not(.pvc-swatch).is-selected {
  border-color: var(--color-primary, #4d3843) !important;
  background: color-mix(in srgb, var(--color-primary, #4d3843) 8%, transparent) !important;
  color: var(--color-primary, #4d3843) !important;
}

.pv-variant-note {
  margin-top: var(--space-m, 16px) !important;
  padding: var(--space-m, 16px) !important;
  border-radius: var(--radius-s, 6px) !important;
  font-size: var(--font-size-sm, 14px) !important;
  background: var(--color-bg-alt, #f9fafb) !important;
  color: var(--color-text-muted, #4b5563) !important;
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  min-height: 20px !important;
}
.pv-variant-note__sku {
  color: var(--color-text-muted, #9ca3af) !important;
  font-size: var(--font-size-xs, 12px) !important;
}

/* ============================================================
   ХАРАКТЕРИСТИКИ
============================================================ */
.pv-attrs { margin-top: var(--space-xl, 64px) !important; }
.pv-attrs__title {
  font-size: var(--font-size-xl, 22px) !important;
  font-weight: var(--font-weight-bold, 800) !important;
  margin: 0 0 var(--space-m, 16px) !important;
  font-family: var(--font-display, 'Unbounded', 'Segoe UI', system-ui, sans-serif);
  color: var(--color-text, #111827);
}
.pv-attrs__table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--color-bg, #ffffff) !important;
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  border-radius: var(--radius-m, 12px) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card, 0 2px 12px rgba(28, 31, 38, 0.08));
}
.pv-attrs__table tr:nth-child(even) { background: var(--color-bg-alt, #f9fafb) !important; }
.pv-attrs__table td {
  padding: var(--space-m, 16px) var(--space-m, 16px) !important;
  font-size: var(--font-size-sm, 14px) !important;
  border-bottom: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  vertical-align: top !important;
}
.pv-attrs__table tr:last-child td { border-bottom: none !important; }
.pv-attrs__table td:first-child {
  color: var(--color-text-muted, #6b7280) !important;
  width: 40% !important;
  font-weight: var(--font-weight-medium, 600) !important;
}
.pv-attrs__table td:last-child {
  color: var(--color-text, #111827) !important;
  font-weight: var(--font-weight-bold, 800) !important;
}

/* ============================================================
   ПОЛНОЕ ОПИСАНИЕ
============================================================ */
.pv-content { margin-top: var(--space-xl, 64px) !important; }
.pv-content--limited { max-width: 820px !important; }
.pv-content--full { max-width: none !important; }
.pv-content__inner {
  background: var(--color-bg, #ffffff) !important;
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1)) !important;
  border-radius: var(--radius-l, 18px) !important;
  padding: var(--space-l, 32px) !important;
  box-shadow: var(--shadow-card, 0 2px 12px rgba(28, 31, 38, 0.08));
}
.pv-content__inner h2 {
  font-size: var(--font-size-xl, 22px) !important;
  margin: var(--space-l, 32px) 0 var(--space-m, 16px) !important;
  font-family: var(--font-display, 'Unbounded', 'Segoe UI', system-ui, sans-serif);
  color: var(--color-text, #111827);
}
.pv-content__inner h2:first-child { margin-top: 0 !important; }
.pv-content__inner ul {
  padding-left: var(--space-l, 32px) !important;
  line-height: var(--font-line-height, 1.6) !important;
}
.pv-content__inner p {
  line-height: var(--font-line-height, 1.6) !important;
  color: var(--color-text-muted, #374151) !important;
}

/* ============================================================
   МИНИАТЮРЫ ГАЛЕРЕИ
============================================================ */
.pv-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s, 8px);
  margin-top: var(--space-m, 16px);
}
.pv-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-m, 12px);
  overflow: hidden;
  border: 2px solid var(--color-border, rgba(28, 31, 38, 0.1));
  cursor: pointer;
  padding: 0;
  background: var(--color-bg, #ffffff);
  transition:
    border-color var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease);
}
.pv-thumb:hover {
  border-color: var(--color-primary, #4d3843);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card, 0 2px 12px rgba(28, 31, 38, 0.08));
}
.pv-thumb.is-active {
  border-color: var(--color-primary, #4d3843);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #4d3843) 25%, transparent);
}
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   ТЕГИ И КАТЕГОРИЯ
============================================================ */
.pv-info .tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs, 4px) var(--space-s, 8px);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-bold, 800);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-primary, #4d3843) 10%, transparent);
  color: var(--color-primary, #4d3843);
  transition: background-color var(--transition-fast, 0.15s ease);
}
.pv-info .tag:hover {
  background: color-mix(in srgb, var(--color-primary, #4d3843) 18%, transparent);
}

/* ============================================================
   ДАТА
============================================================ */
.pv-info .page__date {
  color: var(--color-text-muted, #9ca3af) !important;
  font-size: var(--font-size-sm, 14px) !important;
}

/* ============================================================
   ТЁМНАЯ ТЕМА
============================================================ */
[data-theme="dark"] .pv-gallery__img {
  background-color: var(--color-bg-alt, #1a1d24) !important;
}
[data-theme="dark"] .pv-info .page__title {
  color: var(--color-text, #f3f4f6) !important;
}
[data-theme="dark"] .pv-variants,
[data-theme="dark"] .pv-attrs__table,
[data-theme="dark"] .pv-content__inner {
  background: var(--color-bg-alt, #1a1d24) !important;
  border-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
}
[data-theme="dark"] .pv-variants__title,
[data-theme="dark"] .pv-attrs__title,
[data-theme="dark"] .pv-content__inner h2 {
  color: var(--color-text, #f3f4f6) !important;
}
[data-theme="dark"] .pv-attrs__table tr:nth-child(even) {
  background: var(--color-bg, #111318) !important;
}
[data-theme="dark"] .pv-attrs__table td {
  border-bottom-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
}
[data-theme="dark"] .pv-attrs__table td:last-child {
  color: var(--color-text, #f3f4f6) !important;
}
[data-theme="dark"] .pv-opt:not(.pvc-swatch) {
  background: var(--color-bg-alt, #1a1d24) !important;
  border-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
  color: var(--color-text, #f3f4f6) !important;
}
[data-theme="dark"] .pv-opt:not(.pvc-swatch).is-selected {
  background: color-mix(in srgb, var(--color-primary, #4d3843) 20%, transparent) !important;
  border-color: var(--color-primary, #4d3843) !important;
  color: var(--color-text, #f3f4f6) !important;
}
[data-theme="dark"] .pv-variant-note {
  background: var(--color-bg, #111318) !important;
  border-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
}
[data-theme="dark"] .pv-btn--ghost {
  background: var(--color-bg-alt, #1a1d24) !important;
  border-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
  color: var(--color-text, #f3f4f6) !important;
}
[data-theme="dark"] .pv-btn--ghost.is-active {
background: var(--color-primary, #4d3843) !important;
color: var(--color-text-inverse, #ffffff) !important;
}

[data-theme="dark"] .pv-qty {
background: var(--color-bg-alt, #1a1d24) !important;
border-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
}

[data-theme="dark"] .pv-qty__btn {
color: var(--color-text, #f3f4f6) !important;
}

[data-theme="dark"] .pv-qty__btn:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-primary, #4d3843) 15%, transparent) !important;
}

[data-theme="dark"] .pv-qty__input {
color: var(--color-text, #f3f4f6) !important;
border-left-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
border-right-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
}
[data-theme="dark"] .pv-thumb {
  background: var(--color-bg-alt, #1a1d24) !important;
  border-color: var(--color-border, rgba(255, 255, 255, 0.12)) !important;
}
[data-theme="dark"] .pv-content__inner p,
[data-theme="dark"] .pv-short {
color: var(--color-text-muted, #9ca3af) !important;
}
[data-theme="dark"] .pv-related__title {
color: var(--color-text, #f3f4f6);
}
[data-theme="dark"] .pv-related__card {
background: var(--color-bg-alt, #1a1d24);
border-color: var(--color-border, rgba(255, 255, 255, 0.12));
}
[data-theme="dark"] .pv-related__card-title {
color: var(--color-text, #f3f4f6);
}
[data-theme="dark"] .pv-related__card-img-wrap {
background: var(--color-bg, #111318);
}
[data-theme="dark"] .pv-related__nav {
background: var(--color-bg-alt, #1a1d24);
border-color: var(--color-border, rgba(255, 255, 255, 0.12));
color: var(--color-text, #f3f4f6);
}
[data-theme="dark"] .pv-related__nav:hover:not(:disabled) {
background: var(--color-primary, #4d3843);
border-color: var(--color-primary, #4d3843);
color: var(--color-text-inverse, #ffffff);
}

/* ============================================================
СЛАЙДЕР «ПОХОЖИЕ ТОВАРЫ»
============================================================ */
.pv-related {
  --pv-related-card-w: calc(var(--space-xl, 64px) * 3 + var(--space-l, 32px) + var(--space-m, 16px));
  --pv-related-nav-size: calc(var(--space-l, 32px) + var(--space-s, 8px));
  margin-top: var(--space-xl, 64px);
}
.pv-related__title {
  font-family: var(--font-display, 'Unbounded', 'Segoe UI', system-ui, sans-serif);
  font-size: var(--font-size-xl, 22px);
  font-weight: var(--font-weight-bold, 800);
  color: var(--color-text, #111827);
  margin: 0 0 var(--space-l, 32px);
}
.pv-related__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-s, 8px);
}
.pv-related__viewport {
overflow: hidden;
flex: 1;
min-width: 0;
/* Padding + отрицательный margin: тени карточек и hover-подъём
   не срезаются overflow:hidden, раскладка не смещается */
padding: var(--space-m, 16px) var(--space-s, 8px);
margin: calc(var(--space-m, 16px) * -1) calc(var(--space-s, 8px) * -1);
cursor: grab;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
.pv-related__viewport--dragging {
cursor: grabbing;
}
.pv-related__viewport--dragging .pv-related__track {
transition: none;
}
.pv-related__viewport--dragging .pv-related__card {
pointer-events: none;
}
.pv-related__track {
  display: flex;
  gap: var(--space-m, 16px);
  transition: transform var(--transition-base, 0.25s ease);
  will-change: transform;
}
.pv-related__card {
  flex: 0 0 var(--pv-related-card-w);
  width: var(--pv-related-card-w);
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1));
  border-radius: var(--radius-l, 18px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
box-shadow: var(--shadow-card, 0 2px 12px rgba(28, 31, 38, 0.08));
transition:
transform var(--transition-fast, 0.15s ease),
border-color var(--transition-fast, 0.15s ease);
}
/* Тень при наведении не усиливается: родительский контейнер не обрезает
увеличенную тень (фикс по запросу владельца). Остаются подъём и обводка. */
.pv-related__card:hover {
transform: translateY(calc(var(--space-xs, 4px) * -1));
border-color: var(--color-border-strong, rgba(28, 31, 38, 0.2));
}
.pv-related__card:focus-visible {
  outline: calc(var(--space-xs, 4px) / 2) solid var(--color-primary, #4d3843);
  outline-offset: calc(var(--space-xs, 4px) / 2);
}
.pv-related__card-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-alt, #f7f8fa);
}
.pv-related__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base, 0.25s ease);
}
.pv-related__card:hover .pv-related__card-img {
  transform: scale(1.04);
}
.pv-related__card-body {
  padding: var(--space-m, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-s, 8px);
  flex: 1;
}
.pv-related__card-title {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 600);
  color: var(--color-text, #111827);
  line-height: var(--font-line-height, 1.6);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv-related__card-price {
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-bold, 800);
  color: var(--color-primary, #4d3843);
  margin: 0;
  margin-top: auto;
}
.pv-related__card-price-old {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted, #9ca3af);
  text-decoration: line-through;
  font-weight: var(--font-weight-regular, 400);
  margin-left: var(--space-s, 8px);
}
.pv-related__card-stock {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 600);
}
.pv-related__card-stock--in { color: var(--color-success, #2f9e44); }
.pv-related__card-stock--out { color: var(--color-danger, #e03131); }
.pv-related__nav {
  flex: 0 0 var(--pv-related-nav-size);
  width: var(--pv-related-nav-size);
  height: var(--pv-related-nav-size);
  border-radius: var(--radius-circle, 50%);
  border: 1px solid var(--color-border, rgba(28, 31, 38, 0.1));
  background: var(--color-bg, #ffffff);
  color: var(--color-text, #111827);
  font-size: var(--font-size-lg, 18px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease),
    opacity var(--transition-fast, 0.15s ease);
}
.pv-related__nav:hover:not(:disabled) {
  background: var(--color-primary, #4d3843);
  border-color: var(--color-primary, #4d3843);
  color: var(--color-text-inverse, #ffffff);
}
.pv-related__nav:focus-visible {
  outline: calc(var(--space-xs, 4px) / 2) solid var(--color-primary, #4d3843);
  outline-offset: calc(var(--space-xs, 4px) / 2);
}
.pv-related__nav:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.pv-related__nav-icon {
display: block;
width: calc(var(--space-m, 16px) + var(--space-xs, 4px));
height: calc(var(--space-m, 16px) + var(--space-xs, 4px));
pointer-events: none;
flex-shrink: 0;
}
.pv-related--empty {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .pv-related__track { transition: none; }
  .pv-related__card,
  .pv-related__nav { transition: none; }
  .pv-related__card:hover { transform: none; }
  .pv-related__card:hover .pv-related__card-img { transform: none; }
}

/* ============================================================
АДАПТИВНОСТЬ
============================================================ */
@media (max-width: 900px) {
  .pv-top { grid-template-columns: 1fr !important; }
  .pv-gallery { position: static !important; }
}
@media (max-width: 600px) {
.pv-thumb { width: 56px; height: 56px; border-radius: var(--radius-s, 6px); }
.pv-actions { flex-direction: column; }
.pv-btn { width: 100%; justify-content: center; }
.pv-related__card {
  flex: 0 0 calc(100% - var(--space-xl, 64px));
  width: calc(100% - var(--space-xl, 64px));
}
.pv-related__nav { display: none; }
.pv-related__wrapper { gap: 0; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pv-gallery__img,
  .pv-btn,
  .pv-opt:not(.pvc-swatch),
  .pv-thumb {
    transition: none !important;
  }
  .pv-gallery__img:hover,
  .pv-btn--primary:hover:not(:disabled),
  .pv-opt:not(.pvc-swatch):hover,
  .pv-thumb:hover {
    transform: none !important;
  }
}