/* ═══════════════════════════════════════════════════════
   БЛОК: product-page — рабочая область карточки товара
   Состав: .breadcrumbs (переиспользован из catalog-page.css)
           .product-gallery  — галерея фото
           .buy-card         — блок покупки (цена, кнопки, FAQ)
           .product-tabs     — табы «Характеристики / Отзывы / Оплата / Доставка / Гарантии»
   Мобильные переопределения — в responsive.css (max-width: 959px)
═══════════════════════════════════════════════════════ */

/* margin-top:137px — реальная высота зафиксированного хедера, тот же
   приём, что у .cat-page в catalog-page.css — иначе хлебные крошки
   уезжают под хедер. */
.product-page {
    margin-top: 137px;
    padding: 0 0 80px;
}

/* Боковые отступы 1600 = 60px (контент шириной 1480), а не стандартные 34px
   у общего .container — тот же принцип, что и в catalog-category.html. */
.product-page .container {
    padding: 0 60px;
}

/* padding-top:32px — только у первого .container (с breadcrumbs/H1/галереей) —
   на catalog-category.html breadcrumbs обёрнуты в .catalog-page-header
   {padding-top:32px}, так что добавляем тот же
   отступ, чтобы позиция хлебных крошек совпадала между страницами 
   (без скачка при переходе). */
.product-page > .container:first-child {
    padding-top: 32px;
}

.product-page__title {
    font-size: 44px;
    font-weight: 500;
    line-height: 1.25;
    max-width: 1480px;
    padding-bottom: 58px;
}

/* Артикул под заголовком — виден только на мобильном (см. responsive.css),
   на десктопе артикул показан бейджем над фото (.product-gallery__badges--right) */
.product-page__art-badge--mobile {
    display: none;
}

/* Колонка галереи — 728px целиком (миниатюры — оверлей поверх фото,
   не добавляют ширины), как в макете. Карточка цены идёт сразу после
   с фиксированным зазором 40px, а не прижимается к правому краю страницы. */
.product-page__top {
    display: grid;
    grid-template-columns: 728px 492px;
    gap: 40px;
    align-items: start;
}

/* ─────────────────────────────────────────
   ГАЛЕРЕЯ — вертикальная карусель миниатюр слева,
   крупное фото справа. Без скруглений, фон белый.
   Заполняет всю свою колонку грида (без пустот) —
   квадратной остаётся только сама фотография (product-gallery__main).
───────────────────────────────────────── */
.product-gallery {
    position: relative;
}

/* Миниатюры — оверлей поверх фото (в макете колонка миниатюр входит
   в те же 728px, а не добавляется сбоку), поэтому позиционируем абсолютно
   поверх .product-gallery__main вместо flex-соседа. */
.product-gallery__thumbs {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 6;
    width: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.product-gallery__thumb-nav {
    flex-shrink: 0;
    width: 100%;
    padding: 4px 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-gallery__thumb-nav svg {
    width: 17px;
    height: auto;
}
.product-gallery__thumb-nav--up { color: #797C95; }
.product-gallery__thumb-nav--down { color: var(--black); }
.product-gallery__thumb-nav:hover { color: var(--purple); }

.product-gallery__thumb-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 0 1 auto;
    max-height: 100%;
    min-height: 0;
}

.product-gallery__thumb {
    position: relative;
    width: 75px;
    height: 75px;
    padding: 4px;
    border: 1px solid var(--gray-border);
    border-radius: 0;
    background: var(--white);
    flex-shrink: 0;
}

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

.product-gallery__thumb:hover,
.product-gallery__thumb--active {
    border-color: var(--purple);
}

.product-gallery__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
}
.product-gallery__play img {
    width: 46px;
    height: 46px;
}

/* Контейнер фото (с бейджами и слайдами внутри) — не более 728×728
   (кадр в макете), даже если колонка грида шире; тянется только вниз
   до этого максимума, на узких экранах сжимается вместе с колонкой. */
.product-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 728px;
    max-height: 728px;
    background: var(--white);
    overflow: hidden;
}

.product-gallery__badges {
    position: absolute;
    top: 10px;
    z-index: 5;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 220px;
}
/* left = ширина оверлея миниатюр (75) + прежний зазор до фото (20) + исходный
   отступ от края фото (16), чтобы бейджи не перекрывались с миниатюрами. */
.product-gallery__badges--left {
    left: 100px;
    align-items: flex-start;
}
.product-gallery__badges--right {
    right: 16px;
    align-items: flex-end;
}

