/* ===== Комплект товара ===== */

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

/* ===== Kit / Комплект ===== */
.pb-kit{
  padding:16px;
}

.pb-kit__title{
  font-weight:800;
  font-size:18px;
  margin-bottom:12px;
  color:#111;
}

.pb-kit__list{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
}

.pb-kit__item{
  min-width:190px;
  display:flex;
  gap:10px;
  align-items:center;
  background:rgba(0,0,0,.04);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
  transition:.15s ease;
}

.pb-kit__item:hover{
  background:rgba(0,0,0,.07);
}

.pb-kit__img img{
  width:60px;
  height:60px;
  border-radius:12px;
  object-fit:cover;
  display:block;
}

.pb-kit__info{
  flex:1;
  min-width:0;
}

.pb-kit__name{
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pb-kit__qty{
  margin-top:6px;
  display:inline-block;
  font-size:12px;
  font-weight:800;
  padding:3px 10px;
  border-radius:999px;
  background:#fff;
  color:#111;
}

/* ===== Kit Modal ===== */
.kitm{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
}

.kitm.open{ display:block; }

.kitm__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.kitm__card{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw,360px);
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.kitm__close{
  position:absolute;
  right:10px;
  top:6px;
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer;
  line-height:1;
}

.kitm__img{
  width:100%;
  border-radius:14px;
  display:block;
  margin-bottom:10px;
}

.kitm__title{
  font-weight:900;
  font-size:16px;
  margin-bottom:6px;
  color:#0f172a;
}

.kitm__text{
  font-size:14px;
  line-height:1.35;
  opacity:.9;
}
.kitm__subtitle{
  font-weight:700;
  font-size:14px;
  opacity:.85;
  margin-bottom:6px;
}

.kitm__list{
  margin:10px 0 0;
  padding-left:18px;
  font-size:14px;
  line-height:1.35;
  opacity:.9;
}

@media (min-width: 768px) {
    /* Переменные */
    .prPage {
        max-width: 1268px;
        margin: 0 auto;
    }
    .container {
        max-width: 1300px;
        margin: 0px auto;
        padding: 0 16px;
    }
    :root {
        --sidebar-width: 360px;
    }

    /* Сброс отступов/шрифта */
    html {
        scroll-behavior: smooth;
    }
    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        background: #f9f9f9;
    }

    .product-page {
        max-width: 1300px;
        margin: 0 auto;
        padding: 0px 16px;
    }
    /* 1) Основной грид: галерея слева, сайдбар справа */
    .prod-top {
        display: grid;
        grid-template-columns: 0.55fr 0.45fr;
        gap: 15px;
        align-items: start;
    }

    /* 2) Галерея товаров (первый ptb-card.no-padding) */
    .prod-top > .ptb-card.no-padding {
        grid-column: 1;
        overflow: hidden;
        border-radius: 12px;
    }
    .prod-top > .ptb-card.no-padding .owl-carousel {
        width: 100%;
    }
    /* Скрыто по умолчанию */
    /* === Общий оверлей === */
    .img-modal {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }

    /* при активном классе — показываем оверлей */
    .img-modal.active {
        opacity: 1;
        visibility: visible;
    }

    /* === Контейнер с картинкой === */
    .img-modal__content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
        border-radius: 8px;
        overflow: hidden;
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }

    /* при активном оверлее контейнер масштабируется в 1× */
    .img-modal.active .img-modal__content {
        transform: scale(1);
    }

    /* Закрывающий крестик */
    .img-modal__close {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        border: none;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    .img-modal__close:hover {
        background: rgba(255, 255, 255, 1);
    }

    /* Само изображение */
    .img-modal__img {
        display: block;
        width: 100%;
        height: 745px;
    }

    /* 3) Сайдбар: все основные блоки (price, цвет, кнопки, отзывы, преимущества) */
    .prod-top > .ptb-card.qty-card,
    .prod-top > .ptb-color-select,
    .prod-top > .ptb-reviews-row,
    .prod-top > .advantages-block,
    .prod-top > .specs-block {
        grid-column: 2;
        margin: 0; /* убираем мобильные отступы сверху */
    }

    /* 3.1) Price-card */
    .qty-info .ptb-price-block {
        display: flex;
        align-items: center;
        gap: 8px;
    }
/*    .price-card .new-price {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
    }*/
    .ptb-price-block .old-price {
        font-size: 20px;
        color: #777;
        text-decoration: line-through;
    }
    .ptb-price-block .tag {
        background: color-mix(in srgb, var(--primary-color) 12%, #fff);
        color: var(--primary-color);
        font-size: 16px;
        padding: 2px 6px;
        border-radius: 6px;
    }
    /* Короткий промотекст */

    .ptb-card {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 6px 16px rgba(17, 24, 39, .06);
        margin-top: 15px;
    }
    /* 3.2) Цвета */
    .ptb-color-select .cs-label {
        font-size: 16px;
        color: #555;
        margin-bottom: 8px;
    }
    .ptb-color-select .cs-swatches {
        display: flex;
        gap: 8px;
    }
    .ptb-color-select .swatch {
        flex: 0 0 auto;
        width: 60px;
        height: 60px;
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        background: none;
    }
    .ptb-color-select .swatch.active {
        border-color: var(--primary-color);
    }
    .ptb-color-select .swatch img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    /* 3.3) Кнопки «Быстрый заказ / В корзину» */
    .btn-quick {
        background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 82%, #111827));
        color: #fff;
        box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 7%, transparent);
    }
    .btn-quick:hover {
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 92%, #fff), var(--primary-color));
    }
    .btn-cart {
        background: color-mix(in srgb, var(--primary-color) 42%, #333);
        color: #fff;
        box-shadow: 0 6px 14px rgba(17, 24, 39, .08);
    }
    .btn-cart img {
        width: 16px;
        height: 16px;
    }
    .btn-cart:hover {
        background: color-mix(in srgb, var(--primary-color) 54%, #1a1a1a);
    }

    /* 3.4) Отзывы и вопросы */
    .ptb-reviews-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.875rem;
        color: #555;
    }
    .ptb-reviews-row .pr-rating,
    .ptb-reviews-row .pr-photos,
    .ptb-reviews-row .pr-questions {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .ptb-reviews-row .pr-rating img {
        width: 20px;
        height: 20px;
    }
    .ptb-reviews-row .photos-btn {
        padding: 6px 12px;
        background: #eee;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }
    /* 1) Превью характеристик (стили строк — в секции SPECS v2 внизу файла) */
    .specs-preview {
        position: relative;
    }

    /* 2) Кнопка «Смотреть все» */
    .specs-toggle-btn {
        display: block;
        margin: 0.5em auto 0;
        padding: 0.5em 1em;
        background: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95rem;
    }

    /* === Модалка (как для отзывов) === */
    .modal-overlay {
        position: fixed;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }
    .modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    .modal-content {
        background: #fff;
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
        transform: translateY(-20px) scale(0.9);
        transition: transform 0.4s ease;
    }
    .modal-overlay.active .modal-content {
        transform: translateY(0) scale(1);
    }
    .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        padding: 1rem;
        text-align: center;
        font-size: 1.25rem;
        font-weight: 600;
        z-index: 10;
    }
    .modal-close {
        position: absolute;
        top: 8px;
        right: 12px;
        border: none;
        background: none;
        font-size: 1.5rem;
        cursor: pointer;
    }
    .specs-full-list {
        padding: 1rem;
    }

    /* 3.5) Преимущества */
    .advantages-block {
        margin: 15px 0px 0px 0px;
    }
    .advantages-list {
        padding: 15px 0 0 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .adv-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .adv-icon {
        width: 24px;
        height: 24px;
        background-color: var(--primary-color);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }
    .adv-one {
        mask-image: url("../icons/1.svg");
        -webkit-mask-image: url("../icons/1.svg");
    }
    .adv-two {
        mask-image: url("../icons/2.svg");
        -webkit-mask-image: url("../icons/2.svg");
    }
    .adv-free {
        mask-image: url("../icons/3.svg");
        -webkit-mask-image: url("../icons/3.svg");
    }
    .adv-four {
        mask-image: url("../icons/4.svg");
        -webkit-mask-image: url("../icons/4.svg");
    }

    /* 4) Видео и описания под обоими столбами */
    .video-block,
    .description-block {
        grid-column: 1 / -1;
        margin-bottom: 15px;
    }

    /* 4.1) Видео */
    .video-container {
        width: 100%;         /* или 100% */
        aspect-ratio: 1 / 1;  /* делает контейнер квадратным */
        overflow: hidden;
        border-radius: 12px;
    }

    /* 4.2) Описание */
    .description-block {
        background: #fff;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .description-img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        object-fit: cover;
        margin-bottom: 12px;
    }
    .description-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
    }
    .description-text {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
    }

    /* 5) Скрываем мобильные обёртки на десктопе */
    .action-block-wrapper,
    .mobile-footer {
        display: none !important;
    }
    /* Видео + текст в ряд на десктопе */
    .video-block__inner {
        display: flex;
        flex-direction: column; /* мобилка — столбец */
        gap: 1rem;
    }

    /* Контейнер медиа (само видео) */
    .video-block__media {
        flex: 1 1 50%; /* займёт половину */
    }

    /* Контент справа */
    .video-block__content {
        flex: 1 1 50%;
    }
    /* === СЕТКА ДЛЯ БЛОКОВ ОПИСАНИЯ === */
    .description-grid {
        display: grid;
        grid-template-columns: 0.5fr 0.5fr;
        gap: 15px;
        align-items: start;
    }

    /* Каждый .description-row займет всю ширину контейнера */
    .description-grid .description-row {
        margin: 0; /* ptb-card уже даёт отступ */
    }

    /* Внутри каждого .description-row — свой грид на 2 колонки */
    .description-row__inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        align-items: start;
    }

    /* Картинка */
    .description-row__media img {
        width: 100%;
        display: block;
        border-radius: 8px;
        object-fit: cover;
    }

    /* Контент (тайтл + текст) */
    .description-row__content {
        /* по умолчанию стоит справа от картинки */
    }
    /* === Расширяем описание-грид === */
    .description-row__media img {
        width: 100%;
        display: block;
        border-radius: 8px;
        object-fit: cover;
    }
    /* Стили списка характеристик — см. секцию SPECS v2 внизу файла */
    /* ===== 1. Общие сбросы для overlay ===== */
    .modal-overlay {
        position: fixed; /* фиксируем поверх всего */
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        background: rgba(0, 0, 0, 0.5); /* полупрозрачный фон */
        display: flex; /* flex-центрирование контента */
        align-items: center;
        justify-content: center;

        /* по умолчанию скрыт */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 10000; /* поверх всего */
    }

    /* при активном классе показываем */
    .modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* ===== 2. Стили для содержимого модалки ===== */
    .modal-content {
        background: #fff;
        border-radius: 12px;
        max-width: 90%;
        max-height: 80vh;
        width: 400px; /* можно подстроить */
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

        /* анимация подъёма+масштаба */
        transform: translateY(-20px) scale(0.9);
        transition: transform 0.25s ease;
    }

    /* при .active возвращаем нормальную позицию */
    .modal-overlay.active .modal-content {
        transform: translateY(0) scale(1);
    }

    /* Стили шапки и кнопки закрытия */
    .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        padding: 1rem;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 600;
        z-index: 1;
    }

    .modal-close {
        position: absolute;
        top: 8px;
        right: 12px;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }

    /* ===== 3. Стили для Cart Toast ===== */
    .cart-toast {
        position: fixed;
        bottom: 80px; /* подвинуть выше мобильного футера */
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-color);
        color: #fff;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 10001;
    }

    /* показать toast */
    .cart-toast.show {
        opacity: 1;
        pointer-events: all;
    }
    /* Стиль для формы внутри модалки */
    .modal-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem 1rem; /* отступы вокруг */
    }

    /* Общие стили для лейбла и поля */
    .modal-form label {
        display: flex;
        flex-direction: column;
        font-size: 0.95rem;
        color: #333;
        gap: 0.25rem;
    }

    /* Входные поля и textarea */
    .modal-form input[type="text"],
    .modal-form input[type="tel"],
    .modal-form select,
    .modal-form textarea {
        width: 100%;
        padding: 0.6rem 0.8rem;
        font-size: 1rem;
        color: #333;
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 6px;
        transition: border-color 0.2s ease;
        outline: none;
    }

    /* Фокус на поле */
    .modal-form input:focus,
    .modal-form select:focus,
    .modal-form textarea:focus {
        border-color: var(--primary-color);
        background: #fff;
    }

    /* Высота textarea */
    .modal-form textarea {
        resize: none;
        min-height: 80px;
    }

    /* Кнопка отправки */
    .modal-submit {
        align-self: flex-end; /* прижмём вправо */
        background: var(--primary-color);
        color: #fff;
        border: none;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    /* Ховер на кнопку */
    .modal-submit:hover {
        background: color-mix(in srgb, var(--primary-color) 76%, #111827);
    }
    /* Общие стили для оверлея */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 10000;
    }

    .modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* Контейнер с контентом */
    .modal-content {
        background: #fff;
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-20px) scale(0.9);
        transition: transform 0.4s ease;
    }

    .modal-overlay.active .modal-content {
        transform: translateY(0) scale(1);
    }

    /* Заголовок */
    .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #eee;
        z-index: 10;
    }

    .modal-header h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
    }

    .modal-close {
        position: absolute;
        top: 12px;
        right: 16px;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #666;
        cursor: pointer;
    }

    /* Список отзывов */
    .reviews-list {
        padding: 1rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    /* Один отзыв */
    .review-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Оценка */
    .review-rating {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
        color: #333;
    }

    .pr-rating .rew-icon,
    .review-rating .rew-icon {
        width: 16px;
        height: 16px;
        background-color: var(--primary-color);
        mask: url("../icons/star.svg") no-repeat center / contain;
        -webkit-mask: url("../icons/star.svg") no-repeat center / contain;
    }

    .review-rating span {
        line-height: 1;
    }

    /* Автор и тело отзыва */
    .review-author {
        font-weight: 600;
        color: #111;
    }

    .review-body {
        font-size: 0.95rem;
        line-height: 1.5;
        color: #555;
    }

    /* Отзыв с фото */
    .review-with-photo .review-photo img {
        width: 100%;
        max-width: 200px;
        border-radius: 8px;
        object-fit: cover;
        margin-top: 0.5rem;
    }

    /* Ответ магазина */
    .review-with-reply .store-reply {
        margin-top: 0.5rem;
        padding: 0.75rem;
        background: #f9f9f9;
        border-left: 4px solid var(--primary-color);
        border-radius: 4px;
    }

    .review-with-reply .store-reply strong {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
    }

    .review-with-reply .store-reply p {
        margin: 0;
        font-size: 0.9rem;
        color: #555;
        line-height: 1.4;
    }

    .video-block__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }

    .also-buy-hint {
        font-size: 22px;
    }
}
.specs-row {
    display: none;
}

