:root {
    --rd-bg: var(--dark-bg, #121212);
    --rd-surface: var(--dark-surface, #1E1E1E);
    --rd-surface-2: #232323;
    --rd-popover: #262626;
    --rd-chip: var(--dark-surface-2, #2A2A2A);
    --rd-line: #2A2A2A;
    --rd-border: var(--dark-border, #3A3A3A);
    --rd-dots: #444444;
    --rd-text: var(--dark-text, #E8E8E8);
    --rd-text-2: var(--dark-text-secondary, #B0B0B0);
    --rd-muted: #9A9A9A;
    --rd-primary: var(--dark-primary, #FCD307);
    --rd-primary-2: var(--dark-primary-hover, #FCD307);
    --rd-accent: var(--dark-accent, #F5C842);
    --rd-sale: #FFD700;
    --rd-ok: #34A853;
    --rd-font: 'Fact', 'PT Sans', sans-serif;
    --rd-font-display: 'Fact Semi Expanded Extra', 'Fact', sans-serif;
    --rd-sidebar-w: 120px;
    --rd-card-h: 400px;
    --rd-header-h: 80px;
    /* служебные токены (тёмные значения — для сайдбара, шапки, подвала, меню) */
    --rd-strong: #FFFFFF;
    --rd-on-primary: #121212;
    --rd-field: transparent;
    --rd-panel: #1A1A1A;
    --rd-border-strong: #4A4A4A;
    --rd-tint: rgba(255, 255, 255, 0.05);
    --rd-tint-weak: rgba(255, 255, 255, 0.025);
    --rd-primary-tint: rgba(255, 255, 255, 0.07);
    --rd-primary-ring: rgba(255, 255, 255, 0.14);
    --rd-shadow: rgba(0, 0, 0, 0.6);
    --rd-backdrop: rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   0. Светлая тема контента
   Сайдбар, верхняя панель, подвал и мобильное меню остаются тёмными,
   область контента (.content-main), модалки и выпадающие списки — светлые.
   Цвета меняются здесь, правила ниже берут их через переменные.
   ========================================================================== */
.content-main,
.modal,
body > .select2-container {
    --rd-bg: #FFFFFF;
    --rd-surface: #F3F3F3;
    --rd-surface-2: #FFFFFF;
    --rd-popover: #FFFFFF;
    --rd-chip: #EBEBEB;
    --rd-line: #E3E3E3;
    --rd-border: #D6D6D6;
    --rd-border-strong: #A8A8A8;
    --rd-dots: #C9C9C9;
    --rd-text: #1A1A1A;
    --rd-text-2: #4D4D4D;
    --rd-muted: #7A7A7A;
    --rd-strong: #000000;
    --rd-ok: #2E9A4B;
    --rd-field: #FFFFFF;
    --rd-panel: #FFFFFF;
    --rd-tint: rgba(0, 0, 0, 0.04);
    --rd-tint-weak: rgba(0, 0, 0, 0.025);
    --rd-primary-tint: rgba(252, 211, 7, 0.16);
    --rd-primary-ring: rgba(252, 211, 7, 0.35);
    --rd-shadow: rgba(0, 0, 0, 0.12);
    --rd-backdrop: rgba(0, 0, 0, 0.4);

    /* переменные из vrezerve.css — для остальных страниц (корзина, кабинет и т.д.) */
    --dark-bg: #FFFFFF;
    --dark-surface: #F3F3F3;
    --dark-surface-2: #EBEBEB;
    --dark-surface-3: #E0E0E0;
    --dark-border: #D6D6D6;
    --dark-border-light: #E3E3E3;
    --dark-text: #1A1A1A;
    --dark-text-secondary: #4D4D4D;
    --dark-text-muted: #7A7A7A;
    --dark-shadow: rgba(0, 0, 0, 0.12);
    --dark-shadow-light: rgba(0, 0, 0, 0.04);
    --dark-input-bg: #FFFFFF;
    --dark-card-bg: #FFFFFF;
}

/* верхняя панель лежит внутри .content-main, но остаётся тёмной */
.content-main .site-header {
    --rd-bg: #121212;
    --rd-surface: #1E1E1E;
    --rd-surface-2: #232323;
    --rd-popover: #262626;
    --rd-chip: #2A2A2A;
    --rd-line: #2A2A2A;
    --rd-border: #3A3A3A;
    --rd-border-strong: #4A4A4A;
    --rd-dots: #444444;
    --rd-text: #E8E8E8;
    --rd-text-2: #B0B0B0;
    --rd-muted: #9A9A9A;
    --rd-strong: #FFFFFF;
    --rd-ok: #34A853;
    --rd-field: transparent;
    --rd-panel: #1A1A1A;
    --rd-tint: rgba(255, 255, 255, 0.05);
    --rd-tint-weak: rgba(255, 255, 255, 0.025);
    --rd-primary-tint: rgba(255, 255, 255, 0.07);
    --rd-primary-ring: rgba(255, 255, 255, 0.14);
    --rd-shadow: rgba(0, 0, 0, 0.6);
    --rd-backdrop: rgba(0, 0, 0, 0.6);

    --dark-bg: #121212;
    --dark-surface: #1E1E1E;
    --dark-surface-2: #2A2A2A;
    --dark-surface-3: #333333;
    --dark-border: #3A3A3A;
    --dark-border-light: #444444;
    --dark-text: #E8E8E8;
    --dark-text-secondary: #B0B0B0;
    --dark-text-muted: #808080;
    --dark-shadow: rgba(0, 0, 0, 0.6);
    --dark-shadow-light: rgba(255, 255, 255, 0.05);
    --dark-input-bg: #2A2A2A;
    --dark-card-bg: #1E1E1E;
}

.content-main {
    background: var(--rd-bg);
    color: var(--rd-text);
}

/* ==========================================================================
   0.1 Без синего
   В Porto (build/assets/app-*.css), bootstrap.min.css, jquery-ui, select2 и
   vrezerve.css основной цвет синий. Ниже — те же селекторы с жёлтым/нейтральным
   цветом вместо синего. Правила этого файла ниже по тексту имеют приоритет.
   ========================================================================== */
:root {
    --bs-primary-rgb: 252, 211, 7;
    --bs-info-rgb: 252, 211, 7;
    --bs-link-color: #FCD307;
    --bs-link-color-rgb: 252, 211, 7;
    --bs-link-hover-color: #FCD307;
    --bs-link-hover-color-rgb: 252, 211, 7;
}

.btn-primary,
.btn-info {
    --bs-btn-color: #121212;
    --bs-btn-hover-color: #121212;
    --bs-btn-active-color: #121212;
    --bs-btn-disabled-color: #121212;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:hover,
.btn-outline-primary.focus,
.btn-gray:hover,
.btn-gray:focus { color: #121212; }

/* из build/assets/app-acf8fa2a.css */
.bg-primary { background-color: rgb(252, 211, 7) !important; }
.bg-secondary { background-color: rgb(253, 226, 106) !important; }
.text-secondary { color: rgb(253, 226, 106) !important; }
.owl-theme .owl-dots .owl-dot span::before { background-color: rgb(252, 211, 7); }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { border-color: rgb(252, 211, 7); }
.owl-theme.owl-theme-light .owl-dots .owl-dot.active span, .owl-theme.owl-theme-light .owl-dots .owl-dot:hover span { border-color: rgb(252, 211, 7); }
.owl-theme.owl-theme-light .owl-dots .owl-dot.active span::before { border-color: rgb(252, 211, 7); }
.custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(252, 211, 7); }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(252, 211, 7, 0.5); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(252, 211, 7); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(252, 211, 7, 0.25) 0px 0px 0px 0.2rem; }
.custom-control-input:active ~ .custom-control-label::before { background-color: rgb(255, 245, 194); }
.alert.alert-primary { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.btn-facebook { background-color: rgb(252, 211, 7); }
.btn-twitter { background-color: rgb(252, 211, 7); }
.feature-box.border-top-primary .feature-box-content { border-top-color: rgb(252, 211, 7); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: rgb(252, 211, 7); }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-color: rgb(252, 211, 7); }
.info-box .porto-info { color: rgb(252, 211, 7); }
.info-box.with-icon p::before { color: rgb(252, 211, 7); }
.product-countdown-container { background-color: rgb(252, 211, 7); }
.page-header .breadcrumb a { color: rgb(252, 211, 7); }
.page-link:hover, .page-link:focus { border-color: rgb(252, 211, 7); }
.minipopup-box .product-detail .product-name:hover { color: rgb(252, 211, 7); }
.product-intro.owl-carousel.owl-theme .owl-dots .owl-dot span { border-color: rgba(92, 75, 0, 0.4); }
.product-intro.owl-carousel.owl-theme .owl-dots .owl-dot.active span, .product-intro.owl-carousel.owl-theme .owl-dots .owl-dot:hover span { border-color: rgb(252, 211, 7); }
.product-intro.owl-carousel.owl-theme .owl-dots .owl-dot.active span::after, .product-intro.owl-carousel.owl-theme .owl-dots .owl-dot:hover span::after { background-color: rgb(252, 211, 7); }
.product-default .product-label.label-number { background-color: rgb(252, 211, 7); }
.property-hint-question-mark:hover { color: rgb(252, 211, 7); }
.product-select.type-image.checked, .product-select.type-image.hover { border-color: rgb(252, 211, 7); }
.product-nav-thumbs a:hover, .product-nav-thumbs span:hover { border-color: rgb(252, 211, 7); }
.product-single-qty .btn.btn-down-icon:hover::before, .product-single-qty .btn.btn-down-icon:hover::after, .product-single-qty .btn.btn-up-icon:hover::before, .product-single-qty .btn.btn-up-icon:hover::after { background-color: rgb(252, 211, 7); }
.config-swatch-list li:hover span:last-child { color: rgb(252, 211, 7); }
.add-cart-box { border-top-color: rgb(252, 211, 7); }
.add-cart-box h4 { color: rgb(252, 211, 7); }
.inner-quickview figure .btn-quickview { background-color: rgb(252, 211, 7); }
.inner-icon figure .btn-icon:hover { border-color: rgb(252, 211, 7); }
.hidden-description .btn-quickview { background-color: rgb(252, 211, 7); }
.hidden-description .btn-add-cart:hover { background-color: rgb(252, 211, 7); }
.product-overlay .product-details a:hover { color: rgb(252, 211, 7); }
.overlay-dark .product-details a:hover { color: rgb(252, 211, 7); }
.quantity-input .btn-add-cart:hover { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.product-list .btn-add-cart { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.testimonial blockquote { color: rgb(252, 211, 7); }
.social-icon { background-color: rgb(252, 211, 7); }
.social-icon.social-facebook { background-color: rgb(252, 211, 7); }
.social-icon.social-twitter { background-color: rgb(252, 211, 7); }
.social-icon.social-linkedin { background-color: rgb(252, 211, 7); }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-item .nav-link.active { border-bottom-color: rgb(252, 211, 7); color: rgb(252, 211, 7); }
.nav-tabs .nav-link:hover { color: rgb(252, 211, 7); }
.tabs .nav-tabs .nav-item.show .nav-link, .tabs .nav-tabs .nav-item .nav-link.active { border-top-color: rgb(252, 211, 7); color: rgb(252, 211, 7); }
.tabs .nav-tabs .nav-link:focus, .tabs .nav-tabs .nav-link:hover { border-top-color: rgb(252, 211, 7); }
.tabs-bottom .nav-tabs .nav-item.show .nav-link, .tabs-bottom .nav-tabs .nav-item .nav-link.active { border-bottom-color: rgb(252, 211, 7); }
.tabs-bottom .nav-tabs .nav-link:focus, .tabs-bottom .nav-tabs .nav-link:hover { border-bottom-color: rgb(252, 211, 7); }
.tabs-left .nav-tabs .nav-item.show .nav-link, .tabs-left .nav-tabs .nav-item .nav-link.active { border-left-color: rgb(252, 211, 7); }
.tabs-left .nav-tabs .nav-link:focus, .tabs-left .nav-tabs .nav-link:hover { border-left-color: rgb(252, 211, 7); }
.tabs-right .nav-tabs .nav-item.show .nav-link, .tabs-right .nav-tabs .nav-item .nav-link.active { border-right-color: rgb(252, 211, 7); }
.tabs-right .nav-tabs .nav-link:focus, .tabs-right .nav-tabs .nav-link:hover { border-right-color: rgb(252, 211, 7); }
.tabs-secondary .nav-tabs .nav-item.show .nav-link, .tabs-secondary .nav-tabs .nav-item .nav-link.active { border-top-color: rgb(253, 226, 106); color: rgb(253, 226, 106); }
.tabs-secondary .nav-tabs .nav-link:focus, .tabs-secondary .nav-tabs .nav-link:hover { border-top-color: rgb(253, 226, 106); color: rgb(253, 226, 106); }
.tabs-secondary.tabs-bottom .nav-tabs .nav-item.show .nav-link, .tabs-secondary.tabs-bottom .nav-tabs .nav-item .nav-link.active { border-bottom-color: rgb(253, 226, 106); }
.tabs-secondary.tabs-bottom .nav-tabs .nav-link:focus, .tabs-secondary.tabs-bottom .nav-tabs .nav-link:hover { border-bottom-color: rgb(253, 226, 106); }
.tabs-secondary.tabs-left .nav-tabs .nav-item.show .nav-link, .tabs-secondary.tabs-left .nav-tabs .nav-item .nav-link.active { border-left-color: rgb(253, 226, 106); }
.tabs-secondary.tabs-left .nav-tabs .nav-link:focus, .tabs-secondary.tabs-left .nav-tabs .nav-link:hover { border-left-color: rgb(253, 226, 106); }
.tabs-secondary.tabs-right .nav-tabs .nav-item.show .nav-link, .tabs-secondary.tabs-right .nav-tabs .nav-item .nav-link.active { border-right-color: rgb(253, 226, 106); }
.tabs-secondary.tabs-right .nav-tabs .nav-link:focus, .tabs-secondary.tabs-right .nav-tabs .nav-link:hover { border-right-color: rgb(253, 226, 106); }
.preloader svg { color: rgb(252, 211, 7); }
.noUi-handle { background-color: rgb(252, 211, 7); }
.header-bottom.fixed .header-search-inline.header-search .header-search-wrapper { border-color: rgb(252, 211, 7); }
.cart-dropdown .btn-remove:hover, .cart-dropdown .btn-remove:focus { color: rgb(252, 211, 7); }
.btn-remove:hover, .btn-remove:focus { color: rgb(252, 211, 7); }
.menu-banner.menu-banner-2 .banner-content b { color: rgb(252, 211, 7); }
.menu-vertical > li:hover, .menu-vertical > li.show, .menu-vertical > li.active { background-color: rgb(252, 211, 7); }
.menu-item-sale a { color: rgb(253, 226, 106); }
.footer-ribbon { background-color: rgb(252, 211, 7); }
.footer-ribbon::before { border-right-color: rgb(92, 75, 0); }
#scroll-top.fixed:hover { color: rgb(252, 211, 7); }
.count-container .count-wrapper { color: rgb(252, 211, 7); }
.cat-list li a:hover, .cat-list li a:focus { color: rgb(252, 211, 7); }
.config-size-list a:hover, .config-size-list a:focus, .config-size-list a.active { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.sort-list li:hover, .sort-list li:focus, .sort-list li.active { color: rgb(252, 211, 7); }
.filter-toggle.opened a { background-color: rgb(252, 211, 7); }
.sidebar-toggle:hover span { color: rgb(252, 211, 7); }
.boxed-slide-1 span::before { background-color: rgb(252, 211, 7); }
.boxed-slide-1 span::after { background-color: rgb(252, 211, 7); }
.product-single-details .clear-btn:hover { background-color: rgb(252, 211, 7); }
.product-single-filter .config-size-list li a:not(.disabled):hover { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.product-single-filter .config-size-list li.active a { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.product-single-gallery .prod-thumbnail .owl-nav { color: rgb(252, 211, 7); }
.product-single-gallery .product-label.label-new { background-color: rgb(252, 211, 7); }
.prod-thumbnail.owl-theme .owl-nav [class*="owl-"]:hover { color: rgb(252, 211, 7); }
.transparent-dots .owl-dot.active img, .transparent-dots .owl-dot:hover img { border-color: rgb(252, 211, 7); }
.product-desc-content .feature-icon { color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.add-product-review .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.products-section .owl-carousel.dots-top .owl-dots span { border-color: rgba(92, 75, 0, 0.4); }
.products-section .owl-carousel.dots-top .owl-dot.active span { border-color: rgb(252, 211, 7); }
.quantity-input-custom button:hover { color: rgb(252, 211, 7); }
.widget-info i { color: rgb(252, 211, 7); }
.product-collapse-title a::after { background-color: rgb(252, 211, 7); }
.maga-sale-container .mega-price-box::before, .maga-sale-container .mega-price-box::after { border-top-color: rgb(252, 211, 7); border-right-color: rgb(252, 211, 7); border-left-color: rgb(252, 211, 7); }
.maga-sale-container .mega-title { color: rgb(92, 75, 0); }
.maga-sale-container .mega-subtitle { color: rgb(92, 75, 0); }
.post-media .prod-full-screen { background-color: rgb(252, 211, 7); }
.post-body .post-date .day { color: rgb(252, 211, 7); }
.post-body .post-date .month { background-color: rgb(252, 211, 7); }
.single .post-title { color: rgb(252, 211, 7); }
.post-author h4 { color: rgb(252, 211, 7); }
.related-posts .post-title { color: rgb(252, 211, 7); }
.simple-post-list .post-info a { color: rgb(252, 211, 7); }
.info-box-wrapper i { color: rgb(252, 211, 7); }
.checkout-progress-bar li.active + li a:hover { color: rgb(252, 211, 7); }
.order-summary .info-box p { color: rgb(252, 211, 7); }
.login-form-container form .btn:hover, .checkout-discount form .btn:hover { background-color: rgb(252, 211, 7); }
.cart-table-container .btn-shop:hover, .cart-table-container .btn-sm:hover { background-color: rgb(252, 211, 7); }
.btn-remove:hover, .btn-remove:focus, .btn-edit:hover, .btn-edit:focus, .btn-move:hover, .btn-move:focus { color: rgb(252, 211, 7); }
.checkout-progress-bar li a.active, .checkout-progress-bar li a:hover { color: rgb(252, 211, 7); }
.cart-summary .btn-update-total:hover { background-color: rgb(252, 211, 7); }
.blog-type3 .post .read-more { color: rgb(252, 211, 7); }
.blog-type3 .post-meta > span:not(.meta-date) { color: rgb(252, 211, 7); }
.blog-type3 .post-meta > span:not(.meta-date):hover > a { border-bottom-color: rgb(252, 211, 7); }
.blog-type3 .post-title:hover { color: rgb(252, 211, 7); }
.calendar-table td.selected { color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.brands .brands-block .letters-list .letter-block a.active { background-color: rgb(252, 211, 7); }
.brands .brands-block .brands-list a:hover { color: rgb(252, 211, 7); }
.main-nav > .menu .menu-item > a:hover { color: rgb(252, 211, 7); }
.main-nav > .menu .menu-item:hover::after { color: rgb(252, 211, 7); }
.main-nav > .menu > li.float-right a { color: rgb(252, 211, 7); }
.btn-outline-primary:hover { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.sicon-title { color: rgb(252, 211, 7); }
.intro-slider .banner-media .mark-deal { background-color: rgb(252, 211, 7); }
.part-item a:hover { color: rgb(252, 211, 7); }
.part-item .show-action { color: rgb(252, 211, 7); }
.ui-slider-horizontal .ui-slider-handle:active { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
/* из css/bootstrap.min.css */
:root, [data-bs-theme="light"] { --bs-blue: rgb(252, 211, 7); --bs-indigo: rgb(252, 211, 7); --bs-purple: rgb(252, 211, 7); --bs-cyan: rgb(252, 211, 7); --bs-primary: rgb(252, 211, 7); --bs-info: rgb(252, 211, 7); --bs-primary-text-emphasis: rgb(92, 75, 0); --bs-info-text-emphasis: rgb(92, 75, 0); --bs-primary-bg-subtle: rgb(255, 245, 194); --bs-info-bg-subtle: rgb(255, 245, 194); --bs-primary-border-subtle: rgb(255, 245, 194); --bs-info-border-subtle: rgb(253, 226, 106); --bs-link-color: rgb(252, 211, 7); --bs-link-hover-color: rgb(252, 211, 7); --bs-focus-ring-color: rgba(252, 211, 7, 0.25); }
.table-primary { --bs-table-bg: rgb(255, 245, 194); --bs-table-border-color: rgb(255, 245, 194); --bs-table-striped-bg: rgb(255, 245, 194); --bs-table-active-bg: rgb(255, 245, 194); --bs-table-hover-bg: rgb(255, 245, 194); }
.table-info { --bs-table-bg: rgb(255, 245, 194); --bs-table-border-color: rgb(255, 245, 194); --bs-table-striped-bg: rgb(255, 245, 194); --bs-table-active-bg: rgb(255, 245, 194); --bs-table-hover-bg: rgb(255, 245, 194); }
.form-control:focus { box-shadow: rgba(252, 211, 7, 0.25) 0px 0px 0px 0.25rem; }
.form-select:focus { box-shadow: rgba(252, 211, 7, 0.25) 0px 0px 0px 0.25rem; border-color: rgb(253, 226, 106); }
.form-check-input:focus { border-color: rgb(253, 226, 106); }
.form-check-input[type="checkbox"]:indeterminate { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.form-range:focus::-webkit-slider-thumb { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px, rgba(252, 211, 7, 0.25) 0px 0px 0px 0.25rem; }
.form-range::-webkit-slider-thumb { background-color: rgb(252, 211, 7); }
.form-range::-webkit-slider-thumb:active { background-color: rgb(255, 245, 194); }
.btn-primary { --bs-btn-bg: rgb(252, 211, 7); --bs-btn-border-color: rgb(252, 211, 7); --bs-btn-hover-bg: rgb(252, 211, 7); --bs-btn-hover-border-color: rgb(252, 211, 7); --bs-btn-active-bg: rgb(252, 211, 7); --bs-btn-active-border-color: rgb(252, 211, 7); --bs-btn-disabled-bg: rgb(252, 211, 7); --bs-btn-disabled-border-color: rgb(252, 211, 7); }
.btn-info { --bs-btn-bg: rgb(252, 211, 7); --bs-btn-border-color: rgb(252, 211, 7); --bs-btn-hover-bg: rgb(252, 211, 7); --bs-btn-hover-border-color: rgb(252, 211, 7); --bs-btn-active-bg: rgb(252, 211, 7); --bs-btn-active-border-color: rgb(252, 211, 7); --bs-btn-disabled-bg: rgb(252, 211, 7); --bs-btn-disabled-border-color: rgb(252, 211, 7); }
.btn-outline-primary { --bs-btn-color: rgb(252, 211, 7); --bs-btn-border-color: rgb(252, 211, 7); --bs-btn-hover-bg: rgb(252, 211, 7); --bs-btn-hover-border-color: rgb(252, 211, 7); --bs-btn-active-bg: rgb(252, 211, 7); --bs-btn-active-border-color: rgb(252, 211, 7); --bs-btn-disabled-color: rgb(252, 211, 7); --bs-btn-disabled-border-color: rgb(252, 211, 7); }
.btn-outline-info { --bs-btn-color: rgb(252, 211, 7); --bs-btn-border-color: rgb(252, 211, 7); --bs-btn-hover-bg: rgb(252, 211, 7); --bs-btn-hover-border-color: rgb(252, 211, 7); --bs-btn-active-bg: rgb(252, 211, 7); --bs-btn-active-border-color: rgb(252, 211, 7); --bs-btn-disabled-color: rgb(252, 211, 7); --bs-btn-disabled-border-color: rgb(252, 211, 7); }
.dropdown-menu { --bs-dropdown-link-active-bg: rgb(252, 211, 7); }
.dropdown-menu-dark { --bs-dropdown-link-active-bg: rgb(252, 211, 7); }
.nav-link:focus-visible { box-shadow: rgba(252, 211, 7, 0.25) 0px 0px 0px 0.25rem; }
.nav-pills { --bs-nav-pills-link-active-bg: rgb(252, 211, 7); }
.accordion { --bs-accordion-btn-focus-border-color: rgb(253, 226, 106); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(252, 211, 7, 0.25); }
.pagination { --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(252, 211, 7, 0.25); --bs-pagination-active-bg: rgb(252, 211, 7); --bs-pagination-active-border-color: rgb(252, 211, 7); }
.progress, .progress-stacked { --bs-progress-bar-bg: rgb(252, 211, 7); }
.list-group { --bs-list-group-active-bg: rgb(252, 211, 7); --bs-list-group-active-border-color: rgb(252, 211, 7); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(252, 211, 7, 0.25); }
/* из css/jquery-ui.min.css */
.ui-visual-focus { box-shadow: rgb(252, 211, 7) 0px 0px 3px 1px; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background-color: rgb(252, 211, 7); border-color: rgb(252, 211, 7); }
.ui-icon-background, .ui-state-active .ui-icon-background { border-color: rgb(252, 211, 7); }
/* из css/select2.min.css */
.select2-container--classic .select2-selection--single:focus { border-color: rgb(253, 226, 106); }
.select2-container--classic.select2-container--open .select2-selection--single { border-color: rgb(253, 226, 106); }
.select2-container--classic .select2-selection--multiple:focus { border-color: rgb(253, 226, 106); }
.select2-container--classic.select2-container--open .select2-selection--multiple { border-color: rgb(253, 226, 106); }
.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable { background-color: rgb(252, 211, 7); }
.select2-container--classic.select2-container--open .select2-dropdown { border-color: rgb(253, 226, 106); }
/* из css/vrezerve.css */
.card__header--solstice { background-image: linear-gradient(10deg, rgb(13, 13, 13) 32.21%, rgb(70, 70, 70) 139.46%) !important; }
.menu-item:hover { background-color: rgba(255, 255, 255, 0.06); }
.form-check-input:focus { box-shadow: rgba(252, 211, 7, 0.25) 0px 0px 0px 0.25rem; }

[x-cloak] {
    display: none !important;
}

/* Тёмные тонкие скроллбары: выпадающие фильтры, панель меню, мобильные шторки */
.filter-dropdown__inner,
.filter-options,
.catalog-filters__list,
.site-flyout,
.site-drawer__nav,
.product-card__more,
.catalog-filters .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: #4A4A4A transparent;
}

.filter-dropdown__inner::-webkit-scrollbar,
.filter-options::-webkit-scrollbar,
.catalog-filters__list::-webkit-scrollbar,
.site-flyout::-webkit-scrollbar,
.site-drawer__nav::-webkit-scrollbar,
.product-card__more::-webkit-scrollbar,
.catalog-filters .select2-results__options::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.filter-dropdown__inner::-webkit-scrollbar-track,
.filter-options::-webkit-scrollbar-track,
.catalog-filters__list::-webkit-scrollbar-track,
.site-flyout::-webkit-scrollbar-track,
.site-drawer__nav::-webkit-scrollbar-track,
.product-card__more::-webkit-scrollbar-track,
.catalog-filters .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.filter-dropdown__inner::-webkit-scrollbar-thumb,
.filter-options::-webkit-scrollbar-thumb,
.catalog-filters__list::-webkit-scrollbar-thumb,
.site-flyout::-webkit-scrollbar-thumb,
.site-drawer__nav::-webkit-scrollbar-thumb,
.product-card__more::-webkit-scrollbar-thumb,
.catalog-filters .select2-results__options::-webkit-scrollbar-thumb {
    background: #4A4A4A;
    border-radius: 0px;
}

.filter-dropdown__inner::-webkit-scrollbar-thumb:hover,
.filter-options::-webkit-scrollbar-thumb:hover,
.site-flyout::-webkit-scrollbar-thumb:hover,
.site-drawer__nav::-webkit-scrollbar-thumb:hover {
    background: var(--dark-primary, #FCD307);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   Каркас страницы (перенесено из <style> в app.blade.php)
   -------------------------------------------------------------------------- */
.main-container {
    display: flex;
    min-height: 100vh;
}

.content-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-main {
    flex: 1 0 auto;
}

.content-wrapper> :last-child {
    flex: 0 0 auto;
}

/* Меню и фильтры теперь открываются поверх, страницу не сдвигаем */
.mmenu-active .page-wrapper,
.sidebar-opened .page-wrapper {
    left: 0 !important;
}

@media (min-width: 992px) {

    /* закреплённая шапка не должна заезжать под сайдбар */
    .content-wrapper .sticky-header.fixed {
        left: var(--rd-sidebar-w) !important;
    }
}

.site-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

/* ==========================================================================
   1. Сайдбар (десктоп ≥992px)
   ========================================================================== */
.site-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex: 0 0 var(--rd-sidebar-w);
    width: var(--rd-sidebar-w);
    height: 100vh;
    height: 100dvh;
    z-index: 1045;
    background: var(--rd-surface);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--rd-font);
}

.site-sidebar__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    box-sizing: border-box;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    background: var(--rd-surface);
}

.site-sidebar__logo {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-sidebar__logo img {
    display: block;
    width: 84px;
    height: auto;
}

.site-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: none;
}

.site-sidebar__nav::-webkit-scrollbar {
    display: none;
}

.site-sidebar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    border-radius: 0px;
    color: var(--rd-text-2);
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.site-sidebar__link .site-icon {
    width: 28px;
    height: 28px;
    transition: color .15s ease;
}

.site-sidebar__link.is-current {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
}

.site-sidebar__link:hover,
.site-sidebar__link.is-open {
    background: var(--rd-primary-tint);
    color: #FFFFFF;
    text-decoration: none;
}

.site-sidebar__link.is-current .site-icon,
.site-sidebar__link.is-open .site-icon {
    color: var(--rd-primary-2);
}

.site-sidebar__link:focus-visible,
.site-sidebar__icon-btn:focus-visible,
.site-flyout a:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

.site-sidebar__account {
    flex: 0 0 auto;
    padding-top: 15px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-sidebar__account-title {
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
}

.site-sidebar__account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.site-sidebar__icon-btn {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0px;
    color: var(--rd-text-2);
    transition: background-color .15s ease, color .15s ease;
}

.site-sidebar__icon-btn .site-icon {
    width: 22px;
    height: 22px;
}

.site-sidebar__icon-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
}

/* корзина — livewire:web.header.cart-count */
.site-sidebar__cart {
    background: var(--rd-primary-tint);
}

.site-sidebar__cart .cart-dropdown,
.site-sidebar__cart .cart-toggle {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.site-sidebar__cart .dropdown-arrow::after,
.site-sidebar__cart .link-counter__lbl {
    display: none !important;
}

.site-sidebar__cart .header-general {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
}

.site-sidebar__cart .header-general-ico2 {
    display: block;
    width: 22px;
    height: 22px;
}

.site-sidebar__cart .cart-count {
    position: absolute;
    top: 4px;
    right: 6px;
    left: auto;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 0px;
    background: var(--rd-primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* --- пункты из $siteNavbar (разметка — admin-menu/menu-desktop.html) --- */
.site-sidebar__nav .menu {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
    text-transform: none;
}

.site-sidebar .menu-item,
.site-sidebar .site-nav-item {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    transition: background-color .15s ease;
}

.site-sidebar .menu-item>a {
    display: block;
    padding: 10px 4px !important;
    border-radius: 0px;
    color: var(--rd-text-2);
    text-decoration: none;
}

.site-sidebar .menu-item:hover {
    background: var(--rd-primary-tint);
}

.site-sidebar .icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: inherit;
}

.site-sidebar .icon-wrapper span {
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    text-align: center;
    white-space: normal;
    opacity: 1;
    transform: none;
}

.site-sidebar .icon-wrapper svg.menu-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    transition: color .15s ease;
}

.site-sidebar .menu-item:hover>a,
.site-sidebar .site-nav-item.is-current>a {
    color: #FFFFFF;
}

.site-sidebar .site-nav-item.is-current {
    background: rgba(255, 255, 255, 0.05);
}

.site-sidebar .site-nav-item.is-current svg.menu-icon,
.site-sidebar .site-nav-item.is-open svg.menu-icon {
    color: var(--rd-primary-2);
}

.site-sidebar .site-nav-item.is-open,
.site-sidebar .site-nav-item.is-open>a {
    background: var(--rd-primary-tint);
    color: #FFFFFF;
}

.site-sidebar .site-nav-item.is-open .icon-wrapper,
.site-sidebar .site-nav-item.is-open .icon-wrapper span {
    color: #FFFFFF;
}

/* --- выезжающая панель --- */
.site-flyout[hidden],
.site-flyout-overlay[hidden] {
    display: none !important;
}

.site-flyout {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 2;
    width: 760px;
    max-width: calc(100vw - var(--rd-sidebar-w));
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    padding: 32px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--rd-popover);
    border-right: 1px solid var(--rd-border);
    box-shadow: 24px 0 64px rgba(0, 0, 0, 0.55);
}

.site-flyout--enter {
    transition: opacity .15s ease, transform .15s ease;
}

.site-flyout--from {
    opacity: 0;
    transform: translateX(-8px);
}

.site-flyout__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rd-border);
}

.site-flyout__title {
    color: #FFFFFF;
    font-family: var(--rd-font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

.site-flyout__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rd-primary-2);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.site-flyout__all .site-icon {
    width: 14px;
    height: 14px;
}

.site-flyout__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 32px;
}

.site-flyout__col {
    display: flex;
    flex-direction: column;
}

.site-flyout__col-title {
    padding-bottom: 12px;
    color: var(--rd-muted);
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.site-flyout__link {
    display: block;
    padding: 7px 0;
    color: var(--rd-text);
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
}

.site-flyout__link:hover,
.site-flyout__link.is-current {
    color: var(--rd-primary-2);
    text-decoration: none;
}

/* панель: подменю растягивается, промо прижато к низу */
.site-flyout__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.site-flyout__body>.submenu {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 24px;
}

.submenu__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 32px;
}

.submenu__cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-flyout__body .submenu__title {
    padding-bottom: 12px;
    color: var(--rd-muted);
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.site-flyout__body .submenu__col ul li>a {
    padding: 7px 0;
}

.site-flyout__body a.submenu__promo {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 0px;
    color: var(--rd-text);
    text-transform: none;
}

.site-flyout__body a.submenu__promo:hover {
    border-color: var(--rd-primary);
    color: var(--rd-text);
}

.submenu__promo-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submenu__promo-title {
    color: var(--rd-accent);
    font-family: var(--rd-font-display);
    font-size: 16px;
    font-weight: 800;
}

.submenu__promo-sub {
    color: var(--rd-text-2);
    font-size: 13px;
}

.submenu__promo-more {
    color: var(--rd-primary-2);
    font-size: 14px;
    white-space: nowrap;
}

.site-flyout__body a.is-current {
    color: var(--rd-primary-2);
}

/* подменю, перенесённое из $siteNavbar (ul / .megamenu / .submenu …) */
.site-flyout__body>* {
    position: static !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.site-flyout__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: static;
    display: block;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
}

/* плоский список — в 3 колонки */
.site-flyout__body>ul {
    column-count: 3;
    column-gap: 32px;
}

.site-flyout__body li {
    margin: 0;
    padding: 0;
    break-inside: avoid;
}

.site-flyout__body a {
    display: block;
    padding: 7px 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
}

.site-flyout__body a:hover,
.site-flyout__body .active>a {
    color: var(--rd-primary-2);
    text-decoration: none;
}

/* группа: ссылка-заголовок + вложенный список */
.site-flyout__body li>a:not(:only-child) {
    padding: 0 0 8px;
    color: var(--rd-muted);
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.site-flyout__body li>ul {
    margin-bottom: 20px;
}

.site-flyout__body .sf-with-ul::before,
.site-flyout__body .sf-with-ul::after {
    display: none;
}

.site-flyout__body img {
    max-width: 100%;
    height: auto;
}

.site-flyout__promo {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 0px;
    color: var(--rd-text);
    text-decoration: none;
}

.site-flyout__promo:hover {
    border-color: var(--rd-primary);
    text-decoration: none;
}

.site-flyout__promo-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-flyout__promo-title {
    color: var(--rd-accent);
    font-family: var(--rd-font-display);
    font-size: 16px;
    font-weight: 800;
}

.site-flyout__promo-sub {
    color: var(--rd-text-2);
    font-size: 13px;
}

.site-flyout__promo-more {
    color: var(--rd-primary-2);
    font-size: 14px;
    white-space: nowrap;
}

.site-flyout-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--rd-sidebar-w);
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* ==========================================================================
   2. Мобильное меню (шторка) — поверх .mobile-menu-container из Porto
   ========================================================================== */
.site-drawer.mobile-menu-container {
    width: 336px;
    max-width: 86vw;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--rd-surface);
    border-right: 1px solid var(--rd-border);
    font-family: var(--rd-font);
    font-size: 16px;
    line-height: 1.3;
    z-index: 1062;
}

.mmenu-active .mobile-menu-overlay {
    background: #000;
    opacity: .6;
    z-index: 1061;
}

.site-drawer__head {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 0 16px;
    border-bottom: 1px solid var(--rd-line);
}

.site-drawer__logo img {
    display: block;
    width: 64px;
    height: auto;
}

.site-drawer__close {
    position: static;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rd-text);
    cursor: pointer;
}

.site-drawer__close .site-icon {
    width: 20px;
    height: 20px;
}

.site-drawer__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
}

.site-drawer__group {
    border-bottom: 1px solid var(--rd-line);
}

.site-drawer__row {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: transparent;
    border: 0;
    color: var(--rd-text);
    font-family: inherit;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.site-drawer__row:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.site-drawer__row .site-icon {
    color: var(--rd-text-2);
}

.site-drawer__row.is-open {
    background: var(--rd-primary-tint);
    color: #FFFFFF;
}

.site-drawer__row.is-open .site-icon {
    color: var(--rd-primary-2);
}

.site-drawer__label {
    flex: 1 1 auto;
}

.site-drawer__row .site-drawer__chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--rd-muted);
    transition: transform .2s ease;
}

.site-drawer__row.is-open .site-drawer__chevron {
    transform: rotate(180deg);
}

.site-drawer__sub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 16px 56px;
}

.site-drawer__col {
    display: flex;
    flex-direction: column;
}

.site-drawer__col-title {
    padding-bottom: 4px;
    color: var(--rd-muted);
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.site-drawer__link {
    display: block;
    padding: 9px 0;
    color: var(--rd-text);
    font-size: 15px;
    line-height: 20px;
    text-decoration: none;
}

.site-drawer__link.is-current,
.site-drawer__link:hover,
.site-drawer__all {
    color: var(--rd-primary-2);
    text-decoration: none;
}

.site-drawer__all {
    font-size: 14px;
}

.site-drawer__account {
    flex: 0 0 auto;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rd-line);
}

.site-drawer__account-title {
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.site-drawer__account-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.site-drawer__tile {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--rd-popover);
    color: var(--rd-text-2);
    font-size: 11px;
    text-decoration: none;
}

.site-drawer__tile .site-icon {
    width: 20px;
    height: 20px;
}

.site-drawer__tile:hover {
    color: #FFFFFF;
    text-decoration: none;
}

/* --- HTML из $siteMobileHeader (разметка — admin-menu/menu-mobile.html) --- */
.site-drawer .mobile-menu-wrapper {
    position: static;
    padding: 8px 0;
}

.site-drawer .mobile-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-drawer .mobile-menu li {
    position: relative;
    display: block;
    border: 0;
}

.site-drawer .mobile-menu>li {
    border-bottom: 1px solid var(--rd-line);
}

.site-drawer .mobile-menu>li>a {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0 52px 0 16px;
    background: transparent;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-transform: none;
}

.site-drawer .mobile-menu>li>a svg.menu-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    fill: none;
    stroke: currentColor;
    color: var(--rd-text-2);
}

.site-drawer .mobile-menu>li.open>a,
.site-drawer .mobile-menu>li.active>a {
    background: var(--rd-primary-tint);
    color: #FFFFFF;
}

.site-drawer .mobile-menu>li.open>a svg.menu-icon,
.site-drawer .mobile-menu>li.active>a svg.menu-icon {
    color: var(--rd-primary-2);
}

.site-drawer .mobile-menu ul {
    margin: 0;
    padding: 4px 16px 16px 56px;
    list-style: none;
}

.site-drawer .mobile-menu ul[hidden] {
    display: none !important;
}

.site-drawer .mobile-menu ul li a {
    display: block;
    margin: 0;
    padding: 9px 0;
    background: none;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    text-transform: none;
}

.site-drawer .mobile-menu ul li.active>a,
.site-drawer .mobile-menu ul li a:hover {
    color: var(--rd-primary-2);
}

.site-drawer .mobile-menu .mobile-menu__title {
    padding: 12px 0 4px;
    color: var(--rd-muted);
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.site-drawer .mobile-menu .mobile-menu__title:first-child {
    padding-top: 4px;
}

.site-drawer .mobile-menu .mobile-menu__all>a {
    color: var(--rd-primary-2);
    font-size: 14px;
}

.site-drawer .mmenu-btn {
    display: none;
}

.site-mmenu-toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rd-muted);
    cursor: pointer;
}

.site-mmenu-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.open>.site-mmenu-toggle svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   3. Страница каталога
   ========================================================================== */
.catalog-page {
    padding-top: 12px;
}

@media (max-width: 991.98px) {
    .catalog-page.container {
        padding-left: 0;
        padding-right: 0;
    }

    .catalog-page__crumbs {
        padding: 0 16px;
    }
}

.catalog {
    padding-bottom: 48px;
    font-family: var(--rd-font);
}

/* --------------------------------------------------------------------------
   3.1 Панель фильтров (бывший .sidebar-shop)
   -------------------------------------------------------------------------- */
.catalog-filters-wrap {
    position: relative;
    z-index: 30;
}

.catalog-filters-overlay {
    display: none !important;
}

.catalog-filters .widget,
.catalog-filters .filter-widget {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.catalog-filters .widget-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    letter-spacing: 0;
}

.catalog-filters .widget-title::after {
    display: none;
}

.filter-pill {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 14px;
    background: transparent;
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.filter-pill:hover {
    border-color: var(--rd-primary-2);
}

.filter-pill.is-active {
    border-color: var(--rd-primary);
}

.filter-pill:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

.filter-pill__count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 0px;
    background: var(--rd-primary);
    color: var(--rd-on-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.filter-pill__chevron {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: var(--rd-muted);
    transition: transform .2s ease;
}

.filter-widget.is-open .filter-pill {
    background: var(--rd-chip);
    border-color: var(--rd-primary);
}

.filter-widget.is-open .filter-pill__chevron {
    transform: rotate(180deg);
    color: var(--rd-primary-2);
}

.filter-widget-wrap {
    display: contents;
}

.filter-search {
    margin-bottom: 8px;
}

.catalog-filters .filter-search__input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    box-shadow: none;
}

.catalog-filters .filter-search__input:focus {
    border-color: var(--rd-primary);
}

.catalog-filters .filter-option .form-check-input[type=radio] {
    border-radius: 50%;
}

/* выпадающая часть */
.filter-dropdown {
    display: none;
}

.filter-widget.is-open>.filter-dropdown {
    display: block;
}

.catalog-filters .widget-body {
    padding: 0;
}

/* список чекбоксов */
.filter-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 240px;
    overflow-y: auto;
}

.catalog-filters .filter-option.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    margin: 0 !important;
    padding: 6px 4px;
}

.catalog-filters .filter-option .form-check-input {
    float: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--rd-primary);
    cursor: pointer;
}

.catalog-filters .form-check-label,
.catalog-filters label {
    margin: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.catalog-filters .filter-option .form-check-input:disabled+.form-check-label {
    opacity: .4;
    cursor: default;
}

/* диапазоны (цена, slider-свойства) */
.filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.filter-range__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.catalog-filters .filter-range .form-label {
    margin: 0;
    color: var(--rd-muted);
    font-size: 12px;
}

.catalog-filters .filter-range .form-control {
    height: 40px;
    padding: 0 10px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    box-shadow: none;
}

.catalog-filters .filter-range .form-control:focus {
    border-color: var(--rd-primary);
}

.catalog-filters .price-slider-wrapper {
    padding: 10px 8px 18px;
}

.catalog-filters .ui-slider {
    position: relative;
    height: 2px;
    background: var(--rd-border);
    border: 0;
    border-radius: 0;
}

.catalog-filters .ui-slider .ui-slider-range {
    background: var(--rd-primary);
    border: 0;
}

.catalog-filters .ui-slider .ui-slider-handle {
    top: -7px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    background: #FFFFFF;
    border: 2px solid var(--rd-primary);
    border-radius: 50%;
    cursor: grab;
    outline: none;
}

.catalog-filters .ui-slider .ui-slider-handle:focus-visible {
    box-shadow: 0 0 0 3px var(--rd-primary-ring);
}

/* select2 внутри выпадающего блока */
.catalog-filters .select2-append-container {
    position: relative;
}

.catalog-filters .select2-container {
    width: 100% !important;
}

/* «По акции» и toggle-свойства */
.filter-widget--toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-widget--toggle .list-group {
    flex-direction: row;
    overflow: visible;
}

.filter-widget--toggle .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 4px 0 8px;
}

.filter-widget--toggle .form-check-input {
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--rd-primary);
}

.filter-widget--toggle .form-check-label {
    font-size: 13px;
    white-space: nowrap;
}

.filter-widget__hint {
    color: var(--rd-muted);
    font-size: 14px;
    cursor: help;
}

/* кнопки действий */
.catalog-filters__actions {
    display: flex;
    gap: 8px;
}

.catalog .catalog-filters__btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

.catalog .catalog-filters__btn--ghost {
    background: transparent;
    border: 1px solid var(--rd-border);
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-weight: 500;
}

.catalog .catalog-filters__btn--ghost:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
}

.catalog .catalog-filters__btn--primary {
    padding: 0 20px;
    background: var(--rd-primary);
    border: 1px solid var(--rd-primary);
    color: var(--rd-on-primary);
    font-family: var(--rd-font-display);
    font-weight: 800;
}

.catalog .catalog-filters__btn--primary:hover {
    background: var(--rd-primary-2);
    border-color: var(--rd-primary-2);
}

/* чипы выбранных фильтров и категорий */
.catalog-filters__chips,
.catalog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.catalog-chip {
    flex: 0 0 auto;
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.catalog-chip svg {
    width: 12px;
    height: 12px;
    color: var(--rd-muted);
}

.catalog-chip:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
    text-decoration: none;
}

.catalog-chip--reset {
    padding: 0 8px;
    background: transparent;
    border-color: transparent;
    color: var(--rd-primary-2);
}

.catalog-categories {
    margin: 0 0 4px;
}

/* --- ≥992px: горизонтальная панель --- */
@media (min-width: 992px) {
    .catalog-filters__head {
        display: none;
    }

    .catalog-filters__bar {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 64px;
        box-sizing: border-box;
        padding: 11px 12px;
        background: var(--rd-surface);
        border: 1px solid var(--rd-line);
    }

    /* пункты растягиваются на всю ширину панели поровну */
    .catalog-filters__list {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .catalog-filters__list>.filter-widget,
    .catalog-filters__list>.filter-widget-wrap>.filter-widget {
        flex: 1 1 0;
        min-width: max-content;
    }

    .catalog-filters__list>.filter-widget--sale {
        flex: 0 0 auto;
    }

    .catalog-filters__list .filter-pill {
        width: 100%;
        justify-content: space-between;
    }

    .catalog-filters__list .filter-pill__label {
        flex: 1 1 auto;
        text-align: left;
    }

    .catalog-filters__actions {
        flex: 0 0 auto;
        align-self: flex-start;
    }

    .filter-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 40;
        padding-top: 8px;
    }

    .filter-dropdown__inner {
        width: max(288px, 100%);
        max-height: min(420px, 70vh);
        overflow-y: auto;
        box-sizing: border-box;
        padding: 16px;
        background: var(--rd-popover);
        border: 1px solid var(--rd-border);
        box-shadow: 0 16px 40px var(--rd-shadow);
    }

    /* select2 открывается внутри панели — не обрезаем */
    .filter-dropdown__inner:has(.select2-container--open) {
        overflow: visible;
    }


    .catalog-toolbox__filters {
        display: none !important;
    }
}

/* --- <992px: полноэкранный лист --- */
@media (max-width: 991.98px) {
    .sidebar-opened {
        overflow: hidden;
    }

    /* без собственного stacking context, иначе лист окажется под шапкой */
    .catalog-filters-wrap {
        position: static;
        z-index: auto;
    }

    .catalog-filters__sheet {
        position: fixed;
        inset: 0;
        z-index: 1060;
        display: flex;
        flex-direction: column;
        background: var(--rd-surface);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }

    .sidebar-opened .catalog-filters__sheet {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }

    .catalog-filters__head {
        flex: 0 0 56px;
        display: flex;
        align-items: center;
        padding: 0 4px;
        border-bottom: 1px solid var(--rd-line);
    }

    .catalog-filters__close {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--rd-text);
    }

    .catalog-filters__close svg {
        width: 20px;
        height: 20px;
    }

    .catalog-filters__title {
        flex: 1 1 auto;
        color: var(--rd-strong);
        font-family: var(--rd-font-display);
        font-size: 17px;
        font-weight: 800;
    }

    .catalog-filters__reset-link {
        height: 44px;
        padding: 0 12px;
        background: transparent;
        border: 0;
        color: var(--rd-primary-2);
        font-family: var(--rd-font);
        font-size: 14px;
    }

    .catalog-filters__bar {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .catalog-filters__list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-filters__list .filter-widget {
        border-bottom: 1px solid var(--rd-line);
    }

    .filter-pill,
    .filter-widget.is-open .filter-pill {
        width: 100%;
        height: 52px;
        padding: 0 16px;
        background: transparent;
        border: 0;
        font-size: 15px;
    }

    .filter-pill__label {
        flex: 1 1 auto;
        text-align: left;
    }

    .filter-pill__chevron {
        width: 14px;
        height: 14px;
    }

    .filter-dropdown {
        padding: 0 16px 16px;
    }

    /* значения — плашками */
    .filter-options {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        max-height: none;
    }

    .catalog-filters .filter-option.form-check {
        position: relative;
        min-height: 0;
        padding: 0;
    }

    .catalog-filters .filter-option .form-check-input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .catalog-filters .filter-option .form-check-label {
        height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 0 14px;
        border: 1px solid var(--rd-border);
    }

    .catalog-filters .filter-option:has(.form-check-input:checked) .form-check-label {
        background: var(--rd-primary);
        border-color: var(--rd-primary);
        color: var(--rd-on-primary);
    }

    .catalog-filters .filter-option .form-check-input:focus-visible+.form-check-label {
        outline: 2px solid var(--rd-primary-2);
        outline-offset: 2px;
    }

    .catalog-filters .filter-range .form-control {
        height: 44px;
        font-size: 15px;
    }

    .filter-widget--toggle {
        min-height: 56px;
        padding: 0 12px;
    }

    .filter-widget--toggle .form-check-label {
        font-size: 15px;
    }

    .filter-widget--toggle .form-check-input {
        width: 20px;
        height: 20px;
    }

    .catalog-filters__actions {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        background: var(--rd-surface);
        border-top: 1px solid var(--rd-line);
    }

    .catalog .catalog-filters__btn {
        height: 52px;
        font-size: 15px;
    }

    .catalog-filters__chips,
    .catalog-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0;
        padding: 0 16px 12px;
        scrollbar-width: none;
    }

    .catalog-filters__chips::-webkit-scrollbar,
    .catalog-categories::-webkit-scrollbar {
        display: none;
    }

    /* порядок на телефоне: кнопки «Фильтры / Сортировка» → чипы → сетка */
    .catalog {
        display: flex;
        flex-direction: column;
    }

    .catalog>* {
        order: 3;
    }

    .catalog>.catalog__banners {
        order: 0;
    }

    .catalog>.catalog-toolbox {
        order: 1;
    }

    .catalog>.catalog-filters-wrap,
    .catalog>.catalog-categories {
        order: 2;
    }
}

/* --------------------------------------------------------------------------
   3.2 Тулбокс: сортировка, количество, вид
   -------------------------------------------------------------------------- */
.catalog-toolbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    margin: 16px 0;
}

.catalog-toolbox__left,
.catalog-toolbox__right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.catalog-toolbox__left {
    gap: 10px;
}

.catalog-toolbox .toolbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.catalog-toolbox .toolbox-item>label {
    margin: 0;
    color: var(--rd-muted);
    font-size: 14px;
    white-space: nowrap;
}

.catalog-toolbox .toolbox-sort select.form-control {
    height: 40px;
    min-width: 210px;
    padding: 0 36px 0 14px;
    background: var(--rd-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    cursor: pointer;
}

.catalog-toolbox .toolbox-show .select2-container {
    min-width: 72px;
}

.catalog-toolbox .toolbox-show .select2-selection--single {
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 0;
}

.catalog-toolbox .toolbox-show .select2-selection__arrow {
    height: 38px;
}

.catalog-toolbox .layout-modes {
    display: flex;
    gap: 4px;
    margin: 0;
}

.catalog-toolbox .layout-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text-2);
    font-size: 16px;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.catalog-toolbox .layout-btn.active {
    background: var(--rd-surface);
    border-color: var(--rd-primary);
    color: var(--rd-primary-2);
    cursor: default;
}

.catalog-toolbox__filters {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-primary);
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    cursor: pointer;
}

.catalog-toolbox__filters svg {
    width: 18px;
    height: 18px;
}

.catalog-toolbox__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 0px;
    background: var(--rd-primary);
    color: var(--rd-on-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
}

@media (max-width: 991.98px) {
    .catalog-toolbox {
        position: sticky;
        top: var(--rd-header-h);
        /* под закреплённой верхней панелью */
        z-index: 25;
        margin: 12px 0;
        padding: 0 16px;
        background: var(--rd-bg);
    }

    .catalog-toolbox__left {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .catalog-toolbox .toolbox-sort>label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .catalog-toolbox .toolbox-sort,
    .catalog-toolbox .toolbox-sort .custom-select2 {
        min-width: 0;
        width: 100%;
    }

    .catalog-toolbox .toolbox-sort select.form-control {
        width: 100%;
        min-width: 0;
        height: 44px;
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .catalog-toolbox__right {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   3.3 Сетка каталога: без отступов, общие линии 1px
   -------------------------------------------------------------------------- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--rd-line);
}

.catalog-grid__cell {
    position: relative;
    min-width: 0;
    border-bottom: 1px solid var(--rd-line);
}

.catalog-grid__cell:nth-child(odd) {
    border-right: 1px solid var(--rd-line);
}

@media (min-width: 768px) {
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: 1px solid var(--rd-line);
    }

    .catalog-grid__cell,
    .catalog-grid__cell:nth-child(odd) {
        border-right: 1px solid var(--rd-line);
    }
}

@media (min-width: 1200px) {
    .catalog-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.catalog-grid.catalog-grid--list {
    grid-template-columns: minmax(0, 1fr);
}

.catalog-grid--list .catalog-grid__cell {
    border-right: 0;
}

@media (min-width: 768px) {
    .catalog-grid--list .catalog-grid__cell {
        border-right: 1px solid var(--rd-line);
    }
}

.catalog-grid__empty {
    grid-column: 1 / -1;
    padding: 48px 16px;
    color: var(--rd-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   3.4 Карточка товара (variant = catalog)
   -------------------------------------------------------------------------- */
.product-card {
    position: relative;
    height: 100%;
}

.product-card__main {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card__figure {
    position: relative;
    height: 168px;
    margin: 0;
    padding-top: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__figure img {
    display: block;
    width: auto;
    height: 140px;
    max-width: 100%;
    object-fit: contain;
}

.product-card__labels {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
}

.product-card .product-label {
    position: static;
    margin: 0;
    padding: 2px 6px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    line-height: 1.4;
}

.product-card .product-card__discount {
    background: var(--rd-sale);
    color: var(--rd-on-primary);
    font-size: 12px;
}

.product-card__icons {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.product-card__info-btn {
    position: absolute;
    right: 2px;
    bottom: -4px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rd-text-2);
    cursor: pointer;
}

.product-card__info-btn>span {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rd-chip);
}

.product-card__info-btn svg {
    width: 16px;
    height: 16px;
}

.product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px 12px;
}

.product-card .product-card__title {
    display: -webkit-box;
    height: 54px;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-family: var(--rd-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.product-card__title a {
    color: var(--rd-text);
    text-decoration: none;
}

.product-card__title a:hover {
    color: var(--rd-primary-2);
    text-decoration: none;
}

.product-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    min-height: 24px;
    margin-top: auto;
}

.product-card__price-current {
    color: var(--rd-strong);
    font-family: var(--rd-font-display);
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.product-card__price-old {
    color: var(--rd-muted);
    font-size: 12px;
    white-space: nowrap;
}

.product-card__price-custom {
    color: var(--rd-text-2);
    font-size: 13px;
}

/* корзина: livewire:web.cart.add-product-via-counter */
.product-card__cart {
    margin-top: 6px;
}

.product-card__cart>div {
    gap: 8px !important;
}

.product-card__cart .product-single-qty {
    flex: 0 0 108px;
    max-width: 108px !important;
    margin: 0;
}

.product-card__cart .bootstrap-touchspin {
    height: 44px;
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid var(--rd-border);
}

.product-card__cart .bootstrap-touchspin .btn {
    width: 34px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rd-text-2);
}

.product-card__cart .horizontal-quantity {
    min-width: 0;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rd-text);
    font-size: 14px;
    text-align: center;
}

.product-card__cart .btn-add-cart,
.product-card__cart .product-added-to-cart {
    flex: 1 1 auto;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 12px;
    border-radius: 0;
    font-family: var(--rd-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

.product-card__cart .btn-add-cart {
    background: var(--rd-primary);
    border: 1px solid var(--rd-primary);
    color: var(--rd-on-primary);
}

.product-card__cart .btn-add-cart:hover {
    background: var(--rd-primary-2);
    border-color: var(--rd-primary-2);
}

.product-card__cart .product-added-to-cart {
    width: 100%;
    background: transparent;
    border: 1px solid var(--rd-primary);
    color: var(--rd-primary-2);
    text-decoration: none;
}

@media (max-width: 767.98px) {

    /* на телефоне — одна кнопка «В корзину», количество меняется в корзине */
    .product-card__cart .product-single-qty {
        display: none;
    }
}

/* характеристики: .product-properties > .properties > .property > .name / .value */
.product-card .product-properties {
    display: block;
    margin: 0;
}

.product-card .properties {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.product-card .property {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-family: var(--rd-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}

.product-card .property::before {
    display: none;
}

.product-card .property::after {
    content: "";
    order: 1;
    flex: 1 1 auto;
    min-width: 12px;
    border-bottom: 1px dotted var(--rd-dots);
    transform: translateY(-4px);
}

.product-card .property .name,
.product-card .property .value {
    position: static;
    float: none;
    width: auto !important;
    max-width: none;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    overflow: visible;
    text-overflow: clip;
}

.product-card .property .name {
    order: 0;
    color: var(--rd-muted);
    white-space: nowrap;
}

.product-card .property .value {
    order: 2;
    color: var(--rd-text);
    text-align: right;
}

.product-card.is-sheet-open .property {
    font-size: 14px;
    line-height: 19px;
}

/* раскрывающийся блок */
.product-card__more {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 0 16px 16px;
}

.product-card__sheet-head {
    display: none;
}

.product-card__specs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.product-card__spec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    line-height: 18px;
}

.product-card__spec::after {
    content: "";
    order: 1;
    flex: 1 1 auto;
    min-width: 12px;
    border-bottom: 1px dotted var(--rd-dots);
    transform: translateY(-4px);
}

.product-card__spec dt {
    order: 0;
    margin: 0;
    color: var(--rd-muted);
    font-weight: 500;
    white-space: nowrap;
}

.product-card__spec dd {
    order: 2;
    margin: 0;
    color: var(--rd-text);
    text-align: right;
}

.product-card__stock {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rd-text-2);
    font-size: 13px;
}

.product-card__stock-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--rd-ok);
}

.product-card__actions {
    display: flex;
    gap: 6px;
}

.product-card__actions .btn-icon {
    position: static;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text-2);
    font-size: 16px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.product-card__actions .btn-icon:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
}

.product-card__more-link {
    flex: 1 1 auto;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rd-border);
    color: var(--rd-text);
    font-size: 13px;
    text-decoration: none;
}

.product-card__more-link:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
    text-decoration: none;
}

.product-card__backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .product-card--grid .product-card__panel {
        height: 100%;
    }
}

/* --- ≥992px: фиксированная ячейка, панель абсолютно поверх --- */
@media (min-width: 992px) {
    .catalog-grid__cell:not(.catalog-grid__cell--list) {
        height: var(--rd-card-h);
    }

    .product-card--grid .product-card__panel {
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        box-sizing: border-box;
        border: 1px solid transparent;
        background: transparent;
        transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .product-card--grid .product-card__main {
        height: calc(var(--rd-card-h) - 2px);
    }

    .product-card__figure {
        height: 236px;
        padding-top: 16px;
    }

    .product-card__figure img {
        height: 200px;
    }

    .product-card__labels {
        top: 16px;
        left: 16px;
    }

    .product-card__icons {
        top: 16px;
        right: 16px;
    }

    .product-card .product-label {
        padding: 3px 8px;
        font-size: 11px;
    }

    .product-card .product-card__discount {
        font-size: 14px;
    }

    .product-card__body {
        gap: 6px;
        padding: 12px 16px 16px;
    }

    .product-card .product-card__title {
        height: 40px;
        -webkit-line-clamp: 2;
        font-size: 15px;
        line-height: 20px;
    }

    .product-card__price {
        gap: 10px;
        min-height: 28px;
    }

    .product-card__price-current {
        font-size: 20px;
    }

    .product-card__price-old {
        font-size: 14px;
    }
}

/* --- наведение: только устройства с курсором --- */
@media (min-width: 992px) and (hover: hover) {
    .product-card__info-btn {
        display: none;
    }

    .catalog-grid__cell:hover,
    .catalog-grid__cell:has(:focus-visible) {
        z-index: 20;
    }

    .catalog-grid__cell:hover .product-card--grid .product-card__panel,
    .catalog-grid__cell:has(:focus-visible) .product-card--grid .product-card__panel {
        background: var(--rd-surface-2);
        /* border-color: var(--rd-primary); */
        box-shadow: 0 24px 48px var(--rd-shadow);
    }

    .catalog-grid__cell:hover .product-card--grid .product-card__more,
    .catalog-grid__cell:has(:focus-visible) .product-card--grid .product-card__more {
        display: flex;
    }

    .product-card--grid .product-card__more::before {
        content: "";
        display: block;
        height: 1px;
        background: var(--rd-border);
    }
}

/* --- нижний лист (телефон, планшет, тач-экраны) --- */
.product-card.is-sheet-open .product-card__more {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1062;
    display: flex;
    gap: 16px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    background: var(--rd-surface-2);
    border-top: 1px solid var(--rd-primary);
    box-shadow: 0 -16px 40px var(--rd-shadow);
}

.product-card.is-sheet-open .product-card__more::before {
    display: none;
}

.product-card.is-sheet-open .product-card__sheet-head {
    display: block;
}

.product-card.is-sheet-open .product-card__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1061;
    display: block;
    padding: 0;
    background: var(--rd-backdrop);
    border: 0;
    cursor: pointer;
}

.product-card.is-sheet-open .product-card__panel {
    background: var(--rd-surface-2);
}

.product-card__sheet-grabber {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: var(--rd-dots);
}

.product-card__sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-card__sheet-row img {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    object-fit: contain;
}

.product-card__sheet-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card__sheet-title {
    color: var(--rd-text);
    font-size: 14px;
    line-height: 19px;
}

.product-card__sheet-info .product-card__price {
    margin: 0;
}

.product-card__sheet-info .product-card__price-current {
    font-size: 18px;
}

.product-card__sheet-close {
    align-self: flex-start;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--rd-text-2);
}

.product-card__sheet-close svg {
    width: 18px;
    height: 18px;
}

.product-card.is-sheet-open .product-card__spec {
    font-size: 14px;
    line-height: 19px;
}

.product-card.is-sheet-open .product-card__actions .btn-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.product-card.is-sheet-open .product-card__more-link {
    height: 44px;
}

/* --- вид «списком» --- */
.product-card--list .product-card__panel {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px 16px;
    padding: 12px 16px;
}

.product-card--list .product-card__main {
    display: contents;
}

.product-card--list .product-card__figure {
    height: auto;
    padding: 0;
}

.product-card--list .product-card__figure img {
    height: 110px;
}

.product-card--list .product-card__body {
    padding: 0;
}

.product-card--list .product-card__title {
    height: auto;
    -webkit-line-clamp: 3;
}

.product-card--list .product-card__more {
    grid-column: 1 / -1;
    display: flex;
    padding: 0;
}

.product-card--list .product-card__info-btn,
.product-card--list .product-card__sheet-head {
    display: none;
}

@media (min-width: 992px) {
    .product-card--list .product-card__panel {
        grid-template-columns: 200px minmax(0, 1fr) 320px;
        gap: 0 24px;
        padding: 16px;
    }

    .product-card--list .product-card__figure img {
        height: 180px;
    }

    .product-card--list .product-card__more {
        grid-column: auto;
    }
}

/* --------------------------------------------------------------------------
   3.5 Пагинация
   -------------------------------------------------------------------------- */
.catalog-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding: 0 16px;
}

.catalog-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
}