/* Иконки избранного/сравнения поверх фото — только мобильный (responsive.css) */
.product-gallery__mobile-icons {
    display: none;
}

/* Слайды: на десктопе — стопка друг на друге, активный показан через opacity
   (переключается кликом по миниатюре). На мобильном становятся свайп-лентой
   с точками пагинации — см. responsive.css. */
.product-gallery__slides {
    position: absolute;
    inset: 0;
}

.product-gallery__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.product-gallery__slide--active {
    opacity: 1;
    pointer-events: auto;
}

.product-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Точки пагинации — только мобильный */
.product-gallery__dots {
    display: none;
}

/* ─────────────────────────────────────────
   BUY-CARD — блок покупки (без карточки-рамки,
   без скруглений — плоская колонка контента)
───────────────────────────────────────── */
.buy-card {
    position: sticky;
    top: 24px;
}

/* Светло-серая подложка под ценой и кнопками покупки — только десктоп,
   на мобильном сбрасывается в responsive.css. */
.buy-card__price-block {
    background: var(--gray-bg);
    padding: 36px 20px;
}

/* Цены: по умолчанию блок верстается в варианте «2 цены»
   (наличные / рассрочка). Модификатор .buy-card--single-price
   переключает карточку в одноценовое состояние без изменения разметки. */
.buy-card__prices {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.buy-card__price-option {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    cursor: pointer;
}

/* Кастомный радио вместо нативного — у accent-color нет контроля над
   размером точки относительно круга, а нужна точка заметно меньше круга. */
.buy-card__price-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin: 0;
    border: 1.5px solid var(--black);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}
.buy-card__price-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    transform: translate(-50%, -50%);
}

.buy-card__price {
    font-size: 30px;
    font-weight: 450;
    line-height: 1;
}

.buy-card__price-old {
    font-size: 18px;
    color: var(--gray-text);
    text-decoration: line-through;
}

.buy-card__price-note {
    font-size: 14px;
}

/* Модификатор: одноценовая карточка */
.buy-card--single-price .buy-card__price-option + .buy-card__price-option {
    display: none;
}
.buy-card--single-price .buy-card__price-option {
    border: none;
    padding: 0;
    cursor: default;
}
.buy-card--single-price .buy-card__price-option input[type="radio"] {
    display: none;
}

.buy-card__actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 14px;
}
/* Последняя строка в блоке цены — нижний отступ уже даёт padding
   у .buy-card__price-block, свой margin-bottom тут лишний. */
.buy-card__actions-row--secondary {
    margin-bottom: 0;
}

