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

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

/* ===== 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 > .action-block-static,
    .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) Кнопки «Быстрый заказ / В корзину» */
    .action-block-static {
        display: flex;
        gap: 12px;
    }
    .action-block-static button {
        flex: 1;
        padding: 12px;
        font-size: 15px;
        font-weight: 600;
        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);
    }

    /* 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-preview {
        max-height: calc((1.6em /* line-height */ * 2 /* заголовка */) * 3 /* три элемента */);
        overflow: hidden;
        position: relative;
    }

    /* Optional: плавный градиент-омскрытие внизу */
    .specs-preview::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2em;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    }

    /* 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;
    }
    .specs-full-list .specs-list dt {
        font-weight: 600;
        color: #555;
    }
    .specs-full-list .specs-list dd {
        margin: 0 0 0.75rem 0;
        color: #666;
    }

    .specs-block .specs-list {
        margin: 10px 0 0 0;
        padding: 0;
        list-style: none;
        row-gap: 0.5rem;
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 1rem;
    }

    .specs-block .specs-list dt {
        font-weight: 600;
        color: #555;
    }
    .specs-block .specs-list dd {
        color: #666;
    }

    /* 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-row .specs-list {
        margin: 0;
        padding: 0;
        list-style: none;
        /* отступ между строками: */
        row-gap: 0.5rem;
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 1rem;
    }

    .specs-full-list .specs-list {
        margin: 0;
        padding: 0;
        list-style: none;
        /* отступ между строками: */
        row-gap: 0.5rem;
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 1rem;
    }

    .specs-row .specs-list dt {
        font-weight: 600;
        color: #555;
    }

    .specs-row .specs-list dd {
        margin: 0;
        color: #333;
    }
    /* ===== 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-static {
        transition: margin 0.3s ease;
        display: flex;
        gap: 12px;
        /*    margin: 1rem 0;*/
    }

    /* Общие стили кнопок */
    .action-block button,
    .action-block-static 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;
    }
    .specs-row .description-row__inner .description-row__content .specs-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 0.5rem;
    }
    .specs-row .description-row__inner .description-row__content .specs-list dt {
        font-weight: 600;
        color: #555;
    }
    .specs-row .description-row__inner .description-row__content .specs-list dd {
        margin: 0;
        color: #666;
    }
    /* ===== Запрет прокрутки страницы при открытой модалке ===== */
    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 52px 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;
}
}
.specs-list dt::after {
    font-weight: 600;
    content: ":";
    margin-left: 2px;
}
.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; }
}
/* ================== QUICK ORDER v2 (scoped) ================== */
.qo2-overlay{
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); z-index: 9999;
  padding:
    max(6px, env(safe-area-inset-top))
    6px
    max(18px, env(safe-area-inset-bottom))
    6px;
}
.qo2-overlay.qo2-active{ display: flex; }
.qo2-modal{
  width: min(880px,100%);
  max-height: min(calc(100dvh - max(24px, env(safe-area-inset-top)) - max(34px, env(safe-area-inset-bottom))), 860px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  background: var(--qo2-bg,#fff); color: var(--qo2-fg,#111827);
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .qo2-modal{ --qo2-bg:#121212; --qo2-fg:#e5e7eb; border-color: rgba(255,255,255,.08); }
}

/* Header */
.qo2-header{
  position: sticky; top:0; background: inherit; z-index:1;
  padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
}
.qo2-title{ margin:0; font-size:18px; font-weight:700; letter-spacing:.2px; }
.qo2-close{
  appearance:none; border:0; background:transparent; color:inherit;
  font-size:28px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:10px;
}
.qo2-close:hover{ background: rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark){
  .qo2-close:hover{ background: rgba(255,255,255,.08); }
}

/* Form */
.qo2-form{ padding:16px 18px 18px; display:grid; gap:14px; }
.qo2-form .qo2-label{ display:grid; gap:6px; font-size:13px; font-weight:600; }
.qo2-input, .qo2-textarea{
  width:100%; border:1.5px solid #e5e7eb; border-radius:12px;
  padding:12px 14px; font:inherit; background:#fff; color:#111827;
}
.qo2-textarea{ min-height:90px; resize:vertical; }
@media (prefers-color-scheme: dark){
  .qo2-input, .qo2-textarea{ background:#161616; color:#e5e7eb; border-color: rgba(255,255,255,.10); }
}

/* Block wrapper */
.qo2-block{
  border:1.5px solid #e5e7eb; border-radius:16px; padding:12px; background:#fff; display:grid; gap:12px;
}
.qo2-chip{
  display:inline-block; padding:6px 12px; border-radius:10px; background:#111827; color:#fff; font-weight:700; font-size:15px;
}
@media (prefers-color-scheme: dark){
  .qo2-block{ background:#151515; border-color: rgba(255,255,255,.10); }
  .qo2-chip{ background:var(--primary-color); }
}

/* Swatches (small) */
.qo2-swatches{ --size:68px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--size),1fr)); gap:10px; }
.qo2-swatch{
  display:grid; gap:6px; justify-items:center; align-content:start; cursor:pointer; user-select:none; background:transparent; border:0;
}
.qo2-swatch .qo2-thumb{
  width:100%; border-radius:12px; overflow:hidden;
  border:1.5px solid #e5e7eb; display:grid; place-items:center; background:#f9fafb;
}
.qo2-swatch .qo2-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.qo2-swatch .qo2-name{ font-size:12px; text-align:center; color:inherit; }
.qo2-swatch.qo2-active .qo2-thumb{ border-color: var(--primary-color,#4f46e5); box-shadow: 0 0 0 2px rgba(79,70,229,.12); }
@media (prefers-color-scheme: dark){
  .qo2-swatch .qo2-thumb{ background:#1a1a1a; border-color: rgba(255,255,255,.10); }
}

/* Variations (text list) */
.qo2-variations{ display:grid; grid-template-columns:1fr; gap:10px; }
.qo2-vr{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1.5px solid #e5e7eb; border-radius:12px; background:#fff; cursor:pointer;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.qo2-vr:hover{ border-color: var(--primary-color,#4f46e5); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.qo2-vr:active{ transform: scale(.99); }
.qo2-vr-thumb{ display:none; }
.qo2-vr-info{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; width:100%; }
.qo2-vr-name{ font-size:14px; font-weight:700; color:#000; line-height:1.25; }
.qo2-vr-prices{ display: flex; align-items: flex-end; gap: 8px; flex-direction: row-reverse; }
.qo2-vr-price{ font-weight:700; font-size:15px; }
.qo2-vr-old{ font-size:12px; color:#6b7280; text-decoration:line-through; }
.qo2-vr.qo2-active{
  border-color: var(--primary-color,#4f46e5);
  box-shadow: 0 0 0 2px rgba(79,70,229,.12);
  position:relative;
}
/*.qo2-vr.qo2-active::after{
  content:'✓'; position:absolute; right:10px; top:8px; color: var(--primary-color,#4f46e5); font-weight:700;
}*/
@media (prefers-color-scheme: dark){
  .qo2-vr{ background:#151515; border-color: rgba(255,255,255,.10); }
  .qo2-vr-name{ color:#000; }
}

/* Qty card (scoped to qo2 to не трогать глобальные) */
.qo2 .qty-card{ border:1.5px solid #e5e7eb; border-radius:16px; padding:14px; background:#fff; display:grid; }
.qo2 .qty-card .qty-head{ font-weight:700; }
.qo2 .qty-card .qty-body{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.qo2 .qty-info{ display:grid; gap:6px; }
.qo2 .ptb-price-block{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.qo2 .ptb-price-block .old-price{ color:#9ca3af; text-decoration:line-through; }
.qo2 .ptb-price-block .tag{ font-weight:700; color:#e11d48; }
.qo2 .qty-note{ font-size:13px; color:#6b7280; }
@media (prefers-color-scheme: dark){
  .qo2 .qty-card{ background:#151515; border-color: rgba(255,255,255,.10); }
  .qo2 .qty-note{ color:#9ca3af; }
}

/* Submit */
.qo2-submit{
  height:48px; border-radius:12px; background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 82%, #111827));
  color: var(--on-primary,#fff); border:0; font-weight:700; cursor:pointer;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 7%, transparent);
}
.qo2-submit:active{ transform: translateY(1px); }
/* ----- QUICK ORDER V2: hard light & isolation ----- */
#quickOrderModalV2, #quickOrderModalV2 * { color-scheme: light; }
#quickOrderModalV2 .qo2-modal{ background:#fff; color:#111827; }
#quickOrderModalV2 .qo2-block,
#quickOrderModalV2 .qo2-input,
#quickOrderModalV2 .qo2-textarea,
#quickOrderModalV2 .qty-card
 { background:#fff; color:#111827; }

#quickOrderModalV2 .qo2-block,
#quickOrderModalV2 .qo2-input,
#quickOrderModalV2 .qo2-textarea,
#quickOrderModalV2 .qty-card
 { border-color:#e5e7eb; }

#quickOrderModalV2 .qo2-vr { background:#fff; }
#quickOrderModalV2 .qo2-swatch .qo2-thumb { background:#f9fafb; }

.qo2-block[hidden] { display: none !important; }
     /* Заголовок */
.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;
}

/* Убираем стрелки */
.qo2-prev, .qo2-next {
  display: none;
}
/* pop-анимация для смайлика в модалке */
#qo2Emoji.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);  }
}
/* мигание/подпрыгивание чисел */
.qo2-flash {
  animation: qo2-num-flash 0.35s ease-out;
}

@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: calc(70px + env(safe-area-inset-bottom));
    }
  }
}

.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,
.qo2-vr-prices,
.qo2-vr-price,
.qo2-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)}
}