.catalog-pagination .page-link {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--rd-border);
    border-radius: 0 !important;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    box-shadow: none;
}

.catalog-pagination .page-link:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
}

.catalog-pagination .page-item.active .page-link {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: var(--rd-on-primary);
}

.catalog-pagination .page-item.disabled .page-link {
    border-color: var(--rd-line);
    color: var(--rd-muted);
}

@media (prefers-reduced-motion: reduce) {

    .site-flyout--enter,
    .catalog-filters__sheet,
    .filter-pill__chevron,
    .product-card--grid .product-card__panel {
        transition: none !important;
    }
}

/* ==========================================================================
   4. Подвал
   Разметка: admin-footer/site-footer.html ($siteFooter) + web/layouts/partials/footer.blade.php
   Префикс классов: sf-
   ========================================================================== */
.site-footer {
    position: relative;
    margin-top: 64px;
    background: #161616;
    border-top: 1px solid var(--rd-line);
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 14px;
    line-height: 1.45;
}

/* !important — перебиваем `footer a { color: … !important }` из vrezerve.css */
.site-footer a {
    color: var(--rd-text-2) !important;
    text-decoration: none;
    transition: color .15s ease;
}

.site-footer a:hover {
    color: #FFFFFF !important;
    text-decoration: none;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
    border-radius: 4px;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li {
    margin: 0;
}

/* --- сетка --- */
.sf-main {
    padding: 56px 0 40px;
}

.sf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "brand   brand"
        "catalog social"
        "buyer   buyer";
    gap: 40px 24px;
}

