@charset "UTF-8";
/* АвтоЗапчасть — custom overrides for Mazlay template */

/* Оверлей закрывает боковые панели — курсор-указатель, не крестик */
.off_canvars_overlay { cursor: pointer !important; z-index: 9998 !important; }
/* Панель мини-корзины (вынесена JS на уровень body) — выше оверлея, чтобы кнопки нажимались */
.mini_cart { z-index: 10000 !important; }

/* Валюта в цене — мелкими строчными буквами после суммы (650.00 смн) */
.cur-sym {
    font-size: 0.72em;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 2px;
    text-transform: lowercase;
}

/* ── Admin / profile panel — aligned with storefront brand ──────────── */
:root {
    --az-red:      #1E2228;   /* storefront signal red */
    --az-red-dark: #D98E0A;   /* hover / pressed       */
    --az-ink:      #181a1f;   /* sidebar charcoal      */
    --az-ink-2:    #20232b;   /* sidebar elevated      */
    --az-bg:       #f4f5f7;   /* workspace background  */
    --az-line:     #e4e7ec;   /* hairlines             */
    --az-text:     #1d2129;   /* primary text          */
}

.az-panel { display: flex; min-height: 100vh; }

.az-sidebar {
    width: 260px; flex-shrink: 0;
    background: var(--az-ink); color: #fff;
    padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.az-sidebar-logo {
    padding: 26px 22px 4px;
    font-size: 1.15rem; font-weight: 900;
    color: var(--az-red); letter-spacing: 0.5px; text-transform: uppercase;
}
.az-sidebar-logo span { color: #fff; }
.az-sidebar-role {
    padding: 0 22px 18px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.az-sidebar-role i { margin-right: 6px; opacity: 0.8; }
.az-sidebar nav ul { list-style: none; margin: 0; padding: 14px 0; }
.az-sidebar nav ul li a {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 22px; color: rgba(255,255,255,0.66);
    text-decoration: none; font-size: 0.875rem; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.az-sidebar nav ul li a:hover {
    background: rgba(255,255,255,0.04); color: #fff;
}
.az-sidebar nav ul li a.active {
    background: linear-gradient(90deg, rgba(242,167,27,0.22), rgba(242,167,27,0));
    color: #fff; border-left-color: var(--az-red);
}
.az-sidebar nav ul li a i { width: 18px; text-align: center; opacity: 0.85; }
.az-sidebar-group {
    padding: 16px 22px 6px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 1.2px;
    text-transform: uppercase; color: rgba(255,255,255,0.34);
    pointer-events: none; user-select: none;
}
.az-sidebar-group:first-of-type { padding-top: 8px; }

.az-main { flex: 1; background: var(--az-bg); min-width: 0; }
.az-topbar {
    background: #fff; border-bottom: 2px solid var(--az-red);
    padding: 16px 28px; display: flex; align-items: center;
    justify-content: space-between;
}
.az-topbar h1 {
    font-size: 1.15rem; margin: 0; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--az-text);
}
.az-content { padding: 28px; }

/* Cards */
.az-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 20px; margin-bottom: 28px; }
.az-stat-card {
    background: #fff; border-radius: 4px;
    padding: 20px; border-left: 4px solid var(--az-red);
    box-shadow: 0 1px 3px rgba(16,24,40,0.06);
}
.az-stat-card .stat-val { font-size: 2rem; font-weight: 900; color: var(--az-red); }
.az-stat-card .stat-lbl { color: #6b7280; font-size: 0.8rem; margin-top: 4px; }
.az-card {
    background: #fff; border-radius: 4px;
    padding: 24px; box-shadow: 0 1px 3px rgba(16,24,40,0.06);
    border: 1px solid var(--az-line);
    margin-bottom: 24px;
}
.az-card h3 {
    font-size: 0.95rem; margin: 0 0 18px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--az-text);
    display: flex; align-items: center; gap: 9px;
}
.az-card h3::before {
    content: ''; width: 4px; height: 16px; border-radius: 1px;
    background: var(--az-red); display: inline-block; flex-shrink: 0;
}

/* Tables */
.az-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.az-table th {
    background: #fbfbfc; padding: 11px 14px;
    text-align: left; font-weight: 800; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.3px; color: #6b7280;
    border-bottom: 2px solid var(--az-line); white-space: nowrap;
}
.az-table td { padding: 11px 14px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.az-table tr:hover td { background: #fcf7f7; }

/* Badges */
.badge { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; }
.badge-success { background: #d4edda; color: #155724; }
.badge-danger  { background: #f8d7da; color: #721c24; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-info    { background: #d1ecf1; color: #0c5460; }
.badge-primary { background: #cce5ff; color: #004085; }

/* Forms */
.az-form-group { margin-bottom: 18px; }
.az-form-group label { display: block; font-size: 0.825rem; font-weight: 600; margin-bottom: 6px; color: #444; }
.az-form-group input,
.az-form-group select,
.az-form-group textarea {
    width: 100%; padding: 9px 12px; border: 1px solid #ced4da;
    border-radius: 6px; font-size: 0.9rem; outline: none;
    transition: border-color 0.2s;
}
.az-form-group input:focus,
.az-form-group select:focus,
.az-form-group textarea:focus { border-color: var(--az-red); box-shadow: 0 0 0 3px rgba(242,167,27,0.12); }
.az-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 3px;
    font-size: 0.8rem; font-weight: 700; cursor: pointer; border: none;
    text-transform: uppercase; letter-spacing: 0.4px;
    text-decoration: none; transition: background 0.16s, transform 0.08s, box-shadow 0.16s;
}
.az-btn:hover { text-decoration: none; transform: translateY(-1px); }
.az-btn:active { transform: translateY(0); }
.az-btn-primary { background: var(--az-red); color: #fff; }
.az-btn-primary:hover { background: var(--az-red-dark); box-shadow: 0 3px 10px rgba(242,167,27,0.28); }
.az-btn-secondary { background: #4b5563; color: #fff; }
.az-btn-secondary:hover { background: #374151; }
.az-btn-danger  { background: #dc3545; color: #fff; }
.az-btn-danger:hover { background: #b52a37; }
.az-btn-success { background: #1f9d57; color: #fff; }
.az-btn-success:hover { background: #178048; }
.az-btn-sm { padding: 5px 11px; font-size: 0.72rem; letter-spacing: 0.3px; }

/* Flash alert */
.az-alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; font-size: 0.875rem; }
.az-alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.az-alert-danger  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.az-alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* Pagination fix */
.paginatoin-area { margin-top: 30px; }
.paginatoin-area .pagination { display: flex; list-style: none; gap: 6px; padding: 0; justify-content: center; }
.paginatoin-area .pagination li a {
    display: block; padding: 6px 12px; border: 1px solid #dee2e6;
    color: #333; text-decoration: none; border-radius: 4px;
}
.paginatoin-area .pagination li.active a,
.paginatoin-area .pagination li a:hover { background: var(--az-red); color: #fff; border-color: var(--az-red); }

/* Stock badges on product */
.stock-in    { color: #28a745; font-weight: 600; }
.stock-low   { color: #ffc107; font-weight: 600; }
.stock-out   { color: #dc3545; font-weight: 600; }

/* Breadcrumb page */
.breadcrumb_section { background: #f8f9fa; padding: 20px 0; border-bottom: 1px solid #dee2e6; margin-bottom: 0; }
.breadcrumb_content ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; align-items: center; font-size: 0.875rem; }
.breadcrumb_content ul li::after { content: '/'; margin-left: 6px; color: #aaa; }
.breadcrumb_content ul li:last-child::after { display: none; }
.breadcrumb_content ul li a { color: var(--az-red); text-decoration: none; }
.breadcrumb_content ul li.active { color: #666; }

/* Placeholder image */
.product-placeholder { background: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 3rem; }

/* ── Admin panel extra classes (used by admin/superadmin pages) ── */

/* Sidebar aliases */
.az-sidebar-brand {
    padding: 26px 22px 18px;
    font-size: 1.1rem; font-weight: 900; letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.az-sidebar-nav { padding: 14px 0; }
.az-sidebar-link {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 22px; color: rgba(255,255,255,0.66);
    text-decoration: none; font-size: 0.875rem; font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.az-sidebar-link:hover { background: rgba(255,255,255,0.04); color: #fff; text-decoration: none; }
.az-sidebar-link.active {
    background: linear-gradient(90deg, rgba(242,167,27,0.22), rgba(242,167,27,0));
    color: #fff; border-left-color: var(--az-red); text-decoration: none;
}
.az-sidebar-link i { width: 18px; text-align: center; opacity: 0.85; }

/* Topbar extras */
.az-topbar-title { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; }
.az-topbar-user  { font-size: 0.85rem; color: #6b7280; }
.az-topbar-user a { color: var(--az-red); text-decoration: none; font-weight: 600; }

/* Card sub-elements */
.az-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #f0f0f0; margin: -24px -24px 20px;
}
.az-card-title { font-size: 1rem; font-weight: 700; margin: 0; }
.az-card-body   { padding: 20px; }
.az-card-body.p-0 { padding: 0; }
.az-card-footer { padding: 14px 20px; border-top: 1px solid #f0f0f0; margin: 20px -24px -24px; }

/* Stat card icon style */
.az-stat-card { display: flex; align-items: center; gap: 14px; }
.az-stat-card-icon {
    width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.az-stat-card-body  { flex: 1; }
.az-stat-card-value { font-size: 1.7rem; font-weight: 900; color: var(--az-red); line-height: 1.1; }
.az-stat-card-label { color: #666; font-size: 0.78rem; margin-top: 2px; }
.az-stat-card-sub   { font-size: 0.72rem; color: #aaa; margin-top: 2px; }

/* Utility spacing helpers */
.mb-16 { margin-bottom: 16px !important; }
.mb-24 { margin-bottom: 24px !important; }
.gap-8  { gap: 8px; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.text-muted { color: #888 !important; }
.table-responsive { overflow-x: auto; }
.table-sm td, .table-sm th { padding: 6px 10px; }
.table-borderless td, .table-borderless th { border: none; }
.badge-secondary { background: #e9ecef; color: #495057; }
.form-check { display: flex; align-items: center; gap: 8px; }
.form-check-input { width: 16px; height: 16px; cursor: pointer; }
.form-check-label { cursor: pointer; font-size: 0.875rem; }
.az-btn-outline {
    background: #fff; border: 1px solid #ced4da; color: #333;
}
.az-btn-outline:hover { background: #f5f5f5; opacity: 1; }
.pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.pagination .page-link {
    padding: 6px 12px; border: 1px solid #dee2e6; border-radius: 4px;
    color: #333; text-decoration: none; font-size: 0.875rem;
}
.pagination .page-link.active,
.pagination .page-link:hover { background: var(--az-red); color: #fff; border-color: var(--az-red); }

/* Image upload preview */
.img-upload-preview {
    width: 120px; height: 90px; object-fit: cover; border-radius: 6px;
    border: 1px solid #dee2e6; display: block; margin-bottom: 8px;
}
.img-grid {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px;
}
.img-grid-item {
    position: relative; width: 110px;
}
.img-grid-item img {
    width: 110px; height: 80px; object-fit: cover; border-radius: 6px;
    border: 1px solid #dee2e6;
}
.img-grid-item .img-remove {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    background: #dc3545; color: #fff; border: none; border-radius: 50%;
    font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* ── Buyer account area (storefront layout, no admin sidebar) ──────── */
.az-account { background: var(--az-bg); padding: 34px 0 60px; }
.az-account .container { max-width: 1200px; }
.az-account-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    background: var(--az-ink); border-radius: 4px;
    padding: 6px; margin: 22px 0 24px;
}
.az-account-nav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 3px;
    color: rgba(255,255,255,0.7); text-decoration: none;
    font-size: 0.82rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
    transition: background 0.16s, color 0.16s;
}
.az-account-nav a i { opacity: 0.85; }
.az-account-nav a:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }
.az-account-nav a.active { background: var(--az-red); color: #fff; }
.az-account-nav a.active i { opacity: 1; }
.az-account-nav-out { margin-left: auto; color: rgba(255,150,150,0.85) !important; }

/* Значок непрочитанных сообщений в меню (кабинет покупателя + сайдбар админки) */
.az-nav-badge {
    display: inline-block; min-width: 18px; text-align: center;
    background: var(--az-red, #F2A71B); color: #fff;
    border-radius: 10px; font-size: 0.68rem; font-weight: 700;
    line-height: 1; padding: 3px 6px; margin-left: 2px;
    letter-spacing: 0;
}
.az-account-nav-out:hover { background: rgba(242,167,27,0.25) !important; color: #fff !important; }
.az-account-body { min-width: 0; }

/* Responsive admin */
@media (max-width: 768px) {
    .az-panel { flex-direction: column; }
    .az-sidebar { width: 100%; height: auto; position: relative; }
    .az-stats { grid-template-columns: 1fr 1fr; }
    .az-content { padding: 16px; }
    .az-account { padding: 18px 0 40px; }
    .az-account-nav { gap: 2px; padding: 4px; }
    .az-account-nav a { padding: 9px 12px; font-size: 0.72rem; letter-spacing: 0.2px; }
    .az-account-nav-out { margin-left: 0; }
}

/* ===================================================== * Mazlay storefront — только то, чего нет в style.css Mazlay
 * ============================================================ */

/* Тёмный фон всей шапки под логотип AutoDoc */
.header_top,
.header_middle {
    background: #1a1a1a !important;
}
.header_top,
.header_top a,
.header_top span,
.header_middle .header_top_links a {
    color: #e8e8e8 !important;
}
.header_top a:hover,
.header_middle .header_top_links a:hover { color: #F2A71B !important; }

/* Логотип — векторная картинка на тёмном фоне */
.logo a {
    text-decoration: none; display: inline-block;
    transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), filter 0.35s ease;
    transform-origin: left center;
}
.logo .logo-img {
    height: 64px; width: auto; display: block;
}
.logo a:hover { transform: scale(1.05); }
.logo a:hover .logo-img {
    filter: drop-shadow(0 0 12px rgba(242,167,27,0.45));
}
.logo a:active { transform: scale(1.02); }
@media (max-width: 991px) { .logo .logo-img { height: 52px; } }
@media (max-width: 767px) { .logo .logo-img { height: 44px; } }

/* Независимые слои текста для десктопа и мобильного.
   Каждый .sl-variant — абсолютный оверлей со своим выравниванием,
   так позиция/блоки настраиваются отдельно для каждой версии. */
.slider_area .single_slider.sl-has-variants { position: relative; }
.sl-variant {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}
.sl-variant--mobile  { display: none; }
@media (max-width: 767px) {
    .sl-variant--desktop { display: none; }
    .sl-variant--mobile  { display: flex; }
}

/* Телефон с выбором страны (кастомный дропдаун с флагами) */
.phone-wrap { display: flex; align-items: stretch; gap: 8px; }
.phone-wrap > input { flex: 1 1 auto; min-width: 0; }
.phone-cc { position: relative; flex: 0 0 auto; }

/* Тема плавает .login_submit a (float:left) — без clearfix следующий блок
   (напр. ссылка входа по PIN) наезжает на одну строку с ней */
.login_submit::after { content: ""; display: table; clear: both; }

/* Кнопка выбора страны — нейтральная, перебивает красную кнопку темы (.account_form button) */
.phone-cc-btn,
.account_form .phone-cc-btn {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 46px;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid #dcdfe4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #222 !important;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    width: auto !important;
    transition: border-color .15s, box-shadow .15s;
}
.phone-cc-btn:hover,
.account_form .phone-cc-btn:hover {
    border-color: #F2A71B !important;
    background: #fff !important;
}
.phone-cc-btn img { display: block; border-radius: 3px; object-fit: cover; width: 24px; height: 17px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.phone-cc-btn .cc-d { color: #222; }
.phone-cc-btn .cc-caret { color: #aaa; font-style: normal; font-size: 11px; margin-left: 2px; }
.phone-cc.open .phone-cc-btn { border-color: #F2A71B !important; box-shadow: 0 0 0 3px rgba(242,167,27,.12) !important; }

/* Выпадающая панель */
.phone-cc-panel {
    display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
    width: 280px; max-height: 320px; overflow-y: auto;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 6px;
}
.phone-cc.open .phone-cc-panel { display: block; }
.phone-cc-panel::-webkit-scrollbar { width: 8px; }
.phone-cc-panel::-webkit-scrollbar-thumb { background: #d9dde2; border-radius: 4px; border: 2px solid #fff; }

/* Опция страны — белая строка, флаг | название | код, без красного фона темы */
.phone-cc-opt,
.account_form .phone-cc-opt {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100% !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    color: #2a2a2a !important;
    text-align: left;
}
.phone-cc-opt:hover,
.account_form .phone-cc-opt:hover { background: #fdeaea !important; color: #F2A71B !important; }
.phone-cc-opt img { display: block; border-radius: 3px; object-fit: cover; width: 24px; height: 17px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.phone-cc-opt .cc-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-cc-opt .cc-dial { color: #9aa0a6; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.phone-cc-opt:hover .cc-dial { color: #1E2228; }

/* Поле пароля с кнопкой показать/скрыть */
.pwd-field { position: relative; display: block; }
.pwd-field input { padding-right: 44px !important; }
.pwd-field .pwd-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 26px !important;
    height: 26px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    color: #b3b3b3 !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 0.95rem;
    line-height: 1;
    text-transform: none;
    transition: color 0.15s;
}
.pwd-field .pwd-toggle:hover { background: transparent !important; color: #888 !important; }
.pwd-field .pwd-toggle:focus { outline: none; color: #888 !important; }


/* Слайдер: гарантированный min-height и фон из data-bgimg */
.slider_area .single_slider {
    min-height: 420px;
    /* Mazlay style.css задаёт `background: #000` шорткатом ПОСЛЕ
       background-size/position, сбрасывая их → картинка не растягивается
       и слева остаётся чёрная полоса. Форсируем cover/center. */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
}

/* Заголовок слайдера: 1-я строка тоньше, 2-я строка крупнее и жирнее
   (как в оригинальном шаблоне Mazlay), плюс тень для читаемости. */
.slider_content h1 {
    font-weight: 500;
    line-height: 1.05;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.slider_content h1 span {
    display: block;
    font-weight: 800;
    font-size: 1.25em;
    margin-top: 6px;
}
.slider_content p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* Настраиваемые текстовые блоки слайда. Размер задаётся инлайном через --fs
   (px для десктопа); на меньших экранах пропорционально уменьшаем. */
.slider_content .slider_block {
    font-size: var(--fs, 24px);
    line-height: 1.08;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    word-break: break-word;
}
@media only screen and (max-width: 1199px) {
    .slider_content .slider_block { font-size: calc(var(--fs, 24px) * 0.72); }
}
@media only screen and (max-width: 991px) {
    .slider_content .slider_block { font-size: calc(var(--fs, 24px) * 0.6); }
}
@media only screen and (max-width: 767px) {
    /* --fsm is set per-block when admin specified a mobile size; fallback auto-scales */
    .slider_content .slider_block { font-size: var(--fsm, calc(var(--fs, 24px) * 0.32)); }
}
.active .slider_content .slider_block {
    animation: fadeInLeft 1s both;
    animation-delay: 0.3s;
}

/* Owl-carousel: показываем контейнер сразу (до инициализации плагина),
   но ограничиваем видимое количество слайдов */
.owl-carousel { display: block !important; }

/* Fallback: когда owl ещё не инициализирован — нормальная сетка */
.slider_carousel:not(.owl-loaded) .single_slider:not(:first-child) { display: none !important; }

.product_carousel:not(.owl-loaded)        { display: flex; flex-wrap: wrap; }
.product_carousel:not(.owl-loaded) > div  { flex: 0 0 25%; max-width: 25%; padding: 0 8px; }

/* ── Блок «Товары со скидкой»: карусель со стрелками (как в шаблоне) ───────── */
/* Прячем авто-стрелки owl — используем свои в заголовке секции */
.sale_product_area .product_carousel .owl-nav { display: none !important; }
/* До инициализации owl показываем 3 карточки в ряд, а не 4 */
.sale_product_area .product_carousel:not(.owl-loaded) > div { flex: 0 0 33.333%; max-width: 33.333%; }
/* Аккуратные стрелки ‹ › в заголовке, выровненные по строке заголовка */
.deal_nav { display: inline-flex; align-items: center; gap: 6px; }
.deal_nav button {
    width: 34px; height: 34px;
    border: 1px solid #e5e5e5; background: #fff; color: #555;
    border-radius: 3px; font-size: 18px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}
.deal_nav button:hover { background: #F2A71B; border-color: #F2A71B; color: #fff; }
/* Тонкая линия в зазоре между подзаголовком и стрелками (как в шаблоне).
   Это растягивающийся flex-элемент — без белых масок, поэтому фона за текстом нет. */
.sale_head .sale_head_line { flex: 1 1 auto; height: 1px; background: #ebebeb; margin: 0 18px; }
.sale_head .deal_nav { flex: 0 0 auto; }
@media (max-width: 575px) {
    .sale_head { flex-wrap: wrap; }
    .sale_head .sale_head_line { flex-basis: 100%; margin: 10px 0 0; }
    .sale_head .deal_nav { margin-top: 8px; }
}
/* Телефон: крупная карточка-герой сверху, лента мелких карточек под ней
   (естественный порядок разметки). Лента листается пальцем и стрелками. */
@media (max-width: 767px) {
    .sale_product_area .row > [class*="col-"]:first-child { margin-bottom: 16px; }
}
/* ── Телефон: нативная горизонтальная лента вместо owl ────────────────────
   owl на мобильном Safari двигает ленту, но не перерисовывает экран — стрелки
   будто не работают. На телефоне JS разбирает owl и вешает класс .deal-scroll:
   обычная прокрутка overflow-x, которая всегда видна, листается пальцем и
   стрелками (scrollBy). scroll-snap делает остановку ровно по карточкам. */
@media (max-width: 767px) {
    /* Гасим боковой «вылет» страницы: у бутстраповского .row поля -15px, а сам
       скролл-контейнер без min-width:0 распирает колонку шире экрана — из-за
       этого появлялась горизонтальная прокрутка всей страницы. */
    .sale_product_area .row { margin-left: 0 !important; margin-right: 0 !important; }
    .sale_product_area .row > [class*="col-"] {
        padding-left: 0 !important; padding-right: 0 !important;
        min-width: 0; max-width: 100%;
    }
    .sale_product_area .product_carousel.deal-scroll {
        display: flex !important; flex-wrap: nowrap !important;
        gap: 12px; overflow-x: auto; overflow-y: hidden;
        min-width: 0; max-width: 100%;          /* строго в ширину экрана */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Без scroll-snap: mandatory: он «прилипал» последней карточкой к левому
           краю и оставлял справа пустоту при долистывании до конца. Нативная
           прокрутка сама упирается в конец без пустого хвоста. */
    }
    .sale_product_area .product_carousel.deal-scroll::-webkit-scrollbar { display: none; }
    .sale_product_area .product_carousel.deal-scroll > div {
        flex: 0 0 78% !important; max-width: 78% !important;
        margin: 0 !important; padding: 0 !important;  /* без 15px паддинга .col-* */
    }
}

.categories_product_inner:not(.owl-loaded) { display: flex; flex-wrap: wrap; }
.categories_product_inner:not(.owl-loaded) > .single_categories_product { flex: 0 0 14.28%; max-width: 14.28%; }

.brand_container:not(.owl-loaded) { display: flex; flex-wrap: wrap; }
.brand_container:not(.owl-loaded) > .brand_list { flex: 0 0 25%; max-width: 25%; }

/* Карусель брендов — лого и стрелки */
body .brand_area { position: relative; }
body .brand_area .brand_container { position: relative !important; padding: 0 70px !important; }
body .brand_area .brand_container .owl-stage-outer { overflow: hidden; }
body .brand_area .brand_container .owl-item { display: block !important; }
body .brand_area .brand_container .brand_list {
    width: 100% !important;
    display: block !important;
    padding: 0 6px !important;
    border-left: 0 !important;
}
body .brand_area .brand_container .single_brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 130px !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
body .brand_area .brand_container .single_brand a {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
    text-align: center !important;
}
body .brand_area .brand_container .single_brand img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

body .brand_area .brand_container .owl-nav { margin: 0 !important; padding: 0 !important; position: static !important; }

body .brand_area .brand_container .owl-nav .owl-prev,
body .brand_area .brand_container .owl-nav .owl-next,
body .brand_area .brand_container .owl-nav button.owl-prev,
body .brand_area .brand_container .owl-nav button.owl-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 50% !important;
    background: rgba(242,167,27, 0.78) !important;
    color: #fff !important;
    font-size: 28px !important;
    line-height: 56px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid rgba(255,255,255,0.7) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    z-index: 100 !important;
    cursor: pointer !important;
    transition: background .2s, transform .2s, opacity .2s !important;
    margin: 0 !important;
    padding: 0 !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    visibility: visible !important;
}
body .brand_area .brand_container .owl-nav .owl-prev,
body .brand_area .brand_container .owl-nav button.owl-prev { left: 4px !important; right: auto !important; }
body .brand_area .brand_container .owl-nav .owl-next,
body .brand_area .brand_container .owl-nav button.owl-next { right: 4px !important; left: auto !important; }
body .brand_area .brand_container .owl-nav button:hover,
body .brand_area .brand_container .owl-nav div:hover {
    background: rgba(160, 7, 7, 0.95) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.08) !important;
}
body .brand_area .brand_container .owl-nav button i,
body .brand_area .brand_container .owl-nav div i { color: #fff !important; font-size: 28px !important; line-height: 1 !important; }
body .brand_area .brand_container .owl-nav button span,
body .brand_area .brand_container .owl-nav div span { color: #fff !important; font-size: 28px !important; }

/* ---- Иконки соцсетей: фирменные цвета (Instagram был серый) ---- */
.footer_social ul li a.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #fff !important;
}
.footer_social ul li a.instagram:hover { background: #F2A71B !important; }
/* Точные бренд-цвета через иконку (telegram/whatsapp/facebook) */
.footer_social ul li a:has(.fa-telegram) { background: #0088cc !important; color:#fff !important; }
.footer_social ul li a:has(.fa-whatsapp) { background: #25D366 !important; color:#fff !important; }
.footer_social ul li a:has(.fa-facebook) { background: #1877F2 !important; color:#fff !important; }
.footer_social ul li a:has(.fa-instagram) {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color:#fff !important;
}
.footer_social ul li a:has(.fa-telegram):hover,
.footer_social ul li a:has(.fa-whatsapp):hover,
.footer_social ul li a:has(.fa-facebook):hover,
.footer_social ul li a:has(.fa-instagram):hover { background: #F2A71B !important; }

@media (max-width: 991px) {
    body .brand_area .brand_container { padding: 0 50px !important; }
    body .brand_area .brand_container .owl-nav .owl-prev,
    body .brand_area .brand_container .owl-nav .owl-next,
    body .brand_area .brand_container .owl-nav button.owl-prev,
    body .brand_area .brand_container .owl-nav button.owl-next {
        width: 44px !important; height: 44px !important; min-width: 44px !important; font-size: 22px !important;
    }
    body .brand_area .brand_container .owl-nav button i,
    body .brand_area .brand_container .owl-nav div i { font-size: 22px !important; }
    body .brand_area .brand_container .single_brand { height: auto !important; min-height: 60px !important; padding: 12px 8px !important; }
    body .brand_area .brand_container .single_brand a { height: auto !important; }
}
@media (max-width: 575px) {
    body .brand_area .brand_container { padding: 0 38px !important; }
    body .brand_area .brand_container .single_brand { height: auto !important; min-height: 50px !important; padding: 12px 10px !important; }
    body .brand_area .brand_container .single_brand a { height: auto !important; }
    body .brand_area .brand_container .owl-nav .owl-prev,
    body .brand_area .brand_container .owl-nav .owl-next,
    body .brand_area .brand_container .owl-nav button.owl-prev,
    body .brand_area .brand_container .owl-nav button.owl-next {
        width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 18px !important;
    }
    body .brand_area .brand_container .owl-nav button i,
    body .brand_area .brand_container .owl-nav div i { font-size: 18px !important; }
}

/* blog_container не имеет row, поэтому col-lg-3 нужен flex-контейнер */
.blog_container:not(.owl-loaded) { display: flex; flex-wrap: wrap; }
.blog_container:not(.owl-loaded) > .col-lg-3 { flex: 0 0 25%; max-width: 25%; }

/* ---- Nav: расширяем колонку меню чтобы русские слова не переносились ---- */
/* Сужаем категории (col-lg-3→2) и телефон (col-lg-3→2), расширяем меню (col-lg-6→8) */
.header_bottom .col-lg-3:first-child  { flex: 0 0 20%; max-width: 20%; }
.header_bottom .col-lg-6              { flex: 0 0 56%; max-width: 56%; }
.header_bottom .col-lg-3:last-child   { flex: 0 0 24%; max-width: 24%; }

/* Меньше отступ между пунктами меню — чтобы вместилось 6 пунктов */
.main_menu nav > ul > li { margin-right: 18px !important; }
.main_menu nav > ul > li:last-child { margin-right: 0 !important; }
/* Шрифт чуть меньше для компактности */
.main_menu nav > ul > li > a { font-size: 13px !important; }

/* Подменю через правильный класс .sub_menu (Mazlay использует underscore) */
/* — стили уже в style.css Mazlay, дополнительно только z-index */
.main_menu nav > ul > li ul.sub_menu { z-index: 999; }

/* ══════════════════════════════════════════════
   NEWSLETTER / SUBSCRIBE — desktop fix
   ══════════════════════════════════════════════ */

/* Newsletter: выравниваем 3 колонки, контент не растягивается на всю ширину */
.newsletter_area .newsletter_inner .row { align-items: flex-start; }
.newsletter_container { max-width: 420px; }
.newsletter_container.col_3 { margin-left: auto; }

/* Subscribe form: flex-layout, input + кнопка в одну строку, ограничена по ширине */
.subscribe_form { max-width: 400px; }
.subscribe_form form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
}
.subscribe_form form input {
    flex: 1 1 auto !important;
    border: none !important;
    outline: none !important;
    padding: 0 14px !important;
    height: 50px !important;
    font-size: 13px;
    background: transparent;
    width: auto !important;
    position: static !important;
}
.subscribe_form form button {
    flex: 0 0 auto !important;
    position: static !important;
    width: auto !important;
    padding: 0 18px !important;
    height: 50px !important;
    font-size: 12px !important;
    white-space: nowrap;
    border-radius: 0 !important;
}

/* Контактная кнопка "ТАМОС" */
.newsletter_container.col_3 .app_img ul { list-style: none; margin: 0; padding: 0; }
.newsletter_container.col_3 .app_img ul li { display: block; margin: 0; }
a.az-contact-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 28px;
    background: #F2A71B;
    color: #fff !important;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    width: auto !important;
    transition: background 0.2s;
    margin-top: 8px;
}
a.az-contact-btn:hover { background: #222; color: #fff !important; }

/* ══════════════════════════════════════════════
   МЕГА-МЕНЮ (desktop only)
   ══════════════════════════════════════════════ */
.az-nav-vin { color: #1E2228 !important; font-weight: 700 !important; }

/* Контейнер nav — overflow visible чтобы мегаменю выпадало */
.header_bottom .main_menu nav { position: static; }
.main_menu nav > ul { position: static; }
/* Узкие дропдауны: relative к своему li */
.main_menu nav > ul > li.az-has-megamenu { position: relative; }
/* Широкое мегаменю МАГАЗИН: static → привязывается к контейнеру */
.main_menu nav > ul > li.az-has-megamenu--wide { position: static; }

/* Стрелка-индикатор */
.main_menu nav > ul > li.az-has-megamenu > a::after {
    content: '\f107';
    font-family: 'FontAwesome';
    margin-left: 4px;
    font-size: 11px;
    transition: transform 0.25s;
    display: inline-block;
}
.main_menu nav > ul > li.az-has-megamenu:hover > a::after {
    transform: rotate(180deg);
}

/* Мегаменю — базовые стили */
.az-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,0.14);
    border-top: 3px solid #F2A71B;
    border-radius: 0 0 8px 8px;
    padding: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    min-width: 220px;
}

/* Узкое меню (ДОМ, БЛОГ, СТРАНИЦЫ, О НАС, СВЯЗАТЬСЯ) */
.az-megamenu--sm {
    width: 240px;
    padding: 8px 0;
}

/* Широкое (МАГАЗИН) — растягивается на всю ширину .header_bottom .container */
.az-has-megamenu--wide {
    position: static;
}
.az-megamenu--wide {
    left: 0;
    right: 0;
    width: 100%;
    padding: 0;
    border-radius: 0 0 8px 8px;
}

/* Показ при наведении */
.main_menu nav > ul > li.az-has-megamenu:hover > .az-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Список ссылок */
.az-megamenu__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}
.az-megamenu__list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
    line-height: 1.3;
}
.az-megamenu__list li a i {
    width: 16px;
    text-align: center;
    color: #1E2228;
    font-size: 13px;
    flex-shrink: 0;
}
.az-megamenu__list li a:hover {
    background: #fff5f5;
    color: #1E2228;
    padding-left: 26px;
}

/* Широкое мегаменю: внутренняя сетка */
.az-megamenu__inner {
    display: flex;
    padding: 20px 24px 16px;
    gap: 0;
}
.az-megamenu__col {
    flex: 1;
    border-right: 1px solid #f0f0f0;
    padding-right: 4px;
}
.az-megamenu__col:last-child {
    border-right: none;
}
.az-megamenu__col .az-megamenu__list li a {
    padding: 7px 16px;
    white-space: normal;
}
.az-megamenu__col .az-megamenu__list li a:hover {
    padding-left: 20px;
}

/* Группа: родитель + список подкатегорий */
.az-megamenu__group { margin-bottom: 10px; }
.az-megamenu__head {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #1a1a1a !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.az-megamenu__sub {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}
.az-megamenu__sub li a {
    display: block;
    padding: 5px 16px 5px 16px;
    color: #555;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: normal;
    transition: color 0.15s, padding-left 0.15s;
}
.az-megamenu__sub li a:hover {
    color: #1E2228;
    padding-left: 22px;
}

/* Счётчик подкатегорий */
.az-mega-count {
    display: inline-block;
    background: #f0f0f0;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Промо-колонка */
.az-megamenu__col--promo {
    flex: 0 0 200px;
    border-left: 1px solid #f0f0f0;
    border-right: none;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.az-mega-promo {
    background: linear-gradient(135deg, #F2A71B 0%, #D98E0A 100%);
    border-radius: 8px;
    padding: 16px;
    color: #fff;
}
.az-mega-promo__tag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.az-mega-promo__text {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 12px;
    opacity: 0.92;
}
.az-mega-promo__btn {
    display: inline-block;
    background: #fff;
    color: #1E2228 !important;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.15s;
}
.az-mega-promo__btn:hover { background: #ffe0e0; }
.az-mega-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.az-mega-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #444;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.az-mega-links a i { color: #1E2228; width: 14px; text-align: center; }
.az-mega-links a:hover { background: #fff5f5; color: #F2A71B; }

/* Нижняя строка широкого мегаменю */
.az-megamenu__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    border-radius: 0 0 8px 8px;
}
.az-megamenu__footer a {
    color: #555;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.az-megamenu__footer a:hover { color: #1E2228; }
.az-megamenu__footer a i { font-size: 11px; }

/* ── Позиционирование контейнера header_bottom: нужен relative для wide-megamenu ── */
.header_bottom .container { position: relative; }

/* Глобальная защита от горизонтальной прокрутки на десктопе.
   Раньше html,body { overflow-x:hidden } стояло только в мобильной медиа-
   выборке (@media max-width:991px), поэтому на десктопе скрытые off-screen
   элементы (панель offcanvas-меню, широкая выпадашка мега-меню position:absolute
   visibility:hidden) добавляли ширину прокрутки — страница обрезалась по краям.
   ВАЖНО: используем overflow-x:CLIP, а не HIDDEN. hidden превращает корень в
   scroll-контейнер и ломает прилипающую шапку (.sticky-header становится
   position:fixed по классу .sticky от темы — при hidden она переставала
   появляться при прокрутке). clip обрезает горизонтальный вылет, но НЕ создаёт
   scroll-контейнер, поэтому fixed-шапка и поиск/VIN работают как прежде. */
html, body { overflow-x: clip; }

/* sticky-header не должен обрезать выпадающее мега-меню */
.sticky-header { overflow: visible !important; }
.header_bottom  { overflow: visible !important; }

/* Телефон справа */
.header_phone p { margin: 0; color: #fff; font-size: 13px; }
.header_phone a { color: #1E2228; }

/* Tags strip */
.top_tags_area { background: #fafafa; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 0.85rem; }
.top_tags_area ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.top_tags_area li span { color: #888; font-weight: 700; }
.top_tags_area li a  { color: #444; text-decoration: none; }
.top_tags_area li a:hover { color: #1E2228; }

/* z-index: чтобы header не перекрывал слайдер снизу */
.main_header  { position: relative; z-index: 100; }
.slider_section, .home_section_bg, .breadcrumbs_area { position: relative; z-index: 1; }

/* ── Слайдер: прогресс-таймер на активной точке ── */
@keyframes sliderDotProgress {
    from { width: 0; }
    to   { width: 100%; }
}
.slider_area .owl-dots .owl-dot {
    position: relative;
    overflow: hidden;
}
/* Реальный span вставляется через JS — анимация гарантированно стартует с нуля */
.slider_area .owl-dots .owl-dot .dot-progress {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0;
    background: #ffffff;
    border-radius: 20px;
    animation: sliderDotProgress 5s linear forwards; /* длительность переопределяется инлайн из настроек */
    pointer-events: none;
}

/* Empty states */
.empty_state { text-align: center; padding: 48px 16px; color: #888; }
.empty_state i { font-size: 3rem; color: #ddd; display: block; margin-bottom: 12px; }

/* Breadcrumbs */
.breadcrumbs_area { background: #f5f5f5; }
.breadcrumbs_area .breadcrumb_content ul a:hover { color: #1E2228; }

/* Form inputs */
.form-control {
    width: 100%; padding: 10px 14px;
    border: 1px solid #ddd; border-radius: 3px;
    font-size: 0.9rem; outline: none; background: #fff;
    transition: border-color 0.15s;
}
.form-control:focus { border-color: #F2A71B; }

/* Кнопки в шаблонных страницах */
.button:hover { background: #D98E0A !important; color: #fff !important; }

/* ===================================================== * MOBILE RESPONSIVE — iPhone 15 Pro Max baseline (430 px)
 * ============================================================ */

/* ─── Универсальный reset для мобилки ─── */
@media (max-width: 991px) {
    * { box-sizing: border-box; }
    img, video, iframe { max-width: 100%; height: auto; }
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
        width: 100%;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    /* Доп. guard на основные wrapper'ы — на случай если body{overflow-x} не сработает.
       ВАЖНО: header/.main_header сюда НЕ входят — overflow-x:clip заодно режет
       overflow-y, из-за чего выпадающее меню «Все категории» обрезалось шапкой
       (уходило за баннер). Горизонтальный скролл и так гасит body{overflow-x:hidden}. */
    main, footer,
    .slider_area, .banner_area, .home_section_bg,
    .breadcrumbs_area, .shop_area, .product_details, .footer_widgets_area,
    .footer_bottom_area, .categories_product_area, .product_area,
    .blog_area, .brand_area, .shipping_area, .welcome_title,
    section, .section { max-width: 100vw; overflow-x: clip; }

    /* Шапка должна позволять выпадающему меню категорий выходить за свои границы */
    header, .main_header { max-width: 100vw; overflow: visible !important; }

    .container, .container-fluid {
        max-width: 100%;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .row { margin-left: -8px; margin-right: -8px; }
    [class*="col-"] { padding-left: 8px; padding-right: 8px; max-width: 100%; }
    table { max-width: 100%; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
    p, h1, h2, h3, h4, h5, h6, span, a, li {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* ── Самое главное: Mazlay даёт .canvas_open → position:absolute; right:21px; top:28px
       Наш бургер имеет оба класса (.canvas_open.mobile_menu_trigger), поэтому вырывался
       из потока и плавал поверх всего. Возвращаем в нормальный поток. */
    .mobile_menu_trigger,
    .header_middle .canvas_open { position: static !important; }

    /* Оригинальный canvas_open из offcanvas_menu — скрываем абсолютно надёжно */
    .offcanvas_menu .canvas_open { display: none !important; }

    /* Lock body scroll когда открыт offcanvas */
    body.no-scroll { overflow: hidden !important; position: fixed; width: 100%; }

    /* ── ПОЛНОСТЬЮ прячем mini_cart fixed-панель на мобиле (была причиной right overflow) */
    .mini_cart {
        display: none !important;
        visibility: hidden !important;
    }

    /* ── Мега-меню только для desktop — на мобиле скрываем */
    .az-megamenu { display: none !important; }
    .main_menu nav > ul > li.az-has-megamenu > a::after { display: none; }
}

/* ─── Мобильная кнопка авторизации — иконка вход/аккаунт в шапке ─── */
.header_auth_mobile { display: none; }
@media (max-width: 991px) {
    .header_auth_mobile { display: inline-block; margin-right: 4px; }
    .header_auth_mobile .auth-link-mobile {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; color: #fff;
        font-size: 1.4rem; text-decoration: none;
        border-radius: 6px; transition: background 0.2s;
    }
    .header_auth_mobile .auth-link-mobile:hover,
    .header_auth_mobile .auth-link-mobile:active { background: rgba(255,255,255,0.12); }
}

/* ─── Offcanvas — слайд слева, чистая видимость, авторизация выделена ─── */
@media (max-width: 991px) {
    /* Скрыть оригинальную плавающую кнопку (мы свою добавили в шапку) */
    .offcanvas_menu > .container > .row > .col-12 > .canvas_open { display: none !important; }

    .offcanvas_menu_wrapper {
        width: 86vw !important;
        max-width: 340px !important;
        left: 0 !important;
        margin-left: -100vw !important;
        padding: 16px !important;
        background: #fff !important;
        box-shadow: 2px 0 24px rgba(0,0,0,0.18);
        z-index: 9999 !important;
    }
    .offcanvas_menu_wrapper.active { margin-left: 0 !important; }
    .off_canvars_overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: rgba(0,0,0,0.5); z-index: 9998;
        opacity: 0; visibility: hidden; transition: 0.3s;
    }
    .off_canvars_overlay.active { opacity: 1; visibility: visible; }

    /* Логотип в шапке оффканваса */
    .offcanvas_menu_wrapper::before {
        content: "АВТОЗАПЧАСТЬ";
        display: block; font-weight: 900; font-size: 1.1rem;
        color: #1E2228; letter-spacing: -0.5px;
        padding: 8px 0 14px; border-bottom: 1px solid #eee; margin-bottom: 12px;
    }

    /* Кнопки Войти/Регистрация — большие и яркие */
    .offcanvas_menu_wrapper .header_top_links {
        background: #f8f8f8; padding: 12px; border-radius: 8px; margin: 10px 0;
    }
    .offcanvas_menu_wrapper .header_top_links ul {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        list-style: none; margin: 0; padding: 0;
    }
    .offcanvas_menu_wrapper .header_top_links ul li { margin: 0 !important; }
    .offcanvas_menu_wrapper .header_top_links ul li a {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px; padding: 10px 8px;
        background: #fff; border: 1px solid #F2A71B; color: #F2A71B;
        border-radius: 6px; font-weight: 700; font-size: 0.85rem;
        text-decoration: none; text-align: center;
        text-transform: uppercase; letter-spacing: 0.3px;
    }
    .offcanvas_menu_wrapper .header_top_links ul li:nth-child(2) a {
        background: #F2A71B; color: #fff;
    }
    .offcanvas_menu_wrapper .header_top_links ul li:nth-child(n+3) a {
        grid-column: span 2; background: #fff; color: #333;
        border-color: #ddd; font-weight: 500; text-transform: none;
    }

    /* Закрыть */
    .offcanvas_menu_wrapper .canvas_close {
        position: absolute; top: 8px; right: 8px;
    }
    .offcanvas_menu_wrapper .canvas_close a {
        width: 36px; height: 36px; line-height: 36px;
        border-radius: 50%; border: 1px solid #ddd;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem; color: #666;
    }

}
@media (min-width: 992px) {
    .mobile_menu_trigger { display: none !important; }
}

/* ─────────────────────────────────────────
   TABLET  768 – 991 px
───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
    /* Header nav */
    .header_bottom .col-lg-3:first-child { flex: 0 0 22%; max-width: 22%; }
    .header_bottom .col-lg-6             { flex: 0 0 54%; max-width: 54%; }
    .header_bottom .col-lg-3:last-child  { flex: 0 0 24%; max-width: 24%; }
    .main_menu nav > ul > li            { margin-right: 10px !important; }
    .main_menu nav > ul > li > a        { font-size: 12px !important; }

    /* Products 3-col */
    .product_carousel .col-lg-3 { flex: 0 0 33.33% !important; max-width: 33.33% !important; }

    /* Categories 3-col */
    .single_categories_product { flex: 0 0 33.33% !important; max-width: 33.33% !important; }

    /* Admin sidebar narrower */
    .az-sidebar { width: 220px; }
    .az-sidebar-link { font-size: 0.8rem; padding: 8px 14px; }
}

/* ─────────────────────────────────────────
   MOBILE  ≤ 767 px  (iPhone 15 Pro Max = 430 px)
───────────────────────────────────────── */
@media (max-width: 767px) {

    /* ── Header top (язык / валюта) — убираем ── */
    .header_top { display: none !important; }

    /* ── Header middle: логотип слева, иконки справа, поиск ниже ── */
    .header_middle { padding: 10px 0; background: #222; }
    .header_middle .container { padding: 0 16px; }
    .header_middle .row { display: flex; align-items: center; flex-wrap: wrap; margin: 0; }

    /* Логотип */
    .header_middle .col-lg-2,
    .header_middle [class*="col-4"],
    .header_middle [class*="col-sm-4"] {
        flex: 0 0 auto; max-width: none; padding: 0; width: auto;
    }
    .logo .logo-text { font-size: 1.5rem; }

    /* Правый блок: на ту же строку справа */
    .header_middle .col-lg-10,
    .header_middle [class*="col-6"],
    .header_middle [class*="col-sm-6"],
    .header_middle [class*="col-8"] {
        flex: 1 1 auto; padding: 0; width: auto; max-width: none;
    }
    .header_right_box {
        display: flex; align-items: center; justify-content: flex-end; gap: 4px;
        flex-wrap: wrap;
    }

    /* Поиск — отдельная строка, во всю ширину */
    .header_middle .search_container {
        flex: 1 0 100%; order: 99; width: 100%; margin-top: 10px;
    }
    .header_middle .search_container form { display: flex; width: 100%; }
    .header_middle .hover_category { display: none !important; }
    .header_middle .search_box { flex: 1; display: flex; min-width: 0; }
    .header_middle .search_box input {
        flex: 1; min-width: 0; height: 40px; padding: 8px 12px;
        font-size: 0.9rem; border: none; border-radius: 4px 0 0 4px;
    }
    .header_middle .search_box button {
        height: 40px; padding: 0 14px; font-size: 0.85rem;
        white-space: nowrap; border-radius: 0 4px 4px 0; background: #F2A71B; color: #fff; border: none;
    }

    /* ── Иконки wishlist/cart + бургер — все в один flex-ряд ── */
    .header_configure_area {
        display: flex;
        align-items: center;
        gap: 0;
        flex-shrink: 0; /* не сжимается */
    }

    /* Бургер-кнопка (.canvas_open.mobile_menu_trigger) — в потоке, не абсолютно */
    .mobile_menu_trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0 !important;
        margin: 0 !important;
    }
    .mobile_menu_trigger a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; color: #fff; font-size: 1.4rem;
        text-decoration: none; border-radius: 6px;
        border: 1px solid rgba(255,255,255,0.3);
        transition: background 0.2s;
    }
    .mobile_menu_trigger a:hover,
    .mobile_menu_trigger a:active { background: rgba(255,255,255,0.15); }

    .header_wishlist a,
    .mini_cart_wrapper > a {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; color: #fff; font-size: 1.3rem; position: relative;
        text-decoration: none;
    }
    .cart_price { display: none !important; }
    .cart_count, .wishlist_count {
        position: absolute; top: 4px; right: 4px;
        background: #F2A71B; color: #fff;
        font-size: 0.65rem; min-width: 18px; height: 18px; line-height: 18px;
        border-radius: 50%; text-align: center; padding: 0 4px;
    }

    /* ── Header bottom / Nav ── */
    .header_bottom { background: #F2A71B; padding: 0; }
    .header_bottom .container { padding: 0 16px; }
    .header_bottom .row { align-items: center; min-height: 44px; flex-wrap: nowrap; }

    /* Скрываем десктоп-меню, телефон и ОРИГИНАЛЬНЫЙ бургер Mazlay в красной полосе */
    .header_bottom .col-lg-6,
    .header_bottom .col-lg-3:last-child,
    .main_menu,
    .header_phone { display: none !important; }

    /* ВСЕ КАТЕГОРИИ — компактно */
    .header_bottom .col-lg-3:first-child { flex: 0 0 auto; max-width: 100%; padding: 0; }
    .categories_title { background: #F2A71B !important; }
    .categories_title h2 {
        font-size: 0.8rem; padding: 0 12px 0 44px; margin: 0;
        line-height: 44px; white-space: nowrap;
    }
    /* ☰ иконка слева от «ВСЕ КАТЕГОРИИ» — как на десктопе
       (Mazlay на мобиле кидает её вправо — возвращаем влево) */
    .categories_title::before {
        display: inline-block !important;
        left: 16px !important;
        right: auto !important;
        font-size: 19px !important;
    }

    /* Скрываем выпавшее меню категорий на мобиле */
    .categories_menu_toggle { display: none; }
    .categories_title h2.active + .categories_menu_toggle { display: block; }

    /* ── Offcanvas menu ── */
    .offcanvas_menu_wrapper {
        padding: 20px 16px;
        overflow-y: auto;
        max-height: calc(100vh - 60px);
    }
    .offcanvas_main_menu li a {
        white-space: normal;
        word-break: break-word;
        font-size: 0.95rem;
        padding: 10px 0;
    }
    .offcanvas_main_menu .sub-menu { padding-left: 16px; }
    .offcanvas_main_menu .sub-menu li a { font-size: 0.85rem; }

    /* ── Top tags (категории strip) ── */
    .top_tags_area { padding: 10px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .top_tags_area::-webkit-scrollbar { display: none; }
    .top_tags_area .container { padding: 0 16px; }
    .top_tags_area ul {
        flex-wrap: nowrap; gap: 10px;
        padding-bottom: 2px; font-size: 0.78rem;
    }
    .top_tags_area li { white-space: nowrap; flex-shrink: 0; }

    /* ── Слайдер ── */
    .slider_area .single_slider {
        height: 380px !important;
        min-height: 0 !important;
        background-position: center center !important;
        padding: 16px 0;
    }
    .slider_area .single_slider .container { width: 100%; }
    .slider_content {
        padding: 0 14px;
        text-align: left !important;          /* в левый угол */
        max-width: 70%;
        text-shadow: 0 2px 6px rgba(0,0,0,0.55); /* читаемость поверх фото */
    }
    .slider_content h1 {
        font-size: 1.15rem !important;
        line-height: 1.15 !important;
        margin-bottom: 6px;
    }
    .slider_content p { font-size: 0.78rem !important; margin-bottom: 10px; }
    .slider_content .button {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        min-height: 48px !important;
        padding: 12px 22px !important;
        font-size: 0.85rem !important;
    }

    /* ── Баннеры — горизонтальный скролл ── */
    .banner_area .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 4px 14px 12px;
        margin: 0 -14px;
        scrollbar-width: none;
    }
    .banner_area .row::-webkit-scrollbar { display: none; }
    .banner_area .col-lg-4,
    .banner_area .col-md-4 {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        min-width: 280px;
        scroll-snap-align: start;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    .banner_area .single_banner { margin: 0; }

    /* ── Welcome / about strip ── */
    .welcome_title {
        padding: 0 4px;
        text-align: center;
    }
    .welcome_title h2 { font-size: 1.3rem; word-break: break-word; }
    .welcome_title h3 { font-size: 0.9rem; word-break: break-word; }
    .welcome_title p  {
        font-size: 0.9rem;
        line-height: 1.55;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        text-align: left;
    }

    /* ── Баннеры — картинки всю ширину ── */
    .banner_area { overflow: hidden; }
    .banner_thumb { width: 100%; overflow: hidden; border-radius: 6px; }
    .banner_thumb img,
    .single_banner img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
        object-fit: cover;
    }
    .single_banner { margin: 0 0 12px; width: 100%; }

    /* Слайдер: фоновое изображение и контент не вылазят */
    .slider_area, .slider_section { overflow: hidden; }
    .slider_area .single_slider {
        max-width: 100vw;
        background-size: cover !important;
    }
    .slider_carousel.owl-carousel { touch-action: pan-y; user-select: none; }
    .slider_content { max-width: 100%; }
    .slider_content h1,
    .slider_content p { word-break: break-word; }

    /* ── Секция заголовков ── */
    .section_title h2 { font-size: 1.2rem; }
    .mb-80 { margin-bottom: 40px !important; }

    /* ── Категории — горизонтальный скролл ── */
    .categories_product_inner:not(.owl-loaded) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 4px 14px 12px;
        margin: 0 -14px;
        scrollbar-width: none;
    }
    .categories_product_inner:not(.owl-loaded)::-webkit-scrollbar { display: none; }
    .categories_product_inner:not(.owl-loaded) > .single_categories_product {
        flex: 0 0 38% !important;
        max-width: 38% !important;
        min-width: 130px;
        scroll-snap-align: start;
        margin: 0 !important;
    }
    .single_categories_product { margin: 0 !important; }
    .categories_product_content h4 { font-size: 0.72rem; text-align: center; }
    .categories_product_content h4 a { color: #333; }

    /* Owl-loaded categories: горизонтальный скролл вместо карусели */
    .owl-carousel.categories_product_inner .single_categories_product {
        min-width: 130px !important;
    }

    /* ── Табы товаров ── */
    .product_tab_btn ul { flex-wrap: wrap; gap: 6px; }
    .product_tab_btn ul li a {
        font-size: 0.78rem; padding: 6px 12px;
        border-radius: 20px;
    }

    /* ── Карточки товаров — горизонтальный скролл ── */
    .product_carousel:not(.owl-loaded) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 4px 14px 12px;
        margin: 0 -14px;
        scrollbar-width: none;
    }
    .product_carousel:not(.owl-loaded)::-webkit-scrollbar { display: none; }
    .product_carousel.owl-loaded .col-lg-3 { min-width: 200px; }
    .product_carousel:not(.owl-loaded) > .col-lg-3,
    .product_carousel:not(.owl-loaded) > div {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        min-width: 220px;
        scroll-snap-align: start;
        padding: 0 !important;
    }
    /* Owl-loaded tabs: keep original grid behavior in tab-panes */
    .tab-pane .col-lg-3,
    .tab-content .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0 6px;
    }
    /* Изображение карточки — ограничить высоту, не растягивать placeholder */
    .product_thumb a img,
    .product_thumb > a > img {
        width: 100% !important;
        max-height: 160px !important;
        height: 160px !important;
        object-fit: contain !important;
        background: #f8f8f8;
    }
    .single_product { margin-bottom: 0; }
    .product_content h4.product_name a { font-size: 0.8rem; }
    .product_content_inner { padding: 8px 10px 12px !important; }
    .current_price { font-size: 0.9rem; }
    /* Кнопка «В корзину»: на мобильном нет hover — показываем всегда, в потоке */
    .single_product .product_content { position: static !important; overflow: visible !important; }
    .single_product .action_links {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        bottom: auto !important; left: auto !important; right: auto !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 10px 12px !important;
    }
    .single_product .action_links ul {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    .single_product .action_links ul li { margin: 0 !important; display: block !important; }
    .single_product .action_links ul li.add_to_cart { flex: 1 1 auto !important; }
    .single_product .action_links ul li.add_to_cart a {
        display: flex !important;
        align-items: center; justify-content: center;
        min-height: 44px !important;
        text-align: center !important;
        font-size: 0.78rem !important;
        padding: 10px 12px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
    }
    .single_product .action_links ul li.wishlist a {
        display: flex !important; align-items: center; justify-content: center;
        width: 44px; height: 44px;
        border: 1px solid #e3e3e3; border-radius: 4px;
    }
    /* На мобильном «быстрый просмотр» (глаз) поверх фото не нужен */
    .single_product .quick_button { display: none !important; }

    /* ── Блог — 1 в ряд ── */
    .blog_container:not(.owl-loaded) {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .blog_container .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .single_blog .blog_thumb img { width: 100%; object-fit: cover; max-height: 200px; }

    /* Бренды-карусель стилизуется отдельными правилами выше (2 в ряд).
       Старый блок «3 в ряд» с max-width:33.33% и max-height:50px удалён —
       он ограничивал ширину бокса и высоту логотипа. */
    .brand_container:not(.owl-loaded) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* ── Доставка (shipping) ── */
    .shipping_inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .single_shipping { display: flex; align-items: flex-start; gap: 10px; }
    .shipping_content h4 { font-size: 0.8rem; margin-bottom: 2px; }
    .shipping_content p  { font-size: 0.72rem; }
    .shipping_icone img  { width: 32px; flex-shrink: 0; }

    /* ── Footer ── */
    .footer_top .container { padding: 0 16px; }
    .footer_top .row > .col-lg-3 {
        flex: 0 0 100% !important; max-width: 100% !important;
        margin-bottom: 24px;
    }
    .footer_col_container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .footer_col_container .widgets_container { margin-bottom: 0; }
    .footer_menu ul li a { font-size: 0.85rem; }
    .footer_bottom .col-lg-6 {
        flex: 0 0 100% !important; max-width: 100% !important;
        text-align: center !important; margin-bottom: 10px;
    }
    .footer_payment { text-align: center !important; }
    .footer_payment img { max-width: 200px; }

    /* ── Каталог / страница магазина ── */
    .shop_area { overflow-x: clip; }
    .shop_area .col-lg-3 {
        flex: 0 0 100% !important; max-width: 100% !important;
        order: 2; /* sidebar под товарами */
        padding-left: 8px; padding-right: 8px;
    }
    .shop_area .col-lg-9 {
        flex: 0 0 100% !important; max-width: 100% !important;
        order: 1;
        padding-left: 8px; padding-right: 8px;
    }
    .shop_toolbar, .shop_toolbar_wrapper { flex-wrap: wrap; gap: 8px; }
    .shop_toolbar .niceselect_option { width: auto; }

    /* Shop banner: contain картинки, без вылета */
    .shop_banner_area, .shop_banner_thumb { overflow: hidden; border-radius: 6px; }
    .shop_banner_thumb img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
        object-fit: cover;
    }

    /* Sidebar widget — аккордеон через JS (см. app.js) */
    .sidebar_widget .widget_list {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 0 14px;
    }
    .sidebar_widget .widget_list > h3 {
        position: relative;
        margin: 0;
        padding: 14px 28px 14px 0;
        font-size: 0.95rem;
        font-weight: 700;
        border-bottom: 1px solid transparent;
    }
    .sidebar_widget .widget_list > h3.widget_toggle::after {
        content: '\f107'; /* fa-angle-down */
        font-family: FontAwesome, 'Font Awesome 5 Free', sans-serif;
        position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
        transition: transform 0.2s;
        font-weight: 900;
    }
    .sidebar_widget .widget_list > h3.open::after { transform: translateY(-50%) rotate(180deg); }
    .sidebar_widget .widget_list > h3.open { border-bottom-color: #eee; }
    .sidebar_widget .widget_list .widget_body { padding: 12px 0 14px; }
    .sidebar_widget .widget_list ul { list-style: none; padding: 0; margin: 0; }
    .sidebar_widget .widget_list ul li { padding: 8px 0; }
    .sidebar_widget .widget_list ul li a { color: #333; text-decoration: none; }

    /* Каталог: сетка 2 в ряд */
    .shop_product_wrap.grid .col-lg-4,
    .shop_product_wrap .col-lg-4,
    .shop_wrapper.grid .col-lg-4 {
        flex: 0 0 50% !important; max-width: 50% !important;
        padding-left: 6px !important; padding-right: 6px !important;
    }
    .shop_product_wrap .single_product { margin-bottom: 12px; }
    .shop_product_wrap .product_name a { font-size: 0.82rem; line-height: 1.3; }
    .shop_product_wrap .product_thumb img { width: 100%; height: auto; }

    /* ── Страница товара ── */
    .product_details .col-lg-6 {
        flex: 0 0 100% !important; max-width: 100% !important;
        margin-bottom: 20px;
    }

    /* Mini cart panel ОТКЛЮЧЕНА на мобиле (см. .mini_cart{display:none} выше).
       Иконка корзины .mini_cart_wrapper > a — это просто ссылка на /buyer/cart.php */
    .mini_cart_wrapper > a { pointer-events: auto; }
    .mini_cart_wrapper .mini_cart,
    .mini_cart_wrapper .mini_cart.active { display: none !important; }

    /* ── Страница входа / регистрации ── */
    .customer_login .col-lg-6,
    .customer_login .col-md-6 {
        flex: 0 0 100% !important; max-width: 100% !important;
        margin-bottom: 24px;
    }
    .account_form { padding: 24px 16px !important; }
    /* ВОЙТИ кнопка — полная ширина, заметная */
    .login_submit { text-align: left; }
    .login_submit .button,
    .login_submit a.button {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        height: auto !important;
        line-height: 1.4 !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    .login_submit button[type=submit],
    .account_form button[type=submit] {
        display: block !important;
        width: 100% !important;
        padding: 14px 20px !important;
        height: auto !important;
        line-height: 1.4 !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
    }
    /* Поля формы — полная ширина, не масштабировать на iOS */
    .account_form input[type=text],
    .account_form input[type=email],
    .account_form input[type=password],
    .account_form input[type=tel] {
        width: 100% !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    /* ── Newsletter ── */
    .newsletter_area .row > [class*="col-"] {
        flex: 0 0 100% !important; max-width: 100% !important;
        margin-bottom: 16px;
    }
    .newsletter_form form { flex-direction: column; gap: 8px; }
    .newsletter_form input,
    .newsletter_form button { width: 100%; border-radius: 3px !important; }

    /* ── Admin panel mobile ── */
    .az-panel { flex-direction: column; }
    .az-sidebar { width: 100%; height: auto; position: relative; overflow: visible; flex-shrink: 0; }
    .az-sidebar nav ul { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
    .az-sidebar nav ul li { flex: 0 0 auto; }
    .az-sidebar nav ul li a { padding: 7px 10px; font-size: 0.78rem; border-radius: 4px; }
    .az-sidebar-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
    .az-sidebar-link { padding: 7px 10px; font-size: 0.78rem; border-radius: 4px; }
    .az-main { width: 100%; }
    .az-content { padding: 12px; }
    .az-topbar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    .az-topbar h1 { font-size: 1rem; }
    .az-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .az-stat-card-value { font-size: 1.3rem; }
    .az-table { font-size: 0.78rem; }
    .az-table th, .az-table td { padding: 7px 8px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Общий grid row на мобиле */
    .row { margin-left: -8px; margin-right: -8px; }
    [class*="col-"] { padding-left: 8px; padding-right: 8px; }
}

/* ─────────────────────────────────────────
   SMALL PHONES  ≤ 390 px  (iPhone 14/15 standard)
───────────────────────────────────────── */
@media (max-width: 390px) {
    .logo .logo-text { font-size: 1.3rem; }
    .slider_area .single_slider { height: 320px !important; min-height: 0 !important; }
    .slider_content h1 { font-size: 1.15rem !important; }

    /* Товары 1 в ряд на маленьких */
    .product_carousel .col-lg-3 {
        flex: 0 0 100% !important; max-width: 100% !important;
    }
    .product_carousel:not(.owl-loaded) {
        grid-template-columns: 1fr !important;
    }

    /* Категории 2 в ряд */
    .categories_product_inner:not(.owl-loaded) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Admin stats 1 col */
    .az-stats { grid-template-columns: 1fr; }
    .footer_col_container { grid-template-columns: 1fr; }
}



/* ===================================================== * === MOBILE FIX === (доп. правки по обратной связи от QA)
 * Все правки — только для мобильных, десктоп не трогаем
 * ============================================================ */
@media (max-width: 767px) {

    /* ─── 1. Newsletter / subscribe form: input + кнопка стекируются ─── */
    .subscribe_form { width: 100% !important; }
    .subscribe_form form {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        background: transparent !important;
        position: static !important;
    }
    .subscribe_form form input[type=email],
    .subscribe_form form input {
        position: static !important;
        width: 100% !important;
        height: 44px !important;
        padding: 10px 14px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;  /* предотвращает iOS auto-zoom */
    }
    .subscribe_form form button {
        position: static !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 20px !important;
        font-size: 0.9rem !important;
        border-radius: 4px !important;
        background: #F2A71B !important;
        color: #fff !important;
        border: none !important;
        display: block !important;
    }

    /* ─── 2. КОНТАКТЫ кнопка в "Свяжитесь с нами" — full width, в потоке ─── */
    .newsletter_container.col_3 .app_img,
    .newsletter_container.col_3 .app_img ul {
        list-style: none; margin: 0; padding: 0; width: 100%;
    }
    .newsletter_container.col_3 .app_img ul li {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }
    .newsletter_container.col_3 .app_img ul li a.button,
    .newsletter_container.col_3 .button {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        height: auto !important;
        line-height: 1.4 !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }
    .newsletter_container { padding: 0 4px; margin-bottom: 24px; }
    .newsletter_area { overflow: hidden; }

    /* ─── 3. Categories dropdown — sticky-header overflow:visible нужен чтобы dropdown не обрезался ─── */
    .sticky-header, .header_bottom { overflow: visible !important; }
    .categories_menu { position: relative !important; }
    .categories_menu_toggle { display: none !important; }
    .categories_menu_toggle.is-open {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 220px !important;
        top: 100% !important;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        z-index: 9999;
        padding: 8px 0 !important;
    }
    .categories_menu_toggle > ul { list-style: none; margin: 0; padding: 0; }
    .categories_menu_toggle > ul > li {
        padding: 0; margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .categories_menu_toggle > ul > li:last-child { border-bottom: none; }
    .categories_menu_toggle > ul > li > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
        color: #222 !important;
        text-decoration: none;
        min-height: 48px;
    }
    .categories_menu_toggle > ul > li > a:hover,
    .categories_menu_toggle > ul > li > a:active { background: #f8f8f8; }
    .categories_menu_toggle .categories_mega_menu { display: none; }

    /* ─── 4. Карточки товаров — горизонтальный скролл (1 карточка = 1 единица) ─── */
    .product_carousel.owl-loaded .owl-stage-outer {
        overflow-x: auto !important;
        overflow-y: visible !important;
        width: 100% !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .product_carousel.owl-loaded .owl-stage-outer::-webkit-scrollbar { display: none; }
    .product_carousel.owl-loaded .owl-stage {
        display: flex !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        width: max-content !important;
        gap: 14px !important;
        padding: 6px 16px 14px !important;
    }
    /* Расплющиваем все обёртки — каждая карточка становится прямым flex-элементом */
    .product_carousel.owl-loaded .owl-item,
    .product_carousel.owl-loaded .col-lg-3,
    .product_carousel.owl-loaded .product_items { display: contents !important; }
    .product_carousel.owl-loaded .single_product {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        scroll-snap-align: start;
        background: #fff !important;
        border: 1px solid #ececec !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        overflow: hidden;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column;
    }
    .product_carousel.owl-loaded .owl-nav,
    .product_carousel.owl-loaded .owl-dots { display: none !important; }
    /* Fallback когда Owl не инициализирован */
    .product_carousel:not(.owl-loaded) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px !important;
        padding: 6px 16px 14px !important;
        margin: 0 -14px;
        scrollbar-width: none;
    }
    .product_carousel:not(.owl-loaded)::-webkit-scrollbar { display: none; }
    .product_carousel:not(.owl-loaded) > .col-lg-3,
    .product_carousel:not(.owl-loaded) .product_items { display: contents !important; }
    .product_carousel:not(.owl-loaded) .single_product {
        flex: 0 0 200px !important;
        width: 200px !important;
        max-width: 200px !important;
        scroll-snap-align: start;
        background: #fff !important;
        border: 1px solid #ececec !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        overflow: hidden;
        margin: 0 !important;
    }

    /* ─── 5. Табы "Рекомендуемые товары" — перенос на следующую строку ─── */
    .product_tab_btn ul.nav {
        flex-wrap: wrap !important;
        gap: 4px 0 !important;
    }
    .product_tab_btn ul.nav > li > a {
        padding: 8px 14px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        display: inline-block;
    }

    /* ─── 6. Категории — горизонтальный скролл ─── */
    .categories_product_inner.owl-loaded .owl-stage-outer {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .categories_product_inner.owl-loaded .owl-stage-outer::-webkit-scrollbar { display: none; }
    .categories_product_inner.owl-loaded .owl-stage {
        display: flex !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        width: max-content !important;
        gap: 10px !important;
        padding: 4px 14px 12px !important;
    }
    .categories_product_inner.owl-loaded .owl-item {
        display: block !important;
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 0 !important;
        scroll-snap-align: start;
    }
    .categories_product_inner.owl-loaded .owl-nav,
    .categories_product_inner.owl-loaded .owl-dots { display: none !important; }
    /* Fallback когда Owl не инициализирован */
    .categories_product_inner:not(.owl-loaded) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px !important;
        padding: 4px 14px 12px !important;
        margin: 0 -14px;
        scrollbar-width: none;
    }
    .categories_product_inner:not(.owl-loaded)::-webkit-scrollbar { display: none; }
    .categories_product_inner:not(.owl-loaded) > .single_categories_product {
        flex: 0 0 140px !important;
        max-width: 140px !important;
        scroll-snap-align: start;
    }
    /* Картинки и подписи категорий */
    .single_categories_product .categories_product_thumb img {
        width: 100% !important;
        height: 80px !important;
        object-fit: contain !important;
        background: #f7f7f7;
    }
    .single_categories_product .categories_product_content h4 {
        font-size: 0.72rem !important;
        text-align: center !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
        line-height: 1.3;
        margin: 6px 0 0 !important;
    }

    /* ─── 7. Глобальные правки всех страниц ─── */
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img { max-width: 100% !important; height: auto; }
    .container, section, .row { max-width: 100vw; }
    .tab-pane .single_product {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 0 !important;
    }

    /* Изображения карточек — фикс. высота, contain, серый фон вместо растяжения */
    .single_product .product_thumb { position: relative; background: #f7f7f7; }
    .single_product .product_thumb a img,
    .single_product .product_thumb img {
        width: 100% !important;
        height: 140px !important;
        max-height: 140px !important;
        object-fit: contain !important;
        display: block;
        background: #f7f7f7;
    }
    /* Бейдж "В наличии" не должен пересекать всю карточку */
    .single_product .label_product { z-index: 2; }
    .single_product .label_product .label_new {
        font-size: 0.65rem; padding: 3px 8px;
    }

    /* ─── 8. footer_widgets и shipping_area — без переполнения ─── */
    .footer_widgets, .shipping_area, .footer_top, .footer_bottom { overflow-x: hidden; }
}

/* ─── Боковой виджет категорий/брендов: прокрутка + подкатегории ─── */
.widget_categories .cat_widget_scroll,
.widget_categories .brand_widget_scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 6px;
}
.widget_categories .cat_widget_scroll::-webkit-scrollbar,
.widget_categories .brand_widget_scroll::-webkit-scrollbar { width: 6px; }
.widget_categories .cat_widget_scroll::-webkit-scrollbar-thumb,
.widget_categories .brand_widget_scroll::-webkit-scrollbar-thumb {
    background: #d9d9d9; border-radius: 3px;
}
.widget_categories .cat_widget_scroll::-webkit-scrollbar-thumb:hover,
.widget_categories .brand_widget_scroll::-webkit-scrollbar-thumb:hover { background: #bbb; }

/* Родитель: строка с названием и кнопкой-стрелкой */
.widget_categories .cat_parent_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.widget_categories .cat_parent_row > a { flex: 1; }
.widget_categories .cat_toggle {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s, color 0.15s;
}
.widget_categories .cat_toggle:hover { color: #1E2228; }
.widget_categories .cat_parent.is_open > .cat_parent_row .cat_toggle { transform: rotate(180deg); color: #1E2228; }

/* Подкатегории: скрыты по умолчанию, раскрываются у .is_open */
.widget_categories .cat_children {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 2px solid #f0f0f0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.widget_categories .cat_parent.is_open > .cat_children {
    max-height: 600px;
    margin: 4px 0 8px;
}
.widget_categories .cat_children li a {
    font-size: 13px;
    color: #777;
    padding: 4px 0;
    display: block;
    transition: color 0.15s, padding-left 0.15s;
}
.widget_categories .cat_children li a:hover { color: #1E2228; padding-left: 4px; }
.widget_categories .cat_children li.active_categorie a { color: #1E2228; font-weight: 600; }

/* ─── Переключатель "В наличии" ─── */
.avail_toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 6px 0 0;
    user-select: none;
}
.avail_toggle input { position: absolute; opacity: 0; pointer-events: none; }
.avail_switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: #d9d9d9;
    border-radius: 22px;
    flex-shrink: 0;
    transition: background 0.2s;
}
.avail_switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.avail_toggle input:checked + .avail_switch { background: #F2A71B; }
.avail_toggle input:checked + .avail_switch::after { transform: translateX(18px); }
.avail_text { font-size: 14px; color: #333; }

/* ─── Авторизация: вкладки «По номеру» / «По email» ─── */
.auth_tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}
.auth_tabs .auth_tab {
    flex: 1;
    padding: 11px 10px;
    border: 1px solid #e3e3e3;
    background: #f7f7f7;
    color: #777;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.auth_tabs .auth_tab i { font-size: 15px; }
.auth_tabs .auth_tab:hover { color: #F2A71B; border-color: #f0c0c0; }
.auth_tabs .auth_tab.active {
    background: #F2A71B;
    border-color: #F2A71B;
    color: #fff;
}

/* SMS: строка отправки кода и статус */
.sms_send_row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}
.sms_send_btn {
    background: #222;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sms_send_btn:hover:not(:disabled) { background: #000; }
.sms_send_btn:disabled { opacity: 0.55; cursor: default; }
.sms_send_status { font-size: 13px; font-weight: 600; }

.auth_hint {
    font-size: 12.5px !important;
    color: #999 !important;
    line-height: 1.5;
    margin-top: 14px !important;
}
.pwd_login_toggle { font-size: 13px; }

/* ===================================================== * === RESPONSIVE AUDIT FIXES === (адаптивность по UX-аудиту 06.2026)
 * Доводка планшета, тач-таргетов и якорей под sticky-шапку.
 * Десктоп-вид не меняется; правки добавочные.
 * ============================================================ */

/* ── Hero-CTA: гарантированный тач-таргет ≥48px на всех размерах ── */
.slider_content .button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Якоря секций не должны прятаться под фиксированную шапку ── */
:target { scroll-margin-top: 90px; }
section[id], div[id].product_area, .categories_product_area[id] { scroll-margin-top: 90px; }

/* ─────────────────────────────────────────
   TABLET  768 – 991 px — добавляем «воздух» и выносим поиск
───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991px) {
    /* Боковые поля контейнера: 16 → 28px (просили 24–32) */
    .container { padding-left: 28px; padding-right: 28px; }

    /* Поиск — отдельной строкой во всю ширину (на планшете прятался) */
    .header_middle .search_container {
        flex: 1 0 100%; order: 99; width: 100%; margin-top: 10px;
    }
    .header_middle .search_container form { display: flex; width: 100%; }
    .header_middle .hover_category { display: none !important; }
    .header_middle .search_box { flex: 1; display: flex; min-width: 0; }
    .header_middle .search_box input {
        flex: 1; min-width: 0; height: 44px; padding: 8px 14px;
        font-size: 0.95rem; border: none; border-radius: 4px 0 0 4px;
    }
    .header_middle .search_box button {
        height: 44px; padding: 0 18px; white-space: nowrap;
        border-radius: 0 4px 4px 0; background: #F2A71B; color: #fff; border: none;
    }
    .header_right_box {
        display: flex; align-items: center; justify-content: flex-end;
        gap: 4px; flex-wrap: wrap;
    }

    /* Тач-иконки шапки до 44px */
    .header_wishlist a,
    .mini_cart_wrapper > a,
    .header_auth_mobile .auth-link-mobile {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px;
    }

    /* Hero-CTA на планшете тоже крупная */
    .slider_content .button { min-height: 48px; padding: 12px 24px; }
}

/* ─────────────────────────────────────────
   Узкие Android ≤ 360 px — комфортный «подгляд» первой карточки
───────────────────────────────────────── */
@media (max-width: 360px) {
    .product_carousel.owl-loaded .single_product,
    .product_carousel:not(.owl-loaded) .single_product {
        flex-basis: 78vw !important;
        width: 78vw !important;
        max-width: 78vw !important;
    }
    .slider_content { max-width: 82% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Двойной поиск (запчасти + VIN) и прилипающий поиск при прокрутке
   ═══════════════════════════════════════════════════════════════════════ */

/* Верхняя шапка: рядом с обычным поиском — отдельное поле VIN.
   Ширина РЕЗИНОВАЯ (flex), а не фиксированная: у темы кнопка «Поиск» абсолютная
   (min-width 128px) и инпут имеет padding-right 145px — при фикс. ширине контейнера
   поле «Артикул» схлопывалось, т.к. VIN забирал свою долю. */
@media (min-width: 992px) {
    .search_container.has_vin {
        display: flex; gap: 10px; align-items: stretch;
        flex: 1 1 auto; min-width: 0; width: auto; max-width: 1100px;
    }
    .search_container.has_vin > form { width: auto; }           /* перебиваем фикс. 830px темы */
    .search_container.has_vin > form:first-child { flex: 1 1 auto; min-width: 240px; }
    /* Поле VIN шире, чтобы плейсхолдер «VIN — 17 символов» + кнопка помещались */
    .search_container.has_vin .vin_search_form { flex: 0 0 300px; min-width: 300px; }
    .search_container.has_vin .vin_search_form input { letter-spacing: .5px; font-size: .82rem; padding: 0 12px; }
    .search_container.has_vin .vin_search_form button { padding: 0 18px; font-size: .82rem; }
}
.vin_search_form {
    display: flex; flex: 0 1 210px; min-width: 150px;
    background: #fff; border-radius: 5px; overflow: hidden;
}
.vin_search_form input {
    flex: 1; min-width: 0; border: 0; height: 100%; padding: 0 14px; font-size: .84rem;
    text-transform: uppercase; letter-spacing: 1px; outline: none; font-family: monospace;
}
.vin_search_form button {
    border: 0; background: #F2A71B; color: #fff; padding: 0 15px; font-weight: 700;
    font-size: .8rem; cursor: pointer; white-space: nowrap; transition: .15s;
}
.vin_search_form button:hover { background: #D98E0A; }
/* Родитель прижимает содержимое вправо (justify-content:flex-end) — из-за этого
   резиновый поиск не получал свободное место. Даём ему растянуться.
   ТОЛЬКО десктоп (≥992px): ниже тема прячет .search_container, а мобильная
   раскладка .header_right_box задана выше в @media — её перебивать нельзя. */
@media (min-width: 992px) {
    .header_right_box { justify-content: space-between; gap: 14px; }
    .header_right_box .header_configure_area { flex: 0 0 auto; }
    .search_container.has_vin { margin-right: 20px; }           /* у темы было 40px */
}
@media (min-width: 992px) and (max-width: 1199px) {
    .vin_search_form { flex: 0 1 165px; min-width: 130px; }
    .search_container.has_vin { margin-right: 10px; gap: 8px; }
}

/* Прилипающий поиск: скрыт, показывается только когда шапка «прилипла». */
.sticky_search { display: none; }
.sticky-header.sticky .sticky_search {
    display: flex; gap: 10px; align-items: stretch; padding: 9px 0 5px;
}
.sticky_search .ss_form { display: flex; background: #fff; border-radius: 6px; overflow: hidden; }
.sticky_search .ss_parts { flex: 1 1 auto; min-width: 0; }
.sticky_search .ss_vin  { flex: 0 0 250px; }
.sticky_search input {
    flex: 1; min-width: 0; border: 0; height: 42px; padding: 0 14px; font-size: .88rem; outline: none;
}
.sticky_search .ss_vin input { text-transform: uppercase; letter-spacing: 1px; font-family: monospace; font-size: .82rem; }
.sticky_search button {
    border: 0; background: #F2A71B; color: #fff; padding: 0 18px; cursor: pointer;
    font-weight: 700; font-size: .85rem; white-space: nowrap; transition: .15s;
}
.sticky_search button:hover { background: #D98E0A; }
@media (max-width: 991px) {
    .sticky_search .ss_vin { flex: 0 0 130px; }
    .sticky_search input { height: 38px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ЛИПКАЯ ШАПКА (штатная полоса темы) — выравнивание и плотный фон.
   Прилипает ТОЛЬКО нижняя полоса .header_bottom: слева «ВСЕ КАТЕГОРИИ»,
   меню в одну строку, справа телефон; под ними — строка поиска/VIN.
   Логотип/корзину/полосу категорий НЕ добавляем. Обычную шапку не трогаем.
   Только десктоп (≥992px) — на планшете/мобиле тема шапку не прилепляет.
   Селектор из трёх классов перебивает базовые правила темы без правки темы.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* Фон плотнее (чтобы контент не мешал читать меню) + размытие + тень. */
    .header_bottom.sticky-header.sticky {
        background: rgba(60,60,60,0.92) !important;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
        z-index: 1000 !important;
        padding: 12px 0 14px !important;   /* равные отступы сверху/снизу */
    }
    /* Первая строка — строго в одну строку, всё по центру по вертикали. */
    .header_bottom.sticky-header.sticky > .container > .row {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    /* Колонки по содержимому, меню забирает остаток ширины — чтобы меню не
       упиралось в телефон на узких экранах. Края контейнера (а значит и строки
       поиска под ними) не сдвигаются: категории слева, телефон справа. */
    .header_bottom.sticky-header.sticky > .container > .row > .col-lg-3:first-child,
    .header_bottom.sticky-header.sticky > .container > .row > .col-lg-3:last-child {
        flex: 0 0 auto !important; width: auto !important; max-width: none !important;
    }
    .header_bottom.sticky-header.sticky > .container > .row > .col-lg-6 {
        flex: 1 1 auto !important; max-width: none !important; min-width: 0;
    }
    /* «ВСЕ КАТЕГОРИИ» — высота как у строки, по центру. Боковые padding чуть
       меньше (тема даёт 30/55px) — освобождаем место меню на узких экранах. */
    .header_bottom.sticky-header.sticky .categories_menu { position: relative; }
    .header_bottom.sticky-header.sticky .categories_title {
        height: 44px; line-height: 44px; border-radius: 4px; margin: 0; white-space: nowrap;
        padding: 0 18px 0 46px;
    }
    /* Выпадашка категорий раскрывается поверх контента. */
    .header_bottom.sticky-header.sticky .categories_menu_toggle {
        position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 1001;
    }
    /* Меню — строго одна строка (nowrap), компактнее, по центру. */
    .header_bottom.sticky-header.sticky .main_menu nav > ul {
        display: flex; flex-wrap: nowrap; align-items: center;
    }
    .header_bottom.sticky-header.sticky .main_menu nav > ul > li {
        margin-right: 12px !important; white-space: nowrap;
    }
    .header_bottom.sticky-header.sticky .main_menu nav > ul > li > a { white-space: nowrap; }
    /* Телефон справа — по центру по вертикали, без переноса. */
    .header_bottom.sticky-header.sticky .header_phone {
        display: flex; align-items: center; justify-content: flex-end; height: 44px;
    }
    .header_bottom.sticky-header.sticky .header_phone p { margin: 0; white-space: nowrap; }
    /* Строка поиска — ровно под первой, по ширине контейнера, отступ ~14px. */
    .header_bottom.sticky-header.sticky .sticky_search {
        margin-top: 14px; padding: 0; gap: 10px; align-items: stretch;
    }
}

/* Узкие десктопы/ноутбуки (992–1366): теснее отступы и чуть меньше шрифт меню,
   плюс убираем боковые padding у колонки меню (bootstrap даёт по 15px) — чтобы
   8 пунктов гарантированно помещались в одну строку без наезда на телефон. */
@media (min-width: 992px) and (max-width: 1366px) {
    .header_bottom.sticky-header.sticky > .container > .row > .col-lg-6 { padding-left: 0; padding-right: 0; }
    .header_bottom.sticky-header.sticky .main_menu nav > ul > li { margin-right: 4px !important; }
    .header_bottom.sticky-header.sticky .main_menu nav > ul > li > a { font-size: 12px !important; }
}

/* Подложка резервирует высоту прилипшей полосы — контент не прыгает и под
   шапкой не торчат обрезанные элементы (высоту проставляет JS). */
.sticky_header_spacer { height: 0; }

/* ── Адаптив двойного поиска: планшет и телефон ───────────────────────── */

/* Планшет 768–991px: тема прячет верхний .search_container — показываем его
   отдельной строкой (как на телефоне), оба поля в ряд. */
@media (min-width: 768px) and (max-width: 991px) {
    .header_middle .search_container.has_vin {
        display: flex !important; flex: 1 0 100%; order: 99;
        width: 100%; margin: 10px 0 0; gap: 8px;
    }
    .header_middle .search_container.has_vin > form:first-child { flex: 1 1 auto; min-width: 0; }
    .header_middle .hover_category { display: none !important; }
    .vin_search_form { flex: 0 0 150px; min-width: 0; }
}

/* Телефон ≤767px: поля друг под другом во всю ширину, крупные тач-цели.
   (Тема/custom уже делают .search_container отдельной строкой.) */
@media (max-width: 767px) {
    .header_middle .search_container.has_vin { display: block; }
    .header_middle .search_container.has_vin > form { width: 100%; }
    .vin_search_form { display: flex; width: 100%; margin-top: 8px; }
    .vin_search_form input {
        height: 40px; font-size: 16px;            /* 16px — иначе iOS зумит при фокусе */
        letter-spacing: .5px; border-radius: 4px 0 0 4px;
    }
    .vin_search_form button { min-height: 40px; padding: 0 16px; border-radius: 0 4px 4px 0; }
}

/* Прилипающий поиск — адаптив. На узких экранах VIN-поле уже, но остаётся тач-доступным. */
@media (max-width: 767px) {
    .sticky-header.sticky .sticky_search { gap: 6px; padding: 7px 0 4px; }
    .sticky_search .ss_vin { flex: 0 0 108px; }
    .sticky_search input { height: 38px; font-size: 16px; padding: 0 10px; }
    .sticky_search .ss_vin input { font-size: 13px; letter-spacing: 0; padding: 0 8px; }
    .sticky_search button { padding: 0 12px; font-size: .8rem; min-height: 38px; }
}

/* ── Плотность главной: убрать избыточную пустоту между блоками ───────────
   Тема даёт категориям mb-80 (80px) + серой секции padding-top 75px + отступ
   заголовка — суммарно ~160px пустоты, смотрится «дырой». Ужимаем, сохраняя
   воздух. Правится только главная (.categories_product_area/.home_section_bg). */
.categories_product_area.mb-80,
.categories_product_area { margin-bottom: 10px !important; padding-bottom: 0 !important; }
/* Обнуляем возможные отступы внутренних обёрток карусели (owl добавляет свои). */
.categories_product_area .container,
.categories_product_area .row,
.categories_product_area .col-12,
.categories_product_inner,
.categories_product_area .owl-stage-outer { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.categories_product_area .single_categories_product { margin-bottom: 0 !important; }
.home_section_bg { padding-top: 26px !important; }

@media (max-width: 991px) {
    .categories_product_area.mb-80,
    .categories_product_area { margin-bottom: 8px !important; }
    .home_section_bg { padding-top: 22px !important; }
}
@media (max-width: 767px) {
    .categories_product_area.mb-80,
    .categories_product_area { margin-bottom: 6px !important; }
    .home_section_bg { padding-top: 18px !important; padding-bottom: 36px !important; }
}

/* ── Выпадающие списки шапки (язык/валюта/ссылки) — читаемый текст ────────
   Тёмная шапка красит ВСЕ ссылки в светлый (.header_top a{color:#e8e8e8}),
   но эти списки лежат на БЕЛОЙ подложке — текст сливался с фоном.
   Возвращаем тёмный цвет именно внутри выпадающих панелей. */
.header_top .dropdown_language li a,
.header_top .dropdown_currency li a,
.header_top .dropdown_links li a,
.header_middle .dropdown_language li a,
.header_middle .dropdown_currency li a,
.header_middle .dropdown_links li a {
    color: #222 !important;
    opacity: 1 !important;
}
.header_top .dropdown_language li a:hover,
.header_top .dropdown_currency li a:hover,
.header_top .dropdown_links li a:hover,
.header_middle .dropdown_language li a:hover,
.header_middle .dropdown_currency li a:hover,
.header_middle .dropdown_links li a:hover {
    color: #1E2228 !important;
    background: #f7f7f7;
}

/* ── Мобильный/планшет: форма VIN не должна переворачиваться ──────────────
   Тема на ≤991px делает `.search_container form { flex-direction: column-reverse;
   align-items: center }` — из-за этого кнопка «VIN» уезжала НАД полем и всё
   центрировалось. Возвращаем нормальный ряд «поле + кнопка». */
@media (max-width: 991px) {
    .header_middle .search_container.has_vin > form,
    .header_middle .vin_search_form {
        flex-direction: row !important;
        align-items: stretch !important;
        border-radius: 5px;
        overflow: hidden;
    }
    /* ≤767 формы стоят друг под другом → каждая во всю ширину.
       768–991 они в ряд (ширину задаёт flex выше) — width не навязываем. */
    .header_middle .vin_search_form { background: #fff; }
    .header_middle .vin_search_form input {
        flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
        height: 42px; font-size: 16px;          /* 16px — иначе iOS зумит при фокусе */
        text-align: left; letter-spacing: .5px; padding: 0 12px;
    }
    .header_middle .vin_search_form button {
        flex: 0 0 auto !important; min-height: 42px; padding: 0 18px; border-radius: 0;
    }
    /* Поле запчастей — тоже строго в ряд, без центрирования */
    .header_middle .search_container.has_vin .search_box {
        flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important;
    }
}

/* ── Мобильный: ужать вертикальные разрывы между блоками главной ─────────── */
@media (max-width: 991px) {
    .slider_section.mb-80,
    .banner_area.mb-80 { margin-bottom: 22px !important; }
}
@media (max-width: 767px) {
    .header_middle .search_container.has_vin > form,
    .header_middle .vin_search_form { width: 100% !important; }
    .header_middle .vin_search_form { margin-top: 8px; }   /* формы стоят друг под другом */
    .slider_section.mb-80,
    .banner_area.mb-80 { margin-bottom: 16px !important; }
}

/* ── Мобильная шапка: единый стиль иконок и компактный логотип ────────────
   Было вразнобой: у бургера рамка, у входа — ничего, у избранного и корзины —
   сплошные красные квадраты (тема: .header_wishlist a{background:#F2A71B}).
   Приводим все четыре к одному виду: прозрачный квадрат с тонкой рамкой,
   белая иконка, красный бейдж-счётчик. */
@media (max-width: 991px) {
    .header_middle .mobile_menu_trigger a,
    .header_middle .header_auth_mobile .auth-link-mobile,
    .header_middle .header_wishlist a,
    .header_middle .mini_cart_wrapper > a {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.22) !important;
        border-radius: 9px !important;
        font-size: 1.25rem;
        text-decoration: none;
        transition: background .18s, border-color .18s;
    }
    .header_middle .mobile_menu_trigger a:active,
    .header_middle .header_auth_mobile .auth-link-mobile:active,
    .header_middle .header_wishlist a:active,
    .header_middle .mini_cart_wrapper > a:active {
        background: rgba(255,255,255,.14) !important;
        border-color: rgba(255,255,255,.4) !important;
    }
    /* Ровные промежутки между иконками */
    .header_middle .header_configure_area { gap: 8px !important; }
    .header_middle .header_auth_mobile { margin-right: 0 !important; }

    /* Счётчики — компактные красные бейджи в углу */
    .header_middle .cart_count,
    .header_middle .wishlist_count {
        top: -6px !important; right: -6px !important;
        background: #F2A71B !important; color: #fff !important;
        min-width: 19px; height: 19px; line-height: 19px;
        font-size: .66rem; font-weight: 700;
        border: 2px solid #1a1a1a;      /* отбивка от тёмной шапки */
        border-radius: 50%; padding: 0;
        left: auto !important;
    }
    /* Логотип компактнее — чтобы шапка не занимала пол-экрана */
    .logo .logo-img { height: 38px !important; width: auto; }
}
@media (max-width: 767px) {
    .logo .logo-img { height: 34px !important; }
}

/* ── Карточки товара: одинаковая высота и кнопки на одной линии ───────────
   Было: у товара со скидкой цена занимает две строки («620.00» + «смн»
   переносом), карточка становится выше — и кнопка «В корзину» уезжала ниже,
   чем у соседней. Выравниваем: карточка — колонка на всю высоту, блок кнопок
   прижат к низу; цена не переносится. */
.single_product { height: 100%; display: flex; flex-direction: column; }
.single_product > figure {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}
/* ВАЖНО: не трогаем варианты .grid_content/.list_content — тема показывает
   только один из них (`.product_content.list_content{display:none}`), а наш файл
   грузится позже и с той же «силой» перебивал скрытие → в каталоге бренд, цена и
   кнопка дублировались. Правило только для обычных карточек (главная и т.п.). */
.single_product .product_content:not(.grid_content):not(.list_content) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;          /* тянется, чтобы низ карточек совпал */
}
.single_product .action_links { margin-top: auto; }  /* кнопки — всегда внизу */

/* В owl-карусели делаем элементы одинаковой высоты (иначе tallest не тянет остальных). */
.product_carousel.owl-loaded .owl-stage { display: flex; align-items: stretch; }
.product_carousel.owl-loaded .owl-item { display: flex; }
.product_carousel.owl-loaded .owl-item > .col-lg-3,
.product_carousel.owl-loaded .owl-item .product_items { display: flex; flex-direction: column; width: 100%; }

/* Цена и знак валюты — одной строкой, без переноса */
.price_box .current_price,
.price_box .old_price { white-space: nowrap; }
.price_box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }

/* Ряд товаров: одинаковая высота колонок */
.product_area .row { align-items: stretch; }

/* ── Вкладки «Бестселлеры / Рекомендуемые / Новинки» на мобильном ────────
   Переносились по одной и висели по центру. Делаем один ряд с прокруткой. */
@media (max-width: 767px) {
    .product_tab_btn ul.nav {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
    }
    .product_tab_btn ul.nav::-webkit-scrollbar { display: none; }
    .product_tab_btn ul.nav > li { flex: 0 0 auto; }
    .product_tab_btn ul.nav > li > a {
        white-space: nowrap !important;
        font-size: .8rem !important;
        padding: 8px 12px !important;
    }
    .product_tab_btn { margin: 16px 0 !important; }
}

/* ── Карточки: одинаковая высота строк независимо от длины названия ───────
   «Масляный Фильтр Bosch» — одна строка, «…Bosch P7077» — две, из-за этого
   цена и кнопка съезжали вниз и карточки стояли вразнобой. Резервируем под
   бренд/название/цену фиксированную высоту — тогда всё выстраивается ровно
   даже без растягивания карточек. */
.single_product .manufacture_product {
    min-height: 1.35em; margin-bottom: 2px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.single_product .product_name {
    min-height: 2.7em;                 /* ровно две строки */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 4px;
}
.single_product .product_name a { display: block; }
.single_product .price_box { min-height: 1.8em; }   /* со скидкой и без — одна высота */

/* ── Мобильная шапка: логотип не в самом углу, по центру с иконками ─────── */
@media (max-width: 991px) {
    .header_middle > .container { padding-top: 12px !important; padding-bottom: 12px !important; }
    .header_middle > .container > .row { align-items: center !important; }
    .header_middle .logo { display: flex; align-items: center; padding-left: 2px; }
    .header_middle .logo a { display: inline-flex; align-items: center; }
    .logo .logo-img { height: 42px !important; }
}
@media (max-width: 767px) {
    .logo .logo-img { height: 38px !important; }
}
/* Высота названия считается от размера шрифта самого заголовка — задаём его
   явно, иначе на мобильном (ссылка 0.8rem внутри h4) резерв не совпадал бы. */
.single_product .product_name { line-height: 1.35; }
@media (max-width: 991px) {
    .single_product .product_name { font-size: .8rem; min-height: 2.7em; }
    .single_product .product_name a { font-size: 1em !important; line-height: 1.35; }
}

/* ── Мобильная шапка: логотип и иконки В ОДНОЙ строке, поиск — во всю ширину
   Логотип оставался один на строке (иконки+поиск не влезали рядом и переносились),
   из-за чего он «висел» в углу. Расплющиваем обёртки (display:contents) — тогда
   иконки и поиск становятся прямыми элементами строки: иконки встают справа от
   логотипа, а поиск переносится отдельной строкой на всю ширину. */
@media (max-width: 991px) {
    .header_middle > .container > .row {
        display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    }
    .header_middle > .container > .row > [class*="col-"]:last-child,
    .header_middle .header_right_box { display: contents !important; }
    .header_middle > .container > .row > [class*="col-"]:first-child { flex: 0 0 auto; }
    .header_middle .header_configure_area { margin-left: auto !important; }
    .header_middle .search_container.has_vin {
        flex: 1 0 100% !important; order: 99 !important;
        margin: 12px 0 0 !important; width: 100% !important; max-width: none !important;
    }
}

/* ── Цена: одинаковая высота у товаров со скидкой и без ──────────────────
   Со скидкой блок цены занимал ДВЕ строки (зачёркнутая старая + новая), без
   скидки — одну, поэтому кнопки соседних карточек стояли на разной высоте.
   Резервируем две строки всегда + уменьшаем старую цену, чтобы чаще влезала. */
.single_product .price_box { min-height: 2.9em; align-content: flex-start; }
@media (max-width: 991px) {
    .single_product .price_box { gap: 5px; min-height: 2.8em; }
    .single_product .price_box .old_price { font-size: .72rem; }
    .single_product .price_box .current_price { font-size: .92rem; }
}

/* ── Мобильный поиск: аккуратные одинаковые поля без «белого хвоста» ──────
   У формы запчастей кнопка «Поиск» у темы позиционирована АБСОЛЮТНО
   (position:absolute; top:0) с высотой 40px, а сама форма выходила выше —
   под кнопкой оставалась пустая белая полоса. Задаём формам единую высоту и
   растягиваем содержимое на неё; кнопку возвращаем в обычный поток. */
@media (max-width: 991px) {
    /* Обёртка .search_unibar на мобильном — просто вертикальный контейнер во всю
       ширину: показанная форма занимает строку, лишней высоты не добавляет.
       (На десктопе у неё своя flex-раскладка в @media min-width:992px.) */
    .header_middle .search_unibar {
        display: block !important; width: 100% !important;
        height: auto !important; background: transparent !important;
        box-shadow: none !important; border-radius: 0 !important;
    }
    /* Формы теперь лежат внутри .search_unibar, поэтому целимся ЧЕРЕЗ неё, а не
       прямым потомком контейнера — иначе высота полю не задавалась и под ним
       оставалась пустая белая полоса. */
    .header_middle .search_container.has_vin .search_unibar > form {
        height: 46px !important;
        min-height: 46px;
        background: #fff;
        border-radius: 9px;
        overflow: hidden;                 /* отсекает любой «хвост» */
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
        /* Тема ставит форме align-items:center, из-за чего поле (24px) висело по
           центру, а сверху и снизу оставались белые поля. Тянем содержимое на всю
           высоту — процентную height:100% браузер здесь не резолвил. */
        display: flex !important;
        align-items: stretch !important;
    }
    /* Селект категорий и его JS-обёртку на мобильном не показываем */
    .header_middle .hover_category,
    .header_middle .nice-select { display: none !important; }

    .header_middle .search_container.has_vin .search_box {
        display: flex !important; align-items: stretch !important;
        /* Тема на мобильном вешает .search_box{margin-bottom:25px} и рамку — ровно
           эти 25px и были «пустой белой полосой» под полем. Обнуляем. */
        margin: 0 !important; border: 0 !important; border-radius: 0 !important;
        /* Именно min-height, а не height/align-self: на этом flex-элементе
           (flex:1 1 auto внутри формы темы) обычная высота и растяжение не
           срабатывали — поле оставалось 24px по центру. min-height тянет надёжно. */
        min-height: 46px !important;
        flex: 1 1 auto; min-width: 0;
    }
    .header_middle .search_box input {
        flex: 1 1 auto; min-width: 0;
        height: 100% !important; border: 0; outline: none;
        font-size: 16px; padding: 0 14px;  /* 16px — iOS не зумит при фокусе */
        background: transparent;
    }
    /* Кнопка — в потоке, во всю высоту поля */
    .header_middle .search_box button {
        position: static !important;
        height: 100% !important;
        min-width: auto !important;
        flex: 0 0 auto;
        border: 0; border-radius: 0 !important;
        padding: 0 20px !important;
        font-size: .9rem !important; font-weight: 600;
        background: #F2A71B !important; color: #fff;
    }
    /* Поле VIN — та же высота и форма, чтобы поля смотрелись парой */
    .header_middle .vin_search_form { height: 46px !important; }
    .header_middle .vin_search_form input { height: 100% !important; font-size: 15px; }
    .header_middle .vin_search_form button {
        height: 100% !important; padding: 0 20px !important;
        background: #F2A71B !important; font-size: .88rem;
    }
}

/* ── Мобильный поиск: один режим за раз + переключатель «Запчасти / По VIN»
   Два поля подряд занимали много места и выглядели громоздко. Показываем
   сегментированный переключатель и ОДНО поле — компактно и осмысленно.
   На десктопе переключатель скрыт, оба поля стоят рядом (места хватает). */
.msearch_tabs { display: none; }

@media (max-width: 991px) {
    .msearch_tabs {
        display: inline-flex;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 999px;
        padding: 3px;
        margin-bottom: 9px;
        gap: 2px;
    }
    .msearch_tabs .mst {
        border: 0; background: transparent; cursor: pointer;
        color: rgba(255,255,255,.72);
        font-size: .78rem; font-weight: 600; letter-spacing: .2px;
        padding: 7px 16px; border-radius: 999px;
        transition: background .18s, color .18s;
    }
    .msearch_tabs .mst.is-active {
        background: #F2A71B; color: #fff;
        box-shadow: 0 2px 8px rgba(242,167,27,.35);
    }
    /* Контейнер — колонка: переключатель сверху, активное поле под ним */
    .header_middle .search_container.has_vin {
        display: flex !important; flex-direction: column; align-items: stretch;
    }
    /* Показываем только форму активного режима */
    /* Начальное состояние задаём CSS, а не JS: без data-active (JS не успел/не
       отработал, дубль id у прилипающей шапки) VIN-форма всё равно скрыта, и
       вторая пустая белая полоса под полем не появляется. */
    .header_middle .search_container.has_vin:not([data-active="vin"]) form[data-mode="vin"],
    .header_middle .search_container.has_vin[data-active="vin"] form[data-mode="parts"] {
        display: none !important;
    }
    .header_middle .vin_search_form { margin-top: 0 !important; }
}

/* ── Мобильная шапка: убрать перелив за правый край и «раздутое» поле ─────
   1) У .row отрицательные отступы (margin:-8px), а контейнеру поиска был задан
      width:100% — в сумме он вылезал за правый край (корзина обрезалась).
      Обнуляем отступы строки и не навязываем ширину — только flex-basis.
   2) Внутри формы оставался посторонний элемент (селект категорий / обёртка
      JS-плагина), из-за которого поле раздувалось в высокий белый блок.
      Внутри формы оставляем только поле ввода и кнопку. */
@media (max-width: 991px) {
    .header_middle > .container > .row {
        margin-left: 0 !important; margin-right: 0 !important;
        max-width: 100%; overflow: hidden;
    }
    .header_middle > .container > .row > * {
        padding-left: 0 !important; padding-right: 0 !important;
        min-width: 0; max-width: 100%;
    }
    .header_middle .search_container.has_vin {
        flex: 1 1 100% !important;
        width: auto !important; max-width: 100% !important; min-width: 0;
    }
    .header_middle .search_container.has_vin .search_unibar > form { max-width: 100%; min-width: 0; }

    /* Ничего постороннего внутри форм поиска */
    .header_middle .search_container.has_vin .search_unibar > form > *:not(.search_box):not(input):not(button) {
        display: none !important;
    }
    /* Переключатель прижат влево и не растягивается */
    .msearch_tabs { align-self: flex-start; flex: 0 0 auto; max-width: 100%; }
    .header_middle .header_configure_area { flex: 0 0 auto; max-width: 100%; }
}
/* Контейнер поиска на мобильном стал КОЛОНКОЙ, поэтому базовое `flex: 0 1 210px`
   у формы VIN (задумывалось как ШИРИНА в горизонтальной раскладке) начало
   работать как ВЫСОТА — поле раздувалось в высокий белый блок ~210px.
   В колонке высоту задаём сами, flex-basis сбрасываем. */
@media (max-width: 991px) {
    .header_middle .search_container.has_vin .search_unibar > form,
    .header_middle .vin_search_form {
        flex: 0 0 auto !important;
        height: 46px !important;
        max-height: 46px !important;
    }
}

/* ── Крупная промо-карточка «Товары со скидкой» ──────────────────────────
   У неё своя раскладка: фото слева, текст справа. Раньше стили были inline
   (flex-wrap:wrap), и вместе с общим правилом карточек (flex-direction:column)
   получалась колонка С ПЕРЕНОСОМ — содержимое раскладывалось в несколько
   колонок, вылезало за правый край и оставляло большую пустоту по вертикали.
   Теперь раскладка задана здесь и общие правила карточек к ней не применяются. */
.promo_deal {
    border: 1px solid #eee; border-radius: 8px; padding: 20px;
    height: 100%;
    display: flex !important;
    flex-direction: row !important;      /* перебиваем общее правило карточек */
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 18px;
    overflow: hidden;                    /* ничего не вылезает наружу */
}
.promo_deal > .product_thumb {
    position: relative;
    flex: 0 0 42%; max-width: 42%; min-width: 0;
}
.promo_deal > .product_content {
    flex: 1 1 auto; min-width: 0;        /* min-width:0 — иначе текст распирает карточку */
    padding: 0; display: block;
}
.promo_deal .product_name,
.promo_deal .price_box { min-height: 0; }          /* резервы обычных карточек тут не нужны */
.promo_deal .product_desc { margin: 10px 0 14px; }
.promo_deal .action_links { margin-top: 0; }
.promo_deal .action_links ul { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.promo_deal .action_links .add_to_cart a { white-space: nowrap; }

/* Телефон: фото сверху, текст под ним — в ряд уже не помещается */
@media (max-width: 767px) {
    .promo_deal {
        flex-direction: column !important;
        align-items: stretch;
        gap: 14px; padding: 16px;
    }
    .promo_deal > .product_thumb { flex: 0 0 auto; max-width: 100%; text-align: center; }
    .promo_deal > .product_thumb img { max-width: 220px; margin: 0 auto; }
    .promo_deal .action_links ul { width: 100%; }
    .promo_deal .action_links .add_to_cart { flex: 1 1 auto; }
    .promo_deal .action_links .add_to_cart a { display: block; text-align: center; }
}

/* ── Каталог: карточки как отдельные плитки (рамка + тень + отступы) ──────
   Раньше карточки сливались с фоном — не было границ и промежутков.
   Оформляем каждую в белую плитку с тонкой рамкой, скруглением и лёгкой тенью;
   между плитками — воздух. Только в листинге каталога (.shop_wrapper), чтобы
   не трогать карусели на главной. */
.shop_wrapper { row-gap: 0; }
.shop_wrapper > [class*="col-"] { margin-bottom: 22px; }

.shop_wrapper .single_product {
    height: 100%;
    background: #fff;
    border: 1px solid #e7e7ee;
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 3px 12px rgba(20,22,30,.08);   /* постоянная тень — плитки «парят» */
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.shop_wrapper .single_product:hover {
    border-color: #d3d3dc;
    box-shadow: 0 10px 28px rgba(20,22,30,.14);  /* при наведении заметно сильнее */
    transform: translateY(-3px);
}
.shop_wrapper .single_product > figure { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; }
.shop_wrapper .single_product .product_thumb { border-radius: 0; }
/* Внутренний контент — с полями, кнопка прижата к низу */
.shop_wrapper .single_product .grid_content { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1 1 auto; }
.shop_wrapper .single_product .action_links { margin-top: auto; }

@media (max-width: 991px) {
    .shop_wrapper > [class*="col-"] { margin-bottom: 16px; }
}
@media (max-width: 767px) {
    .shop_wrapper > [class*="col-"] { margin-bottom: 14px; }
    .shop_wrapper .single_product .grid_content { padding: 12px 14px 14px; }
}

/* ── Каталог: кнопка ВСЕГДА в карточке + аккуратная типографика ───────────
   Тема прячет .action_links (position:absolute; visibility:hidden) и по наведению
   выдвигает вниз (bottom:-55px) — на тач-экранах недоступно, а с overflow:hidden
   кнопка обрезалась краем плитки. Возвращаем кнопку в НОРМАЛЬНЫЙ поток: всегда
   видна, прижата к низу, во всю ширину. */
.shop_wrapper .single_product .action_links {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none !important;
    margin-top: auto;
    padding: 0 16px 16px;
}
.shop_wrapper .single_product .action_links ul {
    display: flex; align-items: stretch; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.shop_wrapper .single_product .action_links li { margin: 0 !important; }
.shop_wrapper .single_product .action_links li.add_to_cart { flex: 1 1 auto; }
.shop_wrapper .single_product .action_links li.add_to_cart a {
    display: block; text-align: center;
    background: #F2A71B; color: #fff;
    font-weight: 600; font-size: 13px; letter-spacing: .3px;
    text-transform: uppercase;
    padding: 12px 10px; border-radius: 8px;
    white-space: nowrap; transition: background .16s;
}
.shop_wrapper .single_product .action_links li.add_to_cart a:hover { background: #D98E0A; }
.shop_wrapper .single_product .action_links li.wishlist a {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;
    border: 1px solid #e3e3ea; border-radius: 8px;
    color: #8a8a95; font-size: 16px; transition: .16s;
}
.shop_wrapper .single_product .action_links li.wishlist a:hover {
    border-color: #F2A71B; color: #F2A71B;
}

/* Типографика карточки — единый Rubik, чёткая иерархия */
.shop_wrapper .single_product .grid_content { padding-bottom: 12px; }
.shop_wrapper .single_product .manufacture_product {
    margin-bottom: 4px !important;
    font-size: 11px !important; line-height: 1.3 !important;
    text-transform: uppercase; letter-spacing: .6px;
}
.shop_wrapper .single_product .manufacture_product a {
    color: #9a9aa4 !important; font-weight: 600;
}
.shop_wrapper .single_product .manufacture_product a:hover { color: #1E2228 !important; }
.shop_wrapper .single_product .product_name a,
.shop_wrapper .single_product .product_name h4 a {
    color: #23242b !important; font-weight: 500 !important;
    font-size: 14px !important; line-height: 1.4 !important;
    display: block; margin-bottom: 8px;
}
.shop_wrapper .single_product .price_box { margin-top: 2px; }
.shop_wrapper .single_product .price_box .current_price {
    color: #1E2228; font-weight: 700; font-size: 17px;
}
.shop_wrapper .single_product .price_box .old_price {
    color: #b3b3bb; font-size: 12px; text-decoration: line-through; font-weight: 400;
}

/* ── Каталог: гармоничная карточка — ровное фото, единый ритм отступов ────
   Разнобой в размерах фото «плясал» высоту и оставлял пустоты, отступы были
   неровными. Фото — фиксированная квадратная область (contain, по центру),
   контент — единые поля 16px, ровные вертикальные интервалы. */
.shop_wrapper .single_product .product_thumb {
    background: #fff;
    aspect-ratio: 1 / 1;              /* одинаковая площадь под фото у всех карточек */
    display: flex; align-items: center; justify-content: center;
    padding: 18px; overflow: hidden;
    border-bottom: 1px solid #f1f1f4;
}
.shop_wrapper .single_product .product_thumb a.primary_img,
.shop_wrapper .single_product .product_thumb a.primary_img img,
.shop_wrapper .single_product .product_thumb picture {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.shop_wrapper .single_product .product_thumb img {
    max-width: 100%; max-height: 100%;
    width: auto !important; height: auto !important;
    object-fit: contain;
}
/* Единый внутренний ритм: одинаковые поля, ровные интервалы */
.shop_wrapper .single_product .grid_content { padding: 15px 16px 0 !important; gap: 0; }
.shop_wrapper .single_product .manufacture_product { margin-bottom: 5px !important; }
.shop_wrapper .single_product .product_name a,
.shop_wrapper .single_product .product_name h4 a { margin-bottom: 10px !important; min-height: 2.8em; }
.shop_wrapper .single_product .price_box { margin: 0 0 4px !important; min-height: 26px; }
.shop_wrapper .single_product .product_ratings { margin-bottom: 8px; }
.shop_wrapper .single_product .action_links { padding: 12px 16px 16px !important; }

/* Значок «-N%» и «глаз» аккуратно в углах фото */
.shop_wrapper .single_product .product_thumb .quick_button { z-index: 3; }

/* ── Десктоп: поле VIN той же высоты, что поле запчастей ──────────────────
   У поля запчастей высота 50px задаёт тема (.search_box input{height:50px}).
   У VIN высота не была задана вовсе — на ≥992px схлопывалась до высоты текста,
   поля были РАЗНОЙ высоты. Выравниваем и скругления, и цвет кнопки — пара. */
@media (min-width: 992px) {
    .search_container.has_vin .vin_search_form { height: 50px; }
    .search_container.has_vin .vin_search_form input { height: 100%; }
    .search_container.has_vin .vin_search_form button { height: 100%; border-radius: 0 5px 5px 0; }
    .search_container.has_vin .vin_search_form { border-radius: 5px; }
}

/* ── Каталог: убрать пустоту над кнопкой, кнопка — во всю ширину ─────────
   Раньше сердечко занимало место рядом с кнопкой, а разница в длине названий
   создавала большой пустой зазор перед кнопкой. Сердечко переносим на само
   фото (плавающая иконка в углу — привычный паттерн), кнопка — на всю ширину.
   Резервы высоты у названия/цены уменьшены, чтобы зазор был меньше. */
.shop_wrapper .single_product .product_thumb { position: relative; }
.shop_wrapper .single_product .wishlist_float {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #b8b8c0; font-size: 15px;
    box-shadow: 0 2px 6px rgba(20,22,30,.14);
    transition: color .16s, box-shadow .16s;
}
.shop_wrapper .single_product .wishlist_float:hover { color: #1E2228; box-shadow: 0 4px 10px rgba(242,167,27,.22); }
.shop_wrapper .single_product .action_links li.wishlist { display: none; }  /* дублировала бы сердечко на фото */
.shop_wrapper .single_product .action_links li.add_to_cart { flex: 1 1 100%; }
.shop_wrapper .single_product .action_links li.add_to_cart a {
    padding: 13px 10px; font-size: 12.5px; border-radius: 9px;
}
.shop_wrapper .single_product .product_name a,
.shop_wrapper .single_product .product_name h4 a { min-height: 2.4em !important; }
/* Резервируем ВЫСОТУ ПОД 2 СТРОКИ ВСЕГДА (старая+новая цена) — не только у
   товаров со скидкой. Раньше карточка со скидкой (2 строки) была выше соседних
   (1 строка), а .row{align-items:stretch} тянул ВЕСЬ ряд под неё — у карточек
   без скидки перед кнопкой появлялся большой пустой зазор. Теперь все карточки
   в ряду изначально одной высоты независимо от наличия скидки — зазора нет. */
.shop_wrapper .single_product .price_box { min-height: 44px !important; align-content: flex-start; }
.shop_wrapper .single_product .product_thumb { aspect-ratio: 4 / 3; padding: 14px; }

/* ── Десктоп: ДВА РАЗДЕЛЬНЫХ поля поиска (запчасти и VIN) ─────────────────
   Владелец явно попросил не сливать их в один блок — каждое поле своя белая
   карточка с собственным скруглением и лёгкой тенью, между ними видимый
   промежуток. Кнопка поиска запчастей — компактная (только иконка). Выпадающий
   список категорий скрыт визуально (не нужен на этой строке), но остаётся в
   форме на случай возврата. */
@media (min-width: 992px) {
    .search_unibar {
        display: flex; align-items: stretch; gap: 12px;
        flex: 1 1 auto; min-width: 0;
        background: transparent; border-radius: 0; overflow: visible;  /* больше НЕ единая полоса */
        height: 50px;
    }
    .search_unibar form { display: flex; height: 100%; }
    .search_unibar form[data-mode="parts"] {
        flex: 1 1 auto; min-width: 240px;
        background: #fff; border-radius: 8px; overflow: hidden;
        box-shadow: 0 2px 8px rgba(20,22,30,.08);
    }
    .search_unibar .hover_category { display: none; }
    .search_unibar .search_box { display: flex; flex: 1 1 auto; height: 100%; min-width: 0; }
    .search_unibar .search_box input {
        flex: 1 1 auto; min-width: 0; height: 100%;
        border: 0; background: transparent; padding: 0 16px 0 18px;
        font-size: .92rem; color: #23242b; opacity: 1;
    }
    .search_unibar .search_box button {
        position: static; height: 100%; width: 50px; min-width: 50px;
        border: 0; background: #F2A71B; color: #fff; font-size: 1rem;
        display: flex; align-items: center; justify-content: center;
        padding: 0; border-radius: 0; transition: background .16s;
    }
    .search_unibar .search_box button:hover { background: #D98E0A; }

    /* Отдельная карточка VIN — своё скругление, тень и промежуток от первого поля */
    .search_unibar .vin_search_form {
        flex: 0 0 260px; min-width: 260px;
        border-radius: 8px; background: #fff; overflow: hidden;
        box-shadow: 0 2px 8px rgba(20,22,30,.08);
    }
    .search_unibar .vin_search_form input {
        flex: 1 1 auto; min-width: 0; height: 100%;
        border: 0; background: transparent; padding: 0 14px;
        font-size: .82rem; letter-spacing: .4px; color: #23242b;
        font-family: monospace;
    }
    .search_unibar .vin_search_form input::placeholder { color: #9aa0ab; opacity: 1; }
    .search_unibar .vin_search_form button {
        height: 100%; padding: 0 20px; border: 0; border-radius: 0;
        background: #F2A71B; color: #fff; font-weight: 700; font-size: .84rem;
        transition: background .16s;
    }
    .search_unibar .vin_search_form button:hover { background: #D98E0A; }
}

/* ── Каталог: убрать иконку «быстрый просмотр» (глаз) с фото ─────────────
   По наведению тема показывает поверх фото красный квадрат с иконкой глаза —
   смотрится как отдельное всплывающее окошко. Не нужна — у карточки уже есть
   клик по фото (переход на товар) и отдельная кнопка избранного. */
.shop_wrapper .single_product .quick_button { display: none !important; }

/* ── Десктоп: sticky-поиск тоже единой белой полосой (как основной) ──────
   На узких экранах два отдельных белых поля с зазором ок (тач-цели), но на
   десктопе — сливаем в один блок с тонкой чертой-разделителем, без зазора. */
@media (min-width: 992px) {
    .sticky-header.sticky .sticky_search { gap: 0; }
    .sticky_search .ss_form {
        border-radius: 0; background: transparent;
    }
    .sticky_search .ss_vin { box-shadow: inset 1px 0 0 #ececf0; }
    .sticky_search { background: #fff; border-radius: 8px; overflow: hidden; }
}

/* ── Каталог: третий источник разной высоты карточек — рейтинг ────────────
   Найдена ещё одна причина «зазора»: если товар отзывов не имеет,
   productStarsInline() возвращает ПУСТУЮ строку — элемента в DOM нет вовсе.
   Стоит хотя бы одному товару в ряду иметь отзыв (звёзды+счётчик добавляют
   строку) — Bootstrap растягивает ВЕСЬ ряд под него, а у карточек без отзывов
   перед кнопкой появляется зазор. catalog/index.php оборачивает вызов в
   .rating_slot, который рендерится ВСЕГДА — резервируем ему высоту здесь. */
.shop_wrapper .single_product .rating_slot { min-height: 20px; }

/* ── Финальный, авторитетный стиль кнопки «В корзину» (каталог) ─────────── */
.shop_wrapper .single_product .action_links li.add_to_cart a {
    display: block !important; text-align: center !important;
    background: #F2A71B !important; color: #fff !important;
    font-weight: 700 !important; font-size: 13px !important;
    letter-spacing: .4px !important; text-transform: uppercase !important;
    padding: 14px 10px !important; border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(242,167,27,.22) !important;
    transition: background .16s, box-shadow .16s, transform .16s !important;
}
.shop_wrapper .single_product .action_links li.add_to_cart a:hover {
    background: #D98E0A !important;
    box-shadow: 0 5px 16px rgba(242,167,27,.32) !important;
    transform: translateY(-1px);
}

/* ── Фото: плавный зум внутри рамки при наведении (без всплывающих окошек) ── */
.shop_wrapper .single_product .product_thumb { overflow: hidden; }
.shop_wrapper .single_product .product_thumb img { transition: transform .25s ease; }
/* Отключено: внутренний зум картинки заменён «Kinoflex-style» скейлом всей плитки.
   .shop_wrapper .single_product:hover .product_thumb img { transform: scale(1.06); } */
/* ── Сайдбар каталога: карточка с тенью + прилипание при прокрутке ────────
   Раньше — голый список без визуального разделения, обычные синие ссылки, и
   при скролле вниз сайдбар просто уезжал вместе со страницей. Оформляем как
   единую белую карточку (тень, скругление), причёсываем типографику фильтров,
   на десктопе — sticky (остаётся в поле зрения, но не наезжает на шапку). */
@media (min-width: 992px) {
    .sidebar_widget {
        background: #fff;
        border: 1px solid #ececf0;
        border-radius: 12px;
        box-shadow: 0 3px 14px rgba(20,22,30,.07);
        padding: 22px 22px 6px;
        position: sticky;
        top: 90px;                                  /* ниже прилипающей шапки */
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }
    .sidebar_widget::-webkit-scrollbar { width: 6px; }
    .sidebar_widget::-webkit-scrollbar-thumb { background: #e3e3ea; border-radius: 4px; }
}

/* Заголовки виджетов — единый стиль */
.sidebar_widget .widget_list { margin-bottom: 22px; }
.sidebar_widget .widget_list h3 {
    font-size: 13px !important; font-weight: 700 !important;
    letter-spacing: .6px; text-transform: uppercase;
    color: #23242b; margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #eeeef2 !important;
}

/* Списки категорий/брендов */
.sidebar_widget .cat_widget_scroll,
.sidebar_widget .brand_widget_scroll { list-style: none; margin: 0; padding: 0; }
.sidebar_widget .cat_widget_scroll > li > a,
.sidebar_widget .cat_parent_row > a,
.sidebar_widget .cat_children li a {
    display: block; padding: 7px 0;
    color: #4a4a55 !important; font-size: 13.5px; text-decoration: none !important;
    transition: color .14s, padding-left .14s;
}
.sidebar_widget .cat_widget_scroll > li > a:hover,
.sidebar_widget .cat_parent_row > a:hover,
.sidebar_widget .cat_children li a:hover { color: #1E2228 !important; padding-left: 3px; }
.sidebar_widget .active_categorie > a,
.sidebar_widget .active_categorie > .cat_parent_row > a {
    color: #1E2228 !important; font-weight: 700 !important;
}

/* Фильтр по цене — аккуратные поля и кнопка */
.sidebar_widget .widget_filter .price_range_inputs input {
    height: 38px !important; border: 1px solid #e3e3ea !important; border-radius: 8px !important;
    padding: 0 12px !important; font-size: 13px; text-align: center;
    box-shadow: none !important; transition: border-color .14s;
}
.sidebar_widget .widget_filter .price_range_inputs input:focus {
    border-color: #F2A71B !important; outline: none;
}
.sidebar_widget .widget_filter .price_range_inputs span { color: #b3b3bb; }
.sidebar_widget .widget_filter button[type="submit"] {
    width: 100%; height: 40px; border: 0; border-radius: 8px;
    background: #181a1f; color: #fff; font-weight: 600; font-size: 13px;
    cursor: pointer; transition: background .16s;
}
.sidebar_widget .widget_filter button[type="submit"]:hover { background: #F2A71B; }
.sidebar_widget .price_reset_link:hover { color: #1E2228 !important; }

/* Чекбоксы брендов/наличия — выровнены с текстом */
.sidebar_widget .widget_categories input[type="checkbox"] {
    accent-color: #1E2228; margin-right: 8px; vertical-align: middle;
}

/* ── Каталог: убрать зазор перед кнопкой окончательно ─────────────────────
   Корень: карточку тянет на высоту ряда (.row{align-items:stretch}), а кнопка
   прижата к низу (margin-top:auto) — вся лишняя высота ряда падает ПУСТОТОЙ
   ПЕРЕД кнопкой. Резервы высот у названия/цены/рейтинга уменьшали разброс, но
   не убирали его полностью. Решаем прямо: карточки НЕ растягиваем по ряду —
   каждая ровно по своему содержимому, кнопка идёт сразу за ценой. */
.shop_wrapper { align-items: flex-start !important; }
.shop_wrapper > [class*="col-"] { display: block !important; }
.shop_wrapper .single_product { height: auto !important; }
.shop_wrapper .single_product > figure { flex: 0 0 auto !important; height: auto !important; }
.shop_wrapper .single_product .grid_content { flex: 0 0 auto !important; }
.shop_wrapper .single_product .action_links {
    margin-top: 0 !important;            /* больше НЕ прижимаем к низу */
    padding-top: 14px !important;        /* ровный отступ от цены/рейтинга */
}
/* Резервы под название/цену оставляем небольшими, чтобы соседи в ряду были
   близки по высоте, но без принудительной растяжки. */
.shop_wrapper .single_product .product_name a,
.shop_wrapper .single_product .product_name h4 a { min-height: 2.6em !important; }
.shop_wrapper .single_product .price_box { min-height: 40px !important; }

/* ── Каталог: убрать РЕЗЕРВЫ высоты — они и были источником пустоты ───────
   Резервы (min-height под цену/название/рейтинг) добавлялись, чтобы карточки
   были равной высоты при растягивании ряда. Но растягивание убрано (#317),
   поэтому резервы бесполезны и создают пустоту: у товара без скидки цена в
   ОДНУ строку, а зарезервировано под ДВЕ → пустое место под ценой, которое
   визуально «отрывает» кнопку. Обнуляем все резервы + плотные отступы. */
.shop_wrapper .single_product .price_box {
    min-height: 0 !important; margin: 2px 0 0 !important;
}
.shop_wrapper .single_product .product_name a,
.shop_wrapper .single_product .product_name h4 a {
    min-height: 0 !important; margin-bottom: 6px !important;
}
.shop_wrapper .single_product .rating_slot { min-height: 0 !important; }
.shop_wrapper .single_product .rating_slot:empty { display: none !important; }
.shop_wrapper .single_product .product_content_inner { padding-bottom: 0 !important; }
.shop_wrapper .single_product .action_links { padding-top: 12px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Каталог: финальная выверка карточек (равный размер без зазора) + мелочи
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. РАВНЫЙ РАЗМЕР без пустоты. Секрет: делаем ВСЕ секции карточки одинаковой
   высоты — тогда карточки равны сами по себе, без растяжки и без резервов-дыр.
   • Название — ровно 2 строки (line-clamp, длинное — с многоточием).
   • Цена — ВСЕГДА одна строка: старую и новую цену ставим В РЯД (раньше со
     скидкой они вставали в 2 строки и карточка становилась выше). */
.shop_wrapper > [class*="col-"] { display: flex !important; }
.shop_wrapper .single_product { height: auto !important; width: 100%; }
.shop_wrapper .single_product .product_name a,
.shop_wrapper .single_product .product_name h4 a {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em !important; margin-bottom: 8px !important;
    line-height: 1.3;
}
.shop_wrapper .single_product .price_box {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: baseline; gap: 8px; min-height: 0 !important; margin: 0 0 2px !important;
}
.shop_wrapper .single_product .price_box .old_price { font-size: 12px; order: 1; }
.shop_wrapper .single_product .price_box .current_price { order: 2; }

/* 2. ТЕКСТ КНОПКИ ПО ЦЕНТРУ. Был прижат книзу, т.к. ссылка тянулась выше строки
   текста. Делаем flex-центрирование и фиксированную высоту. */
.shop_wrapper .single_product .action_links li.add_to_cart a {
    display: flex !important; align-items: center !important; justify-content: center !important;
    height: 46px !important; padding: 0 12px !important; line-height: 1 !important;
}

/* 3. СКИДКА и СЕРДЕЧКО не пересекаются: значок «-N%» — в левый верхний угол,
   сердечко остаётся справа (стандартная раскладка). */
.shop_wrapper .single_product .label_product {
    position: absolute !important; top: 10px !important; left: 10px !important;
    right: auto !important; bottom: auto !important; z-index: 4;
}
.shop_wrapper .single_product .wishlist_float { top: 10px; right: 10px; }

/* 4. Прилипающий поиск при прокрутке — как основной: ДВА раздельных блока с
   промежутком, а не слитая полоса (отменяем прежнее объединение). */
@media (min-width: 992px) {
    .sticky-header.sticky .sticky_search { gap: 12px; }
    .sticky_search { background: transparent; border-radius: 0; overflow: visible; }
    .sticky_search .ss_form {
        border-radius: 8px; background: #fff; overflow: hidden;
        box-shadow: 0 2px 8px rgba(20,22,30,.10);
    }
    .sticky_search .ss_vin { box-shadow: 0 2px 8px rgba(20,22,30,.10); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Каталог — hover-эффект «как у Kinoflex»: карточка приподнимается,
   плавно увеличивается и «выходит на передний план» с усиленной тенью.
   БЕЗ изменений разметки — только CSS. Только десктоп (нет hover на touch).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (hover: hover) {
    .shop_wrapper > [class*="col-"] {
        transition: z-index 0s .18s;             /* z-index возвращается ПОСЛЕ анимации */
    }
    .shop_wrapper > [class*="col-"]:hover {
        z-index: 5;
        transition: z-index 0s 0s;                /* сразу выходит наверх, чтобы не обрезалось */
    }
    /* transition-delay: 1s — эффект НЕ срабатывает на мимолётное касание мышью,
       только если мышь задержалась над карточкой ~1 секунду. Уход (без hover) —
       мгновенно возвращает исходное состояние (transition-delay: 0s в базовом
       правиле). Это классический приём для «намеренного» hover. */
    .shop_wrapper .single_product {
        transform-origin: center center;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        transition-delay: 0s;                     /* при уходе — мгновенно назад */
        will-change: transform;
    }
    .shop_wrapper .single_product:hover {
        transform: scale(1.10) translateY(-6px) !important;   /* заметно больше — как у Kinoflex */
        border-color: #F2A71B !important;
        box-shadow: 0 28px 60px rgba(20,22,30,.28), 0 8px 20px rgba(20,22,30,.14) !important;
        transition-delay: .4s !important;         /* задержка меньше — не ждать секунду */
    }
    /* Название при наведении получает красный акцент — как у Kinoflex подпись */
    .shop_wrapper .single_product .product_name a { transition: color .18s; }
    .shop_wrapper .single_product:hover .product_name a {
        color: #1E2228 !important; transition-delay: .4s;
    }
    /* Кнопка «В корзину» на hover — глубже тень и слабый подъём */
    .shop_wrapper .single_product .action_links li.add_to_cart a { transition: box-shadow .18s; }
    .shop_wrapper .single_product:hover .action_links li.add_to_cart a {
        box-shadow: 0 8px 22px rgba(242,167,27,.42) !important; transition-delay: .4s;
    }
    /* Сердечко и значок скидки остаются в углах фото */
    .shop_wrapper .single_product .wishlist_float { transition: color .18s, box-shadow .18s; }
    .shop_wrapper .single_product:hover .wishlist_float { color: #1E2228; transition-delay: .4s; }
}

/* Раннее hover-правило (без медиа) — было слабее и без !important, перебивало
   наш заметный «Kinoflex-скейл» в 992+ по source order. Явно обнуляем transform
   там, чтобы работал более сильный из блока 992+ (у него теперь !important). */
.shop_wrapper .single_product:hover { transform: none; }

/* ── Аккордеон виджетов сайдбара — теперь и на десктопе, не только мобиле ──
   Раньше сворачивание (chevron + widget_body) работало только на мобиле — на
   десктопе список брендов (десятки строк) показывался целиком без возможности
   свернуть и «съедал» весь сайдбар. Стрелка/сворачивание теперь везде, список
   брендов (.widget_brands) свёрнут по умолчанию (см. app.js). */
.shop_area .sidebar_widget .widget_list > h3.widget_toggle {
    position: relative;
    cursor: pointer;
    padding-right: 26px !important;
}
.shop_area .sidebar_widget .widget_list > h3.widget_toggle::after {
    content: '\f107'; /* fa-angle-down */
    font-family: FontAwesome, 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    transition: transform .2s;
    color: #9a9aa4;
}
.shop_area .sidebar_widget .widget_list > h3.open::after { transform: translateY(-50%) rotate(180deg); color: #1E2228; }
.shop_area .sidebar_widget .widget_list .widget_body { padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   Единый вид карточек товара — главная + каталог + категория + поиск
   Раньше плитки-стили (#309–#319) применялись только в .shop_wrapper (каталог),
   а карточки в каруселях главной оставались голыми. Даём одинаковое базовое
   оформление ВСЕМ .single_product, а специфику .shop_wrapper оставляем как есть.
   ═══════════════════════════════════════════════════════════════════════ */
.product_carousel .single_product,
.product_items .single_product {
    background: #fff;
    border: 1px solid #e7e7ee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(20,22,30,.08);
    transition: box-shadow .22s, border-color .22s, transform .22s;
    transition-delay: 0s;
    display: flex; flex-direction: column;
    height: 100%;
    position: relative;
}
.product_carousel .single_product > figure,
.product_items .single_product > figure {
    display: flex; flex-direction: column; margin: 0; flex: 1 1 auto;
}
.product_carousel .single_product .product_thumb,
.product_items .single_product .product_thumb {
    background: #fff; aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    padding: 14px; overflow: hidden;
    border-bottom: 1px solid #f1f1f4;
    position: relative;
}
.product_carousel .single_product .product_thumb img,
.product_items .single_product .product_thumb img {
    max-width: 100%; max-height: 100%;
    width: auto !important; height: auto !important;
    object-fit: contain;
}
.product_carousel .single_product .grid_content,
.product_items .single_product .grid_content {
    padding: 15px 16px 16px !important;
    display: flex; flex-direction: column;
    background: #fff;
}
/* Скрываем список-вариант, он в разметке есть для «view=list» */
.product_carousel .single_product .list_content,
.product_items .single_product .list_content { display: none; }
/* Убираем hover-выдвижение action_links темы (то же, что делали в каталоге) */
.product_carousel .single_product .action_links,
.product_items .single_product .action_links {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: none !important;
    padding: 12px 0 0 !important;
}
.product_carousel .single_product .action_links ul,
.product_items .single_product .action_links ul {
    display: flex; align-items: stretch; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.product_carousel .single_product .action_links li,
.product_items .single_product .action_links li { margin: 0 !important; }
.product_carousel .single_product .action_links li.add_to_cart,
.product_items .single_product .action_links li.add_to_cart { flex: 1 1 100%; }
.product_carousel .single_product .action_links li.add_to_cart a,
.product_items .single_product .action_links li.add_to_cart a {
    display: flex !important; align-items: center; justify-content: center;
    height: 46px; padding: 0 12px; line-height: 1;
    background: #F2A71B; color: #fff;
    font-weight: 700; font-size: 13px; letter-spacing: .4px;
    text-transform: uppercase; border-radius: 10px;
    box-shadow: 0 3px 10px rgba(242,167,27,.22);
    transition: background .16s, box-shadow .16s;
    text-decoration: none;
}
.product_carousel .single_product .action_links li.add_to_cart a:hover,
.product_items .single_product .action_links li.add_to_cart a:hover {
    background: #D98E0A;
    box-shadow: 0 5px 16px rgba(242,167,27,.32);
}
.product_carousel .single_product .action_links li.wishlist a,
.product_items .single_product .action_links li.wishlist a {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; flex: 0 0 46px;
    border: 1px solid #e3e3ea; border-radius: 10px;
    color: #8a8a95; font-size: 16px; transition: .16s;
    background: #fff; text-decoration: none;
}
.product_carousel .single_product .action_links li.wishlist a:hover,
.product_items .single_product .action_links li.wishlist a:hover {
    border-color: #F2A71B; color: #F2A71B;
}
/* Типографика — как в каталоге (Rubik, единая иерархия) */
.product_carousel .single_product .manufacture_product,
.product_items .single_product .manufacture_product {
    margin-bottom: 4px !important;
    font-size: 11px !important; line-height: 1.3 !important;
    text-transform: uppercase; letter-spacing: .6px;
}
.product_carousel .single_product .manufacture_product a,
.product_items .single_product .manufacture_product a {
    color: #9a9aa4 !important; font-weight: 600; text-decoration: none;
}
.product_carousel .single_product .manufacture_product a:hover,
.product_items .single_product .manufacture_product a:hover { color: #1E2228 !important; }
.product_carousel .single_product .product_name a,
.product_items .single_product .product_name a {
    color: #23242b !important; font-weight: 500 !important;
    font-size: 14px !important; line-height: 1.4 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em; margin-bottom: 8px !important;
    text-decoration: none;
}
.product_carousel .single_product .price_box,
.product_items .single_product .price_box {
    display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px;
    margin: 0 0 2px;
}
.product_carousel .single_product .price_box .current_price,
.product_items .single_product .price_box .current_price {
    color: #1E2228; font-weight: 700; font-size: 17px; white-space: nowrap;
}
.product_carousel .single_product .price_box .old_price,
.product_items .single_product .price_box .old_price {
    color: #b3b3bb; font-size: 12px; text-decoration: line-through; font-weight: 400; white-space: nowrap;
}
/* Убираем «глаз» быстрого просмотра (как в каталоге) */
.product_carousel .single_product .quick_button,
.product_items .single_product .quick_button { display: none !important; }

/* Цена на мобильном (карусели главной): узкая карточка не вмещала «old + new» в
   одну строку (flex-wrap:nowrap, current 17px) — символ валюты «смн» уходил за
   край. Разрешаем перенос и чуть уменьшаем цену, чтобы всё влезло. */
@media (max-width: 767px) {
    .product_carousel .single_product .price_box,
    .product_items .single_product .price_box {
        flex-wrap: wrap !important; gap: 1px 8px;
    }
    .product_carousel .single_product .price_box .current_price,
    .product_items .single_product .price_box .current_price { font-size: 15px; }
    .product_carousel .single_product .price_box .old_price,
    .product_items .single_product .price_box .old_price { font-size: 11px; }
}

/* Hover на главной — БЕЗ скейла: у карусели owl-stage-outer имеет overflow:hidden,
   и увеличенная карточка обрезалась (наезд на соседей, кнопка «В корзину» уходила
   за край). Оставляем только тень+рамку+красное название — эффект «оживает» без
   вылезания за границы. */
@media (min-width: 992px) {
    .product_carousel .single_product:hover,
    .product_items .single_product:hover {
        border-color: #F2A71B;
        box-shadow: 0 12px 28px rgba(20,22,30,.16), 0 4px 10px rgba(20,22,30,.08);
        transition-delay: .3s;
    }
    .product_carousel .single_product:hover .product_name a,
    .product_items .single_product:hover .product_name a { color: #1E2228 !important; }
}

/* Сердечко на главной — плавающая иконка в углу фото (как в каталоге),
   а не квадратная кнопка рядом с «В корзину» — тогда кнопка занимает всю ширину. */
.product_carousel .single_product .product_thumb,
.product_items .single_product .product_thumb { position: relative; }
.product_carousel .single_product .action_links li.wishlist,
.product_items .single_product .action_links li.wishlist { display: none; }
.product_carousel .single_product .action_links li.add_to_cart,
.product_items .single_product .action_links li.add_to_cart { flex: 1 1 100%; }

/* Плавающее сердечко на фото — общая для главной кнопка избранного.
   Разметки нет, поэтому подкладываем через ::before. Кликается через action_links → wishlist,
   поэтому реальный клик сохраняем — просто скрываем визуально нижнюю кнопку. Пока показываем
   ТОЛЬКО значок «-N%» в углу; полноценное сердечко на фото — отдельной правкой в разметке. */

/* Значок «-N%» на карточке главной — в левый верхний угол, чтобы не налезать
   на плавающее сердечко в правом (аналогично каталогу). */
.product_carousel .single_product .label_product,
.product_items .single_product .label_product {
    position: absolute; top: 10px; left: 10px; right: auto; bottom: auto; z-index: 4;
}

/* ── Карусели главной: не срезать края карточек ─────────────────────────
   .owl-stage-outer имеет overflow:hidden (нужно для пагинации — соседние страницы
   не должны выглядывать), поэтому тень и рамка КРАЙНИХ карточек в видимой полосе
   обрезаются краем контейнера. Решение: небольшой внутренний padding у карточки
   в .owl-item, чтобы тень поместилась в свою ячейку и не «утыкалась» в границу.
   overflow visible НЕ используем — это сломало бы пагинацию. */
.product_area .product_carousel,
.sale_product_area .product_carousel {
    padding: 4px 0 12px;                      /* немного вертикального запаса под тень */
}
/* Мягче тень, чтобы даже в узкой owl-ячейке не срезалась */
.product_carousel .single_product,
.product_items .single_product {
    box-shadow: 0 2px 8px rgba(20,22,30,.06) !important;
    margin: 2px 4px;                          /* поля для тени внутри owl-item */
}
.product_carousel .single_product:hover,
.product_items .single_product:hover {
    box-shadow: 0 6px 16px rgba(20,22,30,.14), 0 2px 6px rgba(20,22,30,.06) !important;
}

/* ── Главная: убрать «margin-top: auto» у кнопки (та же причина, что была в
   каталоге, #317/#318) ────────────────────────────────────────────────────
   Общее правило `.single_product .action_links { margin-top: auto }` (без
   привязки к контексту) толкает кнопку к низу флекс-колонки поверх уже
   заданного padding-top:12px — получается двойной отступ и кнопка «висит»
   слишком низко. Обнуляем именно для карточек главной. */
.product_carousel .single_product .action_links,
.product_items .single_product .action_links {
    margin-top: 0 !important;
}

/* ── Главная: полноценное оформление сердечка на фото (было только
   position:relative у контейнера, сам .wishlist_float не стилизован —
   показывался пустым квадратом без кружка/иконки). Копируем стиль каталога. */
.product_carousel .single_product .wishlist_float,
.product_items .single_product .wishlist_float {
    position: absolute; top: 10px; right: 10px; z-index: 4;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: #b8b8c0; font-size: 15px;
    box-shadow: 0 2px 6px rgba(20,22,30,.14);
    transition: color .16s, box-shadow .16s;
    text-decoration: none;
}
.product_carousel .single_product .wishlist_float:hover,
.product_items .single_product .wishlist_float:hover {
    color: #1E2228; box-shadow: 0 4px 10px rgba(242,167,27,.22);
}

/* ── Главная: убрать padding-bottom у product_content_inner ───────────────
   Тема даёт `.product_content_inner { padding: 10px 15px 20px }` — эти 20px
   снизу резервировали место под action_links, которая у темы `position: absolute;
   bottom: 0`. Мы вернули кнопку в поток (#325), а padding остался — стал
   пустотой между ценой и кнопкой. Обнуляем. */
.product_carousel .single_product .product_content_inner,
.product_items .single_product .product_content_inner {
    padding: 15px 16px 12px !important;    /* воздух вокруг названия/цены;
                                              нижний 12px = отступ до кнопки */
}
/* Внешний grid_content — обнуляем, чтобы не удваивать поля с inner */
.product_carousel .single_product .grid_content,
.product_items .single_product .grid_content {
    padding: 0 !important;
}
/* Action_links — только горизонтальные поля до края плитки; отступ сверху
   уже задан padding-bottom у inner. */
.product_carousel .single_product .action_links,
.product_items .single_product .action_links {
    padding: 0 16px 16px !important;
    margin-top: 0 !important;
}

/* ── Три баннера на главной («AutoDoc Магазин») — плитки с рамкой/тенью ──
   Раньше картинки стояли впритык, «плоско» и выглядели как просто вставленные
   изображения. Оформляем как аккуратные плитки: рамка, скругление, тень;
   на hover — плавный подъём и глубже тень (общий стиль с карточками товара). */
.banner_area .single_banner {
    margin: 0;
    background: #fff;
    border: 1px solid #e7e7ee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(20,22,30,.08);
    transition: box-shadow .22s, transform .22s, border-color .22s;
}
.banner_area .single_banner:hover {
    border-color: #d3d3dc;
    box-shadow: 0 10px 24px rgba(20,22,30,.14), 0 4px 10px rgba(20,22,30,.08);
    transform: translateY(-3px);
}
.banner_area .banner_thumb { border-radius: 12px; overflow: hidden; }
.banner_area .banner_thumb a { display: block; }
.banner_area .banner_thumb img {
    display: block; width: 100%; height: auto;
    transition: transform .35s ease;
}
.banner_area .single_banner:hover .banner_thumb img { transform: scale(1.04); }

/* ── Прилипающая полоса при прокрутке — легче и элегантнее ───────────────
   Тема даёт rgba(34,34,34,.8) — сплошную тяжёлую тёмную плашку. Делаем стекло:
   полупрозрачный фон + backdrop-blur, тонкая нижняя граница, компактная кнопка
   «Все категории» вместо растянутой красной плашки, ровные пропорции меню. */
@media (min-width: 992px) {
    .sticky-header.sticky {
        background: rgba(24, 26, 31, .72) !important;
        backdrop-filter: saturate(1.4) blur(10px);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.18) !important;
        border-bottom: 1px solid rgba(255,255,255,.06);
        padding: 6px 20px !important;
    }
    /* «Все категории» — компактнее, не на всю высоту */
    .sticky-header.sticky .categories_title {
        background: #F2A71B !important;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(242,167,27,.35);
    }
    .sticky-header.sticky .categories_title h2 {
        font-size: .82rem !important;
        font-weight: 700 !important;
        letter-spacing: .3px;
        line-height: 40px !important;
        padding: 0 18px 0 44px !important;
        white-space: nowrap;
        margin: 0 !important;
    }
    /* Меню в прилипшей полосе — более лёгкие ссылки */
    .sticky-header.sticky .main_menu nav ul li a {
        padding: 10px 14px !important;
        font-size: .88rem;
        color: #e8e8e8;
        transition: color .16s;
    }
    .sticky-header.sticky .main_menu nav ul li a:hover { color: #ff5a5a; }
    /* Телефон справа — акцент */
    .sticky-header.sticky .header_phone p { margin: 0; font-size: .84rem; color: #b3b3bb; }
    .sticky-header.sticky .header_phone a { color: #fff; font-weight: 600; }
}

/* ── Мега-меню «МАГАЗИН» (.az-megamenu) — читаемость и высота под вьюпорт ──
   Настоящая выпадашка использует разметку .az-megamenu (не .categories_menu_toggle).
   Проблема 1: ссылки меню лежат внутри .main_menu nav ul li a, поэтому правило
   прилипшей шапки (.sticky-header.sticky .main_menu nav ul li a { color:#e8e8e8 })
   красило текст подкатегорий в почти белый — при прокрутке текст «сливался» с
   белым фоном выпадашки. Ставим ЯВНЫЕ тёмные цвета с !important, они бьют
   правило шапки (там без !important) и в обычном, и в прилипшем состоянии.
   Проблема 2: на 100% масштабе список не помещался в экран — ограничиваем
   высоту вьюпортом и даём внутреннюю прокрутку. */

/* Заголовки категорий — уверенный тёмный, читаемо всегда */
.az-megamenu .az-megamenu__head,
.sticky-header.sticky .az-megamenu .az-megamenu__head {
    color: #1a1a1f !important;
    font-weight: 700 !important;
}
/* Подкатегории — средний серый, при наведении красный акцент */
.az-megamenu .az-megamenu__sub li a,
.sticky-header.sticky .az-megamenu .az-megamenu__sub li a {
    color: #4a4a55 !important;
    font-weight: 500 !important;
}
.az-megamenu .az-megamenu__sub li a:hover,
.sticky-header.sticky .az-megamenu .az-megamenu__sub li a:hover {
    color: #1E2228 !important;
}
/* Одноколоночные пункты, промо-ссылки и футер — тоже фиксируем цвет */
.az-megamenu .az-megamenu__list li a,
.sticky-header.sticky .az-megamenu .az-megamenu__list li a { color: #333 !important; }
.az-megamenu .az-megamenu__list li a:hover,
.sticky-header.sticky .az-megamenu .az-megamenu__list li a:hover { color: #1E2228 !important; }
.az-megamenu .az-mega-links a,
.sticky-header.sticky .az-megamenu .az-mega-links a { color: #444 !important; }
.az-megamenu .az-mega-links a:hover,
.sticky-header.sticky .az-megamenu .az-mega-links a:hover { color: #1E2228 !important; }
.az-megamenu .az-megamenu__footer a,
.sticky-header.sticky .az-megamenu .az-megamenu__footer a { color: #555 !important; }
.az-megamenu .az-megamenu__footer a:hover,
.sticky-header.sticky .az-megamenu .az-megamenu__footer a:hover { color: #1E2228 !important; }
.az-megamenu .az-mega-promo__btn,
.sticky-header.sticky .az-megamenu .az-mega-promo__btn { color: #1E2228 !important; }

/* Высота под вьюпорт + компактный ритм строк */
@media (min-width: 992px) {
    .az-megamenu--wide { max-height: none; }
    /* В обычном состоянии полоса меню стоит ниже (топбар+средняя шапка),
       выпадашка открывается ~180px от верха — оставляем больший запас. */
    .az-megamenu--wide .az-megamenu__inner {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    /* В прилипшем состоянии полоса зафиксирована у верха — запаса нужно меньше. */
    .sticky-header.sticky .az-megamenu--wide .az-megamenu__inner {
        max-height: calc(100vh - 80px);
    }
    .az-megamenu__group { margin-bottom: 7px !important; }
    .az-megamenu__col .az-megamenu__list li a { padding: 5px 16px !important; }
    .az-megamenu__sub li a { padding-top: 4px !important; padding-bottom: 4px !important; }
    /* Тонкий скролл внутри мега-меню */
    .az-megamenu__inner::-webkit-scrollbar { width: 6px; }
    .az-megamenu__inner::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 3px; }
}

/* ═══ Карточки поставщика AutoEuro на странице поиска (.sup-*) ═══════════════
   Добор из AutoEuro по артикулу: показываем предложения поставщика карточками
   с фото (наше фото, если артикул есть в каталоге, иначе заглушка). Кнопка
   «Купить» открывает модалку выбора доставки → заявка менеджеру. */
.sup-section { margin-top: 34px; }
.sup-head { border-top: 1px solid #ececf2; padding-top: 22px; margin-bottom: 18px; }
.sup-head h3 {
    font-size: 1.15rem; font-weight: 700; color: #23242b; margin: 0 0 4px;
    letter-spacing: .2px;
}
.sup-head h3 span {
    color: #1E2228; font-weight: 800;
}
.sup-head p { color: #7a7a86; font-size: .84rem; margin: 0; max-width: 720px; }

/* Карточка-плитка (в едином стиле с каталогом) */
.single_product.sup-card {
    background: #fff; border: 1px solid #e7e7ee; border-radius: 12px;
    overflow: hidden; height: 100%;
    box-shadow: 0 2px 10px rgba(20,22,30,.05);
    transition: box-shadow .2s, border-color .2s, transform .2s;
    display: flex; flex-direction: column;
}
.single_product.sup-card:hover {
    border-color: #f1c2c2;
    box-shadow: 0 10px 26px rgba(20,22,30,.12);
    transform: translateY(-3px);
}
.single_product.sup-card > figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.sup-thumb {
    position: relative; background: #f6f6f9; padding: 14px;
    display: flex; align-items: center; justify-content: center;
}
.sup-thumb img {
    width: 100%; height: 170px; object-fit: contain; display: block;
}
.sup-badge {
    position: absolute; top: 10px; left: 10px;
    font-size: .66rem; font-weight: 700; letter-spacing: .3px;
    padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
}
.sup-badge.in  { background: #e6f6ea; color: #1f8a3b; }
.sup-badge.pre { background: #fdf1e3; color: #b9772a; }

.sup-card .product_content { padding: 0; display: flex; flex-direction: column; flex: 1; }
.sup-card .product_content_inner { padding: 13px 15px 10px; flex: 1; }
.sup-card .manufacture_product {
    font-size: .72rem; color: #9a9aa6; text-transform: uppercase;
    letter-spacing: .4px; margin: 0 0 3px; font-weight: 600;
}
.sup-card .product_name {
    font-size: .86rem; font-weight: 600; line-height: 1.32; color: #2b2c34;
    margin: 0 0 4px; min-height: 2.2em;
}
.sup-art { font-size: .74rem; color: #9a9aa6; margin: 0 0 8px; font-family: monospace; }
.sup-price { font-size: 1.02rem; color: #23242b; }
.sup-price strong { color: #1E2228; font-weight: 800; }
.sup-eta { font-size: .74rem; color: #6b7280; margin: 6px 0 0; }
.sup-eta i { color: #b9772a; margin-right: 3px; }

/* Тема делает .action_links абсолютным (bottom:-55px, показ по наведению) — из-за
   overflow:hidden карточки кнопка обрезалась. Возвращаем в поток и всегда видима. */
.sup-card .action_links {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: auto !important;
    padding: 0 15px 15px;
    margin: 0;
}
.sup-buy-btn {
    width: 100%; height: 44px; border: 0; border-radius: 9px;
    background: #F2A71B; color: #fff; font-weight: 700; font-size: .86rem;
    cursor: pointer; transition: background .16s, box-shadow .16s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sup-buy-btn:hover { background: #a80707; box-shadow: 0 6px 16px rgba(242,167,27,.28); }
.sup-buy-btn i { font-size: .9rem; }

/* ── Модалка выбора доставки (.sup-dlv-*) ─────────────────────────────────── */
.sup-dlv-modal {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(18,20,26,.55); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; padding: 18px;
}
.sup-dlv-modal.open { display: flex; }
.sup-dlv-card {
    background: #fff; border-radius: 16px; width: 100%; max-width: 460px;
    max-height: 90vh; overflow-y: auto; position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 24px 24px 22px;
    animation: supDlvIn .2s ease;
}
@keyframes supDlvIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sup-dlv-x {
    position: absolute; top: 12px; right: 14px; border: 0; background: none;
    font-size: 1.7rem; line-height: 1; color: #b0b0bb; cursor: pointer;
}
.sup-dlv-x:hover { color: #23242b; }
.sup-dlv-name { font-size: 1.05rem; font-weight: 700; color: #23242b; padding-right: 26px; }
.sup-dlv-sub { font-size: .8rem; color: #9a9aa6; margin-top: 2px; font-family: monospace; }
.sup-dlv-label { font-size: .82rem; font-weight: 600; color: #6b7280; margin: 18px 0 8px; }
.sup-dlv-list { display: flex; flex-direction: column; gap: 8px; }
.sup-dlv-opt {
    display: flex; align-items: center; gap: 11px; cursor: pointer;
    border: 1.5px solid #e7e7ee; border-radius: 11px; padding: 11px 13px;
    transition: border-color .14s, background .14s; margin: 0;
}
.sup-dlv-opt.sel { border-color: #F2A71B; background: #fef6f6; }
.sup-dlv-radio input { accent-color: #1E2228; width: 16px; height: 16px; }
.sup-dlv-body { display: flex; flex-direction: column; gap: 2px; }
.sup-dlv-price { font-weight: 800; color: #1E2228; font-size: .98rem; }
.sup-dlv-meta { font-size: .74rem; color: #6b7280; }
.sup-dlv-row { margin-top: 14px; }
.sup-dlv-row label { font-size: .8rem; color: #6b7280; display: block; margin-bottom: 4px; }
.sup-dlv-qty {
    width: 90px; padding: 9px 11px; border: 1px solid #dcdce4; border-radius: 8px; font-size: .9rem;
}
.sup-dlv-comment {
    width: 100%; padding: 9px 11px; border: 1px solid #dcdce4; border-radius: 8px;
    font-size: .85rem; resize: vertical; font-family: inherit;
}
.sup-dlv-note {
    font-size: .76rem; color: #8a6d3b; background: #fdf8ec; border-radius: 8px;
    padding: 9px 11px; margin: 14px 0; line-height: 1.4;
}
.sup-dlv-note i { color: #b9772a; margin-right: 4px; }
.sup-dlv-submit {
    width: 100%; height: 46px; border: 0; border-radius: 10px;
    background: #F2A71B; color: #fff; font-weight: 700; font-size: .92rem; cursor: pointer;
    transition: background .16s;
}
.sup-dlv-submit:hover { background: #a80707; }
.sup-dlv-submit:disabled { opacity: .7; cursor: default; }
.sup-dlv-ok  { background: #e9f7ee; color: #1f8a3b; border-radius: 9px; padding: 14px; font-size: .86rem; text-align: center; margin-top: 6px; }
.sup-dlv-ok a { color: #1f8a3b; font-weight: 700; text-decoration: underline; }
.sup-dlv-err { background: #fdecec; color: #c0392b; border-radius: 9px; padding: 12px; font-size: .84rem; text-align: center; margin-top: 6px; }

@media (max-width: 575px) {
    .sup-thumb img { height: 130px; }
    .sup-card .product_name { min-height: 0; }
}

/* Кнопка «Показать ещё» под карточками поставщика */
.sup-more-wrap { text-align: center; margin: 6px 0 34px; }
#supMoreBtn {
    min-width: 220px; height: 48px; padding: 0 28px;
    border: 1.5px solid #F2A71B; border-radius: 26px; background: #fff;
    color: #1E2228; font-weight: 700; font-size: .92rem; cursor: pointer;
    transition: background .16s, color .16s, box-shadow .16s;
}
#supMoreBtn:hover { background: #F2A71B; color: #fff; box-shadow: 0 8px 20px rgba(242,167,27,.25); }
#supMoreBtn[data-busy] { opacity: .7; cursor: default; }

/* Переключатель типа аккаунта на регистрации (Покупатель / Продавец) */
.acct_type_toggle {
    display: flex; gap: 8px; margin: 0 0 20px; padding: 5px;
    background: #f2f2f6; border-radius: 12px;
}
.acct_type_btn {
    flex: 1; padding: 11px 10px; border: 0; border-radius: 9px; cursor: pointer;
    background: transparent; color: #6b7280; font-weight: 700; font-size: .9rem;
    transition: background .16s, color .16s, box-shadow .16s;
}
.acct_type_btn i { margin-right: 6px; }
.acct_type_btn.active {
    background: #fff; color: #F2A71B;
    box-shadow: 0 2px 8px rgba(20,22,30,.1);
}
.account_seller_form .pwd-field { position: relative; display: block; }

/* ═══ Кабинет продавца (.sl-*) ══════════════════════════════════════════════ */
.sl-wrap { padding: 34px 0 60px; background: #f6f6f9; min-height: 60vh; }
.sl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sl-title { font-size: 1.5rem; font-weight: 800; color: #23242b; margin: 0; }
.sl-title i { color: #1E2228; margin-right: 6px; }
.sl-sub { color: #8a8a95; font-size: .9rem; margin: 4px 0 0; }

/* Навигация */
.sl-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-nav a {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
    border-radius: 9px; background: #fff; border: 1px solid #e7e7ee;
    color: #4a4a55; font-weight: 600; font-size: .85rem; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.sl-nav a:hover { border-color: #F2A71B; color: #F2A71B; }
.sl-nav a.active { background: #F2A71B; border-color: #F2A71B; color: #fff; }
.sl-nav a.sl-nav-out { color: #b23; }

/* Статус магазина */
.sl-status { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; margin-bottom: 22px; border: 1px solid; }
.sl-status-ic { font-size: 1.9rem; }
.sl-status-label { font-weight: 800; font-size: 1.05rem; }
.sl-status-hint { font-size: .86rem; margin-top: 2px; opacity: .85; }
.sl-status--ok   { background: #eafaf0; border-color: #bfe8cd; color: #1f8a3b; }
.sl-status--wait { background: #fff8e9; border-color: #f3e2b8; color: #a5791a; }
.sl-status--bad  { background: #fdeeee; border-color: #f3c9c9; color: #c0392b; }

/* Счётчики */
.sl-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.sl-stat { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; padding: 18px; text-align: center; }
.sl-stat-n { display: block; font-size: 1.8rem; font-weight: 800; color: #23242b; line-height: 1; }
.sl-stat-l { display: block; font-size: .8rem; color: #8a8a95; margin-top: 6px; }
.sl-green { color: #1f8a3b !important; } .sl-amber { color: #b9772a !important; } .sl-red { color: #c0392b !important; }

/* Кнопки */
.sl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px; font-weight: 700; font-size: .9rem; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; transition: all .15s; }
.sl-btn-primary { background: #F2A71B; color: #fff; }
.sl-btn-primary:hover { background: #a80707; color: #fff; }
.sl-btn-primary:disabled { background: #d9a3a3; cursor: not-allowed; }
.sl-btn-outline { background: #fff; border-color: #d9d9e1; color: #4a4a55; }
.sl-btn-outline:hover { border-color: #F2A71B; color: #F2A71B; }
.sl-btn-danger { background: #fff; border-color: #eec4c4; color: #c0392b; }
.sl-btn-danger:hover { background: #c0392b; color: #fff; }
.sl-btn-sm { padding: 6px 12px; font-size: .8rem; border-radius: 8px; }
.sl-actions, .sl-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.sl-lock { color: #a5791a; font-size: .85rem; }

/* Как это работает */
.sl-how { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; padding: 20px 24px; }
.sl-how h3 { font-size: 1rem; font-weight: 800; margin: 0 0 10px; color: #23242b; }
.sl-how ol { margin: 0; padding-left: 20px; color: #55555f; font-size: .9rem; line-height: 1.9; }

/* Форма */
.sl-form { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; padding: 24px; }
.sl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sl-field { display: flex; flex-direction: column; gap: 6px; }
.sl-field.sl-col2 { grid-column: 1 / -1; }
.sl-field > span { font-size: .84rem; font-weight: 600; color: #55555f; }
.sl-field b { color: #1E2228; }
.sl-field input, .sl-field select, .sl-field textarea {
    padding: 10px 12px; border: 1px solid #d9d9e1; border-radius: 9px; font-size: .9rem; font-family: inherit; background: #fff;
}
.sl-field input:focus, .sl-field select:focus, .sl-field textarea:focus { border-color: #F2A71B; outline: none; }
.sl-form-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.sl-note { font-size: .8rem; color: #8a6d3b; background: #fdf8ec; border-radius: 9px; padding: 10px 12px; margin: 14px 0 0; }
.sl-note i { color: #b9772a; }

/* Загрузка фото */
.sl-imgrid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.sl-imgitem { position: relative; width: 92px; height: 92px; border: 1px solid #e7e7ee; border-radius: 10px; overflow: hidden; background: #f6f6f9; }
.sl-imgitem img { width: 100%; height: 100%; object-fit: cover; }
.sl-imgx { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; }
.sl-upload { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px dashed #c9c9d3; border-radius: 9px; cursor: pointer; color: #55555f; font-weight: 600; font-size: .85rem; }
.sl-upload:hover { border-color: #F2A71B; color: #F2A71B; }
.sl-upstatus { font-size: .8rem; color: #888; margin-left: 10px; }

/* Таблица товаров */
.sl-table-wrap { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; overflow-x: auto; }
.sl-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.sl-table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .3px; color: #9a9aa6; padding: 12px 14px; border-bottom: 1px solid #eee; }
.sl-table td { padding: 12px 14px; border-bottom: 1px solid #f2f2f5; font-size: .88rem; vertical-align: middle; }
.sl-thumb { width: 52px; height: 52px; object-fit: contain; background: #f6f6f9; border-radius: 8px; }
.sl-pname { font-weight: 600; color: #2b2c34; }
.sl-pmeta { font-size: .76rem; color: #9a9aa6; }
.sl-preject { font-size: .76rem; color: #c0392b; margin-top: 3px; }
.sl-rowact { white-space: nowrap; display: flex; gap: 6px; }
.sl-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.sl-badge--ok { background: #e6f6ea; color: #1f8a3b; }
.sl-badge--wait { background: #fdf1e3; color: #b9772a; }
.sl-badge--bad { background: #fdecec; color: #c0392b; }
.sl-badge--draft { background: #eef; color: #667; }

/* Пусто / алерты */
.sl-empty { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; padding: 50px 20px; text-align: center; color: #9a9aa6; }
.sl-empty i { font-size: 2.6rem; color: #dcdce4; display: block; margin-bottom: 12px; }
.sl-empty p { margin: 0 0 16px; }
.sl-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: .88rem; }
.sl-alert-ok { background: #eafaf0; color: #1f8a3b; }
.sl-alert-err { background: #fdeeee; color: #c0392b; }

@media (max-width: 767px) {
    .sl-stats { grid-template-columns: repeat(2,1fr); }
    .sl-form-grid { grid-template-columns: 1fr; }
}

/* Продавец на странице товара + шапка магазина */
.product_seller a { color: #1E2228; font-weight: 600; }
.product_seller i { font-size: .8rem; }
.sl-shop-head { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; padding: 22px 24px; margin-bottom: 26px; }
.sl-shop-logo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; background: #fdeeee; color: #F2A71B; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.sl-shop-name { font-size: 1.4rem; font-weight: 800; color: #23242b; margin: 0; }
.sl-shop-meta { color: #8a8a95; font-size: .86rem; margin: 3px 0 0; }
.sl-shop-desc { color: #55555f; font-size: .88rem; margin: 8px 0 0; }

/* ═══ Финансовая часть (статистика магазина) ═══════════════════════════════
   Карточки переиспользуют .sl-stats/.sl-stat — вид 1:1 с существующими. */
.sl-fin-block { margin: 0 0 22px; }
.sl-fin-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sl-fin-h { font-size: 1rem; font-weight: 800; color: #23242b; margin: 0; }   /* как заголовок .sl-how h3 */
.sl-fin-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-per { padding: 7px 13px; border-radius: 9px; background: #fff; border: 1px solid #e7e7ee; color: #4a4a55; font-weight: 600; font-size: .82rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.sl-per:hover { border-color: #F2A71B; color: #F2A71B; }
.sl-per--active { background: #F2A71B; border-color: #F2A71B; color: #fff; }   /* активный — красный, как в меню */
.sl-fin-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-csv { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; background: #fff; border: 1px solid #cfe8d6; color: #1f8a3b; font-weight: 700; font-size: .82rem; text-decoration: none; transition: all .15s; }
.sl-csv:hover { background: #1f8a3b; border-color: #1f8a3b; color: #fff; }
.sl-fin-sub { display: block; font-size: .8rem; color: #1f8a3b; font-weight: 700; margin-top: 4px; }  /* сумма под «Оплаты» */
.sl-fin-block.is-busy .sl-fin-stats { opacity: .5; transition: opacity .15s; }

/* График посещений по дням (inline SVG, без библиотек) */
.sl-chart { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; padding: 16px 18px 10px; margin-top: 14px; }
.sl-chart-cap { font-size: .9rem; font-weight: 700; color: #33343b; margin-bottom: 8px; }
.sl-chart-sum { color: #8a8a95; font-weight: 600; }
.sl-chart-empty { color: #9a9aa3; font-size: .86rem; padding: 18px 0 10px; text-align: center; }
.sl-chart-svg { display: block; width: 100%; height: 190px; }
.sl-chart-axis { stroke: #d7d7df; stroke-width: 1; }
.sl-chart-grid { stroke: #ececf2; stroke-width: 1; }
.sl-chart-yl { fill: #9a9aa3; font-size: 10px; }
.sl-chart-xl { fill: #9a9aa3; font-size: 10px; }
.sl-bar { fill: #3f4654; transition: fill .15s; }           /* посещения — тёмный столбик */
.sl-bar:hover { fill: #23242b; }
.sl-bar--today { fill: #1E2228; }                            /* сегодня — акцент */
.sl-bar--today:hover { fill: #a80707; }

/* Бейдж непрочитанных в навигации кабинета */
.sl-nav-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #F2A71B; color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }
.sl-nav a.active .sl-nav-badge { background: #fff; color: #F2A71B; }

/* Сообщения кабинета (переписка с покупателями) */
.sl-msg { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.sl-msg-list { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; overflow: hidden; }
.sl-msg-thread { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid #f0f0f4; color: #33343b; text-decoration: none; font-size: .88rem; }
.sl-msg-thread:last-child { border-bottom: 0; }
.sl-msg-thread:hover { background: #f8f8fb; }
.sl-msg-thread.is-active { background: #fdeeee; }
.sl-msg-name { font-weight: 700; flex: 1 1 auto; }
.sl-msg-when { width: 100%; color: #9a9aa3; font-size: .74rem; }
.sl-msg-conv { background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; display: flex; flex-direction: column; min-height: 360px; }
.sl-msg-conv-head { padding: 14px 18px; border-bottom: 1px solid #f0f0f4; font-weight: 800; color: #23242b; }
.sl-msg-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; max-height: 460px; overflow-y: auto; }
.sl-bubble { max-width: 78%; padding: 9px 13px; border-radius: 12px; font-size: .88rem; line-height: 1.5; }
.sl-bubble-when { font-size: .7rem; color: #9a9aa3; margin-top: 4px; }
.sl-bubble--them { align-self: flex-start; background: #f1f2f5; color: #33343b; border-bottom-left-radius: 4px; }
.sl-bubble--me { align-self: flex-end; background: #F2A71B; color: #fff; border-bottom-right-radius: 4px; }
.sl-bubble--me .sl-bubble-when { color: rgba(255,255,255,.8); }
.sl-msg-form { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid #f0f0f4; align-items: flex-end; }
.sl-msg-form textarea { flex: 1 1 auto; border: 1px solid #dcdce3; border-radius: 10px; padding: 10px 12px; font-size: .88rem; resize: vertical; font-family: inherit; }

/* «Написать продавцу» на странице товара */
.pd-msg-seller { margin: 10px 0 4px; }
.pd-msg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 9px; background: #fff; border: 1.5px solid #d9d9e1; color: #4a4a55; font-weight: 700; font-size: .85rem; cursor: pointer; text-decoration: none; transition: all .15s; }
.pd-msg-btn:hover { border-color: #F2A71B; color: #F2A71B; }
.pd-msg-form { margin-top: 10px; max-width: 460px; }
.pd-msg-form textarea { width: 100%; border: 1px solid #dcdce3; border-radius: 10px; padding: 10px 12px; font-size: .88rem; font-family: inherit; resize: vertical; }
.pd-msg-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.pd-msg-status { font-size: .82rem; color: #1f8a3b; }

@media (min-width: 992px) {
    /* Кнопки меню кабинета — в одну строку: теснее отступы под добавленный пункт. */
    .sl-nav { gap: 5px; flex-wrap: nowrap; }
    .sl-nav a { padding: 8px 10px; font-size: .82rem; white-space: nowrap; }
}
@media (max-width: 767px) {
    .sl-msg { grid-template-columns: 1fr; }
    .sl-fin-periods { width: 100%; }
}

/* ═══ Кабинет продавца — заказы (маркетплейс, Фаза 2) ═══════════════════════ */
.sl-order {
    background: #fff; border: 1px solid #e7e7ee; border-radius: 14px;
    padding: 14px 16px; margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(20,22,30,.05);
}
.sl-order-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #f0f0f5;
}
.sl-order-date { color: #9a9aa6; font-size: .8rem; margin-left: 10px; }
.sl-order-items { padding: 10px 0; display: flex; flex-direction: column; gap: 7px; }
.sl-order-item {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px;
    align-items: center; font-size: .85rem;
}
@media (max-width: 575px) {
    .sl-order-item { grid-template-columns: 1fr auto; }
    .sl-oi-art { display: none; }
}
.sl-oi-name { color: #2b2c34; font-weight: 600; }
.sl-oi-art  { color: #9a9aa6; font-family: monospace; font-size: .78rem; }
.sl-oi-qty  { color: #6b7280; }
.sl-oi-sum  { font-weight: 700; color: #14161b; }
.sl-order-money {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    padding: 10px 0; border-top: 1px solid #f0f0f5; font-size: .85rem;
}
.sl-order-money b { color: #1E2228; }
.sl-muted { color: #9a9aa6; font-size: .8rem; }
.sl-order-buyer { font-size: .82rem; color: #4a4a55; padding: 8px 0; }
.sl-order-buyer i { color: #aab0b8; margin-right: 3px; }
.sl-order-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid #f0f0f5; margin: 0; }
/* Статусы подзаказа */
.sl-badge-pending    { background: #fdf1e3; color: #b9772a; }
.sl-badge-processing { background: #e7f0fd; color: #2f6bb5; }
.sl-badge-shipped    { background: #ede7fd; color: #6b4fbb; }
.sl-badge-delivered  { background: #e6f6ea; color: #1f8a3b; }
.sl-badge-cancelled  { background: #fdecec; color: #c0392b; }

/* ═══════════════════════════════════════════════════════════════════════════
   Маркетплейс, Фаза 3 — финансы продавца и выплаты в админке.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Кабинет продавца → Финансы.
   Главная цифра («сколько мне должны») намеренно вынесена в отдельный крупный
   блок: остальные показатели её объясняют, но продавец приходит сюда за ней. */
.sl-fin-hero {
    background: linear-gradient(135deg, #23242b 0%, #35363f 100%);
    color: #fff; border-radius: 16px; padding: 26px 24px; margin-bottom: 16px;
}
.sl-fin-hero-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; opacity: .7; }
.sl-fin-hero-sum   { font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin: 4px 0 6px; }
.sl-fin-hero-hint  { font-size: .84rem; opacity: .8; }
.sl-fin-hero-hint b { color: #ffd166; }

.sl-fin-h { font-size: 1.05rem; font-weight: 700; color: #23242b; margin: 22px 0 10px; }
.sl-fin-table-wrap {
    background: #fff; border: 1px solid #e7e7ee; border-radius: 14px; overflow: auto;
}
.sl-fin-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sl-fin-table th {
    text-align: left; padding: 11px 14px; background: #fafafc; color: #6b6b78;
    font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid #eeeef4; white-space: nowrap;
}
.sl-fin-table td { padding: 11px 14px; border-bottom: 1px solid #f4f4f8; color: #33343d; }
.sl-fin-table tr:last-child td { border-bottom: none; }
.sl-ta-r { text-align: right; white-space: nowrap; }

@media (max-width: 575px) {
    .sl-fin-hero-sum { font-size: 1.9rem; }
    .sl-fin-table th, .sl-fin-table td { padding: 9px 10px; font-size: .8rem; }
}

/* Админка → модалка (выплата, корректировка).
   Своя, а не bootstrap-овская: админка не грузит JS бутстрапа. */
/* Показ/скрытие переключается инлайновым style.display из JS, а не классом:
   админка подключает CSS одним файлом, и если он не доехал (кэш, 404), модалка
   с классовым переключением развернулась бы прямо в поток страницы. */
.az-modal {
    display: none; position: fixed; inset: 0; z-index: 1200;
    align-items: flex-start; justify-content: center;
    background: rgba(20, 20, 26, .55); padding: 20px; overflow-y: auto;
}
.az-modal-box {
    background: #fff; border-radius: 12px; padding: 24px;
    width: 100%; max-width: 480px; margin: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.az-modal-title { font-size: 1.1rem; font-weight: 700; color: #23242b; margin: 0 0 16px; }
.az-modal-acts {
    display: flex; gap: 8px; justify-content: flex-end;
    padding-top: 8px; border-top: 1px solid #f0f0f5; margin-top: 4px;
}

/* Пометка «ещё N предложений» на карточке каталога (buy-box).
   Появляется, только когда товар предлагают несколько продавцов. */
.offers_note {
    font-size: .78rem; color: #1f8a3b; margin: 2px 0 4px;
    display: flex; align-items: center; gap: 5px; font-weight: 600;
}
.offers_note i { font-size: .72rem; opacity: .8; }

/* Блок «Предложения продавцов» на странице товара (buy-box).
   Строки — ссылки, а не радиокнопки: работает без JS и остаётся индексируемым. */
.bb_offers {
    border: 1px solid #e7e7ee; border-radius: 12px;
    overflow: hidden; margin: 0 0 18px;
}
.bb_offers_head {
    background: #fafafc; padding: 10px 14px; font-size: .84rem;
    font-weight: 700; color: #33343d; border-bottom: 1px solid #eeeef4;
}
.bb_offers_head i { color: #1E2228; margin-right: 5px; }
.bb_offers_head span { font-weight: 400; color: #8b8b98; }

.bb_offer {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 14px; border-bottom: 1px solid #f4f4f8;
    color: #33343d; text-decoration: none; transition: background .15s;
}
.bb_offer:last-child { border-bottom: none; }
.bb_offer:hover { background: #fcf7f7; text-decoration: none; color: #33343d; }
.bb_offer--current { background: #f6fbf7; cursor: default; }
.bb_offer--current:hover { background: #f6fbf7; }

.bb_offer_seller { flex: 1 1 160px; font-weight: 600; font-size: .88rem; }
.bb_offer_seller i { color: #9a9aa6; margin-right: 4px; }
.bb_best {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px;
    background: #e6f6ea; color: #1f8a3b; font-size: .68rem; font-style: normal;
    font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.bb_offer_stock { font-size: .78rem; white-space: nowrap; }
.bb_offer_stock.ok { color: #1f8a3b; }
.bb_offer_stock.no { color: #b9772a; }
.bb_offer_price { font-weight: 800; color: #1E2228; white-space: nowrap; min-width: 96px; text-align: right; }
.bb_offer_pick { font-size: .76rem; color: #8b8b98; white-space: nowrap; min-width: 74px; text-align: right; }
.bb_offer:hover .bb_offer_pick { color: #1E2228; }

@media (max-width: 575px) {
    .bb_offer { gap: 6px 10px; padding: 10px 12px; }
    .bb_offer_seller { flex: 1 1 100%; }
    .bb_offer_price { min-width: auto; margin-left: auto; }
    .bb_offer_pick { min-width: auto; }
}

/* Галочка «уникальный товар» в форме продавца (buy-box).
   Своя, а не .sl-field: у поля с чекбоксом другая раскладка — квадратик слева,
   пояснение справа в две строки. */
.sl-check {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fafafc; border: 1px solid #e7e7ee; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 16px; cursor: pointer;
}
.sl-check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }
.sl-check span { font-size: .86rem; color: #33343d; line-height: 1.45; }
.sl-check b { font-weight: 700; }
.sl-check small { display: block; margin-top: 4px; font-size: .78rem; color: #8b8b98; line-height: 1.4; }

/* Атрибуты и семейство в форме продавца (buy-box, варианты). */
.sl-hint {
    display: block; margin-top: 6px; font-size: .78rem;
    color: #8b8b98; line-height: 1.45; font-weight: 400;
}
.sl-hint b { color: #5a5a68; }

.sl-attrs { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.sl-attrs th {
    text-align: left; padding: 7px 8px; font-size: .74rem; font-weight: 600;
    color: #8b8b98; text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1px solid #eeeef4;
}
.sl-attrs td { padding: 5px 4px; }
.sl-attrs td:first-child { padding-left: 0; }
.sl-attrs td:last-child  { padding-right: 0; }
.sl-attrs input, .sl-attrs select {
    width: 100%; padding: 8px 10px; border: 1px solid #d9d9e3;
    border-radius: 8px; font-size: .86rem; outline: none;
}
.sl-attrs input:focus, .sl-attrs select:focus { border-color: #F2A71B; }

@media (max-width: 575px) {
    /* На телефоне таблица в три колонки нечитаема — разворачиваем в карточки. */
    .sl-attrs thead { display: none; }
    .sl-attrs tr { display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f5; }
    .sl-attrs td { display: block; padding: 3px 0; }
}

/* Переключатель исполнений и характеристики на странице товара (buy-box, варианты).
   Варианты — ссылки, а не JS: у каждого своя цена и наличие, то есть своя страница. */
.bb_variants { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bb_variant {
    display: flex; flex-direction: column; gap: 2px; min-width: 96px;
    padding: 8px 12px; border: 1px solid #d9d9e3; border-radius: 10px;
    color: #33343d; text-decoration: none; transition: border-color .15s, background .15s;
}
.bb_variant:hover { border-color: #F2A71B; text-decoration: none; color: #33343d; }
.bb_variant--current { border-color: #F2A71B; background: #fdf3f3; cursor: default; }
.bb_variant_label { font-size: .85rem; font-weight: 600; }
.bb_variant_price { font-size: .8rem; color: #1E2228; font-weight: 700; }
.bb_variant_out { font-size: .7rem; color: #b9772a; }

.bb_axes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: .85rem; color: #5a5a68; }
.bb_axes b { color: #23242b; }

.bb_specs { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .86rem; }
.bb_specs td { padding: 7px 0; border-bottom: 1px solid #f2f2f7; }
.bb_specs td:first-child { color: #8b8b98; width: 45%; }
.bb_specs td:last-child { color: #23242b; font-weight: 600; }
.bb_specs tr:last-child td { border-bottom: none; }

/* Строка «ещё N предложений · M вариантов» может нести оба признака сразу. */
.offers_note span { display: inline-flex; align-items: center; gap: 5px; }
.offers_note span + span { margin-left: 12px; }
.offers_note_var { color: #5b53b5; }

/* Отзывы о продавцах (Фаза 4): звёзды в блоке предложений и форма оценки. */
.bb_offer_rating { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-weight: 400; }
.srev_stars { color: #f0a500; letter-spacing: 1px; font-size: .82rem; }
.srev_count { font-size: .76rem; color: #8b8b98; }
.srev_none  { font-size: .74rem; color: #b6b6c0; }

.srev_form {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: #fafafc; border: 1px solid #e7e7ee; border-radius: 10px;
    padding: 10px 14px; margin: -4px 0 8px;
}
.srev_form_label { font-size: .84rem; font-weight: 600; color: #33343d; }
.srev_form select, .srev_form input[type="text"] {
    padding: 7px 10px; border: 1px solid #d9d9e3; border-radius: 8px; font-size: .84rem;
}
.srev_form input[type="text"] { flex: 1 1 220px; min-width: 0; }

/* Отзывы на странице магазина продавца (Фаза 4). */
.srev_head { font-size: 1.1rem; font-weight: 700; color: #23242b; margin: 0 0 14px; }
.srev_head span { color: #8b8b98; font-weight: 400; font-size: .9rem; }
.srev_list { display: grid; gap: 10px; }
.srev_item { background: #fff; border: 1px solid #e7e7ee; border-radius: 12px; padding: 14px 16px; }
.srev_item_top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.srev_author { font-weight: 700; font-size: .88rem; color: #23242b; }
.srev_date { font-size: .76rem; color: #9a9aa6; margin-left: auto; }
.srev_text { margin: 0; font-size: .88rem; color: #43444d; line-height: 1.5; }
.srev_reply {
    margin: 8px 0 0; padding: 8px 12px; background: #fafafc; border-left: 3px solid #F2A71B;
    border-radius: 0 8px 8px 0; font-size: .84rem; color: #43444d;
}

/* Возвраты (Фаза 4): статусы заявок, форма покупателя, предупреждение продавцу. */
.ret_badge--requested { background: #fdf1e3; color: #b9772a; }
.ret_badge--approved  { background: #e6f6ea; color: #1f8a3b; }
.ret_badge--rejected  { background: #fdecec; color: #c0392b; }
.ret_badge--cancelled { background: #f0f0f5; color: #7a7a88; }

.ret_row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e7e7ee; border-left-width: 3px;
    border-radius: 10px; padding: 9px 14px; margin: -4px 0 8px; font-size: .84rem;
}
.ret_row--requested { border-left-color: #b9772a; }
.ret_row--approved  { border-left-color: #1f8a3b; }
.ret_row--rejected  { border-left-color: #c0392b; }
.ret_row--cancelled { border-left-color: #b6b6c0; }
.ret_status { font-weight: 700; color: #23242b; }
.ret_meta { color: #6b6b78; font-size: .8rem; }
.ret_resolution { flex: 1 1 100%; color: #43444d; font-size: .82rem; }

.ret_ask { margin: -4px 0 10px; }
.ret_ask summary {
    cursor: pointer; font-size: .82rem; color: #1E2228; font-weight: 600;
    list-style: none; display: inline-block; padding: 4px 0;
}
.ret_ask summary::-webkit-details-marker { display: none; }
.ret_ask summary::before { content: '↩ '; }
.ret_form {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    background: #fafafc; border: 1px solid #e7e7ee; border-radius: 10px;
    padding: 10px 14px; margin-top: 6px;
}
.ret_form select, .ret_form input[type="text"] {
    padding: 7px 10px; border: 1px solid #d9d9e3; border-radius: 8px; font-size: .84rem;
}
.ret_form input[type="text"] { flex: 1 1 200px; min-width: 0; }

.ret_warn {
    background: #fff8ec; border: 1px solid #f2d9ae; border-radius: 10px;
    padding: 9px 13px; margin: 8px 0; font-size: .84rem; color: #7a5a21;
}
.ret_warn b { color: #b9772a; }

/* Статусы оплаты заказа (Фаза 3b). */
.pay_badge {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.pay_badge--unpaid   { background: #f0f0f5; color: #7a7a88; }
.pay_badge--pending  { background: #fdf1e3; color: #b9772a; }
.pay_badge--paid     { background: #e6f6ea; color: #1f8a3b; }
.pay_badge--refunded { background: #ede7fd; color: #6b4fbb; }
.pay_badge--failed   { background: #fdecec; color: #c0392b; }

/* ── Страница-хаб «Каталоги»: плитки разделов ─────────────────────────────
   Светлые карточки в сетке, как на крупных автомаркетах; акцент — красный
   фирменный при наведении. Адаптив: 4→3→2 колонки. */
.cat-hub { padding: 28px 0 48px; background: #f2f3f5; }
.cat-hub__title { font-size: 28px; font-weight: 800; color: #1a1c22; margin: 6px 0 20px; }
.cat-hub__group {
    background: #fff; border-radius: 16px; padding: 22px 22px 26px;
    margin-bottom: 20px; box-shadow: 0 1px 4px rgba(20,22,30,.05);
}
.cat-hub__gtitle { font-size: 19px; font-weight: 700; color: #1a1c22; margin: 2px 0 16px; }
.cat-hub__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; min-height: 148px; padding: 18px 12px;
    background: #f5f6f8; border: 1px solid #eef0f3; border-radius: 12px;
    color: #23252c; text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.cat-tile:hover {
    transform: translateY(-3px); background: #fff;
    border-color: #f1c6c6; box-shadow: 0 8px 22px rgba(242,167,27,.10);
    color: #23252c;
}
.cat-tile__ic {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 56px;
}
.cat-tile__ic i { font-size: 34px; color: #1E2228; }
.cat-tile__ic img { max-width: 64px; max-height: 56px; object-fit: contain; }
.cat-tile__label { font-size: 14px; font-weight: 600; line-height: 1.3; }

@media (max-width: 991px) { .cat-hub__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) {
    .cat-hub__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cat-hub__title { font-size: 22px; }
    .cat-tile { min-height: 128px; }
    .cat-tile__ic i { font-size: 28px; }
}

/* ── Фото товара: кнопка «во весь экран» (лайтбокс) ─────────────────────────
   Главное фото накрыто слоем elevateZoom, поэтому даём явную кнопку-«развернуть».
   Логика открытия — в app.js (magnificPopup). */
#img-1 { position: relative; }
.pd-zoom-link { display: block; cursor: zoom-in; }
.pd-zoom-btn {
    position: absolute; top: 10px; right: 10px; z-index: 20;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(24,26,31,.62); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1; transition: background .15s, transform .15s;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pd-zoom-btn:hover { background: #F2A71B; transform: scale(1.06); }
.pd-zoom-btn:focus { outline: 2px solid #1E2228; outline-offset: 2px; }

/* ── Подбор по авто (фильтр каталога) ──────────────────────────────────────
   Три зависимых списка во всю ширину сайдбара; на телефоне — так же. */
.widget_vehicle .veh_filter { display: flex; flex-direction: column; gap: 10px; }
.widget_vehicle .veh_filter select {
    width: 100%; padding: 10px 12px; border: 1px solid #e3e3ea; border-radius: 8px;
    background: #fff; font-size: .9rem; color: #33343b; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23999' stroke-width='1.6' fill='none'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.widget_vehicle .veh_filter select:disabled { background-color: #f4f4f7; color: #aaa; cursor: not-allowed; }
.widget_vehicle .veh_filter select:focus { border-color: #F2A71B; outline: none; }

/* ── «Подходит для» на карточке товара ─────────────────────────────────────── */
.pd-fit { margin: 8px 0 2px; font-size: .9rem; color: #555; line-height: 1.7; }
.pd-fit-label { font-weight: 600; color: #333; margin-right: 4px; }
.pd-fit-label i { color: #1E2228; margin-right: 4px; }
.pd-fit-list a { color: #1E2228; }
.pd-fit-list a:hover { text-decoration: underline; }
.pd-fit-more { font-weight: 600; cursor: pointer; }

/* ── Блок «Применимость» в формах товара (продавец/админ) ──────────────────── */
.veh-block-label { display: block; font-weight: 600; margin-bottom: 8px; }
.veh-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.veh-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.veh-row select { width: 100%; padding: 8px 10px; border: 1px solid #d9dce1; border-radius: 8px; background: #fff; font-size: .88rem; }
.veh-row select:disabled { background: #f4f4f7; color: #aaa; }
.veh-row .vf-del { width: 34px; height: 34px; border: 1px solid #eec4c4; background: #fff; color: #c0392b; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.veh-row .vf-del:hover { background: #c0392b; color: #fff; }
.veh-add { margin-top: 2px; }
@media (max-width: 600px) {
    .veh-row { grid-template-columns: 1fr 1fr; }
    .veh-row .vf-mod { grid-column: 1 / 2; }
    .veh-row .vf-del { grid-column: 2 / 3; justify-self: end; }
}

/* ── Справочник авто: подсказки блока «Применимость» (формы товара) ─────────── */
.veh-block-hint { color: #777; font-size: .85rem; margin: 2px 0 10px; }
.veh-block-ex { color: #888; font-size: .82rem; margin: 8px 0 0; }
.veh-req { margin-top: 10px; }
.veh-req-toggle { color: #1E2228; font-size: .85rem; font-weight: 600; }
.veh-req-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.veh-req-form input[type=text] { flex: 1 1 150px; min-width: 120px; padding: 8px 10px; border: 1px solid #dcdce3; border-radius: 8px; font-size: .85rem; }
.vr-status { font-size: .82rem; color: #1f8a3b; }

/* ── Админка «Автомобили»: списки и форма модификаций ──────────────────────── */
.veh-list .veh-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #f0f0f4; border-left: 3px solid transparent; border-radius: 4px; }
.veh-list .veh-item.is-active { border-left-color: #F2A71B; background: #fdeeee; }
.veh-list .veh-item:hover { background: #f8f8fb; }
.veh-item-name { flex: 1; color: #33343b; text-decoration: none; }
.veh-item.is-active .veh-item-name { font-weight: 700; color: #1E2228; }
.veh-count { color: #aaa; font-size: .8rem; }
.veh-del { width: 30px; height: 30px; border: 1px solid #eec4c4; background: #fff; color: #c0392b; border-radius: 7px; cursor: pointer; flex: 0 0 auto; }
.veh-del:hover { background: #c0392b; color: #fff; }
.veh-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.veh-modgrid label { display: flex; flex-direction: column; font-size: .8rem; color: #555; font-weight: 600; gap: 3px; }
.veh-modgrid label b { color: #1E2228; }
.veh-modgrid input, .veh-modgrid select { padding: 7px 9px; border: 1px solid #ddd; border-radius: 7px; font-size: .85rem; font-weight: 400; }
@media (max-width: 600px) { .veh-modgrid { grid-template-columns: 1fr; } }

/* ── Умный логотип QISM ──────────────────────────────────────────────────────
   Десктоп — полный логотип (со слоганом по языку: RU/ТҶ, EN — без слогана).
   Телефон — только знак (гайка с болтом). Переключение по ширине экрана. */
.logo .logo-mark { display: none; }          /* знак скрыт на десктопе */
.logo .logo-full { height: 72px; }            /* полный логотип со слоганом крупнее */
@media (max-width: 991px) { .logo .logo-full { height: 58px; } }
@media (max-width: 767px) {
    .logo .logo-full { display: none; }        /* на телефоне прячем полный… */
    .logo .logo-mark { display: block; }       /* …и показываем знак */
}

/* ══ QISM: графит + шафран — контраст и акценты ══════════════════════════ */
.header_top, .header_middle, .header_bottom.sticky-header.sticky { background:#1E2228 !important; }
.header_phone a, .header_phone a:hover { color:#F2A71B !important; }
.main_menu nav > ul > li.active > a, .main_menu nav ul li a.active,
.main_menu nav > ul > li:hover > a { color:#F2A71B !important; }
/* кнопки/полосы на шафране → тёмный графитовый текст */
.search_box button, .vin_search_form button, .boxed_btn, .button,
.shop_wrapper .single_product .action_links li.add_to_cart a,
.categories_title, .categories_title h2 { color:#1E2228 !important; }
.categories_title { background:#F2A71B !important; }
/* цены — графит (читаемо на белом) */
.price, .product_price, .new_price, .current_price,
.shop_wrapper .single_product .price { color:#1E2228 !important; }

/* QISM: акценты на тёмном + контраст после перевода вторичного красного */
.az-nav-vin, .az-nav-vin:hover { color:#F2A71B !important; }        /* VIN в меню на тёмной полосе */
.auth_tabs .auth_tab.active { color:#1E2228 !important; }           /* активная вкладка «ПО НОМЕРУ»: тёмный текст на шафране */
.auth_tabs .auth_tab:hover { color:#D98E0A !important; }            /* ховер вкладки — тёмный шафран (читаемо на белом) */
.az-mega-promo { background:#1E2228 !important; }                   /* промо «ПОПУЛЯРНО» — графит (белый текст читаем) */
.az-mega-links a i { color:#D98E0A !important; }                    /* иконки меню — тёмный шафран (на белом) */


/* ══ QISM: контраст — тёмный текст на шафрановых кнопках/бейджах ══════════ */
#checkout_coupon button:hover,#frm_subscribe form a.theme-btn-outlined:hover,#popup2:hover,#scrollUp,#supMoreBtn:hover,.accordion_area .card-header,.account_form button,.action_links ul li.add_to_cart a,.auth_tabs .auth_tab.active,.avail_toggle input:checked + .avail_switch,.az-nav-badge,.blog_details .social_sharing ul li a:hover,.button,.canvas_close a:hover,.cart_button a.active,.cart_button a:hover,.cart_count, .wishlist_count,.cart_remove a:hover,.cart_submit button:hover,.categories_title,.checkout_btn a,.checkout_form label.righ_0:hover,.color_three .action_links ul li.add_to_cart a:hover,.color_three .quick_button a:hover,.coming_soon_link ul li a,.comment_reply a:hover,.comments_form form button:hover,.compare-table .table tbody tr td.pro-addtocart .add-to-cart,.contact_message button:hover,.coupon_inner button:hover,.dashboard_content button:hover,.dashboard_tab_button ul li a.active,.dashboard_tab_button ul li a:hover,.deal_nav button:hover,.error_form a,.faq-style-wrap .panel-title a[aria-expanded=true],.footer_social ul li a.facebook:hover,.footer_social ul li a.google:hover,.footer_social ul li a.instagram2:hover,.footer_social ul li a.instagram:hover,.footer_social ul li a.rss:hover,.footer_social ul li a.twitter:hover,.footer_social ul li a.youtube:hover,.footer_social ul li a:hover,.form_group button:hover,.header_bottom,.header_middle .search_box button,.header_middle .vin_search_form button,.header_middle .wishlist_count,.header_wishlist a,.label_product span.label_sale,.mini_cart_wrapper > a,.modal_add_to_cart form button:hover,.modal_social ul li.facebook a:hover,.modal_social ul li.google-plus a:hover,.modal_social ul li.linkedin a:hover,.modal_social ul li.pinterest a:hover,.modal_social ul li.twitter a:hover,.msearch_tabs .mst.is-active,.newsletter_three .subscribe_form form button:hover,.offcanvas_footer ul li.facebook a:hover,.offcanvas_footer ul li.google-plus a:hover,.offcanvas_footer ul li.linkedin a:hover,.offcanvas_footer ul li.pinterest a:hover,.offcanvas_footer ul li.twitter a:hover,.order_button button,.pagination ul li a:hover,.pagination ul li.current,.pd-zoom-btn:hover,.product_items .single_product .action_links li.add_to_cart a,.product_nav ul li a,.product_navactive.owl-carousel .owl-nav div:hover,.product_review_form button:hover,.product_tab_btn ul li a::before,.product_variant.quantity button,.quick_button a,.readmore_button a,.right_caption .action_links ul li.add_to_cart a,.s-tab-zoom.owl-carousel .owl-nav div:hover,.search_box button,.search_unibar .search_box button,.search_unibar .vin_search_form button,.shop_wrapper .single_product .action_links li.add_to_cart a,.sidebar_widget .widget_filter button[type="submit"]:hover,.sl-btn-primary,.sl-bubble--me,.sl-nav a.active,.sl-nav-badge,.sl-per--active,.slider_area .owl-dots .owl-dot.active,.slider_area .owl-dots .owl-dot:hover,.slider_content a,.sticky-header.sticky .categories_title,.sticky_search button,.subscribe_form form button,.sup-buy-btn,.sup-dlv-submit,.table_desc.wishlist table tbody tr td.product_total a,.tag_cloud a:hover,.tag_widget ul li a:hover,.team_content h5::before,.testimonial-two .owl-dots .owl-dot,.ui-slider-horizontal .ui-slider-range,.vin_search_form button,.widget_list > ul > li input:checked ~ .checkmark,.widget_list.widget_filter form button:hover,.widget_search button:hover,a.az-contact-btn { color:#1E2228 !important; }

/* Акценты на ТЁМНОМ фоне → шафран (там тёмный текст был бы невидим) */
.footer_contact .contact_text a, .footer_contact .contact_text p strong,
.color_three .contact_text p strong, .color_three .contact_text p strong a { color:#F2A71B !important; }

/* QISM: добить точечные красные (стрелка слайдера, хвостики бейджа скидки) */
.slider_content a i { background:#D98E0A !important; color:#1E2228 !important; }  /* стрелка » — тёмный шафран + графитовый шеврон (видна на тёмном слайде) */