/* ============================
   БЛОКИ МОБИЛЬНОЙ ВЕРСИИ
   ============================ */
@media (max-width: 767px) {
    .product-page {
        margin: 0px 15px;
    }
    .specs-block {
        display: none;
    }
    /* Обёртка прод-топ */
    .prod-top-mobile {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    /* Общая «карточка» */
    .ptb-card {
        margin: 15px 0 0 0;
        background: #fff;
        border-radius: 12px;
        padding: 12px;
        box-shadow: 0 6px 16px rgba(17, 24, 39, .06);
    }
    .ptb-card.no-padding {
        padding: 0;
    }

    /* --- 1) Галерея фото (OwlCarousel) --- */
    .ptb-card.no-padding .owl-carousel .item {
        border-radius: 12px;
        overflow: hidden;
    }
    .ptb-card.no-padding .owl-carousel .item img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
    .ptb-card.no-padding .owl-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* --- 2) Цена --- */
    .qty-info .ptb-price-block {
        display: flex;
        align-items: center;
        gap: 8px;
        /*    margin-bottom: 8px;*/
    }
    .price-card .new-price {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary-color);
    }
    .ptb-price-block .old-price {
        font-size: 20px;
        color: #777;
        text-decoration: line-through;
    }
    .ptb-price-block .tag {
        background: color-mix(in srgb, var(--primary-color) 12%, #fff);
        color: var(--primary-color);
        font-size: 16px;
        padding: 2px 6px;
        border-radius: 6px;
    }

/* QtyCard mobile */
.qty-card { margin: 1rem 0; }

.qty-body{
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
}

.qty-ctrl{
  width: 70px;
  height: 108px;
  border: 1px solid #e6e7ee;
  border-radius: 14px;
  background: #f6f7fb;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.qty-ctrl__input{ font-size: 24px; }
.qty-info .qty-sum{ font-size: 1.4rem; }
.qty-info .qty-note{ font-size: .95rem; }

    /* --- 3) Выбор цвета --- */
    .ptb-color-select .cs-label {
        margin-bottom: 8px;
        font-size: 0.875rem;
        color: #555;
    }
    .ptb-color-select .cs-swatches {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ptb-color-select .cs-swatches::-webkit-scrollbar {
        display: none;
    }
    .ptb-color-select .swatch {
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        border: 2px solid transparent;
        border-radius: 8px;
        background: none;
        cursor: pointer;
        padding: 0;
    }
    .ptb-color-select .swatch.active {
        border-color: var(--primary-color);
    }
    .ptb-color-select .swatch img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    /* --- 4) Отзывы и вопросы --- */
    .ptb-reviews-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.875rem;
        color: #555;
    }
    .ptb-reviews-row .pr-rating,
    .ptb-reviews-row .pr-photos,
    .ptb-reviews-row .pr-questions {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .ptb-reviews-row .pr-rating img {
        width: 16px;
        height: 16px;
    }
    .ptb-reviews-row .pr-rating .val,
    .ptb-reviews-row .pr-questions .q-val {
        font-weight: 600;
        color: #333;
    }
    .ptb-reviews-row .photos-btn {
        background: rgba(0, 0, 0, 0.05);
        border: none;
        border-radius: 8px;
        padding: 4px 8px;
        cursor: pointer;
    }

    /* === Advantages Block === */
    .advantages-block {
        margin: 15px 0;
    }
    .advantages-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 1rem;
/*        text-align: center;*/
    }
    .advantages-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
    }
    .adv-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .adv-item img {
        width: 40px;
        height: 40px;
        margin-bottom: 0.5rem;
        object-fit: contain;
    }
    .adv-item p {
        font-size: 15px;
        color: #555;
        margin: 0;
    }
    /* Общий размер и цвет иконок */
    .adv-icon {
        width: 40px;
        height: 40px;
        background-color: var(--primary-color); /* или любой другой цвет */
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
    }

    /* Подключаем конкретные SVG */
    .adv-one {
        mask-image: url("../icons/1.svg");
        -webkit-mask-image: url("../icons/1.svg");
    }
    .adv-two {
        mask-image: url("../icons/2.svg");
        -webkit-mask-image: url("../icons/2.svg");
    }
    .adv-free {
        mask-image: url("../icons/3.svg");
        -webkit-mask-image: url("../icons/3.svg");
    }
    .adv-four {
        mask-image: url("../icons/4.svg");
        -webkit-mask-image: url("../icons/4.svg");
    }

    /* Общие стили кнопок */
    .action-block button{
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        padding: 0.75rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.3s;
    }

    /* === Блок описания товара === */
    .description-block {
        background: #fff; /* белая карточка */
        border-radius: 12px;
        padding: 16px;
        margin: 1rem 0; /* отступ сверху/снизу */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* картинка во всю ширину карточки */
    .description-row__media img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px; /* скругляем только верх */
        object-fit: cover;
        margin-bottom: 12px;
    }

    /* заголовок блока */
    .description-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }

    /* сам текст описания */
    .description-text {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
    }

    /* === Видео-блок под карточки === */
    .video-block {
        margin: 1rem 0;
    }
    /* Обёртка, чтобы iframe сохранял 16:9 */
  .video-container {
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
  }

  .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .video-block__media
  {
    margin-bottom: 10px;
  }
    /* === Specs Block === */
    .specs-block {
        margin: 1rem 0;
    }
    .desc_image {
        display: none;
    }
    .specs-row {
        display: block;
    }
    .specs-row .description-row__inner .description-row__content .description-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 0.75rem;
    }
    /* ===== Запрет прокрутки страницы при открытой модалке ===== */
    body.no-scroll {
        overflow: hidden;
    }

    /* ===== Модальное окно с отзывами (существующие стили) ===== */
    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 12px;
        /*    padding: 1.5rem 1rem 1rem;*/
        max-width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .review-content
    {
        max-width: 400px;
        width: 90%;
/*        padding: 1rem;*/
    }

    .modal-overlay {
        opacity: 0;
        pointer-events: none; /* чтобы не кликабельна */
        transition: opacity 0.3s ease; /* фейд */
    }

    /* === Модалка: всегда находится на месте (display:flex), а показ/скрытие через opacity === */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease; /* увеличили длительность */
        z-index: 10000;
    }

    .modal-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

    /* === Контент: изначально чуть сверху и уменьшен === */
    .modal-content {
        transform: translateY(-20px) scale(0.9);
        transition: transform 0.5s ease; /* увеличили длительность */
    }

    /* === При активной модалке: нормальная позиция и 1× масштаб === */
    .modal-overlay.active .modal-content {
        transform: translateY(0) scale(1);
    }

    .modal-header {
        position: sticky;
        top: 0;
        background: #fff;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        border-bottom: 1px solid #eee;
        border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .form-modal
    {
        border-bottom: none;
        box-shadow: none;
    }

    /* Закрывающая кнопка */
    .modal-close {
        position: absolute;
        top: 8px;
        right: 12px;
        background: none;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        color: #333;
    }

    /* Список отзывов */
    .reviews-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 31px;
    }

    /* Общие стили одного отзыва */
    .review-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #eee;
    }
    .review-item:last-child {
        border-bottom: none;
    }

    /* Оценка */
    .review-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.9rem;
        color: #333;
    }
    .review-rating img {
        width: 16px;
        height: 16px;
    }

    /* 1) Текстовый отзыв */
    .review-text .review-author {
        font-weight: 600;
    }
    .review-text .review-body {
        color: #555;
        line-height: 1.5;
    }

    /* 2) Отзыв с картинкой */
    .review-with-photo .review-author,
    .review-with-photo .review-body {
        /* унаследовано */
    }
    .review-with-photo .review-photo {
        margin-top: 0.5rem;
    }
    .review-with-photo .review-photo img {
        width: 30%;
        border-radius: 8px;
        object-fit: cover;
    }

    /* 3) Отзыв с ответом магазина */
    .review-with-reply .review-author,
    .review-with-reply .review-body {
        /* унаследовано */
    }
    .review-with-reply .store-reply {
        margin-top: 0.75rem;
        padding: 0.75rem;
        background: #f9f9f9;
        border-left: 4px solid var(--primary-color);
        border-radius: 4px;
    }
    .review-with-reply .store-reply strong {
        display: block;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    .review-with-reply .store-reply p {
        margin: 0;
        color: #555;
        line-height: 1.4;
    }
    /* === Action Block: Quick Order & Add to Cart === */
    .action-block {
        transition: margin 0.3s ease;
        display: flex;
        gap: 12px;
        /*    margin: 1rem 0;*/
    }

    /* Общие стили кнопок */
    .action-block button {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        padding: 0.75rem;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.3s;
    }

    /* Быстрый заказ — акцентный цвет */
    .btn-quick {
        background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 82%, #111827));
        color: #fff;
        box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 7%, transparent);
    }
    .btn-quick:hover {
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 92%, #fff), var(--primary-color));
    }

    /* В корзину — вторичная (тёмная) кнопка */
    .btn-cart {
        background: color-mix(in srgb, var(--primary-color) 42%, #333);
        color: #fff;
        box-shadow: 0 6px 14px rgba(17, 24, 39, .08);
    }
    .btn-cart img {
        width: 16px;
        height: 16px;
    }
    .btn-cart:hover {
        background: color-mix(in srgb, var(--primary-color) 54%, #1a1a1a);
    }
    /* ===== Quick Order Modal ===== */
    /* переиспользуем .modal-overlay и .modal-content */
    #quickOrderModal .modal-content {
        max-width: 400px;
        width: 90%;
        padding: 1rem;
    }

    /* Форма внутри модалки */
    .modal-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .modal-form label {
        display: flex;
        flex-direction: column;
        font-size: 0.9rem;
        color: #333;
    }
    .modal-form input,
    .modal-form select,
    .modal-form textarea {
        margin-top: 4px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 1rem;
    }
    .modal-submit {
        background: var(--primary-color);
        color: #fff;
        border: none;
        padding: 0.75rem;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.3s;
    }
    .modal-submit:hover {
        background: color-mix(in srgb, var(--primary-color) 76%, #111827);
    }

    /* ===== Cart Toast ===== */
    .cart-toast {
        position: fixed;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-color);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s;
        z-index: 10001;
    }
    .cart-toast.show {
        opacity: 1;
    }

    /* высота и отступ футера — подгоните под ваш мобильный футер */
    :root {
        --mobile-footer-height: 60px;
        --ios-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Обёртка «action-block» фиксируется над футером */
    .action-block-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--mobile-footer-height) + var(--ios-safe-bottom) + 10px);
        opacity: 0;
        visibility: hidden;
        padding: 0 4%;
        transition: bottom 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
    }

    /* когда нужно показать — добавим класс .show */
    .action-block-wrapper.show {
        opacity: 1;
        visibility: visible;
    }
    /* Когда футер скрыт, «прилипает» к низу экрана */
    .action-block-wrapper.sticky {
        bottom: calc(var(--ios-safe-bottom) + 10px);
    }

    /* Мобильный футер: плавное скрытие/появление */
    .mobile-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: max(10px, var(--ios-safe-bottom));
        width: auto;
        margin: 0 4%;
        transition: transform 0.3s ease;
        z-index: 999;
    }
    .mobile-footer.hide {
        transform: translateY(140%);
    }
    .mobile-footer.show {
        transform: translateY(0);
    }
    .action-block.hide {
        margin: 0px 0 10px 0;
    }
    .action-block.show {
        margin: 0px;
    }
    .site-info {
        margin: 12px 15px 14px 15px;
    }
    .also-buy-hint {
        font-size: 15px;
    }
    .img-modal {
        display: none;
    }
    .container {
        padding: 0px;
    }
    .pr-rating .rew-icon,
    .review-rating .rew-icon {
        width: 16px;
        height: 16px;
        background-color: var(--primary-color);
        mask: url("../icons/star.svg") no-repeat center / contain;
        -webkit-mask: url("../icons/star.svg") no-repeat center / contain;
    }

}
/* === Also-Buy Section === */
.also-buy-block {
    margin: 1.5rem 0;
}