.sf-brand {
    grid-area: brand;
}

.sf-col--catalog {
    grid-area: catalog;
}

.sf-col--buyer {
    grid-area: buyer;
}

.sf-col--social {
    grid-area: social;
}

@media (min-width: 768px) {
    .sf-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "brand catalog social"
            "brand buyer   buyer";
        gap: 48px 32px;
    }

    .sf-list--docs {
        column-count: 2;
        column-gap: 32px;
    }
}

@media (min-width: 1200px) {
    .sf-grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, .9fr);
        grid-template-areas: "brand catalog buyer social";
        gap: 48px;
    }
}

/* --- заголовки колонок --- */
.site-footer .sf-title {
    margin: 0 0 20px;
    color: #FFFFFF;
    font-family: var(--rd-font-display);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: none;
}

.site-footer .sf-title::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    margin-top: 12px;
    background: var(--rd-primary);
}

/* --- компания и контакты --- */
.sf-logo {
    display: inline-block;
}

.sf-logo img {
    display: block;
    width: 120px;
    height: auto;
}

.sf-contacts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 28px !important;
}

.sf-contact {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sf-contact__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: var(--rd-primary-tint);
    border: 1px solid var(--rd-primary-ring);
    color: var(--rd-primary-2);
}

.sf-contact__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-contact__label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--rd-muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-contact__tz {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--rd-chip);
    color: var(--rd-text-2);
    letter-spacing: 0;
    text-transform: none;
}

