/*
 * SWEB Market — страница товара: галерея, блок покупки, опции, вкладки.
 */

.sw-product {
    padding-block: 16px 32px;
}

/* Две колонки: слева всё про товар, справа блок покупки. Правая колонка
   фиксированной ширины — цена и кнопка не должны ездить по экрану вслед
   за длиной названия товара. */
.sw-product__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 992px) {
    .sw-product__layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
        gap: 24px;
    }
}

.sw-product__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* На узком экране колонка одна, и блок покупки не должен уезжать в самый
   низ, за отзывы: цену и кнопку надо видеть сразу после фотографии.
   Раскрываем левую колонку в поток родителя (display: contents) и
   расставляем секции порядком — разметка для обеих раскладок остаётся
   одна и та же, дублировать блок покупки не приходится. */
@media (max-width: 991.98px) {
    .sw-product__main {
        display: contents;
    }

    .sw-ptabs {
        order: 1;
    }

    .sw-product__head {
        order: 2;
    }

    .sw-buybox {
        order: 3;
    }

    /* Описание, характеристики и отзывы идут следом и сохраняют между
       собой порядок разметки — одинаковый order этому не мешает. */
    .sw-product__main > .sw-panel:not(.sw-product__head) {
        order: 4;
    }
}

/* ------------------------------------------------------- Полоса разделов -- */

.sw-ptabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
    scrollbar-width: none;
    /* Липнет под шапкой: страница товара длинная, и без этого до отзывов
       приходится скроллить обратно наверх. */
    position: sticky;
    top: var(--sw-sticky-top);
    z-index: 3;
}

.sw-ptabs::-webkit-scrollbar {
    display: none;
}

.sw-ptabs__item {
    flex: none;
    padding: 14px 20px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--sw-text-dim);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--sw-transition-fast);
}

.sw-ptabs__item:hover {
    color: var(--sw-ink);
}

.sw-ptabs__item.is-active {
    border-bottom-color: var(--sw-primary);
    color: var(--sw-ink);
    font-weight: 600;
}

/* ------------------------------------------------------- Секции страницы -- */

/* Разделы не переключаются, а лежат друг под другом отдельными карточками:
   так их индексирует поиск и находит Ctrl+F. Полоса разделов только
   прокручивает к нужной. */
.sw-panel {
    padding: 20px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
    /* Якорь останавливается ниже шапки и полосы разделов, иначе заголовок
       секции уезжает под них. */
    scroll-margin-top: calc(var(--sw-sticky-top) + 68px);
}

@media (min-width: 992px) {
    .sw-panel {
        padding: 24px;
    }
}

.sw-panel__title {
    margin: 0 0 16px;
    font-size: 1.125rem;
}

/* Шапка товара: галерея и сводка в две колонки. */
.sw-product__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .sw-product__head {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 24px;
    }
}

.sw-product__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ------------------------------------------------ Короткие характеристики -- */

.sw-product__specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--sw-border-strong);
}

.sw-product__specs-title {
    font-size: .875rem;
    font-weight: 700;
}

.sw-product__specs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    font-size: .8125rem;
}

/* Точечный поводок между названием и значением, как на референсе: без него
   глаз теряет строку, когда название длинное, а значение короткое.
   Порядок задан явно — псевдоэлемент контейнера идёт последним в потоке,
   а нужен он между dt и dd. */
.sw-product__spec {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sw-product__spec dt {
    order: 1;
    flex: 0 1 auto;
    color: var(--sw-text-muted);
    font-weight: 400;
}

.sw-product__spec::after {
    order: 2;
    content: '';
    flex: 1 1 16px;
    min-width: 16px;
    margin-bottom: .3em;
    border-bottom: 1px dotted var(--sw-border-strong);
}

.sw-product__spec dd {
    order: 3;
    flex: 0 1 auto;
    margin: 0;
    color: var(--sw-ink);
    text-align: right;
}

/* ------------------------------------------------- Доставка та оплата -- */

.sw-product__terms {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sw-border-strong);
}

.sw-product__term {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .8125rem;
}

.sw-product__term .sw-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--sw-primary);
}

.sw-product__term-title {
    font-weight: 700;
}

.sw-product__term-text {
    color: var(--sw-text-muted);
}

/* --------------------------------------- Стеження за ціною / дешевше -- */

.sw-product__price-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.sw-product__price-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
}