.also-buy-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.also-buy-hint {
    text-align: center;
    font-weight: 600;
    margin: 10px 0px;
    color: #333;
}

/* Owl-Carousel контейнер */
.also-buy-carousel {
    position: relative;
}

/* Карточка */
.also-buy-card {
    position: relative;
    cursor: pointer;
    background: #fff;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
}

/* При фокусе/hover тоже подсветим */
/*.also-buy-card:focus {
  border-color: var(--primary-color);
}*/

/* Отмеченная */
.also-buy-card.selected {
    border-color: var(--primary-color);
}

/* Чек */
.also-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
}

/* Показываем галочку, когда есть .selected */
.also-buy-card.selected .also-check {
    display: flex;
}

/* Thumb */
.also-thumb img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 3px;
}

/* Body */
.also-body {
    padding: 8px 0 0 0;
    text-align: center;
}

.also-title {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(2*1.4 * 13px);
}

/* Цены */
.also-prices {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.also-prices .old {
    color: #777;
    text-decoration: line-through;
}

.also-prices .new {
    color: var(--primary-color);
    font-weight: 600;
}

/* Toast по центру экрана */
.order-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10002; /* выше модалок */
}

.order-toast__content {
    background: var(--primary-color);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
    text-align: center;
    font-size: 1rem;
}

/* Класс «активного» показа */
.order-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* === Often Bought Section === */
.often-bought {
    margin: 15px 0;
}
.often-bought h2 {
    font-size: 16px;
    /*  margin-bottom: 1rem;*/
}

/* Owl-карусель карточек */
.also-buy-carousel .also-buy-card {
    position: relative;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin: 5px 0px;
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
    outline: none;
}
.also-buy-carousel .also-buy-card .also-check {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--primary-color);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.also-buy-carousel .also-buy-card.selected {
    border-color: var(--primary-color);
}
.also-buy-carousel .also-buy-card.selected .also-check {
    opacity: 1;
}

/* Прогресс-бар */
.often-bought__progress {
    margin-top: 10px;
}
.progress-bar {
    width: 100%;
    height: 8px;
    background: color-mix(in srgb, var(--primary-color) 8%, #eee);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar__fill {
    width: 0%;
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}
.progress-text {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #333;
}
/* ===== Рекомендации (Recommend) ===== */
.recommend-section {
    margin: 15px 0;
}
.recommend-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}
/* OWL-карусель */
.recommend-carousel .recommend-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 6%, transparent);
    text-align: center;
    margin: 5px 0px;
    text-decoration: none;
}
.recommend-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 6px;
}
/* Тело карточки */
.recommend-body {
    padding: 8px;
}
.recommend-name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.5rem 0;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(2 * 1.4 * 13px);
}
.recommend-prices {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: baseline;
}
.rec-new-price {
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary-color);
}
.rec-old-price {
    font-size: 0.85rem;
    color: #777;
    text-decoration: line-through;
}

/* Навигация OWL (стрелки и точки можно настроить) */
.also-buy-carousel,
.recommend-carousel{
    position: relative;
}