.site-footer .sf-contact__phone {
    color: #FFFFFF !important;
    font-family: var(--rd-font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .02em;
    white-space: nowrap;
}

.site-footer .sf-contact__phone:hover {
    color: var(--rd-primary-2) !important;
}

.sf-contact__note {
    color: var(--rd-muted);
    font-size: 12px;
}

.site-footer .sf-contact__value {
    color: var(--rd-text) !important;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.sf-hours {
    display: flex;
    gap: 12px;
    color: var(--rd-text);
    font-size: 14px;
}

.sf-hours>span:first-child {
    min-width: 48px;
    color: var(--rd-text-2);
}

/* --- списки ссылок --- */
.sf-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 5px 0;
}

.sf-list--icons .sf-ico {
    flex: 0 0 18px;
    color: var(--rd-muted);
    transition: color .15s ease, transform .15s ease;
}

.sf-list--icons a:hover .sf-ico {
    color: var(--rd-primary-2);
    transform: translateX(2px);
}

/* документы: без иконок, с тонкой стрелкой */
.sf-list--docs {
    display: block;
}

.sf-list--docs li {
    break-inside: avoid;
    margin-bottom: 2px;
}

.sf-list--docs a {
    position: relative;
    align-items: flex-start;
    min-height: 0;
    padding: 6px 0 6px 16px;
    font-size: 13.5px;
    line-height: 1.4;
}

.sf-list--docs a::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .5;
    transition: transform .15s ease, opacity .15s ease, color .15s ease;
}