.sw-product__price-action .sw-icon {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------- Галерея -- */

.sw-gallery__stage {
    /* Без потолка квадратная сцена на широком экране растягивается до
       ~790px и уводит блок покупки ниже первого экрана — покупатель
       не видит цену и кнопку без прокрутки. */
    max-width: 520px;
    margin-inline: auto;
    background: var(--sw-surface);
    border-radius: var(--sw-radius-lg);
    overflow: hidden;
}

.sw-gallery__thumbs {
    max-width: 520px;
    margin-inline: auto;
}

.sw-gallery__main {
    display: block;
    aspect-ratio: 1;
}

.sw-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sw-gallery__thumbs {
    margin-top: 12px;
}

.sw-gallery__thumb {
    flex: none;
    width: 72px;
    height: 72px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: var(--sw-radius);
    background: var(--sw-surface);
    cursor: pointer;
}

.sw-gallery__thumb.is-active {
    border-color: var(--sw-primary);
}

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

.sw-product__title {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.25;
}

/* Оценка слева, код товара справа — отделены линиями, как на референсе:
   это служебная строка, и её надо визуально отбить от названия. */
.sw-product__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-block: 16px;
    border-top: 1px solid var(--sw-border-strong);
    border-bottom: 1px solid var(--sw-border-strong);
    color: var(--sw-text-muted);
    font-size: .75rem;
}

.sw-product__rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sw-product__reviews {
    color: var(--sw-ink);
    font-weight: 500;
}

.sw-product__brand {
    font-size: .875rem;
}

/* ------------------------------------------------------------ Блок покупки -- */

.sw-buybox {
    align-self: start;
}

@media (min-width: 992px) {
    .sw-buybox {
        /* Прилипает при прокрутке длинного описания: цена и кнопка должны
           оставаться на экране, пока покупатель читает характеристики. */
        position: sticky;
        top: calc(var(--sw-sticky-top) + 16px);
    }
}

.sw-buybox__card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface);
}

.sw-buybox__head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sw-border-strong);
}

/* Избранное и сравнение — в угол блока, а не в ряд с кнопкой покупки:
   рядом с «Купити» они перетягивают на себя внимание и клики. */
.sw-buybox__tools {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 8px;
}

.sw-buybox__stock {
    /* Место под иконки в углу, иначе длинный статус наличия заезжает под них. */
    padding-right: 92px;
    color: var(--sw-success);
    font-size: .875rem;
    font-weight: 500;
}

.sw-buybox__stock.is-out {
    color: var(--sw-danger);
}

.sw-product__price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sw-product__price-old-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sw-product__price-new {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

/* Красным — только цена со скидкой. Одинокая красная цена читается
   как ошибка, а не как выгода; то же правило в карточке каталога. */
.sw-product__price-new.is-special {
    color: var(--sw-danger);
}

.sw-product__price-old {
    color: var(--sw-text-muted);
    font-size: .9375rem;
    font-weight: 500;
}

.sw-product__price-notes {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sw-text-muted);
    font-size: .8125rem;
}

.sw-product__minimum {
    margin: 0;
    color: var(--sw-text-muted);
    font-size: .8125rem;
}

/* ---------------------------------------------------------------- Опции -- */

.sw-product__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sw-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.sw-option__label {
    padding: 0;
    color: var(--sw-ink);
    font-size: .875rem;
    font-weight: 600;
}

.sw-option.is-required > .sw-option__label::after {
    content: ' *';
    color: var(--sw-danger);
}

.sw-option.is-invalid .sw-input,
.sw-option.is-invalid .sw-select,
.sw-option.is-invalid .sw-textarea {
    border-color: var(--sw-error-border);
    background: var(--sw-error-bg);
}

.sw-option__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sw-option__choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius);
    font-size: .875rem;
    cursor: pointer;
}

.sw-option__choice:has(input:checked) {
    border-color: var(--sw-primary);
    color: var(--sw-primary);
}

.sw-option__hint,
.sw-option__file-name {
    color: var(--sw-text-muted);
    font-size: .75rem;
}

/* -------------------------------------------------------- Кнопка покупки -- */

.sw-product__cart {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sw-product__add {
    flex: 1;
    min-width: 140px;
    height: 48px;
}

/* Крупный счётчик — только там, где под него есть место: карточка товара
   и строка корзины. Селекторы обязаны быть вложенными: product.css
   подключается после product-card.css, и голый `.sw-qty` перебивал бы
   компактный счётчик в карточках каталога — кнопка «Купити» переносилась
   в две строки и ломала высоту ряда. */
.sw-product__cart .sw-qty,
.sw-cartrow__qty .sw-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius);
    overflow: hidden;
}