.also-buy-carousel .owl-nav,
.recommend-carousel .owl-nav{
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

.also-buy-carousel .owl-nav button.owl-prev,
.also-buy-carousel .owl-nav button.owl-next,
.recommend-carousel .owl-nav button.owl-prev,
.recommend-carousel .owl-nav button.owl-next{
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    pointer-events: auto;
    transition: background .16s ease, color .16s ease, opacity .16s ease;
}

.also-buy-carousel .owl-nav button span,
.recommend-carousel .owl-nav button span{
    display: none;
}

.also-buy-carousel .owl-nav button.owl-prev::before,
.also-buy-carousel .owl-nav button.owl-next::before,
.recommend-carousel .owl-nav button.owl-prev::before,
.recommend-carousel .owl-nav button.owl-next::before{
    content: "";
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: block;
}

.also-buy-carousel .owl-nav button.owl-prev::before,
.recommend-carousel .owl-nav button.owl-prev::before{
    transform: rotate(135deg);
    margin-left: 3px;
}

.also-buy-carousel .owl-nav button.owl-next::before,
.recommend-carousel .owl-nav button.owl-next::before{
    transform: rotate(-45deg);
    margin-right: 3px;
}

.also-buy-carousel .owl-nav button:hover,
.recommend-carousel .owl-nav button:hover{
    background: var(--primary-color);
    color: #fff;
}

.also-buy-carousel .owl-nav button.disabled,
.recommend-carousel .owl-nav button.disabled{
    opacity: .35;
    cursor: default;
}

@media (max-width: 767px) {
    /* Можно убрать отступ у ptb-card */
    .recommend-section {
        margin: 1rem 0;
    }
}

/* Адаптив */
@media (max-width: 768px) {
    .ob-card {
        flex: 1 0 calc(50% - 1rem);
    }
}
@media (max-width: 480px) {
    .ob-card {
        flex: 1 0 100%;
    }
}

/* === Мобильная адаптация === */
@media (max-width: 767px) {
    /* для всей сетки описаний делаем одну колонку */
    .description-row__inner {
        display: block;
    }
}
    /* ===== QtyCard (right column card) ===== */
.qty-card { margin-top: 15px; }

.qty-head .qty-title{
  font-size: 19px;
  font-weight: 700;
  color: #111;
}
.qty-head .qty-sub{
/*  margin-top: 4px;*/
  font-size: 1rem;
  color: #333;
}

.qty-body{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}

/* Вертикальный контрол как на макете */
.qty-ctrl{
  width: 42px;
  height: 60px;
  border: 1px solid #e6e7ee;
  border-radius: 8px;
  background: #f6f7fb;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) inset;
}

.qty-ctrl__btn{
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.qty-ctrl__input{
  width: 100%;
  text-align: center;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 28px;
  font-weight: 700;
  -moz-appearance: textfield;
}
.qty-ctrl__input::-webkit-outer-spin-button,
.qty-ctrl__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }

/* Тексты справа */
.qty-info .qty-sum{
  font-size: 20px;
  color: #111;
}
.qty-info .qty-sum b
{ 
    font-weight: 700; 
    color: var(--primary-color);
}

.qty-info .qty-note{
  margin-top: 4px;
  font-weight: 700;
  color: #333;
}
.qty-info .qty-discount{
  font-weight: 700;
  color: #333;
}

/* === Qty arrows: кастомные шевроны в чипах === */
:root{
  /* SVG-иконка (chevron) как mask — чтобы красить через background-color */
  --qty-icon-chevron: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 14l6-6 6 6z'/></svg>");
}

/* Сбрасываем старые «треугольники» (делались бордерами) */
.qty-ctrl__btn--up::before,
.qty-ctrl__btn--down::before{
  border: none !important;
  width: auto; height: auto;
  background: none;
  box-shadow: none;
}

/* Новый фон-пуговица под иконкой */
.qty-ctrl__btn{
  position: relative;
  display: grid;
  place-items: center;
}
.qty-ctrl__btn::before{
  content: "";
  width: 35px; height: 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 1px 2px rgba(0,0,0,.06);
  transition: background .15s ease, transform .06s ease;
}

/* Сама иконка (маска) */
.qty-ctrl__btn::after{
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background-color: #111; /* базовый цвет иконки */
  mask: var(--qty-icon-chevron) no-repeat center / contain;
  -webkit-mask: var(--qty-icon-chevron) no-repeat center / contain;
  transition: background-color .15s ease, transform .15s ease;
}
.qty-ctrl__btn--down::after{ transform: rotate(180deg); }

/* Hover/active */
.qty-ctrl__btn:hover::before{ background: #f3f4f6; }
.qty-ctrl__btn:hover::after{ background-color: var(--primary-color); }
.qty-ctrl__btn:active::before{ transform: translateY(1px); }
/* Живой эмодзи в qty-card */
.qty-card { position: relative; }

.qty-emoji{
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 44px;
  line-height: 1;
  pointer-events: none;
  opacity: .98;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
  transform-origin: 60% 60%;
}

/* лёгкий pop при смене */
.qty-emoji.pop { animation: qty-emoji-pop .8s cubic-bezier(.2,.65,.25,1); }
@keyframes qty-emoji-pop {
  0%   { transform: rotate(-6deg) scale(1);   }
  40%  { transform: rotate(-4deg) scale(1.18);}
  70%  { transform: rotate(-7deg) scale(0.98);}
  100% { transform: rotate(-6deg) scale(1);  }
}

/* мобильная подстройка */
@media (max-width: 767px){
  .qty-emoji{ font-size: 30px; right: 4px; bottom: 8px; }
}

/* уважение к reduced-motion */
@media (prefers-reduced-motion: reduce){
  .qty-emoji{ animation: none !important; }
}
/* ===== Variations — compact 100px row, above price ===== */
.variations-card { padding: 12px 16px; }
.variations-card .vr-head { margin-bottom: 8px; }
.vr-eyebrow{
  display:inline-block; padding:3px 8px; border-radius: 999px;
  background: var(--primary-color); color:#fff;
  font-size:11px; font-weight:700; line-height: 1;
}

.vr-list{
  display:flex; flex-wrap: wrap; gap: 8px;
}

.vr-item{
  flex: 0 0 100px;             /* ~100 px ширина */
  max-width: 100px;
  display:flex; flex-direction:column; gap:6px;
  padding:8px;
  background:#fff;
  border:1px solid #e9edf3; border-radius:12px;
  text-decoration:none; color:inherit;
  transition: border-color .2s, box-shadow .2s, transform .1s;
}
.vr-item:hover{ border-color: var(--primary-color); }
.vr-item:active{ transform: translateY(1px); }
.vr-item.is-active{
  background: color-mix(in srgb, var(--primary-color) 7%, #fff);
  box-shadow: 0 0 0 2px var(--primary-color) inset;
  border-color: transparent;
}

.vr-thumb{
  width:100%; aspect-ratio:3/4;
  border-radius:8px; overflow:hidden; background:#f4f6f9;
}
.vr-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }

.vr-name{
  font-size:12px; font-weight:600; line-height:1.25;
  min-height: 2.4em;                /* до 2 строк */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.vr-prices{ display:flex; align-items:baseline; gap:4px; }
.vr-new{ font-weight:700; font-size:14px; color: var(--primary-color); }
.vr-old{ font-size:11px; color:#9aa5b5; text-decoration: line-through; }

/* Опционально: сделать горизонтальный скролл без переносов
.vr-list{ flex-wrap: nowrap; overflow-x:auto; padding-bottom:4px; }
.vr-item{ flex: 0 0 100px; }
*/
.crossSalePrImg
{
    aspect-ratio: 3/4;
}

/* Ряд из трёх карточек над подарунком */
.below-row { margin: 15px 0; }
.below-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 колонки на десктопе */
  gap: 15px;
}

/* Выровнять высоты карточек приятнее */
.below-grid > .ptb-card { display: flex; flex-direction: column; }
.below-grid .advantages-block .advantages-list { margin-top: 8px; }
.below-grid .specs-block .specs-preview { margin-top: 8px; }

@media (max-width: 767px){
  .below-grid { grid-template-columns: 1fr; } /* на мобиле — столбиком */
}

:root{
  --thumb-size: 100px;   /* размер миниатюр */
  --thumb-gap: 8px;     /* промежуток между ними */
}

.gallery-wrap{
  display: grid;
  grid-template-columns: 104px 1fr; /* левая колонка под 88px + поля */
  gap: 12px;
  align-items: start;
}

/* Колонка с превью */
.thumbs{ position: relative; }

.thumbs-list{
  display: grid;
  gap: var(--thumb-gap);
  max-height: calc(var(--thumb-size) * 6 + var(--thumb-gap) * 7.5);
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: none;              /* скрыть скролл в Firefox */
}
.thumbs-list::-webkit-scrollbar{      /* скрыть скролл в WebKit */
  width: 0; height: 0;
}

/* Превью */
.thumbs-list .thumb{
  width: var(--thumb-size);
/*  height: var(--thumb-size);*/
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #f3f4f6;
}
.thumbs-list .thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.thumbs-list .thumb.is-active{
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* Кнопки прокрутки */
.thumbs-prev, .thumbs-next{
  width: 100%;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: #f7f7f8;
  color: #111;
  cursor: pointer;
  margin: 2px 0;
}
.thumbs-prev:hover, .thumbs-next:hover{ background: #eef0f3; }

/* Чуть компактнее на узких десктопах */
@media (max-width: 1024px){
  :root{ --thumb-size: 76px; }
  .gallery-wrap{ grid-template-columns: 92px 1fr; }
}

/* Правая колонка — большой кадр «прижат вправо» */
.main-col{
  display: flex;
  justify-content: flex-end;        /* прижимаем контент к правому краю */
  overflow: hidden;
}

/* Сам контейнер Owl делаем «не на всю ширину», а ровно под высоту/соотношение */
.main-col .product-main-carousel{
  width: min(100%, calc(76vh * 0.75)); /* 3/4 от 76vh — портретная пропорция */
}

/* Слайды */
.main-col .product-main-carousel .item{
  aspect-ratio: 3 / 4;
/*    max-height: 744px;*/
  border-radius: 12px;
  overflow: hidden;
}
.main-col .product-main-carousel .item img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Кнопки прокрутки миниатюр */
.thumbs-nav{
  width: 100%; height: 28px;
  border: 1px solid #e6e7ee; border-radius: 8px;
  background: #fff; position: relative; cursor: pointer;
}
.thumbs-nav::after{
    transform: rotate(180deg);
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; background-color: #111;
  mask: var(--qty-icon-chevron) no-repeat center / contain;
  -webkit-mask: var(--qty-icon-chevron) no-repeat center / contain;
}
.thumbs-prev::after{ transform: rotate(0deg); }

/* Мобила: превью снизу горизонтально */
@media (max-width: 767px){
  .gallery-wrap{ grid-template-columns: 1fr; }
  .thumbs-col{ display: none; gap: 0px; order: 2; }
  .thumbs-list{ display: flex; gap: 8px; overflow: visible; }
  .thumb{ width: 74px; flex: 0 0 auto; }
  .thumbs-nav{ display: none; }
  .main-col{ order: 1; justify-content: center; }
  .main-col .product-main-carousel{ width: 100%; }
}
/* верхняя полоска секции отзывов */
.reviews-section { margin: 20px 0; }

/* кнопка в правом верхнем углу */
/* параметры карусели отзывов (десктоп) */
.reviews-section{
  --reviews-gap: 16px;      /* margin у Owl */
  --reviews-items: 3;       /* 3 карточки в кадре на десктопе */
  --reviews-header-h: 48px; /* общая высота шапки */
}

/* верхняя линия: сводка слева шириной как одна карточка, кнопка справа */
.reviews-top{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

/* ширина блока = ширина одной карточки в кадре */
.reviews-top .ptb-reviews-row{
  flex: 0 0 calc(
    (100% - (var(--reviews-items) - 1) * var(--reviews-gap))
    / var(--reviews-items)
  );
  display:flex;
  align-items:center;
/*  height: var(--reviews-header-h);*/
    margin-top: 0px;
  padding: 8px 12px;
  box-sizing: border-box;
}

/* кнопка — по высоте как сводка */
.reviews-all-btn{
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #3a2d12;      /* ваш цвет */
  color:#fff;
  font-weight:700;
}

/* мобильная адаптация: шапка в столбик */
@media (max-width: 767px){
  .reviews-section{ --reviews-items: 1; --reviews-gap: 12px; }
    .reviews-top {
      display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
  .reviews-top .ptb-reviews-row,
  .reviews-all-btn{ flex:0 0 auto; height:35px; }
}

/* одинаковая высота карточек внутри карусели */
.reviews-carousel .review-card{
  display:flex; flex-direction:column;
  min-height: 160px;           /* базовый минимум */
  box-sizing:border-box;
}

/* адаптив: на узких — кнопка уходит ниже, но остаётся справа */
@media (max-width: 1023px){
  .reviews-bar{ grid-template-columns: 1fr; }
  .reviews-all-btn{ justify-self: end; }
}
@media (max-width: 767px){

  /* Ограничим высоту галереи, чтобы картинка влазила в экран
     и не обрезалась. Можно быстро подкрутить проценты. */
  :root { --gallery-maxvh: 68vh; } /* подгони при желании: 60–75vh */

  /* Контейнер owl — автоматически по контенту */
  .product-main-carousel,
  .product-main-carousel .owl-stage-outer{
    height: auto !important;
    max-height: var(--gallery-maxvh);
  }

  /* Внутри slide центрируем картинку */
  .product-main-carousel .item{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 100%;
  }

  /* Картинка должна ВМЕЩАТЬСЯ, а не «cover» */
  .product-main-carousel .item img{
    width: 100%;
    height: auto;
    max-height: var(--gallery-maxvh);
    object-fit: contain;           /* было cover → из-за этого резало */
    display:block;
  }

  /* Если у тебя ещё есть правило:
     .ptb-card.no-padding .owl-carousel .item img { object-fit: cover; }
     — перекрываем его так: */
  .ptb-card.no-padding .owl-carousel .item img{
    object-fit: contain;
    max-height: var(--gallery-maxvh);
  }

  /* Миниатюры — делаем ниже, меньше и с горизонтальным скроллом */
  .gallery-wrap .thumbs-list{
    display:flex;
    gap: 8px;
    padding: 8px 4px 2px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .gallery-wrap .thumbs-list .thumb{
    flex: 0 0 58px;    /* было крупнее → теперь компактные */
/*    height: 58px;*/
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
  }
  .gallery-wrap .thumbs-list .thumb img{
    width:100%; height:100%; object-fit: cover; display:block;
  }

  /* Чуть уменьшим точки/отступы dot-навигации, чтобы ничего не заезжало */
  .product-main-carousel .owl-dots{
    margin-top: 6px;
  }
  .product-main-carousel .owl-dot span{
    width: 6px; height: 6px;
  }
}
/* ============================
   Reviews — новый вид
   ============================ */

/* обёртка секции */
.reviews-section { margin: 16px 0 8px; }

/* заголовок «Відгуки» — меньше */
.reviews-section .reviews-title {
  font-size: 20px;              /* было крупнее */
/*  font-weight: 800;*/
  margin: 0 0 0px;
  line-height: 1.2;
}

/* шапка: слева — метрики в прямоугольнике, справа — общая кнопка */
.reviews-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

/* прямоугольник метрик слева — такой же стиль, как карточки */
.reviews-headbar{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding: 10px 12px;
  display:flex; align-items:center; gap:12px;
  /* ширина = ширина одной карточки (3 в кадре с gap 16) */
  width: calc((100% - 32px) / 3);
  min-height: 48px;
}

/* чтобы существующие чипы .ptb-reviews-row выглядели компактней */
.reviews-headbar .ptb-reviews-row{
  margin: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.rv-card
{
    width: 100%;
    margin: 16px 0px 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 7%);
}
/* кнопка «Читати всі відгуки» справа */
.reviews-all-btn{
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: var(--primary-color);            /* как на скрине */
  color: #fff; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* карусель: ровные карточки, одинаковая высота */
.reviews-carousel .owl-stage{ display:flex; }
.reviews-carousel .owl-item{ display:flex; }
.reviews-carousel .review-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  padding:16px;
  width:100%;
  display:flex; flex-direction:column;
  height:100%;                    /* выравниваем высоту */
}

/* аккуратные разделители в карточке (если есть) */
.reviews-carousel .review-card hr{
  border:0; height:1px; background:#eee; margin:12px 0 0;
}

/* отключаем стрелки именно у этой карусели */
.reviews-carousel .owl-nav{ display:none !important; }

/* вместо стрелок — доты в фирменном стиле */
.reviews-carousel .owl-dots{
  display:flex; justify-content:center; gap:6px; margin-top:10px; bottom: -9px;
}
.reviews-carousel .owl-dot span{
  width:6px; height:6px; border-radius:999px;
  background:#cfd4dc; display:block; transition:all .2s;
}
.reviews-carousel .owl-dot.active span{
  width:20px; background: var(--primary-color);
}
/* ограничить длину текста в превью-карточке */
.reviews-carousel .rv-card .review-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* сколько строк оставить */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* скрыть фото отзывов только в превью-карусели */
.reviews-carousel .rv-card .review-photo,
.reviews-carousel .rv-card .review-with-photo .review-photo {
  display: none !important;
}
.reviews-carousel .rv-card .store-reply,
.reviews-carousel .rv-card .review-with-reply .store-reply {
  display: none !important;
}

/* чуть плотнее отступы, если ответа нет */
.reviews-carousel .rv-card .review-with-reply {
  padding-bottom: 0;
}
.reviews-carousel .rv-card .review-with-reply hr {
  display: none;
}
/* адаптив для мобилы */
@media (max-width: 767px){
  .reviews-section .reviews-title{ font-size: 20px; margin: 0 0 0px;}
  .reviews-head{ grid-template-columns: 1fr; gap:10px;}
  .reviews-headbar{ width: 100%; }
  .reviews-all-btn{ justify-self: start; }
  .reviews-carousel .owl-dots{
  display:none;
}
}
.advantages-list{display:grid;gap:12px}
.adv-item{display:flex;gap:10px}
.adv-icon{
  width:40px;height:40px;flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;border-radius:12px;background:#f3f4f6;
}
.adv-item p{margin:0}

/* ===== Color Swatches (prColors) — tidy styles ===== */

.ptb-color-select { padding: 10px 12px; }
.ptb-color-select .cs-label {
  font-weight: 600;
  margin-bottom: 8px;
}

/* контейнер */
.ptb-color-select .cs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* сама "кнопка" свотча */
.ptb-color-select .swatch {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  padding: 3px 0 0 0px;
  margin: 0;
  cursor: pointer;
  height: auto;
  width: 72px;                /* карточка */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* квадрат превью */
.ptb-color-select .swatch .thumb {
  width: 64px;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: block;
}

/* картинка внутри превью */
.ptb-color-select .swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* не растягиваем: обрезаем по квадрату */
  display: block;
}

/* чип по HEX, когда нет картинки */
.ptb-color-select .swatch .chip {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10px;
}

/* подпись цвета (если выводим) */
.ptb-color-select .swatch .cs-name {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover / active */
.ptb-color-select .swatch:hover .thumb {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.ptb-color-select .swatch.active .thumb {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 12%, transparent);
}

/* тёмная тема дружелюбно (если используется) */
@media (prefers-color-scheme: dark) {
  .ptb-color-select .swatch .thumb { background: #111; border-color: rgba(255,255,255,0.06); }
  .ptb-color-select .swatch:hover .thumb { border-color: rgba(255,255,255,0.14); }
  .ptb-color-select .swatch .cs-name { color: #000; }
}/* Variations (text list) */*/
@media (prefers-color-scheme: dark){
  .qo2-vr{ background:#151515; border-color: rgba(255,255,255,.10); }
}/* Submit */
/* ----- QUICK ORDER V2: hard light & isolation ----- */
     /* Заголовок */
.qo2-cross-heading {
  font-size: 18px;
  font-weight: 600;
}

/* Swiper wrapper */
.qo2-cross-swiper {
  width: 100%;
  padding: 0px 5px 5px;
}

/* ===== Карточка товара ===== */
.qcross-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  padding: 5px;
  text-align: center;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid transparent;
  position: relative;
  cursor: pointer;
  transition: 0.15s ease;
}

/* Фото */
.qcross-img {
  width: 95px;
  border-radius: 5px;
}

/* Название */
.qcross-title {
  font-size: 13px;
  line-height: 1.3;
  height: 36px;
  overflow: hidden;
  margin-top: 6px;
}

/* Цена */
.qcross-price {
  font-size: 14px;
  font-weight: bold;
  color: var(--primary-color, #ff4444);
  margin-top: 4px;
}

/* Галочка */
.qcross-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: var(--primary-color);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  z-index: 3;
}

/* Активная карточка */
.qcross-card.selected {
  border-color: var(--primary-color);
}

/* Показывать галочку */
.qcross-card.selected .qcross-check {
  display: flex;
}

/* Дотсы Swiper */
.qo2-cross-pagination {
  position: relative;
  margin-top: 4px;
}

.qo2-cross-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #d1d5db;
  opacity: 1;
  margin: 0 3px !important;
  border-radius: 50%;
}

.qo2-cross-pagination .swiper-pagination-bullet-active {
  background: var(--primary-color);
  transform: scale(1.3);
  transition: 0.2s ease;
}

/* Убираем стрелки */
/* pop-анимация для смайлика в модалке */

@keyframes qty-emoji-pop {
  0%   { transform: rotate(-6deg) scale(1);   }
  40%  { transform: rotate(-4deg) scale(1.18);}
  70%  { transform: rotate(-7deg) scale(0.98);}
  100% { transform: rotate(-6deg) scale(1);  }
}
/* мигание/подпрыгивание чисел */

@keyframes qo2-num-flash {
  0%   { transform: translateY(0);   opacity: 1;   }
  40%  { transform: translateY(-4px); opacity: 0.6;}
  100% { transform: translateY(0);   opacity: 1;   }
}
.also-cross-actions,
.qcross-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}

.cross-qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.cross-qty-value {
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

/*.also-buy-card.selected,
.qcross-card.selected {
  outline: 2px solid var(--primary-color);
}*/

.also-buy-card .also-check,
.qcross-card .qcross-check {
  pointer-events: none;
}
/* ===== qty animation ===== */

.cross-qty-value{
    display:inline-block;
    transform-origin:center;
}

.qty-bump{
    animation:qtyBump .22s ease;
}

@keyframes qtyBump{
    0%{transform:scale(1)}
    40%{transform:scale(1.25)}
    100%{transform:scale(1)}
}

@supports (padding-bottom: env(safe-area-inset-bottom)){
  @media (max-width: 767px){
    body{
      padding-bottom: calc(86px + env(safe-area-inset-bottom));
    }

    .site-info{
      margin-bottom: 14px;
    }
  }
}

.ptb-price-block,
.ptb-price-block *,
.qty-sum,
.qty-note,
.also-prices,
.recommend-prices,
.rec-new-price,
.rec-old-price,
.vr-prices,
.vr-new,
.vr-old,
.qcross-price,
.sale-upsell-card__prices,
.sale-upsell-card__prices *{
  font-family: var(--price-font);
  font-variant-numeric: tabular-nums;
}

/* Quick order success sale modal */
.sale-success-modal{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

html.sale-success-open,
html.sale-success-open body{
  overflow: hidden;
}

.sale-success-modal.is-open{
  display: flex;
}

.sale-success-modal__backdrop{
  position: absolute;
  inset: 0;
  background: #000000c9;
  backdrop-filter: blur(10px);
}

.sale-success-modal__dialog{
  position: relative;
  width: min(1180px, 100%);
  max-height: min(92vh, 980px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 44px color-mix(in srgb, var(--primary-color) 11%, transparent);
}

.sale-success-modal__close{
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-color) 10%, #fff);
  color: color-mix(in srgb, var(--primary-color) 72%, #111827);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.sale-success-modal__head{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding: 30px 34px 22px;
  background: #161616;
  color: #fff;
}

.sale-success-modal__eyebrow{
  margin-bottom: 8px;
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.sale-success-modal__head h2{
  margin: 0;
  max-width: 720px;
  color: #fff;
  font-size: 32px;
  line-height: 1.1;
}

.sale-success-modal__head p{
  margin: 10px 0 0;
  max-width: 760px;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.5;
}

.sale-success-modal__cat{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.sale-success-modal__grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  max-height: calc(92vh - 175px);
  overflow-y: auto;
  padding: 18px;
  background: color-mix(in srgb, var(--primary-color) 7%, #f5f6f7);
}

.sale-upsell-card{
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 12px;
  background: #fff;
  color: #111;
  text-decoration: none;
  height: max-content;
}

.sale-upsell-card__img{
  display: block;
  background: color-mix(in srgb, var(--primary-color) 8%, #f0f2f4);
  overflow: hidden;
}

.sale-upsell-card__img img{
  width: 100%;
  height: auto;
  object-fit: initial;
  display: block;
  aspect-ratio: 3 / 4;
}

.sale-upsell-card__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.sale-upsell-card__name{
  min-height: 38px;
  color: #181818;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sale-upsell-card__prices{
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sale-upsell-card__prices b{
  color: var(--primary-color);
  font-size: 18px;
}

.sale-upsell-card__prices s{
  color: #8a8a8a;
  font-size: 13px;
}

@media (max-width: 900px){
  .sale-success-modal__head{
    align-items: flex-start;
    flex-direction: column;
    padding: 26px 22px 20px;
  }

  .sale-success-modal__head h2{
    font-size: 26px;
  }

  .sale-success-modal__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 62vh;
    padding: 12px;
  }
}

@media (max-width: 480px){
  .sale-success-modal{
    padding: 10px;
  }

  .sale-success-modal__dialog{
    border-radius: 14px;
  }

  .sale-success-modal__head h2{
    font-size: 23px;
  }

  .sale-upsell-card__body{
    padding: 10px;
  }
}

/* Product story variant: compact magazine cards */
#videoSection.video-block{
  margin: 22px 0 18px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 0;
  background: #161616;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .10);
}

#videoSection .video-block__inner{
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

#videoSection .video-block__media{
  order: 1;
  margin: 0;
  padding: 14px;
  min-height: 0;
  background: #161616;
  display: flex;
  align-items: center;
  justify-content: center;
}

#videoSection .video-container{
  width: min(100%, 430px);
  height: min(640px, 70vh);
  min-height: 0;
  max-height: none;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  background: #161616;
}

#videoSection .video-container video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#videoSection .video-block__content{
  order: 2;
  min-height: 0;
  padding: 42px 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#videoSection .video-block__content::before{
  content: "Відео огляд";
  width: fit-content;
  margin-bottom: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#videoSection .description-title{
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.08;
  font-weight: 850;
}

#videoSection .description-text{
  margin: 0;
  max-width: 820px;
  color: rgba(255,255,255,.76);
  font-size: 18px;
  line-height: 1.68;
}

#descriptionSection.description-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0;
}

#descriptionSection .description-row.ptb-card{
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
  background: #fff;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .06);
}

#descriptionSection .description-row__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  height: 100%;
}

#descriptionSection .description-row:nth-child(even) .description-row__media,
#descriptionSection .description-row:nth-child(even) .description-row__content{
  order: initial;
}

#descriptionSection .description-row__media{
  min-height: 0;
  height: 390px;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

#descriptionSection .description-row__media img{
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  display: block;
}

#descriptionSection .description-row__content{
  min-height: 230px;
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
}

#descriptionSection .description-title{
  margin: 0 0 12px;
  color: #151515;
  font-size: clamp(25px, 1.8vw, 34px);
  line-height: 1.12;
  font-weight: 850;
}

#descriptionSection .description-text{
  margin: 0;
  color: #4c4c4c;
  font-size: 17px;
  line-height: 1.62;
}

@media (max-width: 1023px){
  #videoSection .video-block__inner{
    grid-template-columns: 1fr;
  }

  #videoSection .video-container{
    min-height: 0;
    height: min(680px, 76vh);
  }

  #videoSection .video-block__content{
    padding: 30px;
  }

  #descriptionSection.description-grid{
    grid-template-columns: 1fr;
  }

  #descriptionSection .description-row__media{
    height: auto;
  }

  #descriptionSection .description-row__media img{
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 767px){
  #videoSection.video-block{
    margin: 16px 0;
    border-radius: 0;
  }

  #videoSection .video-container{
    height: min(620px, 76vh);
  }

  #videoSection .video-block__content{
    padding: 22px 20px;
  }

  #videoSection .description-title{
    font-size: 25px;
  }

  #videoSection .description-text{
    font-size: 16px;
  }

  #descriptionSection.description-grid{
    gap: 14px;
    margin: 16px 0;
  }

  #descriptionSection .description-row.ptb-card{
    border-radius: 14px;
  }

  #descriptionSection .description-row__content{
    min-height: 0;
    padding: 22px 20px;
  }

  #descriptionSection .description-title{
    font-size: 24px;
  }

  #descriptionSection .description-text{
    font-size: 16px;
  }
}

