/* =============================================================================
   ТРОН — страница товара (3-колоночная раскладка). Scoped под .product-page.
   Подключается через @push('styles') в shop/products/show.blade.php (unlayered →
   высокий приоритет), версионируется по filemtime.
   ============================================================================= */

.product-page { color: var(--tron-text, #2b2b2e); }

/* --- Хлебные крошки --- */
.pp-breadcrumb { background:#f8f9fa; border-bottom:1px solid #e9ecef; padding:.7rem 0; font-size:14px; }
.pp-breadcrumb .breadcrumb { margin:0; background:transparent; }
.pp-breadcrumb a { color:#6c757d; text-decoration:none; }
.pp-breadcrumb a:hover { color: var(--tron-blue, #2549d8); }
.pp-breadcrumb .breadcrumb-item.active { color:#495057; }

/* --- Заголовок --- */
.pp-title { font-size:1.6rem; font-weight:700; line-height:1.3; margin:0 0 .4rem; }
.pp-subline { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; color:#6c757d; font-size:14px; margin-bottom:1.25rem; }
.pp-subline .pp-rating .fa-star { font-size:14px; }
.pp-subline .sep { color:#dee2e6; }

/* --- Галерея: вертикальная лента превью СЛЕВА + фото справа (меньше) --- */
.pp-gallery { position:sticky; top:20px; }
.pp-gallery-inner {
    display:flex;
    gap:12px;
    align-items:flex-start;
    --pp-visible-thumbs: 5;
    --pp-thumb-size: 70px;
    --pp-thumb-gap: 8px;
    --pp-thumbs-col-w: 78px;
    --pp-main-img-pad-y: 10px;
    --pp-main-img-pad-x: 4px;
    --pp-img-zoom: 1.08;
    --pp-thumbs-track-h: calc(var(--pp-visible-thumbs) * var(--pp-thumb-size) + (var(--pp-visible-thumbs) - 1) * var(--pp-thumb-gap));
    --pp-main-img-block-h: var(--pp-thumbs-track-h);
    --pp-main-img-height: calc(var(--pp-main-img-block-h) - (var(--pp-main-img-pad-y) * 2));
}
.pp-thumbs {
    display:flex;
    flex-direction:column;
    gap:var(--pp-thumb-gap);
    box-sizing:border-box;
    flex:0 0 var(--pp-thumbs-col-w);
    width:var(--pp-thumbs-col-w);
    height:var(--pp-thumbs-track-h);
    max-height:var(--pp-thumbs-track-h);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
    padding:0 2px 0 0;
    user-select:none;
    -webkit-user-select:none;
}
.pp-thumbs ::selection { background:transparent; color:inherit; }
.pp-thumbs::-webkit-scrollbar { width:5px; }
.pp-thumbs::-webkit-scrollbar-track { background:transparent; margin:0; }
.pp-thumbs::-webkit-scrollbar-thumb {
    background:transparent;
    border-radius:999px;
    transition:background .2s ease, opacity .2s ease;
    opacity:0;
}
.pp-thumbs:hover,
.pp-thumbs:focus-within,
.pp-thumbs.is-scrolling { scrollbar-color:rgba(37,73,216,.45) transparent; }
.pp-thumbs:hover::-webkit-scrollbar-thumb,
.pp-thumbs:focus-within::-webkit-scrollbar-thumb,
.pp-thumbs.is-scrolling::-webkit-scrollbar-thumb { background:rgba(37,73,216,.5); opacity:1; }
.pp-thumbs.is-scrolling::-webkit-scrollbar-thumb:active,
.pp-thumbs:hover::-webkit-scrollbar-thumb:active { background:var(--tron-blue,#2549d8); }
.pp-thumb {
    flex:0 0 auto;
    box-sizing:border-box;
    width:var(--pp-thumb-size);
    height:var(--pp-thumb-size);
    object-fit:cover;
    object-position:center;
    border:1px solid #dee2e6;
    border-radius:10px;
    cursor:pointer;
    transition:border-color .2s ease;
    background:#fff;
    -webkit-user-drag:none;
}
.pp-thumb:hover { border-color:#adb5bd; }
.pp-thumb.active { border-color: var(--tron-blue, #2549d8); }
.pp-main-img {
    flex:1 1 auto;
    min-width:0;
    position:relative;
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:14px;
    padding:var(--pp-main-img-pad-y) var(--pp-main-img-pad-x);
    height:var(--pp-main-img-block-h);
    min-height:var(--pp-main-img-block-h);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.pp-main-img img {
    width:100%;
    height:var(--pp-main-img-height);
    max-height:var(--pp-main-img-height);
    object-fit:contain;
    object-position:center;
    transform:scale(var(--pp-img-zoom));
    transform-origin:center center;
}
.pp-main-img--interactive { cursor:pointer; }
.pp-main-img--interactive.is-zooming { cursor:none; }
.pp-zoom-stage {
    position:relative;
    width:100%;
    height:var(--pp-main-img-height);
    display:flex;
    align-items:center;
    justify-content:center;
}
.pp-zoom-stage #mainImage {
    width:100%;
    height:100%;
    max-height:var(--pp-main-img-height);
    object-fit:contain;
    transform:none;
    transform-origin:center center;
}
.pp-zoom-lens {
    position:absolute;
    background-origin:border-box;
    width:110px;
    height:110px;
    border:2px solid rgba(37,73,216,.75);
    border-radius:50%;
    background-repeat:no-repeat;
    background-color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    pointer-events:none;
    z-index:4;
}
.pp-zoom-hint {
    position:absolute;
    right:12px;
    bottom:10px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:var(--tron-blue,#2549d8);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
    z-index:3;
}
.pp-main-img--interactive:hover .pp-zoom-hint { opacity:1; }
.pp-main-img--interactive.is-zooming .pp-zoom-hint { opacity:0; }

/* Модальная галерея */
.pp-gallery-modal .modal-content { border:none; border-radius:16px; overflow:hidden; }
.pp-gallery-modal,
.pp-gallery-modal .modal-dialog,
.pp-gallery-modal .pp-gallery-swiper,
.pp-gallery-modal .swiper-wrapper,
.pp-gallery-modal .swiper-slide {
    user-select:none;
    -webkit-user-select:none;
}
.pp-gallery-modal ::selection,
.pp-gallery-modal *::selection {
    background:transparent;
    color:inherit;
}
.pp-gallery-modal .modal-header { padding:1rem 1.25rem 0; }
.pp-gallery-modal .modal-title { font-size:1rem; font-weight:600; line-height:1.35; user-select:none; }
.pp-gallery-modal .pp-gallery-swiper { width:100%; padding-bottom:2.5rem; touch-action:pan-x; }
.pp-gallery-modal .pp-gallery-slide-img {
    display:block;
    width:100%;
    max-height:min(78vh, 720px);
    margin:0 auto;
    object-fit:contain;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}
.pp-gallery-modal .swiper-button-prev,
.pp-gallery-modal .swiper-button-next {
    color:var(--tron-blue,#2549d8);
    user-select:none;
    outline:none;
}
.pp-gallery-modal .swiper-button-prev:focus,
.pp-gallery-modal .swiper-button-next:focus {
    outline:2px solid rgba(37,73,216,.35);
    outline-offset:2px;
}
.pp-gallery-modal .swiper-pagination-bullet-active { background:var(--tron-blue,#2549d8); }

.pp-main-img--interactive,
.pp-zoom-stage,
.pp-zoom-stage #mainImage {
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}
.pp-main-img--interactive ::selection,
.pp-zoom-stage ::selection {
    background:transparent;
}
@media (max-width: 991.98px) {
    .pp-main-img--interactive { cursor:pointer; }
    .pp-zoom-hint { opacity:1; }
}
.pp-badges { position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.pp-badge { padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; color:#fff; width:max-content; }
.pp-badge.sale { background:#dc3545; } .pp-badge.new { background:#0d6efd; } .pp-badge.hit { background:#ffc107; color:#212529; }
/* экшн-иконки поверх фото (верхний правый угол) */
.pp-img-actions { position:absolute; top:14px; right:14px; display:flex; flex-direction:column; gap:8px; z-index:3; }
.pp-img-act { width:38px; height:38px; border-radius:50%; border:1px solid #e9ecef; background:rgba(255,255,255,.95); color:var(--tron-blue,#2549d8); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:.2s ease; }
.pp-img-act:hover { background:var(--tron-blue,#2549d8); color:#fff; transform:scale(1.08); }

/* --- Характеристики (центр) --- */
.pp-specs h2 { font-size:1.1rem; font-weight:700; margin-bottom:14px; }
.pp-spec-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed #e9ecef; font-size:14px; }
.pp-spec-row .k { color:#6c757d; }
.pp-spec-row .v { font-weight:600; text-align:right; }
.pp-specs-all { display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:0; border:none; background:none; color:var(--tron-blue,#2549d8); font-weight:600; text-decoration:none; font-size:14px; cursor:pointer; }
.pp-specs-all:hover { text-decoration:underline; }

/* --- Модалка «Все характеристики» --- */
.pp-specs-modal .modal-content { border:none; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.12); }
.pp-specs-modal .modal-header { border-bottom:1px solid #e9ecef; padding:1rem 1.25rem; }
.pp-specs-modal .modal-title { font-size:1.1rem; font-weight:700; color:var(--tron-text,#2b2b2e); }
.pp-specs-modal .modal-title i { color:var(--tron-blue,#2549d8); }
.pp-specs-modal .modal-body { padding:1rem 1.25rem 1.25rem; }
.pp-specs-modal .pp-spec-row:last-child { border-bottom:none; }

/* --- Панель покупки (право) --- */
.pp-buy { position:sticky; top:20px; background:#fff; border:1px solid #e9ecef; border-radius:14px; padding:16px; box-shadow:0 4px 18px rgba(0,0,0,.05); }
.pp-price-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.pp-price { font-size:1.5rem; font-weight:700; line-height:1; }
.pp-oldprice { color:#9aa0a6; text-decoration:line-through; font-size:.95rem; }
.pp-discount { color:#dc3545; font-weight:600; font-size:12.5px; margin-top:5px; }
/* десктоп: обёртка переносит ссылку на отдельную строку (как было) */
.pp-wholesale-wrap { flex-basis:100%; margin-top:10px; }
.pp-wholesale { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--tron-blue,#2549d8); text-decoration:none; border:1px dashed #c7d0f5; padding:6px 10px; border-radius:9px; }
.pp-wholesale:hover { background:#f3f5fc; }
/* мобила: в один ряд с ценой, прижата вправо, мельче */
@media (max-width: 767.98px) {
    .pp-wholesale-wrap { flex-basis:auto; margin-top:0; margin-left:auto; align-self:center; }
    .pp-wholesale { font-size:11px; padding:4px 8px; gap:4px; }
}

.pp-stock { display:flex; align-items:center; gap:8px; font-weight:600; margin:14px 0 2px; font-size:14px; }
.pp-stock .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.pp-stock.in { color: var(--tron-success, #28a745); }
.pp-stock.in .dot { background: var(--tron-success, #28a745); box-shadow:0 0 0 3px rgba(40,167,69,.2); }
.pp-stock.out { color:#e0892b; }
.pp-stock.out .dot { background:#e0892b; box-shadow:0 0 0 3px rgba(224,137,43,.2); }
.pp-stock-date { color:#9aa0a6; font-size:12px; margin-bottom:16px; }

.pp-actions { display:flex; flex-direction:column; gap:10px; }
.pp-qty-row { display:flex; gap:10px; align-items:stretch; }
.pp-qty { display:inline-flex; border:2px solid #e9ecef; border-radius:12px; overflow:hidden; background:#fff; flex:0 0 auto; }
.pp-qty button { background:#fff; border:none; width:38px; font-size:17px; color:var(--tron-blue,#2549d8); font-weight:600; cursor:pointer; transition:background .2s; }
.pp-qty button:hover { background:#f3f5fc; }
.pp-qty input { width:44px; border:none; border-left:2px solid #e9ecef; border-right:2px solid #e9ecef; text-align:center; font-weight:600; font-size:15px; outline:none; -moz-appearance:textfield; }
.pp-qty input::-webkit-outer-spin-button, .pp-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.pp-btn { width:100%; border-radius:12px; padding:12px; font-weight:600; font-size:14.5px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; display:flex; align-items:center; justify-content:center; gap:8px; border:none; }
.pp-btn-primary { flex:1; min-width:0; background:linear-gradient(135deg,#2549d8,#1e3aad); color:#fff; box-shadow:0 4px 16px rgba(37,73,216,.3); }
.pp-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,73,216,.4); }
.pp-btn-preorder { background:linear-gradient(135deg,#e0892b,#c9741a); color:#fff; box-shadow:0 4px 16px rgba(224,137,43,.3); }
.pp-btn-preorder:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(224,137,43,.4); }
.pp-btn-fast { background:#fff; color:var(--tron-text,#2b2b2e); border:2px solid #e9ecef; }
.pp-btn-fast:hover { border-color:var(--tron-blue,#2549d8); background:#f8f9fa; }
.pp-icon-btn { flex:0 0 auto; width:54px; background:#fff; border:2px solid #e9ecef; border-radius:14px; color:var(--tron-blue,#2549d8); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.pp-icon-btn:hover { border-color:var(--tron-blue,#2549d8); background:#f8f9fa; transform:translateY(-2px); }

/* Гарантии — отдельным блоком НИЖЕ панели покупки */
.pp-guarantees { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-top:14px; padding:14px 4px 0; }
.pp-guarantees .g { display:flex; gap:9px; align-items:flex-start; }
.pp-guarantees .g i { font-size:17px; margin-top:1px; flex:0 0 auto; }
.pp-guarantees .g .t { font-weight:600; font-size:12px; color:#212529; }
.pp-guarantees .g .s { color:#6c757d; font-size:11px; }

/* --- Вкладки --- */
.pp-tabs { border-bottom:2px solid #e9ecef; flex-wrap:wrap; }
.pp-tabs .nav-link { color:#6c757d; font-weight:600; border:none; border-radius:0; padding:.75rem 1rem; }
.pp-tabs .nav-link:hover { color:var(--tron-text,#2b2b2e); }
.pp-tabs .nav-link.active { color:var(--tron-blue,#2549d8); background:transparent; }
.pp-tabs .nav-link.active::after { width:0; }
.pp-tabs .nav-link:hover::after { width:80%; }
.pp-tab-pane { padding:1.5rem .25rem; }
.pp-spec-table td { padding:10px 12px; font-size:14px; }
.pp-spec-table td:first-child { color:#6c757d; width:45%; }
.pp-spec-table td:last-child { font-weight:600; }

/* --- Инфо-блоки во вкладках (доставка, условия) — стилистика гарантий --- */
.pp-info-block + .pp-info-block { margin-top: 18px; }
.pp-info-title { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#212529; margin-bottom:12px; }
.pp-info-title i { color:var(--tron-blue,#2549d8); }
.pp-info-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 14px; }
.pp-info-grid .g { display:flex; gap:9px; align-items:flex-start; background:#f8f9fb; border-radius:12px; padding:12px; }
.pp-info-grid .g i { font-size:17px; margin-top:1px; flex:0 0 auto; }
.pp-info-grid .g .t { font-weight:600; font-size:13px; color:#212529; }
.pp-info-grid .g .s { color:#6c757d; font-size:12px; }
@media (max-width: 767.98px) {
    .pp-info-grid { grid-template-columns:1fr 1fr; gap:10px; }
}

/* --- Адаптив --- */
@media (max-width: 991.98px) {
    .pp-buy, .pp-gallery { position:static; }
}

/* Планшет: 2 колонки — галерея + покупка */
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-page .pp-buy { position:sticky; top:12px; }
    .product-page .pp-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .product-page .pp-tabs::-webkit-scrollbar { display:none; }
    .product-page .pp-tabs .nav-link { white-space:nowrap; font-size:13px; }
}

/* Компактный десктоп 992–1199 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .product-page .pp-gallery-inner {
        --pp-thumb-size: 56px;
        --pp-thumbs-col-w: 64px;
    }
    .product-page .pp-title { font-size:1.35rem; }
    .product-page .pp-price { font-size:1.35rem; }
    .product-page .pp-buy,
    .product-page .pp-gallery { position:static; }
}

/* Широкий десктоп */
@media (min-width: 1200px) {
    .product-page .pp-gallery-inner {
        --pp-thumb-size: 64px;
        --pp-thumbs-col-w: 72px;
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    .pp-gallery-inner {
        --pp-thumb-size: 56px;
        --pp-thumbs-col-w: 64px;
        --pp-main-img-pad-y: 12px;
        --pp-visible-thumbs: 4;
    }
    .pp-title { font-size:1.2rem; }
    .pp-price { font-size:1.6rem; }
    .pp-buy { padding:16px; border-radius:14px; }
}

/* --- Мобильная переработка (телефоны и фаблеты) --- */
@media (max-width: 767.98px) {
    /* кнопки действий: парные — по 50% в один ряд (Предзаказ + Сообщить,
       и т.п.); форма с количеством остаётся на всю ширину */
    .pp-actions { display:flex; flex-wrap:wrap; gap:10px; }
    .pp-actions > form { flex:1 1 100%; }
    .pp-actions > .pp-btn {
        flex:1 1 calc(50% - 5px);
        width:auto;
        min-width:0;
        padding:11px 8px;
        font-size:13.5px;
    }
    /* гарантии: сетка 2×2 вместо столбика */
    .pp-guarantees { grid-template-columns:1fr 1fr; gap:10px; }
    .pp-guarantees .g .t { font-size:13px; }
    .pp-guarantees .g .s { font-size:11px; }
    /* вкладки: одна прокручиваемая строка вместо переноса в 2-3 ряда */
    .pp-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .pp-tabs::-webkit-scrollbar { display:none; }
    .pp-tabs .nav-link { white-space:nowrap; padding:.6rem .75rem; font-size:13px; }
    .pp-tab-pane { padding:1rem .25rem; }

    /* подсказка прокрутки: градиент у правого края ленты чипов */
    .pp-tabs-wrap { position:relative; }
    .pp-tabs-wrap::after {
        content:'';
        position:absolute;
        top:0; right:0; bottom:0;
        width:36px;
        background:linear-gradient(to right, rgba(255,255,255,0), #fff 80%);
        pointer-events:none;
    }

    /* пустые состояния вкладок (нет аналогов/отзывов и т.п.) — карточкой */
    .pp-tab-pane > p.text-muted:only-child {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
        text-align:center;
        padding:24px 16px;
        background:#f8f9fb;
        border-radius:12px;
        font-size:13.5px;
    }
    .pp-tab-pane > p.text-muted:only-child i {
        font-size:28px;
        color:#c3c9d4;
        margin:0 !important;
    }

    /* характеристики: компактная таблица */
    .pp-spec-table td { padding:8px 10px; font-size:13px; }

    /* способы доставки и прочий двухколоночный контент — плотнее на телефоне */
    .pp-tab-pane h6 { font-size:14px; }
    .pp-tab-pane .row.g-4 { --bs-gutter-y: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ПАНЕЛЬ ПОКУПКИ
   Все элементы — прямые дети формы .pp-buy-form, порядок задаётся через order.
   ═════════════════════════════════════════════════════════════════════════ */
.pp-buy-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Полноширинные элементы */
.pp-buy-form > .pp-price-row,
.pp-buy-form > .pp-discount,
.pp-buy-form > .pp-stock,
.pp-buy-form > .pp-stock-date,
.pp-buy-form > .pp-cart-note,
.pp-buy-form > .alert { flex: 0 0 100%; }

.pp-buy-form > .pp-stock { margin: 4px 0 0; }
.pp-buy-form > .pp-stock-date { margin: -8px 0 2px; }
.pp-buy-form > .pp-cart-note { font-size: 13px; }

/* Десктоп: счётчик и «В корзину» в одном ряду, «Быстрый заказ» — ниже */
.pp-buy-form > .pp-qty { flex: 0 0 auto; }
.pp-buy .pp-buy-form > .pp-btn-primary { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; order: 0 !important; }
/* Счётчик тянется по высоте кнопки «В корзину» — как было до перестройки */
.pp-buy-form > .pp-qty,
.pp-buy-form > .pp-btn-primary { align-self: stretch; }
.pp-buy-form > .pp-btn-fast,
.pp-buy-form > .pp-btn-preorder { flex: 0 0 100%; }

/* Цена и «Узнать оптовую цену» — в одну строку (в т.ч. на десктопе) */
.pp-price-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; }
.pp-price-main { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pp-wholesale-wrap { flex: 0 1 auto; margin: 0 0 0 auto; }
.pp-wholesale { white-space: nowrap; }

/* ── Мобильная раскладка ────────────────────────────────────────────────────
   Порядок: счётчик → цена → остаток → «В корзину» + «Быстрый заказ» (в ряд)
   → «Узнать оптовую цену». */
@media (max-width: 767.98px) {

    /* Растворяем .pp-price-row, чтобы цену и блок опта можно было развести */
    .pp-buy-form > .pp-price-row { display: contents; }

    .pp-buy-form { gap: 8px; }

    .pp-buy-form .pp-qty            { order: 1; flex: 0 0 auto; }
    /* Цена — в одном ряду со счётчиком «− 1 +», не под ним */
    /* Цена — в одном ряду со счётчиком «− 1 +» и прижата к правому краю */
    .pp-buy-form .pp-price-main     { order: 2; flex: 0 1 auto; margin-left: auto; justify-content: flex-end; }
    .pp-buy-form > .pp-discount     { order: 3; }
    .pp-buy-form > .pp-stock        { order: 4; margin: 0; }
    .pp-buy-form > .pp-stock-date   { order: 5; margin: -4px 0 2px; }
    .pp-buy-form > .alert           { order: 6; }
    .pp-buy-form > .pp-btn-primary  { order: 7; }
    .pp-buy-form > .pp-btn-preorder { order: 7; }
    .pp-buy-form > .pp-btn-fast     { order: 8; }
    .pp-buy-form > .pp-cart-note    { order: 9; }
    .pp-buy-form .pp-wholesale-wrap { order: 10; }

    /* Кнопки — в один ряд и компактнее.
       Селектор с .pp-buy нужен, чтобы перебить правило карточки товара в
       списке (.add-to-cart-form button[type="submit"] в category.css),
       которое задано через !important и растягивает кнопку на всю ширину. */
    .pp-buy .pp-buy-form > .pp-btn-primary,
    .pp-buy .pp-buy-form > .pp-btn-fast,
    .pp-buy .pp-buy-form > .pp-btn-preorder {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 8px;
        font-size: 13px;
        gap: 6px;
        border-radius: 10px;
    }
    .pp-buy .pp-buy-form > .pp-btn-primary  { order: 7 !important; }
    .pp-buy .pp-buy-form > .pp-btn-preorder { order: 7 !important; }
    .pp-buy .pp-buy-form > .pp-btn-fast     { order: 8 !important; }
    .pp-buy-form > .pp-btn-primary i,
    .pp-buy-form > .pp-btn-fast i { font-size: 13px; }

    /* «Узнать оптовую цену» — на всю ширину внизу панели */
    .pp-buy-form .pp-wholesale-wrap { flex: 0 0 100%; margin: 2px 0 0; }
    .pp-buy-form .pp-wholesale { width: 100%; justify-content: center; }

    .pp-buy-form .pp-price-main .pp-price { font-size: 1.5rem; }
}

/* ── Похожие товары: 2 в ряд на мобильном, как «Хиты продаж» на главной ──── */
@media (max-width: 767.98px) {
    /* CSS Grid вместо флекс-сетки Bootstrap: колонки col-6 дают 50% от дробной
       ширины контейнера, сумма получается на доли пикселя больше — и вторая
       карточка переносится на новую строку. Grid считает колонки точно. */
    .related-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-left: 0;
        margin-right: 0;
    }
    .related-grid > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
    }

    .related-grid .card.product-card { border-radius: 12px; height: 100%; }

    /* Фиксированная высота фото вместо естественной — карточки одной высоты */
    .related-grid .card-img-top {
        height: 140px !important;
        object-fit: contain !important;
        background: #fff;
        padding: 6px;
    }

    .related-grid .card-body { padding: 8px 10px 10px; }

    /* Название — ровно две строки, чтобы сетка не «прыгала» */
    .related-grid .card-title {
        font-size: 13px;
        line-height: 1.35;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(2 * 1.35em);
    }

    .related-grid .product-price { font-size: 16px; }
}

/* ── Вкладки-«чипсы»: перетаскивание захватом ───────────────────────────── */
.pp-tabs {
    scrollbar-width: none;                 /* Firefox */
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    cursor: grab;
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tabs.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}
.pp-tabs.is-dragging .nav-link { pointer-events: none; }