.sw-product__cart .sw-qty__btn,
.sw-cartrow__qty .sw-qty__btn {
    width: 38px;
    height: 46px;
    border: 0;
    background: none;
    color: var(--sw-text-dim);
    font-size: 1.125rem;
    cursor: pointer;
}

.sw-product__cart .sw-qty__btn:hover,
.sw-cartrow__qty .sw-qty__btn:hover {
    color: var(--sw-primary);
}

.sw-product__cart .sw-qty__input,
.sw-cartrow__qty .sw-qty__input {
    width: 44px;
    height: 46px;
    border: 0;
    background: none;
    color: var(--sw-ink);
    font: inherit;
    font-size: .9375rem;
    text-align: center;
}

.sw-qty__input:focus {
    outline: none;
}

/* ---------------------------------------------------------------- Текст -- */

.sw-prose {
    max-width: 76ch;
    color: var(--sw-text-dim);
}

.sw-prose img {
    border-radius: var(--sw-radius);
}

/* ------------------------------------------------------- Характеристики -- */

.sw-specs {
    width: 100%;
    margin-bottom: 20px;
    border-collapse: collapse;
    font-size: .875rem;
}

.sw-specs caption {
    padding-bottom: 8px;
    color: var(--sw-ink);
    font-weight: 600;
    text-align: left;
}

.sw-specs th,
.sw-specs td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sw-border);
    text-align: left;
    font-weight: 400;
}

.sw-specs th {
    width: 40%;
    color: var(--sw-text-muted);
}

.sw-specs tr:hover {
    background: var(--sw-table-hover);
}

/* --------------------------------------------------------------- Отзывы -- */

.sw-reviews {
    margin-bottom: 24px;
}

/* Форма лежит внутри секции-карточки, поэтому своей подложки у неё нет —
   иначе получилась бы белая плашка на белой. */
.sw-review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
    padding-top: 20px;
    border-top: 1px solid var(--sw-border-strong);
}

.sw-review-form__title {
    margin: 0;
    font-size: 1.125rem;
}

.sw-review-form__rating {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sw-text-muted);
    font-size: .8125rem;
}

.sw-review-form__rating label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--sw-ink);
    cursor: pointer;
}

/* Один отзыв — карточка. В ядре каждый отзыв обёрнут в отдельную таблицу,
   поэтому список выглядел как набор рамок. */
.sw-reviews__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.sw-review {
    padding: 16px 20px;
    border-radius: var(--sw-radius-lg);
    background: var(--sw-bg);
}

.sw-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.sw-review__author {
    color: var(--sw-ink);
    font-weight: 600;
}

.sw-review__date {
    color: var(--sw-text-muted);
    font-size: .8125rem;
}

.sw-review__text {
    margin: 8px 0 0;
    color: var(--sw-text-dim);
    line-height: 1.6;
}

.sw-reviews__empty {
    color: var(--sw-text-muted);
}

/* ---------------------------------------------------------------- Капча -- */

.sw-captcha__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sw-captcha__row .sw-input {
    max-width: 200px;
}

.sw-captcha__image {
    display: block;
    border-radius: var(--sw-radius-sm);
}

/* ----------------------------------------------------------------- Теги -- */

.sw-product__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--sw-text-muted);
    font-size: .8125rem;
}

/* --------------------------------------------------------------- FAQ -- */

/* .sw-collapse сам стиль лежит в components/cart.css (там же, где сворачиваемая
   оцінка доставки) — токены общие, дублировать незачем. */
.sw-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --------------------------------------------------------- Комплект -- */

.sw-bundle {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px dashed var(--sw-border-strong);
    border-radius: var(--sw-radius-lg);
    background: var(--sw-surface-alt, var(--sw-surface));
}

.sw-bundle__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: .875rem;
}

.sw-bundle__head .sw-icon {
    width: 18px;
    height: 18px;
    color: var(--sw-primary);
}

.sw-bundle__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sw-bundle__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    cursor: pointer;
}

.sw-bundle__item img {
    flex-shrink: 0;
    border-radius: var(--sw-radius-sm);
    object-fit: contain;
    background: var(--sw-bg);
}

.sw-bundle__item-name {
    flex: 1;
    color: var(--sw-ink);
}

.sw-bundle__item-price {
    flex-shrink: 0;
    color: var(--sw-text-muted);
}

.sw-bundle__summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: .8125rem;
}

.sw-bundle__old {
    color: var(--sw-text-muted);
    text-decoration: line-through;
}

.sw-bundle__save {
    color: var(--sw-success);
    font-weight: 700;
}