/* Product story tighter media pass */
@media (min-width: 1024px){
  #videoSection .video-block__inner{
    grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  }

  #videoSection .video-block__media{
    padding: 14px;
    background: #161616;
  }

  #videoSection .video-container{
    width: min(100%, 430px);
    height: min(660px, 72vh);
  }

  #videoSection .video-block__content{
    min-height: 0;
    padding: 42px 48px;
  }

  #descriptionSection .description-row__inner{
    grid-template-columns: minmax(0, .5fr) minmax(0, .5fr);
  }

  #descriptionSection .description-row__media{
    min-height: 430px;
    padding: 0;
    background: #fff;
    overflow: hidden;
  }

  #descriptionSection .description-row:nth-child(3n + 2) .description-row__media,
  #descriptionSection .description-row:nth-child(3n) .description-row__media{
    background: #fff;
  }

  #descriptionSection .description-row__media img{
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
  }

  #descriptionSection .description-row__content{
    padding: 34px 42px;
  }
}

@media (max-width: 1023px){
  #descriptionSection .description-row__media{
    padding: 0;
    background: #fff;
    overflow: hidden;
  }

  #descriptionSection .description-row__media img{
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    border-radius: 0;
    object-fit: contain;
  }
}

/* Product video intro */
#videoSection.video-block{
  margin: 24px 0;
  padding: 24px;
  overflow: hidden;
}