.sf-list--docs a:hover::before {
    color: var(--rd-primary-2);
    opacity: 1;
    transform: translateX(2px) rotate(-45deg);
}

/* --- соцсети --- */
.sf-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-social a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.sf-social__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    color: var(--rd-text-2);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sf-social a:hover .sf-social__icon {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #FFFFFF;
}

/* --- нижняя строка --- */
.sf-bottom {
    padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--rd-line);
}

.sf-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
}

.sf-bottom__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sf-bottom__logo {
    display: block;
    width: 72px;
    height: auto;
    opacity: .9;
}

.site-footer .sf-bottom__text {
    margin: 0;
    color: var(--rd-muted);
    font-family: var(--rd-font);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
}

.sf-bottom__pay {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sf-bottom__pay-label {
    color: var(--rd-muted);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sf-bottom__pay-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 22px;
    opacity: .75;
    transition: opacity .15s ease;
}

.sf-bottom__pay:hover .sf-bottom__pay-img {
    opacity: 1;
}

.sf-bottom__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 13px;
}

@media (max-width: 1199.98px) {
    .sf-bottom__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-bottom__links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 24px;
    }
}

@media (max-width: 575.98px) {
    .sf-main {
        padding: 40px 0 32px;
    }

    .site-footer .sf-contact__phone {
        font-size: 20px;
    }

    .sf-bottom__pay {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sf-bottom__pay-img {
        height: auto;
        width: 100%;
        max-width: 320px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sf-list--icons .sf-ico,
    .sf-list--docs a::before {
        transition: none;
    }
}


/* ==========================================================================
   5. Верхняя панель (web/layouts/partials/header-mobile.blade.php)
   Высота 80 px — нижняя граница совпадает с линией под логотипом в сайдбаре.
   ========================================================================== */
@media (max-width: 991.98px) {
    :root {
        --rd-header-h: 56px;
    }
}

.site-header {
    position: sticky;
    z-index: 1030;
    background: transparent;
    border: 0;
    box-shadow: none;
    top: 0px;
    font-family: var(--rd-font);
}

.site-header .site-header__bar {
    position: relative;
    height: var(--rd-header-h);
    padding: 0 !important;
    background: rgba(18, 18, 18, 0.82);
    border-bottom: 1px solid var(--rd-line);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

/* закреплённое состояние (класс .fixed ставит JS темы) */
.site-header .site-header__bar.fixed {
    height: var(--rd-header-h) !important;
    padding: 0 !important;
    background: rgba(18, 18, 18, 0.9) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* --- телефон: бургер + логотип --- */
.site-header__brand {
    align-items: center;
    gap: 4px;
    margin-right: auto;
}

.site-header .site-header__burger {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 2px;
    color: var(--rd-text);
    line-height: 0;
    cursor: pointer;
}

.site-header__burger svg {
    width: 24px;
    height: 24px;
}

.site-header__burger:hover {
    background: rgba(255, 255, 255, 0.05);
}

.site-header__logo {
    display: flex;
}

.site-header__logo img {
    display: block;
    width: 64px;
    max-width: 64px;
    height: auto;
}

/* --- поиск --- */
.site-header .site-header__search {
    position: relative;
    flex: 1 1 auto;
    max-width: 640px;
    margin: 0 auto 0 0;
}

.site-header .header-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-sizing: border-box;
}

/* иконка лупы внутри поля */
.site-header .header-search-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-color: var(--rd-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0 M16.5 16.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 11a7 7 0 1 0 14 0a7 7 0 1 0 -14 0 M16.5 16.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.site-header .header-search-wrapper:focus-within::before {
    background-color: var(--rd-primary-2);
}

.site-header .header-search-wrapper .form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0 !important;
    height: 44px;
    margin: 0;
    padding: 0 52px 0 44px !important;
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    border-radius: 0px !important;
    color: var(--rd-text);
    font-family: var(--rd-font) !important;
    font-size: 14px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.site-header .header-search-wrapper .form-control::placeholder {
    color: var(--rd-muted);
}

.site-header .header-search-wrapper .form-control:hover {
    border-color: #4A4A4A !important;
}

.site-header .header-search-wrapper .form-control:focus {
    background: var(--rd-surface-2) !important;
    border-color: var(--rd-primary) !important;
    box-shadow: 0 0 0 3px var(--rd-primary-ring);
    outline: none;
}

.site-header .header-search-wrapper .form-control::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* кнопка «искать» появляется, когда что-то введено */
.site-header #headerSearchLink {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 36px;
    min-width: 0 !important;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: var(--rd-primary) !important;
    border: 0;
    border-radius: 2px;
    color: #FFFFFF !important;
    font-size: 15px;
}

.site-header #headerSearchLink:hover {
    background: var(--rd-primary-2) !important;
}

.site-header #headerSearchLink::before,
.site-header #headerSearchLink::after {
    display: none;
}

/* результаты */
.site-header .header-search-wrapper .result-search {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    width: auto;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    padding: 8px;
    background: var(--rd-popover);
    border: 1px solid var(--rd-border);
    border-radius: 2px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    scrollbar-width: thin;
    scrollbar-color: #4A4A4A transparent;
}

.site-header .result-search ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header .result-search ul li {
    padding: 0;
}

.site-header .result-search ul li a {
    display: block;
    padding: 10px 12px;
    border-radius: 2px;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500 !important;
    line-height: 1.35;
    text-decoration: none;
    text-transform: none;
}

.site-header .result-search ul li a:hover,
.site-header .result-search ul li a:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    outline: none;
}