.buy-card__btn {
    padding: 14px 24px;
    border-radius: 0;
    border: none;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.buy-card__btn--primary {
    background: var(--purple);
    color: var(--white);
}
.buy-card__btn--primary:hover { background: var(--purple-btn); }

.buy-card__btn--outline {
    background: var(--white);
    color: var(--purple);
    border: 1px solid var(--purple);
}
.buy-card__btn--outline:hover {
    background: #FAF5FF;
}

.buy-card__icon-link {
    display: flex;
    align-items: center;
    gap: 6px;
    stroke: var(--black);
    background: none;
    border: none;
    font-size: 14px;
}
.buy-card__icon-link:hover {
    stroke: var(--purple);
    color: var(--purple);
}

.buy-card__credit-link {
    color: var(--purple);
    text-decoration: none;
    font-size: 16px;
}

/* Отступ перед FAQ — такой же, как padding у карточки цены над ним */
.buy-card__extra--desktop {
    margin-top: 30px;
}

/* Место под виджет ROI-калькулятора — верстается отдельной задачей.
   На десктопе показан в .product-tabs__calculator (сайдбар рядом с табами),
   на мобильном — отдельной копией после табов (.buy-card__extra--mobile). См. responsive.css. */
.buy-card__extra--mobile {
    display: none;
}

.buy-card__calculator-slot {
    min-height: 64px;
    margin: 6px 0 24px;
    padding: 12px;
    border: 1px dashed var(--gray-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gray-text);
    font-size: 13px;
}

.buy-card__faq-item {
    padding: 14px 0;
}
.buy-card__faq-item:first-child { padding-top: 0; }

.buy-card__faq-question {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.buy-card__faq-answer {
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-mid);
}

/* Десктоп: все вопросы видны всегда, обрезан только текст последнего ответа —
   «Развернуть» раскрывает его целиком (не скрывает целые вопросы). */
.buy-card__faq-answer--clamp {
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.buy-card__faq-answer--clamp.active {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.buy-card__faq-toggle {
    margin-top: 6px;
}

/* ─────────────────────────────────────────
   ТАБЫ: Описание / Характеристики / Отзывы / Оплата / Доставка / Гарантии
   Секция на всю ширину экрана (серый фон), как .cat-seo в каталоге —
   HTML-обёртка секции лежит вне .container страницы.
───────────────────────────────────────── */
.product-tabs {
    margin-top: 56px;
    background: var(--gray-bg);
    padding: 56px 0 56px;
}

/* Контент таба слева, калькулятор — персистентный сайдбар справа (десктоп).
   670 Fill × 770px по макету при ширине страницы 1600 (контент тянется,
   колонка калькулятора фиксированная — под форму с тремя полями в ряд). */
.product-tabs__body {
    display: grid;
    grid-template-columns: 1fr 770px;
    gap: 40px;
    align-items: start;
}
.product-tabs__panels {
    min-width: 0;
}
.product-tabs__calculator {
    position: sticky;
    top: 24px;
    background: var(--white);
    min-height: 100%;
}

.product-tabs__nav {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gray-border);
    margin-bottom: 38px;
}
.product-tabs__nav-btn {
    background: none;
    border: none;
    padding: 0 0 16px;
    margin-bottom: -1px;
    font-size: 16px;
    font-family: inherit;
    color: var(--gray-text);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-weight: 550;
}
.product-tabs__nav-btn:hover { color: var(--black); }
.product-tabs__nav-btn--active {
    color: var(--black);
    font-weight: 600;
    border-bottom-color: var(--purple);
}

.product-tabs__panel {
    display: none;
}
.product-tabs__panel--active {
    display: block;
}

/* Описание */
.product-description__title {
    font-size: 24px;
    font-weight: 500;
    color: var(--gray-heading);
    margin: 28px 0 28px;
}
.product-description__title:first-child { margin-top: 0; }
.product-description__text {
    max-width: 860px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-mid);
    margin-bottom: 12px;
}
.product-description__list {
    max-width: 860px;
    list-style: disc;
    padding-left: 18px;
    margin-bottom: 16px;
}
.product-description__list li {
    font-size: 15px;
    line-height: 1.75;
    color: var(--black);
    margin-bottom: 8px;
}
.product-description__list li::marker {
    color: var(--purple);
}
.product-description__list strong {
    color: var(--black);
    font-weight: 500;
    font-size: 20px;
}
.product-description__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    padding: 0;
    color: var(--purple);
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
}
.product-description__more-label {
    border-bottom: 2px dotted var(--purple);
    padding-bottom: 2px;
}
.product-description__more-arrow {
    width: 16px;
    height: 16px;
    display: block;
}
.product-description__more-text {
    display: none;
    max-width: 860px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--gray-mid);
}
.product-description__more-text.active { display: block; }

/* «Каким учреждениям подходит» + «Для бизнеса» — на десктопе видны всегда
   (попадают в спойлер только на мобильном, см. responsive.css). */
.product-description__extra {
    display: block;
}

.product-tabs__lead {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-heading);
    margin-bottom: 16px;
}

.product-tabs__more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--purple);
    font-size: 15px;
    text-decoration: underline;
}
.product-tabs__more-link img {
    width: 18px;
    height: auto;
}

.product-tabs__list li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--black);
}
.product-tabs__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
}

/* Характеристики: таблица спецификаций */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 24px;
}
.specs-table tr { border-bottom: 1px solid var(--gray-border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th,
.specs-table td {
    padding: 20px 0;
    font-size: 15px;
    font-weight: 400;
    vertical-align: top;
}
.specs-table th {
    text-align: left;
    width: 45%;
    color: var(--black);
    font-weight: 600;
    padding-right: 20px;
}
.specs-table td {
    text-align: right;
    color: var(--black);
}

/* Отзывы */
.reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.review-card {
    background: var(--white);
    padding: 24px;
}
.review-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.review-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.review-card__star {
    width: 15px;
    height: 15px;
}
/* Серая звезда — отдельный инлайн-SVG с заливкой #CCCCCC (тот же путь, что
   и в Star.svg), а не CSS mask поверх золотой — mask ненадёжно рендерится
   в части браузеров/настроек. */
.review-card__author {
    font-size: 15px;
    font-weight: 300;
}
.review-card__date {
    font-size: 13px;
    color: var(--gray-text);
    white-space: nowrap;
}
.review-card__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gray-mid);
}