#videoSection .video-block__inner{
  display: grid;
  grid-template-columns: minmax(320px, .54fr) minmax(320px, .46fr);
  gap: 24px;
  align-items: stretch;
}

#videoSection .video-block__media{
  margin: 0;
  min-height: 560px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

#videoSection .video-container{
  width: min(100%, 430px);
  height: min(640px, 70vh);
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #161616;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
}

#videoSection .video-container video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#videoSection .video-block__content{
  min-height: 560px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 16px;
  background: #fff;
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#videoSection .description-title{
  margin: 0 0 14px;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  color: #171717;
}

#videoSection .description-text{
  margin: 0;
  max-width: 760px;
  font-size: 20px;
  line-height: 1.75;
  color: #444;
}

@media (max-width: 1023px){
  #videoSection.video-block{
    padding: 16px;
  }

  #videoSection .video-block__inner{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #videoSection .video-block__media,
  #videoSection .video-block__content{
    min-height: 0;
  }

  #videoSection .video-container{
    height: min(620px, 72vh);
  }
}

@media (max-width: 767px){
  #videoSection.video-block{
    margin: 16px 0;
    padding: 12px;
  }

  #videoSection .video-block__media{
    padding: 10px;
    border-radius: 14px;
  }

  #videoSection .video-block__content{
    padding: 20px;
    border-radius: 14px;
  }

  #videoSection .description-title{
    font-size: 24px;
  }

  #videoSection .description-text{
    font-size: 16px;
    line-height: 1.65;
  }
}

/* Product story sections: video + image description blocks */
#videoSection.video-block{
  margin: 28px 0 20px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #161616;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .10);
}

#videoSection .video-block__inner{
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(320px, .54fr);
  gap: 0;
  align-items: stretch;
}

#videoSection .video-block__content{
  order: 1;
  min-height: 520px;
  padding: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#videoSection .video-block__content::before{
  content: "Огляд товару";
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 70%, #fff);
  background: var(--primary-color);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#videoSection .description-title{
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(30px, 2.6vw, 46px);
  line-height: 1.08;
  font-weight: 850;
}

#videoSection .description-text{
  margin: 0;
  max-width: 720px;
  color: rgba(255,255,255,.78);
  font-size: 19px;
  line-height: 1.7;
}

#videoSection .video-block__media{
  order: 2;
  min-height: 520px;
  margin: 0;
  padding: 24px;
  border-radius: 0;
  background: #161616;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#videoSection .video-container{
  width: min(100%, 390px);
  height: min(680px, 74vh);
  min-height: 0;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #161616;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}

#videoSection .video-container video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

#descriptionSection.description-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 20px 0;
}

#descriptionSection .description-row.ptb-card{
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .06);
}

#descriptionSection .description-row__inner {
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}

/* Нечетные — к левому краю */
#descriptionSection .description-row:nth-child(odd) .description-row__inner {
  flex-direction: row;
}

/* Четные — к правому краю */
#descriptionSection .description-row:nth-child(even) .description-row__inner {
  flex-direction: row-reverse;
}

#descriptionSection .description-row:nth-child(even) .description-row__media{
  justify-content: flex-end;
}

#descriptionSection .description-row:nth-child(even) .description-row__content{
  order: initial;
}

#descriptionSection .description-row__media{
  flex: 0 0 33%;
  min-height: 540px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
}

#descriptionSection .description-row:nth-child(3n + 2) .description-row__media{
  background: #fff;
}

#descriptionSection .description-row:nth-child(3n) .description-row__media{
  background: #fff;
}

#descriptionSection .description-row__media img{
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  border-radius: 18px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

#descriptionSection .description-row:nth-child(even) .description-row__media img{
  object-position: right center;
}

#descriptionSection .description-row__content{
  flex: 1 1 0;
  min-width: 0;
  padding: 42px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

#descriptionSection .description-title{
  margin: 0 0 14px;
  color: #171717;
  font-size: clamp(26px, 2vw, 36px);
  line-height: 1.12;
  font-weight: 820;
}

#descriptionSection .description-text{
  margin: 0;
  color: #4b4b4b;
  font-size: 18px;
  line-height: 1.72;
}

@media (max-width: 1023px){
  #videoSection .video-block__inner{
    grid-template-columns: 1fr;
  }

  #descriptionSection .description-row:nth-child(odd) .description-row__inner,
  #descriptionSection .description-row:nth-child(even) .description-row__inner{
    flex-direction: column;
  }

  #videoSection .video-block__content,
  #videoSection .video-block__media{
    order: initial;
    min-height: 0;
  }

  #videoSection .video-block__content{
    padding: 34px;
  }

  #descriptionSection .description-row:nth-child(even) .description-row__media,
  #descriptionSection .description-row:nth-child(even) .description-row__content{
    order: initial;
  }

  #descriptionSection .description-row__media{
    order: 1;
  }

  #descriptionSection .description-row__content{
    order: 2;
    min-width: 0;
  }

  #descriptionSection .description-row__media{
    flex: 0 0 auto;
    min-height: 0;
  }
}