.site-header .result-search .search-btn {
    display: block;
    margin-top: 4px;
    padding: 12px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rd-line);
    border-radius: 0;
    color: var(--rd-primary-2);
    font-family: var(--rd-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
}

.site-header .result-search .search-btn:hover {
    color: #FFFFFF;
}

/* --- телефон справочной --- */
.site-header__phone {
    display: none;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 0 8px;
    color: var(--rd-text);
    text-decoration: none;
}

.borders-outer {
    border: 1px solid var(--rd-line);
}

.site-header__phone:hover {
    text-decoration: none;
}

.site-header__phone-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12x;
    background: var(--rd-primary-tint);
    border: 1px solid var(--rd-primary-ring);
    color: var(--rd-primary-2);
}

.site-header__phone-icon svg {
    width: 20px;
    height: 20px;
}

.site-header__phone-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-header__phone-number {
    color: #FFFFFF;
    font-family: var(--rd-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: color .15s ease;
}

.site-header__phone:hover .site-header__phone-number {
    color: var(--rd-primary-2);
}

.site-header__phone-note {
    color: var(--rd-muted);
    font-size: 11px;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .site-header__phone {
        display: flex;
    }
}

/* --- действия --- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.site-header .site-header__action,
.site-header .site-header__cart .cart-toggle {
    position: relative;
    min-width: 64px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0 8px;
    background: transparent;
    border: 0;
    border-radius: 2px;
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.site-header .site-header__action:hover,
.site-header .site-header__cart .cart-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    text-decoration: none;
}

.site-header .site-header__action:focus-visible,
.site-header .site-header__cart .cart-toggle:focus-visible,
.site-header .site-header__burger:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

.site-header__icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.site-header__label {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__logout {
    display: flex;
    margin: 0;
}

/* поиск-иконка нужна только на телефоне */
.site-header .header-search-inline .site-header__search-toggle {
    display: none;
}

/* --- корзина (livewire:web.header.cart-count) --- */
.site-header__cart .cart-dropdown {
    position: relative;
    margin: 0;
}

.site-header .site-header__cart .cart-toggle {
    background: var(--rd-primary-tint);
    color: #FFFFFF;
}

.site-header .site-header__cart .cart-toggle:hover {
    background: var(--rd-primary-ring);
}

.site-header__cart .dropdown-arrow::after,
.site-header__cart .cart-toggle::after {
    display: none !important;
}

.site-header__cart .link-counter__lbl {
    color: inherit;
    font-size: 11px;
    line-height: 1.1;
}

.site-header__cart .cart-count {
    position: absolute;
    top: 6px;
    right: 12px;
    left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 2px;
    background: var(--rd-primary);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* иконка корзины — линейная, как остальные (картинка crt.svg скрыта) */
.site-header__cart .header-general-ico2,
.site-sidebar__cart .header-general-ico2 {
    display: none !important;
}

.site-header__cart .header-general,
.site-sidebar__cart .header-general {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h10.8l2-8H6.2 M8 19.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0 M15 19.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h10.8l2-8H6.2 M8 19.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0 M15 19.5a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-sidebar__cart .cart-toggle {
    color: #FFFFFF;
}

/* --- < 1200: подписи прячем, остаются иконки --- */
@media (max-width: 1199.98px) {

    .site-header .site-header__action,
    .site-header .site-header__cart .cart-toggle {
        min-width: 48px;
        height: 48px;
        padding: 0;
    }

    .site-header__label,
    .site-header__cart .link-counter__lbl {
        display: none;
    }

    .site-header__cart .cart-count {
        top: 4px;
        right: 4px;
    }
}

/* --- телефон и планшет --- */
@media (max-width: 991.98px) {
    .site-header__inner {
        gap: 2px;
        padding-left: 4px !important;
        padding-right: 8px !important;
    }

    .site-header__action--desktop {
        display: none !important;
    }

    .site-header .site-header__action,
    .site-header .site-header__cart .cart-toggle {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }

    .site-header .site-header__cart .cart-toggle {
        background: transparent;
    }

    .site-header .site-header__search {
        position: static;
        flex: 0 0 auto;
        max-width: none;
        margin: 0;
    }

    .site-header .header-search-inline .site-header__search-toggle {
        display: flex;
    }

    .site-header .search-toggle::after {
        display: none !important;
    }

    /* поле поиска выезжает полосой под панелью (класс .show ставит JS темы) */
    .site-header .header-search .header-search-wrapper {
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;
        height: auto !important;
        padding: 8px 12px;
        background: rgba(18, 18, 18, 0.96) !important;
        border-bottom: 1px solid var(--rd-line) !important;
    }

    .site-header .header-search .header-search-wrapper::before {
        left: 26px;
    }

    .site-header #headerSearchLink {
        top: 12px;
        right: 16px;
    }

    .site-header .header-search-wrapper .result-search {
        top: 100%;
        left: 12px;
        right: 12px;
    }

    .site-header .header-search.show .site-header__search-toggle {
        background: var(--rd-primary-tint);
        color: #FFFFFF;
    }
}

@media (prefers-reduced-motion: reduce) {

    .site-header .header-search-wrapper .form-control,
    .site-header .site-header__action {
        transition: none;
    }
}


/* ==== [6] ПОДБОР ШИН И ДИСКОВ — НАЧАЛО (v3). Заменяйте целиком от НАЧАЛА до КОНЦА ==== */
/* ==========================================================================
   6. Подбор шин и дисков (components/web/selection-widget, livewire/web/selection-widget)
   Префикс классов: sw-
   ========================================================================== */
.sw {
    font-family: var(--rd-font);
}

.sw-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--rd-panel);
    border: 1px solid var(--rd-line);
}

/* разделитель между блоками — как линии в сетке каталога */
.sw-card+.sw-card {
    border-top: 1px solid var(--rd-line);
}

@media (min-width: 1200px) {
    .sw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sw-card+.sw-card {
        border-top: 0;
        border-left: 1px solid var(--rd-line);
    }
}

/* --- карточка --- */
.sw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px 32px 32px;
    background: transparent;
    color: var(--rd-text);
}

/* крупная иконка-водяной знак вместо фото на белом фоне (обрезается границами карточки) */
.sw-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--rd-tint-weak);
    -webkit-mask: var(--sw-mark) right -40px bottom -40px / 260px 260px no-repeat;
    mask: var(--sw-mark) right -40px bottom -40px / 260px 260px no-repeat;
    pointer-events: none;
}

.sw-card--tyres {
    --sw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0 M12 3v2 M12 19v2 M3 12h2 M19 12h2 M5.6 5.6l1.4 1.4 M17 17l1.4 1.4 M5.6 18.4l1.4-1.4 M17 7l1.4-1.4'/%3E%3C/svg%3E");
}

.sw-card--wheels {
    --sw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0 M10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0 M12 10V3 M13.9 11.4l6.7-2.2 M13.2 13.6l4.1 5.7 M10.8 13.6l-4.1 5.7 M10.1 11.4L3.4 9.2'/%3E%3C/svg%3E");
}

.sw-card>* {
    position: relative;
    z-index: 1;
}

/* выпадающий список категории должен быть поверх вкладок и полей */
.sw-card>.sw-card__head {
    z-index: 5;
}

/* --- шапка --- */
.sw-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rd-line);
}

.sw-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--rd-primary-tint);
    border: 1px solid var(--rd-primary-ring);
    color: var(--rd-primary-2);
}

.sw-card__icon svg {
    width: 24px;
    height: 24px;
}

.sw .sw-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    min-width: 0;
    margin: 0;
    color: var(--rd-strong);
    font-family: var(--rd-font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
}

/* выбор категории внутри заголовка (livewire:web.selection-widget.select-category) */
.sw-card__category {
    display: inline-flex;
    min-width: 0;
}

.sw-card__category .header-selection-widget {
    position: relative;
    min-width: 0;
}

.sw .sw-card__category .select2-dropdown {
    min-width: 240px;
    max-width: 320px;
    margin-top: 8px;
    font-family: var(--rd-font);
    font-weight: 500;
    text-transform: none;
}

.sw .sw-card__category .select2-results__option {
    white-space: nowrap;
    font-size: 15px;
    letter-spacing: 0;
}

.sw .sw-card__category .select2-results__options {
    overflow-x: hidden;
}

.sw .sw-card__category .select2-container {
    width: auto !important;
    min-width: 72px;
    margin: 0 !important;
}

.sw .sw-card__category .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 0;
    padding: 0 22px 2px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px dashed var(--rd-primary-2) !important;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.sw .sw-card__category .select2-selection__rendered {
    padding: 0 !important;
    color: var(--rd-primary-2) !important;
    font-family: var(--rd-font-display) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-transform: lowercase;
}

.sw .sw-card__category .select2-selection__arrow {
    display: block !important;
    top: 50% !important;
    right: 0 !important;
    height: 16px !important;
    margin-top: -8px;
}

.sw .sw-card__category .select2-selection__arrow b {
    border-top-color: var(--rd-primary-2) !important;
}

.sw-card__help {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--rd-border);
    border-radius: 0;
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.sw-card__help svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.sw-card__help:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
}

.sw-card__help:focus-visible,
.sw-tabs__btn:focus-visible,
.sw-btn:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

/* --- переключатель «По параметрам / По авто» --- */
.sw-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin: 20px 0 24px;
    padding: 4px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-line);
    border-radius: 0;
}

.sw-tabs__btn {
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.sw-tabs__btn:hover {
    color: var(--rd-strong);
}

.sw-tabs__btn.is-active {
    background: var(--rd-chip);
    color: var(--rd-strong);
}

/* --- тело и форма: кнопки прижаты к низу, карточки одной высоты --- */
.sw-card__body,
.sw-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sw-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* подписи полей */
.sw .sw-label,
.sw .sw-checks__group>legend {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    color: var(--rd-muted);
    font-family: var(--rd-font);
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sw-fields {
    display: grid;
    gap: 16px;
}

.sw-fields--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sw-fields--2,
.sw-fields--vehicle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sw-field {
    min-width: 0;
}

/* --- select2 в тёмной теме --- */
.sw .select2-append-container {
    position: relative;
}

.sw .sw-field .select2-container {
    width: 100% !important;
}

.sw .sw-field .select2-container--default .select2-selection--single {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0;
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sw .sw-field .select2-container--default .select2-selection--single:hover {
    border-color: var(--rd-border-strong);
}

.sw .sw-field .select2-container--default .select2-selection__rendered {
    width: 100%;
    padding: 0 40px 0 14px !important;
    color: var(--rd-text) !important;
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 42px !important;
}

.sw .sw-field .select2-container--default .select2-selection__placeholder {
    color: var(--rd-muted);
}

.sw .sw-field .select2-container--default .select2-selection__arrow {
    top: 0 !important;
    right: 10px !important;
    height: 42px !important;
}

.sw .sw-field .select2-container--default .select2-selection__arrow b {
    border-top-color: var(--rd-muted) !important;
}

.sw .sw-field .select2-container--default .select2-selection__clear {
    margin-right: 22px;
    color: var(--rd-muted);
    font-size: 18px;
}

.sw .sw-field .select2-container--open .select2-selection--single,
.sw .sw-field .select2-container--focus .select2-selection--single {
    border-color: var(--rd-primary);
    box-shadow: 0 0 0 3px var(--rd-primary-ring);
}

.sw .sw-field .select2-container--disabled .select2-selection--single {
    background: var(--rd-bg) !important;
    border-color: var(--rd-line);
    opacity: .45;
    cursor: not-allowed;
}

.sw .select2-dropdown {
    overflow: hidden;
    background: var(--rd-popover);
    border: 1px solid var(--rd-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 40px var(--rd-shadow);
    z-index: 60;
}

.sw .select2-container--open .select2-dropdown--below {
    margin-top: 6px;
}

.sw .select2-container--open .select2-dropdown--above {
    margin-top: -6px;
}

.sw .select2-results__options {
    max-height: 260px !important;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--rd-border-strong) transparent;
}

.sw .select2-results__option {
    padding: 9px 12px;
    border-radius: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500;
}

.sw .select2-container--default .select2-results__option--highlighted[aria-selected],
.sw .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--rd-primary-tint) !important;
    color: var(--rd-strong) !important;
}

.sw .select2-container--default .select2-results__option[aria-selected=true],
.sw .select2-container--default .select2-results__option--selected {
    background: var(--rd-tint);
    color: var(--rd-primary-2);
}

/* --- чекбоксы (сезон, шипы) — компактные чипы в строку --- */
.sw-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.sw-checks__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

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

.sw .filter-option.form-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 12px 0 10px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-border);
    border-radius: 0;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease;
}

.sw .filter-option.form-check:hover {
    border-color: var(--rd-border-strong);
}

.sw .filter-option.form-check:has(.form-check-input:checked) {
    background: var(--rd-primary-tint);
    border-color: var(--rd-primary);
}

.sw .filter-option.form-check:has(.form-check-input:disabled) {
    opacity: .4;
}

