/* =============================================================================
   ТРОН — страница товара (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-thumbs { display:flex; flex-direction:column; gap:8px; flex:0 0 70px; width:70px; }
.pp-thumb { flex:0 0 auto; width:70px; height:70px; object-fit:cover; border:2px solid #dee2e6; border-radius:10px; cursor:pointer; transition:border-color .2s ease, transform .2s ease; background:#fff; }
.pp-thumb:hover { transform:scale(1.04); }
.pp-thumb.active { border-color: var(--tron-blue, #2549d8); }
.pp-main-img { flex:1; min-width:0; position:relative; background:#fff; border:1px solid #e9ecef; border-radius:14px; padding:16px; }
.pp-main-img img { width:100%; height:350px; object-fit:contain; }
.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; color:var(--tron-blue,#2549d8); font-weight:600; text-decoration:none; font-size:14px; }
.pp-specs-all:hover { text-decoration:underline; }

/* --- Панель покупки (право) --- */
.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-bottom:3px solid transparent; 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; border-bottom-color:var(--tron-blue,#2549d8); }
.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; }
}

/* --- Похожие товары: иконка просмотра поверх фото, сверху справа --- */
.related-view {
    position:absolute;
    top:10px; right:10px;
    width:34px; height:34px;
    border-radius:10px;
    background:var(--tron-blue,#2549d8);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    box-shadow:0 4px 10px rgba(37,73,216,.3);
    transition:transform .15s ease;
}
a:hover > .related-view { transform:scale(1.08); }

/* --- Адаптив --- */
@media (max-width: 991.98px) {
    .pp-buy, .pp-gallery { position:static; }
}
@media (max-width: 575.98px) {
    .pp-main-img { padding:12px; }
    .pp-main-img img { height:240px; }
    .pp-thumbs { flex-basis:56px; width:56px; }
    .pp-thumb { width:56px; height:56px; }
    .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; }
}