@media (max-width: 767px){
  #videoSection.video-block{
    margin: 16px 0;
    border-radius: 14px;
  }

  #videoSection .video-block__content{
    padding: 24px 20px;
  }

  #videoSection .video-block__media{
    padding: 10px;
  }

  #videoSection .video-container{
    height: min(620px, 76vh);
    border-radius: 14px;
  }

  #descriptionSection.description-grid{
    gap: 14px;
    margin: 16px 0;
  }

  #descriptionSection .description-row.ptb-card{
    border-radius: 14px;
  }

  #descriptionSection .description-row__media{
    min-height: 0;
    padding: 12px;
  }

  #descriptionSection .description-row__media img{
    border-radius: 14px;
  }

  #descriptionSection .description-row__content{
    padding: 10px 20px 22px;
    min-height: auto;
  }

  #descriptionSection .description-title{
    font-size: 24px;
  }

  #descriptionSection .description-text{
    font-size: 16px;
    line-height: 1.62;
  }
}

/* Product top: keep the shorter column in view on desktop. */
@media (min-width: 1024px){
  .prod-top{
    --product-sticky-top: 92px;
    margin-top: 15px;
  }

  .prod-top > #gallerySection,
  .prod-top > #buySection{
    align-self: start;
  }

  .prod-top > #gallerySection,
  .prod-top > #buySection > .ptb-card:first-child{
    margin-top: 0;
  }

  .prod-top.is-sidebar-short > #buySection{
    position: sticky;
    top: var(--product-sticky-top);
    z-index: 2;
  }

  .prod-top.is-gallery-short > #gallerySection{
    position: sticky;
    top: var(--product-sticky-top);
    z-index: 1;
  }
}

@media (max-width: 1023px){
  .prod-top > #gallerySection,
  .prod-top > #buySection{
    position: static;
  }
}

/* ===== price animation ===== */

.new,
.qcross-price{
    display:inline-block;
}

.price-bump{
    animation:priceBump .28s ease;
}

@keyframes priceBump{
    0%{transform:translateY(0);opacity:1}
    40%{transform:translateY(-4px);opacity:.7}
    100%{transform:translateY(0);opacity:1}
}
.cross-qty-value{
    display:inline-block;
    transform-origin:center;
}

.qty-bump{
    animation:qtyBump .22s ease;
}

@keyframes qtyBump{
    0%{transform:scale(1)}
    40%{transform:scale(1.25)}
    100%{transform:scale(1)}
}

/* ============================================================
   SPECS v2 — единый вид характеристик
   Применяется сразу к трём местам:
     • .specs-block  — превью в сайдбаре (десктоп)
     • .specs-row    — полный список (мобайл)
     • .specs-full-list — модалка «Всі характеристики»
   ============================================================ */

.specs-list {
    display: grid;
    grid-template-columns: minmax(96px, min(42%, 220px)) 1fr;
    gap: 0;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ebedf2;
    border-radius: 14px;
    overflow: hidden;
    font-size: 14px;
}

.specs-list > dt,
.specs-list > dd {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 11px 14px;
    line-height: 1.45;
    border-top: 1px solid #f1f2f6;
    overflow-wrap: anywhere;
}

/* первая строка — без верхней линии */
.specs-list > dt:first-of-type,
.specs-list > dd:first-of-type {
    border-top: 0;
}

/* левая колонка — метка */
.specs-list > dt {
    padding-right: 10px;
    font-weight: 600;
    color: #5a6172;
}

/* двоеточие больше не нужно — колонки разделены визуально */
.specs-list > dt::after {
    content: none;
}

/* правая колонка — значение */
.specs-list > dd {
    padding-left: 10px;
    font-weight: 500;
    color: #171b24;
}

/* зебра: подсвечиваем нечётные строки целиком */
.specs-list > dt:nth-of-type(odd),
.specs-list > dd:nth-of-type(odd) {
    background: #f7f8fa;
}

/* в модалке список идёт без внешней рамки карточки — чуть больше воздуха */
.specs-full-list .specs-list {
    margin: 0;
}

/* кнопка «Переглянути всі» — спокойный ghost-стиль под новый список */
.specs-toggle-btn {
    display: block;
    margin: 12px auto 0;
    padding: 9px 18px;
    background: #fff;
    color: var(--primary-color, #2f6bff);
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.specs-toggle-btn:hover {
    background: var(--primary-color, #2f6bff);
    border-color: var(--primary-color, #2f6bff);
    color: #fff;
}

@media (max-width: 600px) {
    .specs-list {
        grid-template-columns: minmax(88px, 46%) 1fr;
        font-size: 13.5px;
        border-radius: 12px;
    }

    .specs-list > dt,
    .specs-list > dd {
        padding: 10px 12px;
    }

    .specs-list > dt {
        padding-right: 8px;
    }

    .specs-list > dd {
        padding-left: 8px;
    }
}

/* На десктопе превью-список не показываем: остаётся только заголовок
   и кнопка «Переглянути всі» в правом верхнем углу карточки. */
@media (min-width: 768px) {
    .specs-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px 12px;
    }

    .specs-block .specs-title {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .specs-block .specs-preview {
        display: none;
    }

    .specs-block .specs-toggle-btn {
        margin: 0;
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* Комплект «У комплекті» переехал в правую колонку (под переваги).
   В узком сайдбаре раскладываем его вертикально, по одному товару в строку. */
@media (min-width: 768px) {
    /* колонка грида должна уметь сжиматься, иначе широкий комплект растягивает сайдбар */
    .prod-top > .product-sidebar {
        min-width: 0;
    }

    .product-sidebar .pb-kit {
        padding: 16px;
    }

}

/* ============================================================
   ORDER FORM — форма заказа прямо на странице (без модалки)
   ============================================================ */

/* переменная нужна и вне .order-form: форма переезжает в модалку,
   где наследование от .order-form уже не работает */
:root {
    --of-radius: 14px;
    --of-card-radius: 18px;
}

.of-head__title {
    font-size: 19px;
    font-weight: 700;
    color: #111;
}

.of-head__sub {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
}

/* --- Количество + цена --- */
.of-qty.qty-card {
    margin: 14px 0 0;
    padding: 14px;
    background: #f7f8fa;
    border: 1px solid #ebedf2;
    border-radius: var(--of-radius, 14px);
    position: relative;
}

.of-qty.qty-card .qty-body {
    margin-top: 0;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: stretch;
}

/* текстовая колонка тянется на всю высоту блока:
   цена прижата к верху, строка со скидкой — к низу */
.of-qty.qty-card .qty-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
}

.of-qty.qty-card .qty-ctrl {
    width: 64px;
    height: 90px;
    border-radius: 12px;
    background: #fff;
}

.of-qty.qty-card .qty-ctrl__input {
    font-size: 26px;
}

.of-qty.qty-card .ptb-price-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    /* место под бейдж скидки в правом верхнем углу */
    padding-right: 62px;
}

.of-qty.qty-card .qty-sum {
    font-size: 34px;
    line-height: 1.05;
    color: var(--primary-color);
}

.of-qty.qty-card .qty-sum b {
    font-weight: 800;
}

.of-qty.qty-card .old-price {
    font-size: 19px;
    color: #98a0ae;
    text-decoration: line-through;
}

/* подпись «Знижка від кількості» между ценой и строкой «за шт.» */
.of-qty.qty-card .qty-bulk-label {
    margin-top: 0;
    font-size: 13px;
    font-weight: 600;
    color: #9aa2b1;
}

/* бейдж процента скидки в правом верхнем углу */
.of-qty.qty-card .of-discount-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 700;
    color: #e11d48;
    background: #ffe9ec;
    border-radius: 999px;
    white-space: nowrap;
}

.of-qty.qty-card .qty-note {
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
}

.of-qty.qty-card .qty-discount {
    color: #16a34a;
}

/* --- Поля --- */
.of-label {
    display: block;
    margin-top: 12px;
}

.of-label__text {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.of-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-size: 16px;
    color: #111;
    background: #fff;
    border: 1px solid #e1e4ea;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.of-input::placeholder {
    color: #b4bac5;
}

.of-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.of-input.is-invalid {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}

/* --- Кнопки --- */
.of-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
}

.of-submit {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 16px 18px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--primary-color);
    border: 0;
    border-radius: var(--of-radius, 14px);
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.15s ease;
}

.of-submit:hover {
    filter: brightness(1.05);
}

.of-submit:active {
    transform: translateY(1px);
}

.of-submit[disabled] {
    opacity: 0.65;
    cursor: default;
}

/* квадратная иконка-кнопка справа от основной CTA */
.of-cart {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    padding: 0;
    background: #fff;
    border: 1px solid #e1e4ea;
    border-radius: var(--of-radius, 14px);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.of-cart img {
    width: 22px;
    height: 22px;
}

.of-cart:hover {
    background: #f6f7fb;
    border-color: #d3d8e0;
}

.of-cart.selected {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- Кросс-селл внутри формы --- */
.of-cross {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef0f4;
}

.of-cross__title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

/* карусель не должна раздувать высоту: слайды по контенту карточки */
.of-cross .qo2-cross-swiper {
    padding: 0 4px;
}

.of-cross .qo2-cross-swiper .swiper-wrapper {
    height: auto !important;
    align-items: stretch;
}

.of-cross .qo2-cross-swiper .swiper-slide {
    height: auto !important;
    display: flex;
    justify-content: center;
}

.of-cross .qcross-card {
    width: 100%;
    height: 240px;
}

.of-cross .qo2-cross-pagination {
    position: relative;
    /* swiper по умолчанию задаёт bottom: 8px — при position: relative это
       сдвигает точки вверх и ломает симметрию отступов */
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    margin: 16px 0 0;
    line-height: 0;
}

@media (max-width: 767px) {
    .of-cross .qo2-cross-pagination {
        margin-top: 12px;
    }
}

/* --- Подсветка формы при переходе из липкой панели --- */
.order-form.of-flash {
    animation: ofFlash 1.1s ease;
}

@keyframes ofFlash {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 45%, transparent);
    }
    60% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary-color) 0%, transparent);
    }
    100% {
        box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
    }
}

@media (max-width: 767px) {
    .of-qty.qty-card .qty-sum {
        font-size: 30px;
    }

    .of-submit {
        font-size: 16px;
        padding: 15px 16px;
    }
}

/* ============================================================
   ORDER MODAL — на десктопе поля заказа и кросс-селл в модалке
   ============================================================ */

/* подзаголовок карточки: два варианта текста */
.of-sub--modal { display: none; }