.sw .filter-option .form-check-input {
    float: none;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    background-color: transparent;
    border: 1.5px solid var(--rd-border-strong);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.sw .filter-option .form-check-input:checked {
    background-color: var(--rd-primary);
    border-color: var(--rd-primary);
}

.sw .filter-option .form-check-input:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

/* весь чип кликабелен */
.sw .filter-option .form-check-label {
    margin: 0;
    color: var(--rd-text);
    font-family: var(--rd-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}

.sw .filter-option .form-check-label::before {
    content: "";
    position: absolute;
    inset: 0;
}

.sw .filter-option .icon-group {
    position: static;
    display: flex;
    align-items: center;
}

.sw .filter-option .icon-property.inline {
    width: auto;
    padding-left: 24px;
    color: inherit;
    font-size: 13px;
    line-height: 20px;
}

/* --- кнопки --- */
.sw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.sw .sw-btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--rd-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sw .sw-btn--primary {
    min-width: 160px;
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: var(--rd-on-primary);
}

.sw .sw-btn--primary:hover {
    background: var(--rd-primary-2);
    border-color: var(--rd-primary-2);
}

.sw .sw-btn--ghost {
    background: transparent;
    border-color: var(--rd-border);
    color: var(--rd-text-2);
}

.sw .sw-btn--ghost:hover {
    border-color: var(--rd-primary-2);
    color: var(--rd-strong);
}

.sw .sw-btn:disabled {
    opacity: .6;
    cursor: default;
}

.sw-actions__loader .preloader {
    position: static;
    width: auto;
    height: auto;
}

.sw-actions__loader .preloader svg {
    color: var(--rd-primary-2);
}

.sw .sw-hint {
    margin: -8px 0 0;
    color: var(--rd-muted);
    font-family: var(--rd-font);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5;
}

/* --- результат подбора по авто --- */
.sw .sw-result__inner,
.sw .selection-widget-result__inner {
    display: block;
    margin-top: 24px;
    padding: 20px 0 0;
    border-top: 1px solid var(--rd-line);
}

.sw .sw-result__heading {
    display: block;
    margin: 0 0 12px;
    color: var(--rd-strong);
    font-family: var(--rd-font-display);
    font-size: 16px;
    font-weight: 800;
}

.sw .selection-widget-result-item+.selection-widget-result-item {
    margin-top: 16px;
}

.sw .selection-widget-result-item__heading {
    margin: 0 0 8px;
    color: var(--rd-muted);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sw .selection-widget-result-item__sets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.sw .selection-widget-result-set {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 12px;
    background: var(--rd-panel);
    border: 1px solid var(--rd-line);
    border-radius: 0;
}

.sw .selection-widget-result-set__link {
    color: var(--rd-primary-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.sw .selection-widget-result-set__link:hover {
    color: var(--rd-strong);
}

.sw .selection-widget-result-set__divider {
    width: 1px;
    height: 14px;
    background: var(--rd-border);
}

/* --- адаптив --- */
@media (max-width: 767.98px) {
    .sw-card {
        padding: 20px 16px 24px;
    }

    .sw-card::after {
        -webkit-mask-size: 180px 180px;
        mask-size: 180px 180px;
        -webkit-mask-position: right -30px bottom -30px;
        mask-position: right -30px bottom -30px;
    }

    .sw-card__head {
        gap: 12px;
        padding-bottom: 16px;
    }

    .sw-card__icon {
        width: 40px;
        height: 40px;
    }

    .sw .sw-card__title,
    .sw .sw-card__category .select2-selection__rendered {
        font-size: 18px !important;
    }

    /* кнопка «что означают цифры» — только иконка */
    .sw-card__help {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .sw-grid {
        border-left: 0;
        border-right: 0;
    }

    .sw-card__help-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .sw-tabs {
        margin: 16px 0 20px;
    }

    .sw-fields {
        gap: 12px;
    }

    .sw-fields--vehicle {
        grid-template-columns: minmax(0, 1fr);
    }

    .sw-actions .sw-btn {
        flex: 1 1 0;
        padding: 0 16px;
        min-width: 0;
    }
}

@media (max-width: 399.98px) {
    .sw-fields--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sw-fields--3> :last-child {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sw-tabs__btn,
    .sw .sw-btn,
    .sw .filter-option.form-check {
        transition: none;
    }
}

/* --- без скруглений во всём блоке (перебивает bootstrap / select2 / vrezerve) --- */
.sw,
.sw *,
.sw *::before,
.sw *::after {
    border-radius: 0 !important;
}

/* выпадающий список категории поверх вкладок и полей */
.sw .sw-card>.sw-card__head {
    position: relative;
    z-index: 5 !important;
}

.sw .sw-card__category .select2-container--open {
    z-index: 6;
}

.sw .sw-card__category .select2-dropdown {
    z-index: 7;
}

/* ==== [6] ПОДБОР ШИН И ДИСКОВ — КОНЕЦ ==== */
/* ==== [7] СТРАНИЦА ТОВАРА — НАЧАЛО (v2). Заменяйте целиком от НАЧАЛА до КОНЦА ==== */
/* web/catalog/product/show.blade.php · префикс pp- · без скруглений, блоки вплотную с общими линиями */

.pp-page,
.pp-page .pp-main *,
.pp-page .pp-tabs * { border-radius: 0 !important; }

.pp-page { font-family: var(--rd-font); }

/* ---------- основной блок: галерея | заголовок / характеристики / покупка ---------- */
/* сброс отступов и тени темы (.product-single-default, .product-single-container) */
.pp-page .pp-main.product-single-default {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.pp-page .pp-main .product-single-details,
.pp-page .pp-main .product-single-gallery { margin: 0 !important; }
.pp-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "gallery"
        "head"
        "buy"
        "specs";
    margin: 0;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    color: var(--rd-text);
}

.pp-gallery { grid-area: gallery; }
.pp-head { grid-area: head; }
.pp-specs { grid-area: specs; }
.pp-buy { grid-area: buy; }

.pp-gallery,
.pp-head,
.pp-specs,
.pp-buy {
    min-width: 0;
    margin: 0;
    padding: 24px 20px;
}

.pp-head,
.pp-specs,
.pp-buy { border-top: 1px solid var(--rd-line); }

@media (min-width: 768px) {
    .pp-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "gallery head"
            "gallery buy"
            "specs   specs";
    }

    .pp-gallery { border-right: 1px solid var(--rd-line); }
    .pp-head { border-top: 0; }
    .pp-gallery, .pp-head, .pp-specs, .pp-buy { padding: 28px; }
}

@media (min-width: 1200px) {
    .pp-main {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "gallery head  head"
            "gallery specs buy";
    }

    .pp-specs { border-right: 1px solid var(--rd-line); }
    .pp-gallery, .pp-head, .pp-specs, .pp-buy { padding: 32px; }
}

/* ---------- галерея ---------- */
.pp-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0 !important;
}

.pp-gallery .product-slider-container {
    position: relative;
    margin: 0;
    padding: 0;
    background: var(--rd-bg);
    border: 1px solid var(--rd-line);
}

.pp-gallery .product-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 440px;
    padding: 24px;
    background: transparent;
}

.pp-gallery .product-single-image {
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pp-gallery .label-group {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pp-gallery .prod-full-screen {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    color: var(--rd-text);
    opacity: 1;
    cursor: zoom-in;
    transition: border-color .15s ease, color .15s ease;
}

.pp-gallery .prod-full-screen::after { display: none !important; }
.pp-gallery .prod-full-screen { padding: 0 !important; background: var(--rd-surface) !important; }
.pp-gallery .prod-full-screen i { color: inherit; font-size: 16px; }
.pp-gallery .prod-full-screen:hover { border-color: var(--rd-primary-2); color: var(--rd-strong); }

.pp-gallery .owl-nav button.owl-prev,
.pp-gallery .owl-nav button.owl-next {
    width: 40px !important;
    height: 40px !important;
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-border) !important;
    color: var(--rd-text) !important;
    box-shadow: none !important;
}

.pp-gallery .owl-nav button::after { display: none !important; }

/* точки карусели не нужны — есть миниатюры */
.pp-gallery .product-single-carousel .owl-dots { display: none !important; }

/* миниатюры: тема превращает .prod-thumbnail в owl-карусель (4 шт.), клик по миниатюре листает фото.
   Поэтому не меняем её display — только оформляем. */
.pp-gallery .prod-thumbnail {
    position: relative;
    margin: 0;
    padding: 0;
}

/* до инициализации карусели — ровный ряд */
.pp-gallery .prod-thumbnail:not(.owl-loaded) {
    display: flex;
    gap: 8px;
    overflow: hidden;
}

.pp-gallery .prod-thumbnail:not(.owl-loaded) > .owl-dot {
    flex: 0 0 calc((100% - 24px) / 4);
}

.pp-gallery .prod-thumbnail .owl-dot {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.pp-gallery .prod-thumbnail img {
    display: block;
    width: 100% !important;
    height: 84px;
    padding: 6px;
    object-fit: contain;
    background: var(--rd-bg);
    border: 1px solid var(--rd-line) !important;
    transition: border-color .15s ease;
}

.pp-gallery .prod-thumbnail .owl-dot:hover img { border-color: var(--rd-border) !important; }
.pp-gallery .prod-thumbnail .owl-dot.active img { border-color: var(--rd-primary) !important; }

/* стрелки у ленты миниатюр */
.pp-gallery .prod-thumbnail .owl-nav button.owl-prev,
.pp-gallery .prod-thumbnail .owl-nav button.owl-next {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

@media (max-width: 767.98px) {
    .pp-gallery .product-item { height: 300px; padding: 16px; }
    .pp-gallery .prod-thumbnail img { height: 64px; }
}

/* ---------- заголовок ---------- */
.pp-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0 !important;
}

.pp-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--rd-muted);
}

.pp-stock {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pp-stock i {
    width: 8px;
    height: 8px;
    background: currentColor;
}

.pp-stock--in { color: var(--rd-ok); background: rgba(52, 168, 83, 0.1); }
.pp-stock--out { color: var(--rd-muted); background: var(--rd-tint); }

.pp-sku span { color: var(--rd-text-2); font-variant-numeric: tabular-nums; }

.pp-page .pp-brand-link {
    color: var(--rd-primary-2);
    text-decoration: none;
}

.pp-page .pp-brand-link:hover { color: var(--rd-strong); }

.pp-head__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.pp-page .pp-title {
    width: auto;
    margin: 0;
    color: var(--rd-strong);
    font-family: var(--rd-font-display);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.pp-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 56px;
    padding: 8px;
    background: var(--rd-bg);
    border: 1px solid var(--rd-line);
}

.pp-brand img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

@media (max-width: 575.98px) {
    .pp-brand { width: 80px; height: 44px; }
}

/* ---------- основные характеристики ---------- */
.pp-page .pp-label {
    margin: 0 0 16px;
    color: var(--rd-muted);
    font-family: var(--rd-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.pp-kv { margin: 0; }

.pp-kv__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--rd-line);
    font-size: 14px;
    line-height: 1.35;
}

.pp-kv__row:first-child { border-top: 1px solid var(--rd-line); }

.pp-kv dt {
    margin: 0;
    color: var(--rd-text-2);
    font-weight: 500;
}

.pp-kv dd {
    margin: 0;
    color: var(--rd-strong);
    font-weight: 600;
    text-align: right;
}

.pp-page .pp-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--rd-primary-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.pp-more svg { width: 16px; height: 16px; transition: transform .15s ease; }
.pp-page .pp-more:hover { color: var(--rd-strong); }
.pp-more:hover svg { transform: translateX(3px); }

/* ---------- покупка ---------- */
.pp-buy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--rd-panel);
}

.pp-price { display: flex; flex-direction: column; gap: 8px; }

.pp-price__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}

.pp-page .pp-price__current {
    margin: 0;
    color: var(--rd-strong);
    font-family: var(--rd-font-display) !important;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pp-page .pp-price__current--na { font-size: 24px; color: var(--rd-muted); }

.pp-price__old {
    color: var(--rd-muted);
    font-size: 18px;
    font-weight: 500;
}

.pp-page .pp-price__custom {
    color: var(--rd-primary-2);
    font-family: var(--rd-font-display);
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
}

.pp-page .pp-price__note {
    margin: 0;
    color: var(--rd-muted);
    font-family: var(--rd-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* количество + в корзину (livewire:web.cart.add-product-via-counter) */
.pp-cart { margin: 0; padding: 0; border: 0 !important; }
.pp-cart > div { gap: 8px !important; }

.pp-cart .product-single-qty {
    flex: 0 0 120px;
    max-width: 120px !important;
    margin: 0;
}

.pp-cart .bootstrap-touchspin {
    height: 52px;
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid var(--rd-border);
    background: var(--rd-bg);
}

.pp-cart .bootstrap-touchspin .btn {
    width: 40px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rd-text-2);
}

.pp-cart .horizontal-quantity {
    min-width: 0;
    height: 50px !important;
    padding: 0;
    background: transparent;
    border: 0 !important;
    color: var(--rd-strong);
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center;
}

.pp-cart .btn-add-cart,
.pp-cart .product-added-to-cart {
    flex: 1 1 auto;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--rd-primary);
    color: var(--rd-primary-2);
    font-family: var(--rd-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease;
}

.pp-cart .product-added-to-cart {
    width: 100% !important;
    background: var(--rd-primary-tint) !important;
    border: 1px solid var(--rd-primary) !important;
    color: var(--rd-strong) !important;
}

.pp-cart .btn-add-cart:hover,
.pp-cart .product-added-to-cart:hover {
    background: var(--rd-primary-tint);
    color: var(--rd-strong);
}

.pp-cart .btn-add-cart:disabled { opacity: .45; }

/* кнопки */
.pp-page .pp-btn {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid transparent;
    font-family: var(--rd-font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pp-page .pp-btn--primary {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: var(--rd-on-primary);
}

.pp-page .pp-btn--primary:hover { background: var(--rd-primary-2); border-color: var(--rd-primary-2); }

.pp-page .pp-btn--ghost {
    width: auto;
    height: 44px;
    background: transparent;
    border-color: var(--rd-border);
    color: var(--rd-text-2);
    font-size: 14px;
}

.pp-page .pp-btn--ghost:hover { border-color: var(--rd-primary-2); color: var(--rd-strong); }

.pp-page .pp-btn:focus-visible,
.pp-page .pp-tabs__btn:focus-visible,
.pp-page .pp-more:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

/* избранное / сравнение */
.pp-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.pp-toggles__item { min-width: 0; margin: 0; padding: 0; }

.pp-toggles .btn-icon {
    position: static;
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--rd-border);
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}

.pp-toggles .btn-icon i { margin: 0; font-size: 16px; }
.pp-toggles .btn-icon:hover { border-color: var(--rd-primary-2); color: var(--rd-strong); }

/* ---------- табы ---------- */
.pp-tabs {
    margin: 0 0 48px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-top: 0;
}

.pp-tabs__nav {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--rd-line);
    scrollbar-width: none;
}

.pp-tabs__nav::-webkit-scrollbar { display: none; }

.pp-page .pp-tabs__btn {
    position: relative;
    flex: 0 0 auto;
    height: 60px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 28px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--rd-line);
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.pp-page .pp-tabs__btn:hover { color: var(--rd-strong); background: var(--rd-tint-weak); }

.pp-page .pp-tabs__btn.active {
    color: var(--rd-strong);
    background: var(--rd-panel);
}

.pp-page .pp-tabs__btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--rd-primary);
}

.pp-tabs__count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--rd-chip);
    color: var(--rd-text-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.pp-tabs__btn.active .pp-tabs__count { background: var(--rd-primary); color: var(--rd-on-primary); }

.pp-page .pp-tabs__content { padding: 32px; }

.pp-page .pp-tabs__content > .tab-pane {
    padding: 0;
    color: var(--rd-text-2);
    line-height: 1.6;
}

/* характеристики: две колонки строк */
.pp-spec { margin: 0; }

@media (min-width: 992px) {
    .pp-spec { column-count: 2; column-gap: 56px; }
}

.pp-spec__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rd-line);
    break-inside: avoid;
}

.pp-spec dt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.pp-page .pp-spec .property-title {
    margin: 0;
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.pp-spec dd {
    margin: 0;
    color: var(--rd-strong);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.pp-spec .icon-group {
    position: static;
    display: inline-flex;
    justify-content: flex-end;
}

.pp-spec .icon-property.inline {
    width: auto;
    padding-left: 26px;
    color: inherit;
    font-size: 14px;
    line-height: 20px;
}

.pp-hint { display: inline-flex; color: var(--rd-muted); }
.pp-hint:hover { color: var(--rd-primary-2); }
.pp-hint .property-hint-question-mark { width: 16px; height: 16px; color: inherit; }

/* описание */
.pp-page .pp-description {
    max-width: 860px;
    color: var(--rd-text);
    font-size: 16px;
    line-height: 1.7;
}

.pp-page .pp-description p {
    margin: 0 0 1em;
    color: inherit;
    font-family: var(--rd-font);
    font-weight: 500;
}

/* наличие */
.pp-stock-list { border: 1px solid var(--rd-line); }

.pp-stock-list__head,
.pp-stock-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
}

.pp-stock-list__head {
    height: 44px;
    background: var(--rd-bg);
    color: var(--rd-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pp-stock-list__row {
    min-height: 56px;
    border-top: 1px solid var(--rd-line);
    transition: background-color .15s ease;
}

.pp-stock-list__row:hover { background: var(--rd-tint-weak); }

.pp-stock-list__address {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--rd-text);
    font-size: 15px;
}

.pp-stock-list__address svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--rd-muted); }

.pp-stock-list__qty {
    min-width: 96px;
    padding: 6px 12px;
    background: rgba(52, 168, 83, 0.1);
    color: var(--rd-ok);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.pp-stock-list__map { margin-top: 20px; }

.pp-empty { margin: 0; color: var(--rd-muted); }

/* отзывы и карта */
.pp-tabs .map-container { border: 1px solid var(--rd-line); }

@media (max-width: 767.98px) {
    .pp-page .pp-tabs__btn { height: 52px; padding: 0 18px; font-size: 14px; }
    .pp-page .pp-tabs__content { padding: 20px; }
    .pp-page .pp-price__current { font-size: 30px; }
    .pp-stock-list__head, .pp-stock-list__row { padding: 0 14px; }
    .pp-stock-list__address { font-size: 14px; }
    .pp-stock-list__qty { min-width: 72px; }
}

/* ---------- слайдеры «Сопутствующие» / «Похожие» ---------- */
.pp-page .products-section { padding-top: 0 !important; margin-bottom: 48px; }

.pp-page .products-section .section-title {
    margin: 0 0 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rd-line);
    color: var(--rd-strong);
    font-family: var(--rd-font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .pp-page * { transition: none !important; }
}
/* ==== [7] СТРАНИЦА ТОВАРА — КОНЕЦ ==== */

/* ==== [8] ПОДБОРКИ НА ГЛАВНОЙ — НАЧАЛО (v1). Заменяйте целиком от НАЧАЛА до КОНЦА ==== */
/* web/partials/home-sliders.blade.php · префикс hs- · карточки как в каталоге, без скруглений */

.hs {font-family: var(--rd-font); }
.hs + .hs { padding-top: 0; }

.hs *,
.hs *::before,
.hs *::after { border-radius: 0 !important; }

.hs-box {
    position: relative;
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
}
/* ---------- шапка ---------- */
.hs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    padding: 32px;
    border-bottom: 1px solid var(--rd-line);
}

.hs-head__text { min-width: 0; max-width: 860px; }

.hs .hs-title {
    margin: 0;
    color: var(--rd-strong);
    font-family: var(--rd-font-display);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: none;
}

.hs .hs-title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-top: 14px;
    background: var(--rd-primary);
}

.hs .hs-desc {
    margin: 16px 0 0;
    color: var(--rd-text-2);
    font-family: var(--rd-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.hs-head__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.hs .hs-link {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    background: var(--rd-primary);
    border: 1px solid var(--rd-primary);
    color: var(--rd-on-primary);
    font-family: var(--rd-font-display);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

.hs .hs-link svg { width: 16px; height: 16px; transition: transform .15s ease; }
.hs .hs-link:hover { background: var(--rd-primary-2); border-color: var(--rd-primary-2); color: var(--rd-on-primary); text-decoration: none; }
.hs .hs-link:hover svg { transform: translateX(3px); }

.hs-nav { display: flex; }

.hs-nav__btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 1px solid var(--rd-border);
    color: var(--rd-text);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.hs-nav__btn + .hs-nav__btn { border-left: 0; }
.hs-nav__btn svg { width: 18px; height: 18px; }
.hs-nav__btn:hover:not(:disabled) { background: var(--rd-primary-tint); border-color: var(--rd-primary); color: var(--rd-strong); }
.hs-nav__btn + .hs-nav__btn:hover:not(:disabled) { box-shadow: -1px 0 0 var(--rd-primary); }
.hs-nav__btn:disabled { color: var(--rd-border-strong); cursor: default; }

.hs-nav__btn:focus-visible,
.hs .hs-link:focus-visible,
.hs-track:focus-visible {
    outline: 2px solid var(--rd-primary-2);
    outline-offset: 2px;
}

/* все карточки помещаются — стрелки и полоса не нужны */
.hs-box.is-static .hs-nav,
.hs-box.is-static .hs-progress { display: none; }

/* ---------- лента карточек ---------- */
.hs-track {
    --hs-cols: 5;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / var(--hs-cols));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hs-track::-webkit-scrollbar { display: none; }

@media (max-width: 1399.98px) { .hs-track { --hs-cols: 4; } }
@media (max-width: 991.98px) { .hs-track { --hs-cols: 3; } }
@media (max-width: 767.98px) { .hs-track { --hs-cols: 2.15; } }
@media (max-width: 479.98px) { .hs-track { --hs-cols: 1.6; } }

/* ячейки — как в сетке каталога: вплотную, общие линии */
.hs-track > .catalog-grid__cell {
    min-width: 0;
    border-right: 1px solid var(--rd-line) !important;
    border-bottom: 0 !important;
    scroll-snap-align: start;
}

.hs-track > .catalog-grid__cell:last-child { border-right: 0 !important; }

/* в ленте раскрывающийся блок не помещается — показываем карточку без него */
.hs-track .product-card__more,
.hs-track .product-card__backdrop,
.hs-track .product-card__info-btn { display: none !important; }

/* ---------- полоса прогресса ---------- */
.hs-progress {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: var(--rd-line);
}

.hs-progress span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20%;
    background: var(--rd-primary);
    transition: transform .2s ease-out;
}

/* ---------- адаптив ---------- */
@media (max-width: 991.98px) {
    .hs-head {
        flex-direction: column;
        align-items: stretch;
        padding: 24px 20px;
    }

    .hs-head__actions { justify-content: space-between; }
}

@media (max-width: 767.98px) {
    .hs { padding: 16px 0; }
    .hs .container { padding-left: 0; padding-right: 0; }
    .hs-box { border-left: 0; border-right: 0; }
    .hs .hs-desc { font-size: 14px; }
    .hs .hs-link { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hs * { transition: none !important; scroll-behavior: auto !important; }
}
/* ==== [8] ПОДБОРКИ НА ГЛАВНОЙ — КОНЕЦ ==== */

/* ==== [9] СВЕТЛАЯ ТЕМА — ТОЧЕЧНЫЕ ПРАВКИ — НАЧАЛО (v1). Заменяйте целиком от НАЧАЛА до КОНЦА ==== */
/* Палитра — в разделе «0. Светлая тема контента» в начале файла. */

/* --- общие элементы (перекрывают жёсткие цвета из vrezerve.css) --- */
.content-main .breadcrumb { border-bottom-color: var(--rd-line); }
.content-main .breadcrumb-item,
.content-main .breadcrumb-item a { color: var(--rd-text); }
.content-main .breadcrumb-item a:hover { color: var(--rd-strong); }
.content-main .breadcrumb-item + .breadcrumb-item::before { color: var(--rd-muted); }

.content-main .text-dark { color: var(--rd-text) !important; }
.content-main .t-primary { color: var(--rd-strong) !important; }
.content-main .title,
.content-main .products-section h2,
.content-main .category-list a,
.content-main .layout-btn,
.content-main .table.table-wishlist tr th,
.content-main .table.table-wishlist .subtotal-price,
.content-main .table-mini-cart .order-total .total-price { color: var(--rd-text); }

.content-main .category-content-contact { background: var(--rd-surface); }
.content-main .card__watermark::after { color: rgba(0, 0, 0, 0.05); }
.content-main .inner-icon:hover .btn-icon,
.content-main .inner-icon figure .btn-icon:hover { background-color: var(--rd-tint); }
.content-main .owl-carousel .owl-nav .owl-prev:after,
.content-main .owl-carousel .owl-nav .owl-next:after,
.content-main .owl-cat_car .owl-carousel .owl-nav .owl-prev:after,
.content-main .owl-cat_car .owl-carousel .owl-nav .owl-next:after,
.content-main .prod-full-screen:after { border-color: var(--rd-line); }
.content-main .toolbox-pagination,
.content-main .sticky-filter-widget,
.content-main .sticky-header.toolbox.fixed { background: rgba(255, 255, 255, 0.92) !important; }
.content-main .form-check-input { border-color: var(--rd-border-strong); }
.content-main hr { border-color: var(--rd-line); opacity: 1; }

/* прелоадер страницы — раздел [11] */

/* --- верхняя панель: на светлом фоне полупрозрачность даёт серый — делаем плотной --- */
.site-header .site-header__bar { background: rgba(18, 18, 18, 0.97); }

/* --- каталог: панель фильтров и тулбокс --- */
.catalog .catalog-filters__btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--rd-text);
}
.catalog .catalog-filters__btn--ghost:hover {
    border-color: transparent;
    color: var(--rd-strong);
    text-decoration: underline;
}
.filter-pill { background: var(--rd-field); }
.filter-widget.is-open .filter-pill { background: var(--rd-field); }
.catalog-filters .filter-search__input,
.catalog-filters .filter-range .form-control { background: var(--rd-field); }
.catalog-chip { background: var(--rd-field); }

@media (min-width: 992px) {
    .catalog-toolbox {
        padding: 8px 8px 8px 12px;
        background: var(--rd-surface);
        border: 1px solid var(--rd-line);
    }
}

.catalog-toolbox .toolbox-sort select.form-control { background-color: var(--rd-field); }
.catalog-toolbox .layout-btn { background: var(--rd-field); }
.catalog-toolbox .layout-btn.active { background: var(--rd-field); }
.catalog-toolbox .toolbox-show .select2-selection--single {
    background: var(--rd-field);
    border: 1px solid var(--rd-border);
}
.catalog-toolbox .toolbox-show .select2-selection__rendered { color: var(--rd-text); }

@media (max-width: 991.98px) {
    .catalog-filters__sheet,
    .catalog-filters__actions { background: var(--rd-bg); }
}

/* --- каталог: карточка товара --- */
/* кнопки −/+ счётчика: в vrezerve.css они белые */
.content-main .product-single-qty .btn.btn-down-icon:after,
.content-main .product-single-qty .btn.btn-up-icon:before,
.content-main .product-single-qty .btn.btn-up-icon:after { background: var(--rd-text); }
.product-card__cart .bootstrap-touchspin {
    background: var(--rd-surface);
    border-color: var(--rd-line);
}
.product-card__info-btn > span { background: var(--rd-chip); }

/* --- страница товара --- */
.pp-main,
.pp-tabs,
.pp-buy { background: var(--rd-bg); }
.pp-gallery .product-slider-container,
.pp-gallery .prod-thumbnail img { background: var(--rd-surface); }
.pp-gallery .prod-full-screen,
.pp-gallery .owl-nav button.owl-prev,
.pp-gallery .owl-nav button.owl-next { background: var(--rd-bg) !important; }

/* количество, «В корзину», «В избранное», «В сравнение» — тёмная обводка */
.pp-cart .bootstrap-touchspin {
    background: var(--rd-bg);
    border-color: var(--rd-text);
}
.pp-cart .bootstrap-touchspin .btn,
.pp-cart .horizontal-quantity { color: var(--rd-text); }
.pp-cart .btn-add-cart {
    border-color: var(--rd-text);
    color: var(--rd-text);
}
.pp-cart .btn-add-cart:hover { background: var(--rd-tint); color: var(--rd-strong); }
.pp-toggles .btn-icon {
    border-color: var(--rd-text);
    color: var(--rd-text);
}
.pp-toggles .btn-icon:hover { border-color: var(--rd-primary); background: var(--rd-tint-weak); }

/* --- главная: подборки и подбор шин --- */
.hs-box { background: var(--rd-bg); }
.sw .sw-field .select2-container--default .select2-selection--single,
.sw .filter-option.form-check,
.sw-tabs { background: var(--rd-field); }
.sw .selection-widget-result-set { background: var(--rd-surface); }
/* ==== [9] СВЕТЛАЯ ТЕМА — ТОЧЕЧНЫЕ ПРАВКИ — КОНЕЦ ==== */

/* ==== [10] МЕНЮ НА ГЛАВНОЙ — НАЧАЛО (v1). Заменяйте целиком от НАЧАЛА до КОНЦА ==== */
/* web/partials/home-nav.blade.php · чёрная полоса с пунктами меню под баннером */
.home-nav {
    font-family: var(--rd-font);
}

.home-nav__grid {
    display: grid;
    grid-template-columns: repeat(var(--home-nav-count, 9), minmax(0, 1fr));
    background: #121212;
    border: 1px solid #121212;
}

.home-nav__item {
    min-width: 0;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    color: #D0D0D0;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.home-nav__item:first-child {
    border-left: 0;
}

.home-nav__item:hover,
.home-nav__item:focus-visible {
    background: #1E1E1E;
    color: #FFFFFF;
    text-decoration: none;
}

.home-nav__item:focus-visible {
    outline: 2px solid var(--rd-primary);
    outline-offset: -2px;
}

.home-nav__icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: color .15s ease;
}

.home-nav__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
}

.home-nav__item:hover .home-nav__icon,
.home-nav__item:focus-visible .home-nav__icon {
    color: var(--rd-primary);
}

.home-nav__label {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* планшет и телефон: плитки в несколько рядов */
@media (max-width: 991.98px) {
    .home-nav__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: hidden;
    }

    /* линии между плитками: справа и снизу; лишние у краёв прячет overflow + отрицательный отступ */
    .home-nav__item,
    .home-nav__item:first-child {
        margin: 0 -1px -1px 0;
        border-left: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.10);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
}

@media (max-width: 575.98px) {
    .home-nav__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-nav__item {
        min-height: 84px;
        gap: 8px;
        padding: 12px 4px;
        font-size: 12px;
        line-height: 14px;
    }

    .home-nav__icon,
    .home-nav__icon svg {
        width: 24px;
        height: 24px;
    }
}
/* ==== [10] МЕНЮ НА ГЛАВНОЙ — КОНЕЦ ==== */

/* ==== [11] ПРЕЛОАДЕР — НАЧАЛО (v1). Заменяйте целиком от НАЧАЛА до КОНЦА ==== */
/* web/layouts/app.blade.php · .loading-overlay.site-preloader · скрывается классом body.loaded */
.loading-overlay.site-preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121212;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease, visibility .4s ease;
}

.loaded > .loading-overlay.site-preloader {
    background: #121212;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    font-family: var(--rd-font);
}

.site-preloader__logo {
    display: block;
    width: 160px;
    height: auto;
    animation: site-preloader-pulse 1.6s ease-in-out infinite;
}

.site-preloader__bar {
    position: relative;
    width: 160px;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.site-preloader__bar span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--rd-primary, #FCD307);
    animation: site-preloader-bar 1.2s ease-in-out infinite;
}

.site-preloader__text {
    color: #B0B0B0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24em;
    line-height: 1;
    text-transform: uppercase;
}

.site-preloader__dots i {
    font-style: normal;
    animation: site-preloader-dot 1.2s infinite;
}

.site-preloader__dots i:nth-child(2) { animation-delay: .2s; }
.site-preloader__dots i:nth-child(3) { animation-delay: .4s; }

@keyframes site-preloader-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@keyframes site-preloader-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@keyframes site-preloader-dot {
    0%, 20% { opacity: 0; }
    40%, 100% { opacity: 1; }
}

@media (max-width: 575.98px) {
    .site-preloader__logo,
    .site-preloader__bar { width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-preloader__logo,
    .site-preloader__bar span,
    .site-preloader__dots i { animation: none; }
}
/* ==== [11] ПРЕЛОАДЕР — КОНЕЦ ==== */