/* submit внутри формы нужен только в модалке */
.of-submit--in-form { display: none; }

.of-modal__body .of-submit--in-form { display: block; }

@media (min-width: 768px) {
    .of-sub--inline { display: none; }
    .of-sub--modal { display: inline; }
}

.of-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.of-modal.is-open {
    display: flex;
}

.of-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.of-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.of-modal__head {
    display: flex;
    /* заголовок прижат к верхнему краю — отступ такой же, как у крестика */
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.of-modal__head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.of-modal__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    color: #6b7280;
    background: #f4f5f8;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.of-modal__close:hover {
    background: #e9ebf0;
    color: #111;
}

.of-modal__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #f7f8fa;
    border: 1px solid #ebedf2;
    border-radius: 12px;
    font-size: 14px;
    color: #6b7280;
}

.of-modal__summary b {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color);
}

.of-modal__body {
    margin-top: 16px;
}

.of-modal__body .of-label:first-child {
    margin-top: 12px;
}

.of-modal__body .of-cross {
    margin-top: 16px;
}

.of-modal__body .of-submit--in-form {
    width: 100%;
    margin-top: 16px;
}

/* ============================================================
   ADVANTAGES v2 — переваги с разделителями, как таблица характеристик
   ============================================================ */

.advantages-block .advantages-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
    padding: 0;
    background: #fff;
    border: 1px solid #ebedf2;
    border-radius: 14px;
    overflow: hidden;
}

.advantages-block .adv-item {
    display: flex;
    /* на мобиле старое правило ставило колонку с центрированием — держим строку */
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border-top: 1px solid #f1f2f6;
    border-left: 1px solid #f1f2f6;
}

/* убираем линии по внешнему периметру (сетка ровно в 2 колонки) */
.advantages-block .adv-item:nth-child(-n + 2) {
    border-top: 0;
}

.advantages-block .adv-item:nth-child(odd) {
    border-left: 0;
}

.advantages-block .adv-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
}

.advantages-block .adv-item p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #2b3140;
    overflow-wrap: anywhere;
}

/* на узких экранах сетка остаётся в 2 колонки — просто ужимаем содержимое */
@media (max-width: 430px) {
    .advantages-block .adv-item {
        gap: 8px;
        padding: 10px;
    }

    .advantages-block .adv-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 17px;
        border-radius: 9px;
    }

    .advantages-block .adv-item p {
        font-size: 13px;
        line-height: 1.3;
    }
}

/* ============================================================
   Липкая панель на мобиле — кнопки компактнее
   ============================================================ */
@media (max-width: 767px) {
    .action-block {
        gap: 8px;
    }

    .action-block button {
        flex: 1;
        min-width: 0;
        padding: 11px 10px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        border-radius: 10px;
        white-space: nowrap;
    }

    .action-block button img {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   Кнопки заказа — без каких-либо рамок и колец
   (в common.css есть глобальный :focus-visible box-shadow)
   ============================================================ */
.of-submit,
.of-submit:hover,
.of-submit:focus,
.of-submit:focus-visible,
.of-submit:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.of-cart,
.of-cart:hover,
.of-cart:focus,
.of-cart:focus-visible,
.of-cart:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.of-cart {
    background: #f4f5f8;
}

.of-cart:hover {
    background: #e9ebf0;
}

/* активное состояние = товар лежит в корзине */
.of-cart {
    position: relative;
}

.of-cart.selected {
    background: color-mix(in srgb, var(--primary-color) 16%, #fff);
}

.of-cart.selected::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
}

/* второй блок количества (внутри формы) нужен только в модалке на десктопе */
@media (max-width: 767px) {
    .of-qty--form {
        display: none;
    }
}

.of-modal__body .of-qty--form {
    margin-top: 0;
}

/* ============================================================
   PACKAGE — комплект: 1 товар на всю ширину, 2 в ряд, дальше свайп
   ============================================================ */

.pb-kit__list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.pb-kit__list::-webkit-scrollbar {
    height: 4px;
}

.pb-kit__list::-webkit-scrollbar-thumb {
    background: #d7dbe2;
    border-radius: 999px;
}

.pb-kit__item {
    /* ровно два в видимой области; третий и дальше — свайпом вправо */
    flex: 0 0 calc((100% - 10px) / 2);
    min-width: 0;
    scroll-snap-align: start;
    background: #f7f8fa;
    border: 1px solid #ebedf2;
    border-radius: 14px;
    padding: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pb-kit__item:hover {
    background: #f1f3f7;
    border-color: #dfe3ea;
}

/* единственный товар растягиваем на всю ширину */
.pb-kit__item:only-child {
    flex-basis: 100%;
}

.pb-kit__img img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
}

.pb-kit__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-kit__qty {
    margin-top: 5px;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
}

.pb-kit__title {
    font-size: 16px;
    margin-bottom: 10px;
}

/* ============================================================
   PAGE POLISH — единая типографика и ритм секций страницы товара
   ============================================================ */

/* Заголовки секций к одному размеру и весу */
.advantages-title,
.specs-title,
.pb-kit__title,
.often-bought > h2,
.reviews-title,
.of-cross__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #1b2030;
    letter-spacing: -0.01em;
}

.often-bought > h2 {
    /* uppercase из инлайн-стиля читается тяжело */
    text-transform: none !important;
    margin: 0 0 12px;
}

.reviews-title {
    margin: 0;
}

/* Текстовые блоки описания */
.description-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #1b2030;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.description-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #4b5563;
}

.description-row__media img,
.video-block__media {
    border-radius: 14px;
    overflow: hidden;
}

.description-row__media img {
    transition: transform 0.35s ease;
}

@media (min-width: 768px) {
    .description-row__media img.js-thumb {
        cursor: zoom-in;
    }

    .description-row__media img.js-thumb:hover {
        transform: scale(1.015);
    }
}

/* Карточки страницы: мягче тень, единый радиус */
.ptb-card {
    border-radius: 14px;
}

/* Галерея */
.gallery-wrap .thumb {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebedf2;
    transition: border-color 0.15s ease;
}

.gallery-wrap .thumb.is-active {
    border-color: var(--primary-color);
}

/* Отзывы */
.reviews-section .rv-card {
    border: 1px solid #ebedf2;
    box-shadow: none;
}

.reviews-all-btn {
    border-radius: 10px;
    font-weight: 600;
}

/* Кросс-селл на странице */
.also-buy-card {
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.also-buy-card:hover {
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}

/* Название товара в шапке сайдбара */
.ptb-color-select h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #1b2030;
    letter-spacing: -0.01em;
}

@media (max-width: 767px) {
    .description-title {
        font-size: 18px;
    }

    .description-text {
        font-size: 14.5px;
    }

    .advantages-title,
    .specs-title,
    .pb-kit__title,
    .often-bought > h2,
    .reviews-title {
        font-size: 17px;
    }

    .ptb-color-select h3 {
        font-size: 18px;
    }
}

/* ============================================================
   PAGE POLISH v2 — единый вид карточек страницы товара
   (нужна повышенная специфичность: базовые правила лежат
    в медиазапросах и перебивают одиночный .ptb-card)
   ============================================================ */

/* В файле уже есть оформление «product story» для #videoSection и
   #descriptionSection (тёмный блок, радиус 18px, без рамок) — его не трогаем,
   а остальные карточки подтягиваем к тому же радиусу и добавляем хайрлайн. */
.product-page .ptb-card {
    border: 1px solid #ecedf2;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.05);
}

.product-page #videoSection.video-block,
.product-page #descriptionSection .description-row.ptb-card {
    border: 0;
}

/* «Часто купують разом» — заголовок в общем стиле */
.product-page .often-bought > h2 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none !important;
}

/* Отзывы */
.product-page .reviews-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.product-page .reviews-section .rv-card {
    border: 1px solid #ecedf2;
    border-radius: 14px;
    box-shadow: none;
}

.product-page .reviews-all-btn {
    border-radius: 10px;
    font-weight: 600;
}

/* Кросс-селл на странице */
.product-page .also-buy-card {
    border-radius: 12px;
    border: 1px solid #ecedf2;
}

.product-page .also-buy-card:hover {
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}

/* Галерея: активная миниатюра */
.product-page .gallery-wrap .thumb {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ecedf2;
    transition: border-color 0.15s ease;
}

.product-page .gallery-wrap .thumb.is-active {
    border-color: var(--primary-color);
}

/* ============================================================
   BOTTOM SECTIONS v2 — «Часто купують разом» и «Відгуки»
   ============================================================ */

/* --- карточка кросс-селла --- */
.product-page .also-buy-card {
    padding: 10px;
    background: #fff;
    border: 1px solid #ecedf2;
    border-radius: 14px;
    gap: 8px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.product-page .also-buy-card .also-thumb {
    /* фото товаров вертикальные 3:4 — так они не обрезаются */
    aspect-ratio: 3 / 4;
    display: block;
    overflow: hidden;
    background: #f4f5f8;
    border-radius: 10px;
}

.product-page .also-buy-card .also-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-page .also-buy-card .also-body {
    padding: 0;
    text-align: left;
}

.product-page .also-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: #2b3140;
}

.product-page .also-prices {
    margin-top: 6px;
    display: flex;
    justify-content: flex-start;
}

.product-page .also-prices .new {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-color);
}

.product-page .also-buy-card.selected {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, #fff);
}

.product-page .also-buy-card .also-check {
    top: 16px;
    right: 16px;
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.product-page .also-cross-actions {
    margin-top: 8px;
    padding: 3px;
    background: #f4f5f8;
    border-radius: 10px;
}

.product-page .also-buy-card.selected .also-cross-actions {
    background: #fff;
}

/* --- отзывы --- */
.product-page .reviews-section .rv-card {
    padding: 14px;
    background: #fff;
}

.product-page .review-rating {
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1b2030;
}

.product-page .review-author {
    font-size: 14px;
    font-weight: 700;
    color: #1b2030;
}

.product-page .review-body {
    font-size: 14px;
    line-height: 1.55;
    color: #4b5563;
}

.product-page .review-item {
    border-bottom: 0;
    gap: 6px;
}

.product-page .store-reply {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f7f8fa;
    border-left: 3px solid var(--primary-color);
    border-radius: 10px;
}

.product-page .store-reply strong {
    font-size: 13px;
    color: #1b2030;
}

.product-page .store-reply p {
    font-size: 13px;
    line-height: 1.5;
    color: #5a6172;
}

.product-page .review-photo img {
    border-radius: 10px;
}

/* кнопка «Читати всі відгуки» — вторичная, чтобы не спорить с кнопкой заказа */
.product-page .reviews-all-btn {
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-radius: 10px;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.product-page .reviews-all-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* --- галерея --- */
.product-page .gallery-wrap .main-col .owl-carousel .item img {
    border-radius: 12px;
}

@media (max-width: 767px) {
    .product-page .also-title {
        font-size: 12.5px;
    }

    .product-page .also-prices .new {
        font-size: 15px;
    }
}