/* CSS Variables */
/* Шрифты темы: Exo 2 + Open Sans (Google Fonts, подключаются в functions.php).
   TikTok Sans убран — в новой теме Motors его нет. */

:root {
    /* Красный акцент бренда Gladiator (лого-шеврон, цены, CTA) — яркий, как на мокапе каталога */
    --color-brand: #DE1E26;
    --color-brand-dark: #B4141B;
    --color-brand-light: #F26A6F;

    /* Основной фирменный синий Gladiator (секции каталога, тёмные блоки, футер) */
    --color-primary: #0F4C7D;
    --color-primary-dark: #101820;
    --color-primary-light: #1C5F97;
    /* Синий градиент секции каталога (по мокапу: яркий синий, темнее по краям) */
    --gradient-catalog: linear-gradient(180deg, #123E6E 0%, #205FA0 40%, #14477C 78%, #0E3562 100%);

    --color-fon-contrast: #101820;
    --color-secondary: #767e8f;
    --color-disable: #a8aebc;
    --color-contrast-lite: #393c40;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray: #efefef;
    --color-gray-lite: #f5f5f5;
    --fon-gray-lite: #f7f7f7;

    /* Шрифты строго из темы Motors (мотоверсия): Exo 2 — заголовки/дисплей, Open Sans — текст.
       Токен --font-manrope исторически = «основной текстовый», поэтому перенаправляем его на Open Sans,
       чтобы весь body-текст сменился разом (Manrope в новой теме нет). */
    --font-manrope: "Open Sans", sans-serif;
    --font-exo2: "Exo 2", "Open Sans", sans-serif;
    /* Display/заголовочный шрифт — Exo 2 (фирменный мото-стиль).
       Токены --font-tiktok-sans и --font-condensed исторически используются в заголовках/акцентах,
       поэтому перенаправляем их на Exo 2 — так заголовки меняются разом.
       TikTok Sans в новой теме нет, поэтому он полностью убран. */
    --font-tiktok-sans: var(--font-exo2);
    --font-condensed: var(--font-exo2);

    /* Высота фиксированной шапки. До 1280px виден только топбар (64px),
       с 1280px под ним появляется красный навбар (55px) — итого 119px.
       Страницы без hero отступают от шапки через эту переменную. */
    --header-height: 64px;
}

@media (min-width: 1280px) {
    :root {
        --header-height: 119px;
    }
}

/* Заголовки — Exo 2 (фирменный мото-стиль) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-exo2);
}

.font-exo2 {
    font-family: var(--font-exo2);
}


/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* У <fieldset> в браузере по умолчанию своя рамка (border: 2px groove ...)
   и min-width: min-content — общий сброс *{} их не трогает (border и min-width
   не входят в тот список). min-width: min-content не даёт fieldset сжаться
   во флекс/грид-контейнере — классический источник горизонтальной прокрутки
   на узких экранах. Только сброс умолчаний — оформление групп полей (отступы,
   разделители, вид радиокнопок) задаёт задача 10. */
fieldset {
    border: none;
    min-width: 0;
}

html {
    scroll-behavior: smooth;
    /* Основной текстовый шрифт — Open Sans (как в Motors для мототехники: тело — Open Sans,
       заголовки/кнопки/тайтлы — Exo 2). Заголовки и акценты переопределяют это ниже. */
    font-family: var(--font-manrope);
    font-optical-sizing: auto;
    background-color: var(--color-white);
    color: #1a1a1a;
    /* Резервируем место под скроллбар — меньше сдвигов при overflow: hidden (поиск, модалки) */
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    overflow-x: hidden;
}

main {
    min-height: 65vh;
}

button,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-exo2);
}

/* Поля форм по умолчанию не наследуют шрифт (UA-Arial). Приводим к шрифту темы —
   основной текст Open Sans (в т.ч. поля поиска, инпуты FluentForm, select). */
input,
textarea,
select {
    font-family: var(--font-manrope);
}

/* FluentForm грузит свой CSS позже — перебиваем его -apple-system стек шрифтом темы. */
.ff-el-form-control,
.ff-el-form-control:focus,
.fluentform select,
.fluentform textarea {
    font-family: var(--font-manrope) !important;
}

/* Remove underline from all links */
a {
    text-decoration: none;
    color: #fff;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* Typography */
.font-manrope {
    font-family: var(--font-manrope);
    font-optical-sizing: auto;
}

.font-tiktok-sans {
    font-family: var(--font-condensed);
}

.condensed-slanted-text {
    font-family: var(--font-condensed);
    /* Раньше был наклон через оси TikTok Sans (wdth/slnt); у Exo 2 их нет,
       поэтому наклонный акцент делаем курсивом Exo 2. */
    font-style: italic;
    font-weight: 500;
  }

/* Container */
/* Экраны оплаты и «Заказ получен»: кроме наших шаблонов WooCommerce печатает
   там уведомления, форму входа и запрос подтверждения почты — всё вне нашей
   разметки. Ширину и отступы всему этому даёт общая обёртка .woocommerce через
   этот же контейнер: заводить второй с собственной шириной нельзя, по
   договорённости она едина для всего сайта. */
.container,
body.gmotor-order-pay .woocommerce,
body.gmotor-thanks .woocommerce {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 768px) {

    .container,
    body.gmotor-order-pay .woocommerce,
    body.gmotor-thanks .woocommerce {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1024px) {

    .container,
    body.gmotor-order-pay .woocommerce,
    body.gmotor-thanks .woocommerce {
        max-width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1280px) {

    .container,
    body.gmotor-order-pay .woocommerce,
    body.gmotor-thanks .woocommerce {
        max-width: 1440px;
    }
}

/* Sections */
section {
    /* margin: 96px 0; */
    margin: 48px 0;
}

@media (min-width: 768px) {
    section {
        margin: 96px 0;
    }
}

@media (min-width: 1024px) {
    section {
        margin: 120px 0;
    }
}

/* Buttons */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 28px;
    max-width: max-content;
    /* Motors-стиль: без скруглений */
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
    border: none;
    /* Кнопки — дисплейный Exo 2 (как в Motors), а не наследуемый Open Sans */
    font-family: var(--font-exo2);
}

@media screen and (max-width: 767px) {
    .btn {
        height: 44px;
    }
    
}

.btn-primary {
    background-color: var(--color-brand);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-brand-dark) !important;
}

/* Motors-стиль вторичной кнопки: тёмная плашка, белый текст, без скруглений */
.btn-secondary {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border: none;
}

.btn-secondary:hover {
    background-color: var(--color-brand) !important;
    color: var(--color-white);
}

.btn-arrow-right::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    background-image: url('../images/icons/arrow-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
    margin-right: 5px;
}

.btn-outline-brand {
    color: var(--color-brand);
    background: #fff;
}

.btn-outline-brand.btn-arrow-right::after {
    background-image: url('../images/icons/arrow-right-brand.svg');
    width: 20px;
    height: 20px;
    margin: 0;
}

.text-color-brand {
    color: var(--color-brand);
}

.text-family-brand {
    /* transform: scaleX(1.5); */
    transform-origin: left;
    word-break: break-word;
    display: inline-block;
    letter-spacing: -0.04em;
    font-family: var(--font-tiktok-sans);
}

/* Product description video */
.product-main__description-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-main__description > div {
    width: 50%;
}

/* Видео в ACF-блоке «Описание» необязательно: без него текст занимает всю ширину контейнера */
.product-main__description-text:only-child {
    width: 100%;
}

.product-main__description-text:only-child .product-main__description-description {
    padding-right: 0;
}

@media screen and (max-width: 1023px) {
    .product-main__description > div {
        width: 100%;
    }
}

.product-main__description-video {
    position: relative;
    width: 50%;
}

.product-main__description-video-inner {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
}

.product-main__description-video-element {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

@media screen and (max-width: 1023px) {
    .product-main__description-video-element {
        height: 378px;
        object-fit: cover;
    }
}

@media screen and (max-width: 767px) {
    .product-main__description-video-element {
        height: 230px;
    }
}

.product-main__description-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.product-main__description-video-overlay:hover {
    background: rgba(0,0,0,0.7);
}

.product-main__description-video-play-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.3s ease;
}

.product-main__description-video-play-icon:hover {
    background: var(--color-brand-dark);
}

.product-main__description-video-inner.is-playing .product-main__description-video-overlay {
    opacity: 0;
    pointer-events: none;
}


body.single-product {
    background: #0e1315;
}

/* Тень от верха экрана под оба меню (хедер + прилипающая навигация товара) */
body.single-product::before,
body.privacy-policy::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(180deg, #101820 0%, rgba(16, 24, 32, 0) 100%);
    opacity: 0.4;
    z-index: 40;
    pointer-events: none;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    /* petrol/navy бренда Gladiator (#054261) — сплошной, Motors-стиль */
    background: var(--color-primary);
    width: 100%;
    max-width: 100%;
    transition: 
        width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        max-width 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        top 0.6s ease,
        background-color 0.6s ease,
        border-radius 0.6s ease,
        box-shadow 0.6s ease;
}

@media (max-width: 1023px) {
    .header {
        height: 64px;
    }
}

.header-active {
    top: 8px;
    background-color: var(--color-primary);
    box-shadow: 0 10px 30px -8px rgba(5, 66, 97, 0.45);
    border-radius: 10px;
    
    width: calc(100% - 16px); 
    max-width: 1416px;
}

.header-container {
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transition: all 0.5s ease;
}

@media (min-width: 640px) {
    .header-container {
        align-items: center;
    }
}

/* Logo */
.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-brand);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

/* Логотип с подписью «Техника для активного отдыха» внутри картинки —
   задаём только высоту, ширина по пропорции, иначе картинка сжимается. */
.logo-img {
    width: auto;
    height: 36px;
    display: block;
}

@media (max-width: 767px) {
    .logo-img {
        height: 32px;
    }
}

/* Desktop Menu */
.desktop-menu {
    display: none;
}

@media (min-width: 1280px) {
    .desktop-menu {
        display: block;
    }
}

.header-menu-list {
    color: var(--color-white);
    font-size: 14px;
    display: flex;
    gap: 16px;
    list-style: none;
}

/* Только прямые пункты нав-бара: без «>» эти правила достают до ссылок внутри
   мега-меню каталога и рисуют там вторую подсветку со своим отступом и скруглением */
.header-menu-list > li.current_page_item > a,
.header-menu-list > li.current_page_item > a:hover {
    background-color: var(--color-brand);
}

.header-menu-list > li > a {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 8px;
}

.header-menu-list > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-right: 60px;
}

@media (min-width: 640px) {
    .header-actions {
        padding-right: 72px;
    }
}

@media (min-width: 1280px) {
    .header-actions {
        padding-right: 0;
    }
}

.icon-button {
    display: flex;
    padding: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.icon-button.header-search-toggle.is-active {
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.icon-button.header-search-toggle.is-active svg path {
    stroke: var(--color-brand);
}

/* Пока открыт поиск — шапка выше бургера. Ширину без «прыжка» даёт scrollbar-gutter: stable на html, без второго padding-right на body. */
html.header-search-open {
    overflow: hidden;
}

body.header-search-open {
    overflow: hidden;
}

body.header-search-open #main-header {
    z-index: 1050;
}

/*
 * Слой вне #main-header в разметке: у .header стоит transform — fixed у потомков = привязка к хедеру,
 * а не к вьюпорту; затемнение с top: var(--header-search-offset) тогда схлопывалось по высоте.
 * z-index ниже открытого хедера (1050), выше контента страницы.
 */
.header-search {
    position: fixed;
    inset: 0;
    z-index: 1040;
    pointer-events: none;
    visibility: hidden;
}

.header-search.is-open {
    pointer-events: auto;
    visibility: visible;
}

.header-search__backdrop {
    position: fixed;
    /* top: var(--header-search-offset, 88px); */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(15, 20, 30, 0.55);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.header-search.is-open .header-search__backdrop {
    opacity: 1;
}

.header-search__header {
    background: #fff;
    border-radius: 20px;
}

.header-search__panel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-search-offset, 88px);
    z-index: 2;
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
    .header-search__panel {
        top: 84px;
    }
}

.header-search.is-open .header-search__panel {
    opacity: 1;
    transform: translateY(0);
}

.header-search__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    padding: 12px 25px;
    box-sizing: border-box;
}

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

.header-search__input {
    flex: 1;
    min-width: 0;
    padding: 14px 0px;
    border: none;
    background: #fff;
    color: #101820;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 400;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Нативный «крестик» очистки у type="search" (Chrome, Safari, Edge) */
.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.header-search__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #101820;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.header-search__close:hover {
    background-color: rgba(16, 24, 32, 0.06);
}

.header-search__results {
    list-style: none;
    margin: 16px;
    margin-top: 0;
    padding-top: 16px;
    /* max-width: 1440px; */
    max-height: min(58vh, 440px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(16, 24, 32, 0.08);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.header-search__results::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

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

.header-search__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 36px 16px;
    list-style: none;
    border: 0;
}

.header-search__loader-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(16, 24, 32, 0.12);
    border-top-color: var(--color-brand);
    animation: compare-list-loader-spin 0.75s linear infinite;
    flex-shrink: 0;
}

.mobile-search-results .header-search__loading {
    border-bottom: none;
}

@keyframes header-search-item-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-search__results.header-search__results--has-products .mobile-search-item {
    animation: header-search-item-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(1) { animation-delay: 0.02s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(2) { animation-delay: 0.05s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(3) { animation-delay: 0.08s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(4) { animation-delay: 0.11s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(5) { animation-delay: 0.14s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(6) { animation-delay: 0.17s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(7) { animation-delay: 0.2s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(8) { animation-delay: 0.23s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(9) { animation-delay: 0.26s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(10) { animation-delay: 0.29s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(11) { animation-delay: 0.32s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(12) { animation-delay: 0.35s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(13) { animation-delay: 0.38s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(14) { animation-delay: 0.41s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(15) { animation-delay: 0.44s; }
.header-search__results.header-search__results--has-products .mobile-search-item:nth-child(n+16) { animation-delay: 0.47s; }

.header-search__results .mobile-search-item a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 8px !important;
    text-decoration: none !important;
    color: #101820 !important;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.header-search__results .mobile-search-item a:hover {
    background-color: rgba(16, 24, 32, 0.04);
    color: var(--color-brand) !important;
}

.header-search__results .mobile-search-item img {
    width: 59px !important;
    height: 48px !important;
    margin-right: 0 !important;
    object-fit: contain;
    object-position: center;
    background-color: var(--fon-gray-lite, #f7f7f7);
    border-radius: 8px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .header-search__backdrop,
    .header-search__panel {
        transition: none;
    }

    .header-search__panel {
        transform: none;
    }

    .header-search__loader-spinner {
        animation: none;
        border-color: rgba(16, 24, 32, 0.2);
        border-top-color: var(--color-brand);
    }

    .header-search__results.header-search__results--has-products .mobile-search-item {
        animation: none;
    }
}

.header-search__footer {
    padding: 0 24px;
    padding-bottom: 24px;
}

.icon {
    width: 24px;
    height: 24px;
}

/* Корзина в хедере: счетчик и сумма */
.header-cart-button {
    position: relative;
    text-decoration: none;
    width: auto;
    border-radius: 100px;
    padding: 0 12px;
}

.header-cart-count {
    position: absolute;
    top: 4px;
    left: 26px;
    background: var(--color-fon-contrast);
    color: var(--color-white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.header-compare-button {
    position: relative;
}

.header-compare-count {
    position: absolute;
    top: -7px;
    left: 32px;
    background: var(--color-brand);
    color: var(--color-white);
    border-radius: 50%;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.header-cart-total {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    line-height: 129%;
    margin-left: 16px;
    letter-spacing: -0.01em;
    color: black;
}

@media screen and (min-width: 1280px) and (max-width: 1360px) {
    .header-cart-total {
        display: none;
    }
}

.header-cart-button:hover .header-cart-total {
    display: block;
}

@media screen and (max-width: 1023px) {
    .header-cart-total {
        display: none !important;
    }
}

/* --- 1. ОСНОВНЫЕ СТИЛИ ПОДМЕНЮ --- */
/* Motors-стиль: тёмная подложка, белые тексты, без скруглений */
.sub-menu {
    position: absolute;
    background: var(--color-fon-contrast);
    color: var(--color-white);
    padding: 24px;
    border-radius: 0;
    font-size: 14px;
    /* margin-top: 24px; */
    z-index: 100;
    list-style-type: none;
    transform: translateX(-50%) translateY(0);

    /* Анимационные свойства */
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        visibility 0.4s,
        width 0.5s ease-in-out,
        background-color 0.5s ease-in-out;
}


/* Состояние при активации (когда есть класс .active) */
li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(24px);
}

.menu-item-has-children > a::after,
.menu-catalog-btn > a::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.10951 5.80113C4.19076 5.90873 4.43337 6.22986 4.57786 6.415C4.86724 6.7858 5.26264 7.27853 5.68918 7.76979C6.11788 8.26353 6.56823 8.7444 6.9683 9.09793C7.1689 9.27513 7.3451 9.40986 7.49056 9.49751C7.6273 9.57996 7.7081 9.59711 7.7081 9.59711C7.7081 9.59711 7.7865 9.57996 7.9233 9.49752C8.0687 9.40986 8.2449 9.27513 8.44556 9.09793C8.84563 8.7444 9.29596 8.26353 9.72463 7.76979C10.1512 7.27853 10.5466 6.7858 10.836 6.415C10.9804 6.22986 11.2227 5.90913 11.304 5.80153C11.4678 5.5792 11.7811 5.53126 12.0034 5.69499C12.2258 5.85873 12.2733 6.17173 12.1095 6.39413L12.1082 6.39579C12.023 6.50866 11.7718 6.84133 11.6243 7.0302C11.3284 7.4094 10.9214 7.91666 10.4798 8.4254C10.0402 8.93166 9.55643 9.45079 9.1077 9.84729C8.8839 10.045 8.65703 10.2228 8.43956 10.3539C8.23583 10.4767 7.9779 10.5976 7.7069 10.5976C7.4359 10.5976 7.17796 10.4767 6.97423 10.3539C6.75683 10.2228 6.52996 10.045 6.30616 9.84729C5.85741 9.45079 5.37363 8.93166 4.93408 8.4254C4.49238 7.91666 4.08543 7.4094 3.78951 7.03026C3.64198 6.8412 3.3907 6.50853 3.30565 6.39593L3.30455 6.39446C3.1408 6.17213 3.18806 5.8588 3.4104 5.69506C3.63274 5.53126 3.94575 5.57879 4.10951 5.80113Z' fill='white'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.menu-item-has-children.is-open > a::after,
.menu-catalog-btn.is-open > a::after {
    transform: rotate(-180deg);
}

.menu-catalog-btn > .sub-menu.active {
    display: flex;
}

/* --- 2. МЕГА-МЕНЮ (КОНТЕЙНЕРЫ) --- */
.mega-menu-dropdown {
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    /* Боковых отступов у панели нет: иначе полоса подсветки пункта обрывалась бы,
       не доходя до края. Отступ до текста задан внутри самих пунктов (см. .cat-title). */
    padding: 24px 0;
    width: calc(100% - 16px);
    /* width: 100%; */
    max-width: 1416px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 24px 40px 0px rgba(0, 0, 0, 0.45);
}

@media (min-width: 1280px) {
   .header-active .mega-menu-dropdown {
        width: 100%;
        /* width: calc(100% - 16px); */
   }
}

.mega-menu-dropdown ul {
    list-style: none;
    margin: 0;
    /* padding: 0; */
}

.mega-menu-dropdown__list {
    position: relative;
    width: 25%;
    flex-shrink: 0;
    display: flex;
    gap: 4px;
    flex-direction: column;
}

/* Чтобы дочерние блоки не перекрывали друг друга в невидимом состоянии */
.mega-menu-dropdown__list > li {
    position: static; 
}

.mega-menu-dropdown__products {
    max-height: 400px;   /* подбери под дизайн */
    overflow-y: auto;
    /* Линия колонки; у is-direct её нет — там линию даёт родительский .only-products */
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    /* Скрываем полосу прокрутки */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

/* --- 3. СКРЫТЫЕ СПИСКИ (БАЗОВОЕ СОСТОЯНИЕ) --- */
.mega-menu-dropdown__cat-child,
.mega-menu-dropdown__products {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    /* Без padding-left: пункты занимают всю ширину колонки, поэтому подсветка и
       красная полоса примыкают к линии-разделителю, как в первой колонке.
       Отступ до текста задаёт padding у самих пунктов. */
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;

    /* Скрываем и отключаем взаимодействие */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
    
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 10;
}

/* --- 4. ЛОГИКА ОТОБРАЖЕНИЯ (ХОВЕР) --- */

.mega-menu-dropdown__cat-child {
    overflow: visible; /* не режет 3-й блок */

    /* Светлая линия между колонками — как в Motors */
    border-left: 1px solid rgba(255, 255, 255, 0.12);

            /* Скрываем полосу прокрутки */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE и Edge */
}

.mega-menu-dropdown__cat-child > ul {
    max-height: 400px;   /* подбери высоту под дизайн */
    overflow-y: auto;
}

/* Показываем блок 2-го уровня (подкатегории или товары без подкатегорий) */
.mega-menu-dropdown__list > li:hover > .mega-menu-dropdown__cat-child {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* Показываем блок 3-го уровня (товары) при наведении на подкатегорию */
.mega-menu-dropdown__cat-child li:hover > .mega-menu-dropdown__products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* Надежный показ товаров при активной подкатегории (если :hover не срабатывает стабильно) */
.mega-menu-dropdown__cat-child li.is-active > .mega-menu-dropdown__products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* Доп. защита: после замены div->a hover иногда не срабатывает на li
   показываем товары при наведении на ссылку subcat-title */
.mega-menu-dropdown__cat-child li > a.subcat-title:hover + .mega-menu-dropdown__products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* КРИТИЧНО: Если подкатегорий нет — показываем товары СРАЗУ при наведении на категорию */
.mega-menu-dropdown__list > li:hover > .mega-menu-dropdown__cat-child.only-products .mega-menu-dropdown__products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none; /* Убираем translateY, так как он внутри static блока */
}

/* Доп. защита для only-products: показываем cat-child и товары при наведении на cat-title */
.mega-menu-dropdown__list > li > a.cat-title:hover + .mega-menu-dropdown__cat-child.only-products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.mega-menu-dropdown__list > li > a.cat-title:hover + .mega-menu-dropdown__cat-child.only-products .mega-menu-dropdown__products {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

/* Сброс для товаров, которые заменяют подкатегории */
.mega-menu-dropdown__cat-child.only-products .mega-menu-dropdown__products {
    position: static;
    padding-left: 0;
    border-left: none;
}

/* Защита: скрываем товары, если мышь ушла с блока подкатегорий.
   Важно: не скрываем товары, пока пользователь наводит на сам список товаров. */
.mega-menu-dropdown__cat-child:not(:hover) .mega-menu-dropdown__products:not(.is-direct) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Перебиваем hide-правило: если подкатегория активна — показываем товары */
.mega-menu-dropdown__cat-child > li.is-active > .mega-menu-dropdown__products:not(.is-direct) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s !important;
}

/* Ссылки внутри блоков cat-title/subcat-title должны занимать всю область */
.cat-title__link,
.subcat-title__link {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* --- 5. СТИЛИ ЭЛЕМЕНТОВ --- */
/* Motors-стиль: белый текст, выделение — красная полоса слева.
   Полоса всегда есть (прозрачная), иначе текст прыгал бы при наведении. */
.cat-title,
.subcat-title,
.mega-menu-dropdown__products a {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    /* Отступы внутри пункта, а не у контейнера: подсветка тянется на всю ширину
       колонки, а текст всё равно стоит в 24px от края (3px из них — полоса выделения) */
    padding: 0 24px 0 21px;
    border-radius: 0;
    border-left: 3px solid transparent;
    height: 80px;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    text-decoration: none;
    color: var(--color-white);
}

.mega-menu-dropdown__products a {
    height: 44px;
    border-radius: 0;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

.cat-name {
    flex: 1;
}

/* Стрелки в спокойном состоянии приглушены, при выделении становятся красными (правила ниже) */
.cat-title svg path,
.subcat-title svg path,
.mega-menu-dropdown__products a svg path {
    fill: rgba(255, 255, 255, 0.45);
    transition: fill 0.2s ease-in-out;
}

/* --- 6. ЦЕПОЧКА ПОДСВЕТКИ (РОДИТЕЛИ) --- */
.mega-menu-dropdown__list li:hover > .cat-title,
.mega-menu-dropdown__list li.is-active > .cat-title,
.mega-menu-dropdown__cat-child li:hover > .subcat-title {
    background: rgba(255, 255, 255, 0.07);
    border-left-color: var(--color-brand);
    color: var(--color-white);
    font-weight: 700;
}

.mega-menu-dropdown__list li:hover > .cat-title svg path,
.mega-menu-dropdown__list li.is-active > .cat-title svg path,
.mega-menu-dropdown__cat-child li:hover > .subcat-title svg path {
    fill: var(--color-brand);
}

/* Показываем подменю для активной категории даже при уходе курсора */
.mega-menu-dropdown__list > li.is-active > .mega-menu-dropdown__cat-child {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

/* --- 7. ТЕКУЩИЙ ЭЛЕМЕНТ (ПОД КУРСОРOM) --- */
.cat-title:hover,
.subcat-title:hover,
.mega-menu-dropdown__products li:hover a,
.sub-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-left-color: var(--color-brand) !important;
    color: var(--color-white) !important;
    font-weight: 700;
}

@media (min-width: 1280px) {
    .sub-menu > li > a {
        display: block;
        text-decoration: none;
        transition: font-weight 0.2s;
        width: 100%;
    }

    .sub-menu > li.menu-item a::before {
        content: attr(data-text);
        /* Форсируем нулевую высоту всеми способами */
        height: 0;
        line-height: 0;
        display: block;
        
        /* Скрываем визуально */
        visibility: hidden;
        overflow: hidden;
        
        /* Делаем текст жирным, чтобы он распирал блок ТОЛЬКО вширь */
        font-weight: bold;
        
        /* Убираем влияние на выделение текста */
        user-select: none;
        pointer-events: none;
    }
}

.cat-title:hover svg path,
.subcat-title:hover svg path,
.mega-menu-dropdown__products li:hover a svg path {
    fill: var(--color-brand) !important;
}

/* Сброс лишних фонов */
.cat-title:hover img { background: transparent !important; }

/* Создаем невидимый мостик между колонками, чтобы ховер не пропадал при переносе мыши */
.mega-menu-dropdown__cat-child::before,
.mega-menu-dropdown__products::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    width: 20px;
    height: 100%;
}

/* Витжет в меню */
.mega-menu__witget-promotion {
    width: 290px;
    /* Боковой отступ панели снят, поэтому виджет отодвигаем от правого края сам */
    margin-right: 24px;
    flex-shrink: 0;
    position: relative;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hero Section */
.hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    margin: 0;
    height: 310px;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hero-section {
        height: clamp(380px, 50vw, 540px);
    }
}

@media (max-width: 767px) {
    .hero-section {
        overflow: visible;
    }
}

.hero-container {
    padding-top: 48px;
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: var(--color-white);
}

.hero-title {
    font-size: clamp(32px, 5.7vw, 52px);
    font-weight: bold;
    font-family: var(--font-exo2);
    text-transform: uppercase;
    line-height: 1.1;
    /* margin-top: 68px; */
    height: 100%;
    display: flex;
    /* align-items: end; */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

@media (min-width: 640px) {
    .hero-title {
        line-height: 1.2;
        margin-top: 48px;
        display: block;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        margin-top: 14px;
    }
}

.hero-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    margin-top: 16px;
    max-width: 660px;
}

.hero-brand {
    color: var(--color-brand);
    font-weight: 800;
    letter-spacing: -0.04em;
    transform: scaleX(1.5);
    transform-origin: left;
    word-break: break-word;
    padding-right: 40%;
}

@media (min-width: 640px) {
    .hero-brand {
        padding-right: 0;
    }
}

.hero-bottom {
    background-color: var(--color-white);
    height: 32px;
    width: 100%;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
}

@media (min-width: 640px) {
    .hero-bottom {
        height: 39px;
        border-top-left-radius: 48px;
        border-top-right-radius: 48px;
    }
}

@media (min-width: 1024px) {
    .hero-bottom {
        height: 64px;
        border-top-left-radius: 56px;
        border-top-right-radius: 56px;
    }
}

.hero-category {
    margin-top: 16px;
    background-color: var(--color-white);
    border-radius: 50px;
    padding: 4px;
    width: max-content;
}

@media screen and (max-width: 767px) {
    .hero-category {
        margin-top: 22px;
    }
}

.hero-category__list-items {
    display: flex;
}

.hero-category a.category-item {
    color: var(--color-black);
    font-weight: 700;
    font-size: 12px;
    line-height: 133%;
    letter-spacing: -0.01em;
    white-space: nowrap;
    padding: 12px 24px;
    display: block;
    border-radius: 100px;
    transition: all 0.3s ease-in-out;
}

.hero-category a.category-item:hover {
    background-color: var(--color-gray);
}

.hero-category a.category-item.active {
    background-color: var(--color-brand);
    color: var(--color-white);
}

/* Мобильная версия: кастомный выпадающий список */
.hero-category__dropdown {
    display: none;
    position: relative;
    width: 100%;
}

.hero-category__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 133%;
    letter-spacing: -0.01em;
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid #87898f;
    border-radius: 100px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    text-align: left;
    font-family: inherit;

    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
}

.hero-category__trigger:hover {
    border-color: rgba(0, 0, 0, 0.2);
}

.hero-category__trigger[aria-expanded="true"] {
    /* border-radius: 100px 100px 0 0;
    border-bottom-color: transparent; */
}

.hero-category__trigger-icon {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.hero-category__dropdown.is-open .hero-category__trigger-icon {
    transform: rotate(180deg);
}

.hero-category__trigger-text-count {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: var(--color-black);
}

.hero-category__trigger-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-category__dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    background-color: var(--color-white);
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid #cfd0d2;
    border-top: none;
    
    padding: 4px 4px 12px;
    max-height: 240px;
    overflow-y: auto;
}

@media (max-width: 767px) {
    .hero-category__dropdown-list {
        padding: 4px;
    }
}

.hero-category__dropdown-list a {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
}

.hero-category__dropdown-item {
    display: block;
    padding: 11px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 133%;
    letter-spacing: -0.01em;
    color: var(--color-black);
    text-decoration: none;
    border-radius: 100px;
    transition: background-color 0.2s, color 0.2s;
}

.hero-category__dropdown-item:hover {
    background-color: var(--color-gray);
}

@media (max-width: 767px) {
    .hero-category__dropdown-item {
        border-radius: 8px;
    }
}

.hero-category__dropdown-item.active {
    background-color: var(--color-brand);
    color: var(--color-white);
    font-weight: 700;
}

/* Режимы отображения hero-category:
   - по умолчанию: список в строку (desktop/tablet)
   - .hero-category--dropdown-only: скрываем список, показываем дропдаун
*/

.hero-category__dropdown {
    display: none;
}

.hero-category--dropdown-only .hero-category__list-items {
    display: none !important;
}

.hero-category--dropdown-only .hero-category__dropdown {
    display: block;
}

@media (max-width: 767px) {
    .hero-category--dropdown-only.hero-category {
        width: 100%;
        max-width: 100%;
        margin-top: 7px;
        padding: 0;
    }

    .hero-category__dropdown-item.active {
        background: none;
        color: var(--color-brand);
    }
}

@media (min-width: 1024px) {
    /* На десктопе всегда показываем список в линию, без дропдауна */
    .hero-category__dropdown {
        display: none !important;
    }

    .hero-category__list-items {
        display: flex !important;
    }
}

/* ======================================================================
   Каталог (архив товаров и страницы категорий) — Motors-стиль баннера:
   заголовок Exo 2, фильтр категорий скошенными плашками («ромбами»),
   прижатыми к нижней кромке фонового фото.
   Скоуп — .hero-section--catalog, другие страницы с hero не затрагиваются.
   ====================================================================== */

.hero-section--catalog .hero-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: clamp(30px, 4.6vw, 45px);
    line-height: 1.24;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* --- Общий вид пунктов фильтра (Exo 2, uppercase — как в меню Motors) --- */
.hero-section--catalog .hero-category a.category-item,
.hero-section--catalog .hero-category__trigger,
.hero-section--catalog .hero-category__dropdown-item {
    font-family: var(--font-exo2);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* --- Десктоп: полоса скошенных плашек по нижней кромке баннера --- */
@media (min-width: 1024px) {
    .hero-section--catalog .hero-container {
        position: relative;
        padding-bottom: 0;
    }

    /* Белая «волна» внизу баннера мешает полосе — на каталоге её нет */
    .hero-section--catalog .hero-bottom {
        display: none;
    }

    /* Список товаров по умолчанию заезжает на баннер (раньше наезд прятался
       под белой «волной»). Без неё это белая полоса поверх фото — убираем наезд. */
    .hero-section--catalog + .product-card-list,
    .hero-section--catalog + .woocommerce-info,
    .hero-section--catalog + .catalog-empty {
        margin-top: 0;
    }

    /* left = внутренний отступ .container: полоса начинается там же, где заголовок */
    .hero-section--catalog .dropdown-wrapper {
        position: absolute;
        left: 40px;
        bottom: 0;
        z-index: 3;
    }

    .hero-section--catalog .hero-category {
        margin: 0;
        padding: 0;
        background: none;
        width: max-content;
    }

    /* Отступ компенсирует скос левого края первой плашки */
    .hero-section--catalog .hero-category__list-items {
        display: flex;
        padding-left: 12px;
    }

    .hero-section--catalog .hero-category a.category-item {
        position: relative;
        z-index: 1;
        display: block;
        padding: 12px 30px 12px 28px;
        font-size: 14px;
        color: var(--color-white);
        background-color: transparent;
        white-space: nowrap;
    }

    /* Сам «ромб»: фон-параллелограмм под неискажённым текстом */
    .hero-section--catalog .hero-category a.category-item::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: #243138;
        transform: skewX(-25deg);
        transition: background-color 0.3s ease;
    }

    .hero-section--catalog .hero-category a.category-item:hover {
        background-color: transparent;
    }

    .hero-section--catalog .hero-category a.category-item:hover::after {
        background-color: #2b3a40;
    }

    .hero-section--catalog .hero-category a.category-item.active {
        background-color: transparent;
        color: var(--color-white);
    }

    .hero-section--catalog .hero-category a.category-item.active::after {
        background-color: var(--color-brand);
    }

    .hero-section--catalog .hero-category a.category-item.active:hover::after {
        background-color: var(--color-brand-dark);
    }
}

/* --- Планшет/мобильный: список остаётся под заголовком, но в тёмной подаче --- */
@media (max-width: 1023px) {
    .hero-section--catalog .hero-category {
        background-color: #243138;
        padding: 0;
    }

    .hero-section--catalog .hero-category a.category-item {
        color: var(--color-white);
        padding: 11px 20px;
    }

    .hero-section--catalog .hero-category a.category-item:hover {
        background-color: #2b3a40;
    }

    .hero-section--catalog .hero-category a.category-item.active {
        background-color: var(--color-brand);
        color: var(--color-white);
    }

    /* Дропдаун (когда пункты не помещаются) — тоже тёмный */
    .hero-section--catalog .hero-category__trigger {
        background-color: #243138;
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--color-white);
    }

    .hero-section--catalog .hero-category__trigger:hover {
        border-color: rgba(255, 255, 255, 0.45);
    }

    .hero-section--catalog .hero-category__trigger-icon path {
        fill: var(--color-white);
        stroke: var(--color-white);
    }

    .hero-section--catalog .hero-category__dropdown-list {
        background-color: #243138;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .hero-section--catalog .hero-category__dropdown-item {
        color: var(--color-white);
    }

    .hero-section--catalog .hero-category__dropdown-item:hover {
        background-color: #2b3a40;
    }

    .hero-section--catalog .hero-category__dropdown-item.active {
        background-color: var(--color-brand);
        color: var(--color-white);
    }
}

/* ======================================================================
   Страница «О бренде» (page-about-us.php) — тёмная тема в стиле Motors.
   Типографика Exo 2 (заголовки) + Open Sans (текст), прямые углы,
   hairline-разделители, красный акцент бренда, скошенные плашки иконок.
   Все правила скоуплены в .about-page — другие страницы не затрагиваются.
   ====================================================================== */

.about-page {
    /* Локальные токены тёмной темы страницы */
    --about-bg: #0e1315;
    --about-surface: #171d1f;
    --about-line: rgba(255, 255, 255, 0.12);
    --about-muted: #a7b0b3;

    background-color: var(--about-bg);
    color: var(--color-white);
    /* Шапка сайта — position: fixed. Раньше её высоту компенсировал hero,
       теперь (hero убран) отступ задаёт сама страница. */
    padding-top: var(--header-height);
    /* padding снизу не даёт margin последней секции «выпасть» за пределы тёмного фона */
    padding-bottom: 72px;
}

/* Футер по умолчанию отбит от контента белым зазором — на тёмной странице
   он был бы светлой полосой, поэтому здесь примыкает вплотную. */
.about-page + .footer {
    margin-top: 0;
}

/* Ритм секций внутри страницы */
.about-page section {
    margin: 56px 0;
}

@media (min-width: 768px) {
    .about-page section {
        margin: 80px 0;
    }
}

@media (min-width: 1024px) {
    .about-page section {
        margin: 104px 0;
    }
}

/* Воздух между шапкой и первым экраном */
.about-page > section:first-of-type {
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .about-page > section:first-of-type {
        margin-top: 56px;
    }
}

.about-page > section:last-of-type {
    margin-bottom: 0;
}

/* --- Заголовок страницы (H1, перенесён из hero в текстовый блок) --- */
.about-page .about-title {
    position: relative;
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--about-line);
    margin-bottom: 4px;
}

@media (min-width: 640px) {
    .about-page .about-title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .about-page .about-title {
        font-size: 46px;
        padding-bottom: 24px;
    }
}

/* Красный сегмент на hairline — фирменный акцент */
.about-page .about-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

.about-page .about-title__brand {
    color: var(--color-brand);
}

/* --- Общий паттерн заголовка секции: uppercase + hairline + красный сегмент --- */
.about-page .feature-title,
.about-page .distributor-title {
    position: relative;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--about-line);
}

@media (min-width: 1024px) {
    .about-page .feature-title,
    .about-page .distributor-title {
        font-size: 28px;
        padding-bottom: 18px;
    }
}

.about-page .feature-title::after,
.about-page .distributor-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background-color: var(--color-brand);
}

.about-page .feature-title span,
.about-page .distributor-title span,
.about-page .feature-content span {
    color: var(--color-brand);
}

/* Логотип вместо текстового заголовка (приходит из ACF-контента) */
.about-page .feature-title img {
    max-height: 34px;
    width: auto;
    display: block;
}

/* --- Секция 1: интро (заголовок + текст + кнопка / изображение) --- */
.about-page .about-section {
    position: relative;
}

.about-page .about-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

@media (min-width: 1024px) {
    .about-page .about-container {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 56px;
    }
}

.about-page .about-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

/* Лид-абзац интро — тот же стиль, что у лида в блоке дистрибьютора */
.about-page .about-intro {
    font-family: var(--font-manrope);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.55;
    text-transform: none;
    color: var(--color-white);
    margin-top: 0;
    padding-left: 0;
    border-left: none;
    max-width: 62ch;
}

@media (min-width: 640px) {
    .about-page .about-intro {
        font-size: 18px;
        line-height: 1.55;
    }
}

.about-page .about-intro span {
    color: var(--color-brand);
}

.about-page .about-description {
    font-family: var(--font-manrope);
    font-style: normal;
    font-size: 15px;
    line-height: 1.65;
    color: var(--about-muted);
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 62ch;
}

/* Подзаголовок, список и ссылки внутри текста интро — приходят из ACF-редактора */
.about-page .about-description strong {
    color: var(--color-white);
    font-weight: 700;
}

.about-page .about-description ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding-left: 0;
}

.about-page .about-description li {
    position: relative;
    padding-left: 20px;
}

/* Красная чёрточка вместо маркера: общий сброс * { padding: 0 } выносит нативные буллеты за край */
.about-page .about-description li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 2px;
    background-color: var(--color-brand);
}

.about-page .about-description a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.about-page .about-description a:hover {
    color: var(--color-brand);
    text-decoration-color: var(--color-brand);
}

.about-page .about-content__btn {
    position: static;
    align-self: flex-start;
    margin: 4px 0 0;
    border: none;
}

.about-page .about-image {
    position: static;
    margin: 0;
    padding: 0;
    top: auto;
}

.about-page .about-image img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .about-page .about-image img {
        margin-right: 0;
    }
}

/* --- Секция 2: миссия (плашка с красной полосой и скошенной иконкой) --- */
.about-page .mission-container {
    margin-top: 0;
}

.about-page .mission-card {
    position: relative;
    max-width: none;
    margin: 0;
    background: none;
    background-color: var(--about-surface);
    border-left: 3px solid var(--color-brand);
    color: var(--color-white);
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 768px) {
    .about-page .mission-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 28px;
        padding: 44px 48px;
    }
}

/* Скошенная плашка вместо круглой «висящей» иконки */
.about-page .mission-icon {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    background-color: var(--color-brand);
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-page .mission-icon img {
    width: 26px;
    height: 26px;
}

.about-page .mission-title {
    font-family: var(--font-exo2);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .about-page .mission-title {
        font-size: 26px;
    }
}

.about-page .mission-text {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.65;
    text-align: left;
    color: var(--about-muted);
    max-width: 78ch;
}

/* --- Секция 3: текстовые блоки с фото (зигзаг) --- */
.about-page .features-section {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 1024px) {
    .about-page .features-section {
        gap: 80px;
    }
}

.about-page .feature-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}

@media (min-width: 1024px) {
    .about-page .feature-card {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 56px;
    }

    /* Чётные блоки — фото справа */
    .about-page .features-section .feature-card:nth-child(2n) .feature-image {
        order: 2;
    }
}

.about-page .feature-image {
    width: 100%;
}

.about-page .feature-image img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 3px solid var(--color-brand);
}

.about-page .feature-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.about-page .feature-description {
    font-size: 15px;
    line-height: 1.65;
    color: var(--about-muted);
    max-width: 64ch;
}

.about-page .feature-description p + p {
    margin-top: 14px;
}

/* --- Секция 4: направления бренда (карточки с фото) --- */
.about-page .categories-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background-color: var(--about-line);
}

@media (min-width: 1024px) {
    .about-page .categories-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

.about-page .category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 340px;
    background-color: var(--about-surface);
    padding: 30px 26px 34px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    transition: background-color 0.4s ease;
}

@media (min-width: 1024px) {
    .about-page .category-card {
        min-height: 460px;
        padding: 40px 34px;
    }
}

/* Фото направления видно всегда, на hover — чуть ярче и ближе */
.about-page .category-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    transform: none;
    transition: opacity 0.5s ease, transform 0.6s ease;
}

.about-page .category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Текст в карточке идёт сверху: затемняем верх, снизу фото остаётся открытым */
    background: linear-gradient(180deg, rgba(14, 19, 21, 0.94) 0%, rgba(14, 19, 21, 0.86) 45%, rgba(14, 19, 21, 0.55) 100%);
    opacity: 1;
    transition: none;
}

.about-page .category-card:hover {
    background-color: #1c2325;
}

.about-page .category-card:hover .category-bg {
    opacity: 0.58;
    transform: scale(1.05);
}

.about-page .category-content {
    position: relative;
    z-index: 2;
    transition: none;
}

.about-page .category-icon {
    position: static;
    display: block;
    margin-bottom: 20px;
}

.about-page .category-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.about-page .category-icon::after {
    display: none;
}

.about-page .category-name {
    font-family: var(--font-exo2);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-top: 0;
    transform: none;
}

.about-page .category-brand {
    font-family: var(--font-exo2);
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    line-height: 1.15;
    color: var(--color-brand);
    transform: none;
    transform-origin: left;
}

.about-page .category-description {
    width: auto;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--about-line);
    font-size: 14px;
    line-height: 1.6;
    color: var(--about-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ховер меняет только подложку и фото — тексты не «прыгают» */
.about-page .category-card:hover .category-name,
.about-page .category-card:hover .category-brand,
.about-page .category-card:hover .category-description,
.about-page .category-card:hover .category-description p {
    transform: none;
}

.about-page .category-card:hover .category-brand {
    color: var(--color-brand);
}

.about-page .category-card:hover .category-description {
    color: var(--about-muted);
}

/* --- Секция 5: официальный дистрибьютор --- */
.about-page .distributor-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

@media (min-width: 1024px) {
    .about-page .distributor-container {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 56px;
    }
}

.about-page .distributor-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: auto;
    flex: none;
    margin: 0;
    padding: 0;
}

.about-page .distributor-intro {
    font-family: var(--font-manrope);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 600;
    color: var(--color-white);
    margin-top: 0;
    max-width: 62ch;
}

@media (min-width: 640px) {
    .about-page .distributor-intro {
        font-size: 18px;
        line-height: 1.55;
    }
}

.about-page .distributor-description {
    margin-top: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--about-muted);
    max-width: 62ch;
}

.about-page .distributor-description p + p {
    margin-top: 14px;
}

.about-page .distributor-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    order: 0;
    width: auto;
    margin: 0;
    flex-direction: row;
}

@media (min-width: 640px) {
    .about-page .distributor-images {
        gap: 16px;
    }
}

.about-page .distributor-images img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.about-page .distributor-image-main {
    margin-top: 0;
}

@media (min-width: 640px) {
    .about-page .distributor-image-main {
        margin-top: 48px;
    }
}

/* Уважаем prefers-reduced-motion: без движения фото в карточках */
@media (prefers-reduced-motion: reduce) {
    .about-page .category-bg,
    .about-page .category-card {
        transition: none;
    }

    .about-page .category-card:hover .category-bg {
        transform: none;
    }
}

/* Универсальный класс скруглённых картинок (может использоваться в контенте) */
.rounded-image {
    border-radius: 16px;
    width: 100%;
    height: auto;
}

@media (min-width: 640px) {
    .rounded-image {
        border-radius: 30px;
    }
}

/* CTA Section */
.cta-container {
    max-width: 980px;
    margin: 0 auto;
}

@media (max-width: 1023px) {
    .cta-container {
        max-width: 100%;
    }
}

.cta-card {
    position: relative;
    width: 100%;
    background: url('../images/bg-section-1.svg');
    background-size: 160% auto;
    background-position: right 200px bottom;
    background-repeat: no-repeat;
    background-color: #0f141e;
    margin: 0 auto;
    color: var(--color-white);
    padding-top: 64px;
    padding-bottom: 32px;
    padding-left: 28px;
    padding-right: 28px;
    border-radius: 32px;
}

@media (min-width: 640px) {
    .cta-card {
        background-size: contain;
        background-position-x: center;
        padding: 49px 64px;
        border-radius: 42px;
    }
}

/* @media (min-width: 768px) {
    .cta-card {
        padding: 47px 63px;
    }
} */

@media (min-width: 1024px) {
    .cta-card {
        padding: 68px 63px;
    }
}

.cta-icon {
    background-color: var(--color-brand);
    border-radius: 50%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -32px;
}

.cta-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 44px;
}

@media (min-width: 1024px) {
    .cta-content {
        flex-direction: row;
        gap: 24px;
    }

    /* .cta-content-inner {
        width: 395px;
    } */
}

.cta-content-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-title {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: var(--font-tiktok-sans);
    line-height: 1.2;
    text-align: center;
}

.cta-title>span {
    color: var(--color-brand);
}

@media (min-width: 768px) {
    .cta-title {
        text-align: left;
    }
}

@media (min-width: 1024px) {
    .cta-title {
        font-size: 24px;
    }
}

.cta-description {
    margin-top: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-disable);
}

@media screen and (max-width: 767px) {
    .cta-description {
        text-align: center;
    }
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (min-width: 768px) {
    .cta-buttons {
        flex-direction: row;
    }
}

.cta-buttons .btn {
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .cta-buttons .btn {
        max-width: max-content;
        width: auto;
    }
}

.cta-buttons .btn-secondary {
    color: var(--color-white);
}

/* Footer */
.footer {
    color: var(--color-white);
    padding: 53px 0;
    margin-top: 63px;
    background-color: var(--color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
    .footer {
        margin-top: 64px;
        padding-top: 69px;
        padding-bottom: 32px;
    }
}

/* @media (min-width: 768px) {
    .footer {
        margin-top: -36px;
    }
} */

@media (min-width: 1024px) {
    .footer {
        margin-top: 65px;
        padding-bottom: 30px;
        padding-top: 65px;
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    position: relative;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 39px 16px;
    }
}

.footer-logo-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 640px) {
    .footer-logo-social {
        flex-direction: row;
        align-items: center;
        grid-column: span 9;
    }
}

@media (min-width: 1024px) {
    .footer-logo-social {
        flex-direction: column;
        align-items: flex-start;
        grid-column: span 2;
        grid-row-start: 1;
    }
}

.social-links {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 33px;
    width: 100%;
    justify-content: center;
}

@media (min-width: 640px) {
    .social-links {
        gap: 15px;
        margin-top: 0;
        justify-content: center;
    }
}

@media (max-width: 350px) {
    .social-links {
        gap: 25px;
    }
}

@media (min-width: 1024px) {
    .social-links {
        width: 145px;
        margin-top: 33px;
        justify-content: flex-start;
    }
}

.footer-feedback {
    position: absolute;
    top: -6px;
    right: 0;
}

@media (min-width: 640px) {
    .footer-feedback {
        /* position: static; */
        grid-column: span 2;
        margin-left: auto;
        align-self: flex-start;

        grid-row-start: 1;
        /* grid-column-start: 12; */
    }
}

.footer-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    font-size: 12px;
    margin-top: 17px;
}

@media (min-width: 640px) {
    .footer-menu {
        grid-column: span 12;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 0;
        /* grid-column-start: 1; */
        grid-row-start: 2;
    }
}

@media (min-width: 1024px) {
    .footer-menu {
        grid-column: span 8;
        /* grid-column-start: 3; */
        grid-row-start: 1;
        font-size: 14px;
        margin-top: 0;
    }
}

.footer-menu-column {
    display: flex;
    flex-direction: column;
}

.footer-menu-title {
    color: var(--color-secondary);
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    font-family: var(--font-tiktok-sans);
}

.footer-menu-list {
    list-style: none;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 1024px) {
    .footer-menu-list {
        margin-top: 16px;
    }
}

.footer-menu-list a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu-list a:hover {
    color: var(--color-brand);
}

.footer-disclaimer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 24px;
}

@media (min-width: 640px) {
    .footer-disclaimer {
        flex-direction: row;
        align-items: center;
        padding: 14px 17px;
        gap: 25px;
    }
}

@media (min-width: 1024px) {
    .footer-disclaimer {
        margin-top: 32px;
        padding: 23px 25px;
    }
}

.disclaimer-text {
    flex: 1;
    font-size: 12px;
}

.footer-bottom {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
    }
}

.footer-copyright {
    font-size: 12px;
    font-weight: 600;
}
@media (min-width: 640px) {
    .footer-copyright {
        flex: 1;
    }
}

.footer-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px 16px;
    font-size: 12px;
    color: var(--color-disable);
    list-style-type: none;
}

@media (min-width: 640px) {
    .footer-links {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

.footer-links-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media (min-width: 1024px) {
    .footer-links-column {
        width: 50%;
    }
}

.footer-links-column a {
    color: var(--color-disable);
    text-decoration: none;
}

.footer-links-column a:hover {
    color: var(--color-white);
}

.footer-products {
    background-color: var(--color-primary-dark);
    padding: 26px 0;
    color: var(--color-white);
    font-size: 14px;
}

/* @media (min-width: 768px) {
    .footer-products {
        padding-left: 40px;
        padding-right: 40px;
    }
} */

.products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    list-style-type: none;
}

@media (min-width: 640px) {
    .products-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 0;
    }
}

.products-title {
    font-style: italic;
    font-weight: 600;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .products-title {
        grid-column: span 6;
    }
}

@media (min-width: 1024px) {
    .products-title {
        grid-column: span 4;
    }
}

.products-grid li {
    text-transform: uppercase;
}

@media (min-width: 640px) {
    .products-grid li:nth-child(2) {
        grid-column: span 3;
    }
    
    .products-grid li:nth-child(3) {
        grid-column: span 3;
    }
}

@media (min-width: 1024px) {
    .products-grid li:nth-child(2) {
        grid-column: span 2;
    }
    
    .products-grid li:nth-child(3) {
        grid-column: span 6;
    }
}

/* Burger Menu */
.burger {
    position: fixed;
    /* Совпадает с padding-top чёрной полосы хедера: кнопка того же размера, что иконки
       поиска/сравнения/корзины, поэтому встаёт с ними на одну линию */
    top: 8px;
    right: 12px;
    width: 48px;
    height: 48px;
    background-color: var(--color-white);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 1010;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .burger {
        right: 24px;
    }
}

@media (min-width: 1280px) {
    .burger {
        display: none;
    }
}

.burger:hover {
    transform: scale(1.1);
}

.burger span {
    display: block;
    width: 19px;
    height: 2px;
    background-color: var(--color-black);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* В открытом меню крестик лежит на тёмной шапке — плашка не нужна, полоски белые */
.burger.active {
    background-color: transparent;
    box-shadow: none;
}

.burger.active span {
    background-color: var(--color-white);
    width: 22px;
}

.burger.active:hover {
    transform: none;
}

.burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu — Motors-стиль: тёмная подложка, красные полосы пунктов, без скруглений */
.menu-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0e1315;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    clip-path: circle(0px at calc(100% - 48px) 48px);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s 0.6s, visibility 0.3s 0.6s;
}

.menu-bg.active {
    opacity: 1;
    visibility: visible;
    clip-path: circle(150% at calc(100% - 48px) 48px);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s;
}

.menu-items {
    position: fixed;
    inset: 0;
    display: block;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.menu-items.active {
    opacity: 1;
    visibility: visible;
}

/* Шапка меню: тёмная полоса той же высоты, что и хедер (64px), логотип слева.
   Крестик — .burger, он fixed поверх меню, поэтому справа оставлен запас под него. */
.mobile-menu__topbar {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 72px 0 16px;
    background: var(--color-fon-contrast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu__logo {
    display: block;
    line-height: 0;
}

.mobile-menu__logo img {
    width: auto;
    height: 32px;
    display: block;
}

/* Стили для планшетов - меню выезжает справа */
@media (min-width: 768px) and (max-width: 1279px) {
    .menu-bg {
        clip-path: none !important;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        /* transition: opacity 0.3s ease, visibility 0.3s ease; */
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    }

    .menu-bg.active {
        opacity: 1;
        visibility: visible;
        clip-path: none !important;
        /* transition: opacity 0.3s ease, visibility 0.3s ease; */
        transition: opacity 0.2s ease, visibility 0s;
    }

    /* Без transform: панель выезжает через right, а любой transform у .menu-items
       делает её точкой отсчёта для position: fixed у потомков — тогда панель
       результатов поиска (её координаты считает JS от окна) уезжает за экран. */
    .menu-items {
        inset: 0 0 0 auto;
        width: 362px;
        left: auto;
        right: -362px;
        background-color: #0e1315;
        opacity: 1 !important;
        visibility: visible !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
        overflow-y: auto;
        /* Motors-стиль: без скруглений */
        border-radius: 0;
    }

    .menu-items.active {
        right: 0;
    }

    .menu-items a {
        opacity: 1;
        transform: translateY(0);
        transition: none;
    }

    /* Полосы пунктов идут во всю ширину панели, отступы задаются внутри пунктов */
    .mobile-drilldown-menu {
        padding: 0;
    }

    /* .mobile-search-container {
        padding: 15px;
    } */
}

/* .menu-items nav {
    display: flex;
    flex-direction: column;
    align-items: center;
} */

.menu-items a:not(.btn-primary) {
    display: block;
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none;
    padding: 12px 16px;
    width: 100%;

    opacity: 1;
    transform: none;
    transition: none;
}

.menu-items.active a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 1;
    transform: none;
}

.bottom-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    background: #0e1315;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bottom-mobile-nav__left {
    display: flex;
    gap: 16px;
}

.bottom-mobile-nav__left > * {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: background-color 0.3s ease !important;


    padding: 8px !important;
    background: transparent !important;
    /* Motors-стиль: без скруглений */
    border-radius: 0;
    cursor: pointer;
    width: 48px !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease;
}

/* Иконки в разметке залиты чёрным — на тёмном фоне меню перекрашиваем в белый */
.bottom-mobile-nav__left > * svg:not(.icon-button__stoke) path {
    fill: var(--color-white);
    transition: fill 0.3s ease;
}

.bottom-mobile-nav__left > * svg.icon-button__stoke path {
    stroke: var(--color-white);
    transition: stroke 0.3s ease;
}

.bottom-mobile-nav__left > *:hover {
    background: var(--color-brand) !important;
}

.bottom-mobile-nav__left > *:hover svg:not(.icon-button__stoke) path {
    fill: var(--color-white);
}

.bottom-mobile-nav__left > *:hover svg.icon-button__stoke path {
    stroke: var(--color-white);
}

/* Счётчик товаров на кнопке корзины в мобильном меню */
.bottom-mobile-nav__left #mobile-cart-button {
    position: relative;
}
.bottom-mobile-nav__left .header-cart-count.mobile-cart-count,
.bottom-mobile-nav__left #mobile-cart-button .header-cart-count {
    position: absolute;
    top: -4px;
    left: 30px;
    background: var(--color-brand);
    color: var(--color-white);
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.bottom-mobile-nav__left #mobile-compare-button {
    position: relative;
}

.bottom-mobile-nav__left .header-compare-count.mobile-compare-count,
.bottom-mobile-nav__left #mobile-compare-button .header-compare-count {
    position: absolute;
    top: -4px;
    left: 30px;
    background: var(--color-brand);
    color: var(--color-white);
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.mobile-nav-list {
    list-style-type: none;
}

.menu-items .menu-item-has-children > a::after {
    display: inline-block;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg opacity='0.9'%3E%3Cpath d='M6.76467 14.619C6.89917 14.5174 7.30059 14.2141 7.532 14.0335C7.9955 13.6718 8.61142 13.1776 9.2255 12.6444C9.84267 12.1085 10.4438 11.5456 10.8857 11.0455C11.1072 10.7947 11.2756 10.5745 11.3851 10.3927C11.4882 10.2217 11.5096 10.1207 11.5096 10.1207C11.5096 10.1207 11.4882 10.0227 11.3852 9.85174C11.2756 9.66999 11.1072 9.44974 10.8857 9.19891C10.4438 8.69882 9.84267 8.13591 9.2255 7.60007C8.61142 7.06691 7.9955 6.57266 7.532 6.21091C7.30059 6.03032 6.89967 5.72749 6.76517 5.62591C6.48725 5.42116 6.42734 5.02949 6.632 4.75157C6.83667 4.47366 7.22792 4.41424 7.50592 4.61899L7.508 4.62057C7.64909 4.72707 8.06492 5.04115 8.301 5.22549C8.775 5.59532 9.40909 6.10407 10.045 6.65616C10.6778 7.20566 11.3267 7.81032 11.8224 8.37112C12.0696 8.65099 12.2918 8.93457 12.4557 9.20641C12.6092 9.46107 12.7603 9.78349 12.7603 10.1222C12.7603 10.461 12.6092 10.7834 12.4557 11.0381C12.2918 11.3098 12.0696 11.5934 11.8224 11.8732C11.3267 12.4341 10.6778 13.0388 10.045 13.5883C9.40909 14.1404 8.775 14.6491 8.30109 15.019C8.06475 15.2034 7.64892 15.5175 7.50817 15.6238L7.50634 15.6252C7.22842 15.8299 6.83675 15.7708 6.63209 15.4929C6.42734 15.2149 6.48675 14.8237 6.76467 14.619Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
    transition: transform 0.3s ease;
}

.menu-items .menu-item-has-children.sub-menu-open > a::after {
    transform: translateY(0%) rotate(-90deg); /* Поворот вниз */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.76467 14.619C6.89917 14.5174 7.30059 14.2141 7.532 14.0335C7.9955 13.6718 8.61142 13.1776 9.2255 12.6444C9.84267 12.1085 10.4438 11.5456 10.8857 11.0455C11.1072 10.7947 11.2756 10.5745 11.3851 10.3927C11.4882 10.2217 11.5096 10.1207 11.5096 10.1207C11.5096 10.1207 11.4882 10.0227 11.3852 9.85174C11.2756 9.66999 11.1072 9.44974 10.8857 9.19891C10.4438 8.69882 9.84267 8.13591 9.2255 7.60007C8.61142 7.06691 7.9955 6.57266 7.532 6.21091C7.30059 6.03032 6.89967 5.72749 6.76517 5.62591C6.48725 5.42116 6.42734 5.02949 6.632 4.75157C6.83667 4.47366 7.22792 4.41424 7.50592 4.61899L7.508 4.62057C7.64909 4.72707 8.06492 5.04115 8.301 5.22549C8.775 5.59532 9.40909 6.10407 10.045 6.65616C10.6778 7.20566 11.3267 7.81032 11.8224 8.37112C12.0696 8.65099 12.2918 8.93457 12.4557 9.20641C12.6092 9.46107 12.7603 9.78349 12.7603 10.1222C12.7603 10.461 12.6092 10.7834 12.4557 11.0381C12.2918 11.3098 12.0696 11.5934 11.8224 11.8732C11.3267 12.4341 10.6778 13.0388 10.045 13.5883C9.40909 14.1404 8.775 14.6491 8.30109 15.019C8.06475 15.2034 7.64892 15.5175 7.50817 15.6238L7.50634 15.6252C7.22842 15.8299 6.83675 15.7708 6.63209 15.4929C6.42734 15.2149 6.48675 14.8237 6.76467 14.619Z' fill='%23D8282F'/%3E%3C/svg%3E");
}

#menu-mobilnoe-menyu .sub-menu {
    position: relative;
    padding-left: 15px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
    transform: none
}

#menu-mobilnoe-menyu .sub-menu-open .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: 3500px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 !important
}

/* Вложенные пункты — тёмные строки обычным шрифтом, с отступом от края */
#menu-mobilnoe-menyu .sub-menu-open .sub-menu a {
    border-radius: 0 !important;
    font-family: var(--font-manrope);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
    padding: 12px 16px 12px 28px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

#menu-mobilnoe-menyu .sub-menu-open .sub-menu li + li a {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-mobilnoe-menyu-container {
    width: 100%;
    padding-top: 0;
    margin-top: 0;
}

/* --- ВЫПАДАЮЩИЕ ПОДКАТЕГОРИИ В КАТАЛОГЕ МОБ. МЕНЮ --- */
.mobile-cat-list .mobile-sub-list {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 0;
    margin: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}

.mobile-nav-list a,
.mobile-cat-list .mobile-sub-list a {
    border-radius: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Пункты обычного меню (Главная, О компании…) — те же красные полосы, что и категории */
.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.menu-items .mobile-nav-list > li > a,
.menu-items.active .mobile-nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 8px 16px;
}

.mobile-nav-list > li > a:hover {
    background: var(--color-brand-dark);
    color: var(--color-white);
}

.mobile-cat-list .mobile-sub-list a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.mobile-cat-list li.is-open > .mobile-sub-list {
    max-height: 3500px;
    opacity: 1;
    padding-left: 30px;
}

.mobile-cat-list li .arrow-right {
    margin-left: auto;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg opacity='0.9'%3E%3Cpath d='M6.76467 14.619C6.89917 14.5174 7.30059 14.2141 7.532 14.0335C7.9955 13.6718 8.61142 13.1776 9.2255 12.6444C9.84267 12.1085 10.4438 11.5456 10.8857 11.0455C11.1072 10.7947 11.2756 10.5745 11.3851 10.3927C11.4882 10.2217 11.5096 10.1207 11.5096 10.1207C11.5096 10.1207 11.4882 10.0227 11.3852 9.85174C11.2756 9.66999 11.1072 9.44974 10.8857 9.19891C10.4438 8.69882 9.84267 8.13591 9.2255 7.60007C8.61142 7.06691 7.9955 6.57266 7.532 6.21091C7.30059 6.03032 6.89967 5.72749 6.76517 5.62591C6.48725 5.42116 6.42734 5.02949 6.632 4.75157C6.83667 4.47366 7.22792 4.41424 7.50592 4.61899L7.508 4.62057C7.64909 4.72707 8.06492 5.04115 8.301 5.22549C8.775 5.59532 9.40909 6.10407 10.045 6.65616C10.6778 7.20566 11.3267 7.81032 11.8224 8.37112C12.0696 8.65099 12.2918 8.93457 12.4557 9.20641C12.6092 9.46107 12.7603 9.78349 12.7603 10.1222C12.7603 10.461 12.6092 10.7834 12.4557 11.0381C12.2918 11.3098 12.0696 11.5934 11.8224 11.8732C11.3267 12.4341 10.6778 13.0388 10.045 13.5883C9.40909 14.1404 8.775 14.6491 8.30109 15.019C8.06475 15.2034 7.64892 15.5175 7.50817 15.6238L7.50634 15.6252C7.22842 15.8299 6.83675 15.7708 6.63209 15.4929C6.42734 15.2149 6.48675 14.8237 6.76467 14.619Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.mobile-cat-list li.is-open .arrow-right {
    transform: rotate(90deg);
}

/* Механика слоев */
#mobile-menu-container {
    position: relative;
    width: 100%;
    /* Минус высота тёмной шапки меню (.mobile-menu__topbar) */
    height: calc(100% - 64px);
    overflow: hidden; /* Чтобы слои не вылезали за пределы меню */
    min-height: 400px; /* Высота под ваше меню */
    overflow-y: auto;
    padding-bottom: 100px;
}

.menu-layer {
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%); /* Все слои справа */
}

.menu-layer.active {
    position: relative; /* Чтобы контейнер подстраивался под высоту */
    opacity: 1;
    pointer-events: all;
    transform: translateX(0); /* Активный слой по центру */
}

.menu-layer.out {
    transform: translateX(-100%); /* Ушедший слой слева */
}

/* Поиск в мобильном меню */
.mobile-search-container {
    position: relative;
    background: transparent;
    padding: 16px;
}

/* Полноэкранная панель результатов: на всю ширину выезжающего меню, до нижней навигации; список категорий и пункты меню скрыты */
.mobile-search-container.is-panel-open {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    z-index: 2;
}

#layer-main.is-mobile-search-open > *:not(.mobile-search-container) {
    display: none !important;
}

#mobile-menu-container.mobile-menu--search-lock {
    overflow: hidden !important;
}

/* Поповер — прямой потомок #menuItems (вне .menu-layer с transform), иначе position:fixed даёт нулевую высоту */
#menuItems.menu-items--search-panel-open > .mobile-search-popover {
    position: fixed;
    z-index: 1002;
    left: var(--mobile-search-panel-left, 0);
    width: var(--mobile-search-panel-width, 100vw);
    top: var(--mobile-search-panel-top, 0);
    bottom: var(--mobile-search-panel-bottom, 0);
    right: auto;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    background: #0e1315;
    min-height: 0;
    margin-bottom: 4px;
}

/* Результаты поиска внутри меню — на тёмном фоне (в шапке сайта та же разметка остаётся светлой).
   !important нужен, чтобы перебить светлые цвета .header-search__results (они тоже с !important). */
#menuItems .mobile-search-results li {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

#menuItems .mobile-search-item a {
    color: var(--color-white) !important;
    border-radius: 0;
}

#menuItems .mobile-search-item a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--color-white) !important;
}

#menuItems .mobile-search-hint {
    color: rgba(255, 255, 255, 0.6);
}

/* Кнопка «Смотреть все» в тёмной панели — красная, иначе сливается с фоном */
#menuItems .mobile-search-popover .header-search__footer-link {
    background-color: var(--color-brand);
    color: var(--color-white);
}

#menuItems .mobile-search-popover .header-search__footer-link:hover {
    background-color: var(--color-brand-dark) !important;
}

#menuItems .mobile-search-popover .header-search__footer-link::after {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#menuItems.menu-items--search-panel-open > .mobile-search-popover .mobile-search-results.header-search__results {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    padding-top: 12px;
    overflow-y: auto;
}

#menuItems.menu-items--search-panel-open > .mobile-search-popover .header-search__footer {
    flex-shrink: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-top: 16px;
}

#menuItems.menu-items--search-panel-open > .mobile-search-popover .mobile-search-results.header-search__results a {
    justify-content: flex-start;
}

.mobile-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.mobile-search-icon {
    position: absolute;
    left: 12px;
    z-index: 1;
    pointer-events: none;
}

/* Поле поиска на тёмном фоне меню: прямоугольное, светлый текст (Motors) */
.mobile-search-input {
    width: 100%;
    padding: 13px 44px 13px 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    font-size: 16px;
    font-family: inherit;
    color: var(--color-white);
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    background: rgba(255, 255, 255, 0.06);
}

.mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.mobile-search-input:focus {
    border-color: var(--color-brand);
    background: rgba(255, 255, 255, 0.1);
}

.mobile-search-icon path {
    stroke: rgba(255, 255, 255, 0.55);
}

.mobile-search-input::-webkit-search-cancel-button,
.mobile-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.mobile-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-search-clear:hover {
    background: var(--color-brand);
    color: var(--color-white);
}

.mobile-search-clear[hidden] {
    display: none !important;
}

/* Выпадающий блок результатов (разметка: #menuItems > .mobile-search-popover) */
#menuItems > .mobile-search-popover {
    overflow: hidden;
    box-sizing: border-box;
}

.mobile-search-popover[hidden] {
    display: none !important;
}

.mobile-search-popover .mobile-search-results.header-search__results {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    padding-top: 8px;
    max-height: min(58vh, 440px);
    box-shadow: none;
    border: none;
    border-radius: 0;
    border-top: none;
}

.mobile-search-popover .mobile-search-results[hidden] {
    display: none !important;
}

.mobile-search-popover .header-search__footer {
    padding: 0 16px 16px;
}

.mobile-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-search-results li {
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-search-results li:last-child {
    border-bottom: none;
}

.mobile-search-item a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
}

.mobile-search-item a:hover {
    background-color: #f9f9f9;
}

.mobile-search-item img {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.mobile-search-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    height: 100px;
    padding: 20px 16px;
    padding-top: 0;
    text-align: center;
    color: #87898F;
    font-size: 14px;
    list-style: none;
    border-bottom: none;
}

.mobile-search-hint--error {
    color: #b42318;
}

/* Оформление списка: пункты — красные полосы во всю ширину с белым разделителем 1px (Motors) */
.mobile-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#layer-main .mobile-cat-list,
#layer-sub .mobile-cat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}

/* Общий вид полосы — белый Exo 2 капсом на красном, снизу белая линия-разделитель */
#layer-main .mobile-cat-list > li,
#layer-sub .mobile-cat-list > li > span,
#layer-sub .js-layer-content > li > a,
.mobile-nav-list > li > a {
    font-family: var(--font-exo2);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: var(--color-white);
    background: var(--color-brand);
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    transition: background-color 0.25s ease;
}

#layer-main .mobile-cat-list > li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 16px;
    cursor: pointer;
}

#layer-main .mobile-cat-list > li:hover,
#layer-main .mobile-cat-list > li:active {
    background: var(--color-brand-dark);
}

#layer-main .mobile-cat-list > li > span {
    flex: 1;
}

.mobile-cat-list li img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Хедер внутри слоя: название раздела на тёмном фоне */
.layer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 16px 14px;
    margin-top: 0;
    background: transparent;
    font-family: var(--font-exo2);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-white);
}

.layer-header img {
    width: 44px;
    height: 44px;
    margin-right: 0;
    object-fit: contain;
}

.layer-nav {
    margin-top: 0;
    padding: 6px 8px 0;
}

/* Полосы идут во всю ширину меню — внутренние отступы задаются у самих пунктов */
.mobile-drilldown-menu {
    padding: 0;
}

.js-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    font-family: var(--font-exo2);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.25s ease;
}

.js-back-btn:hover {
    color: var(--color-brand);
}

.mobile-cat-list li span {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

#layer-sub .mobile-cat-list li {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: transparent;
}

/* Ссылки товаров приходят из AJAX с инлайновым color: inherit —
   поэтому цвет задаём наследованием от пункта списка, а не самой ссылке.
   Селекторы через .js-layer-content: у вложенного списка товаров тот же класс .mobile-cat-list */
#layer-sub .js-layer-content > li {
    color: var(--color-white);
}

#layer-sub .js-layer-content > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 8px 16px;
}

#layer-sub .js-layer-content > li > a:hover {
    background: var(--color-brand-dark);
}

#layer-main {
    margin-top: 0;
}

#layer-sub .layer-header {
    padding: 2px 16px 14px;
    margin-top: 0;
    border-radius: 0;
    background: transparent;
}

#layer-sub .js-open-layer > span {
    min-height: 52px;
    padding: 8px 16px;
    cursor: pointer;
}

#layer-sub .mobile-cat-list > li > span:hover {
    background: var(--color-brand-dark);
}

#layer-sub .mobile-cat-list li .arrow-right {
    transform: rotate(90deg);
}

#layer-sub .mobile-cat-list li.is-open .arrow-right {
    transform: rotate(-90deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6.76467 14.619C6.89917 14.5174 7.30059 14.2141 7.532 14.0335C7.9955 13.6718 8.61142 13.1776 9.2255 12.6444C9.84267 12.1085 10.4438 11.5456 10.8857 11.0455C11.1072 10.7947 11.2756 10.5745 11.3851 10.3927C11.4882 10.2217 11.5096 10.1207 11.5096 10.1207C11.5096 10.1207 11.4882 10.0227 11.3852 9.85174C11.2756 9.66999 11.1072 9.44974 10.8857 9.19891C10.4438 8.69882 9.84267 8.13591 9.2255 7.60007C8.61142 7.06691 7.9955 6.57266 7.532 6.21091C7.30059 6.03032 6.89967 5.72749 6.76517 5.62591C6.48725 5.42116 6.42734 5.02949 6.632 4.75157C6.83667 4.47366 7.22792 4.41424 7.50592 4.61899L7.508 4.62057C7.64909 4.72707 8.06492 5.04115 8.301 5.22549C8.775 5.59532 9.40909 6.10407 10.045 6.65616C10.6778 7.20566 11.3267 7.81032 11.8224 8.37112C12.0696 8.65099 12.2918 8.93457 12.4557 9.20641C12.6092 9.46107 12.7603 9.78349 12.7603 10.1222C12.7603 10.461 12.6092 10.7834 12.4557 11.0381C12.2918 11.3098 12.0696 11.5934 11.8224 11.8732C11.3267 12.4341 10.6778 13.0388 10.045 13.5883C9.40909 14.1404 8.775 14.6491 8.30109 15.019C8.06475 15.2034 7.64892 15.5175 7.50817 15.6238L7.50634 15.6252C7.22842 15.8299 6.83675 15.7708 6.63209 15.4929C6.42734 15.2149 6.48675 14.8237 6.76467 14.619Z' fill='%23D8282F'/%3E%3C/svg%3E");
}

/* Раскрытый пункт — тёмно-красный, чтобы отличался от закрытых */
#layer-sub .js-open-layer.is-open > span,
.menu-items .menu-item-has-children.sub-menu-open > a {
    color: var(--color-white);
    background: var(--color-brand-dark);
}

/* Вложенный уровень (товары/подпункты) — тёмные строки под красной полосой */
#layer-sub .mobile-sub-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0 !important;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.05);
}

#layer-sub .mobile-sub-list > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#layer-sub .mobile-sub-list li {
    color: rgba(255, 255, 255, 0.82);
}

#layer-sub .mobile-sub-list a {
    font-family: var(--font-manrope);
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.82);
    padding: 12px 16px 12px 28px;
    border-radius: 0;
}

/* Utility Classes */
.hidden-sm {
    display: none;
}

@media (min-width: 640px) {
    .hidden-sm {
        display: flex;
    }
}

.hidden-md {
    display: none;
}

@media (min-width: 768px) {
    .hidden-md {
        display: flex;
    }
}

.brand-color {
    color: var(--color-brand);
}

.mt-5 {
    margin-top: 5px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.italic {
    font-style: italic;
}


/* Настройка цвета стрелок под твой бренд */
.splide__arrow svg {
  fill: var(--color-brand, #D8282F);
}

.splide__pagination__page.is-active {
  background: var(--color-brand, #D8282F);
}

/* слайдер */

/* Контейнер пагинации — фиксируем снизу слайдера */
.splide__pagination {
    position: relative;
    bottom: 0;
    margin-top: 20px; /* Отступ от слайдов */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Расстояние между точками */
    counter-reset: pagination;
}

/* Базовая точка (неактивная) */
.splide__pagination__page {
    width: 10px !important;
    height: 10px !important;
    background: #e2e2e2 !important; /* Серый цвет неактивной точки */
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    opacity: 1 !important;
    cursor: pointer;
}

/* Активная точка — меняем только цвет, не меняя размер! */
.splide__pagination__page.is-active {
    background: var(--color-brand, #D8282F) !important; /* Твой красный цвет */
    transform: scale(1.2); /* Немного увеличиваем, если хочешь акцент, или убери */
}

/* Убираем стандартные кнопки Splide, которые могут мешать */
.splide__pagination li {
    display: flex;
    align-items: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Витжет слайдер в каталоге */
/* Карточка в тёмном мега-меню: светлая рамка вместо серой, без скруглений */
.witget-promotion__slider {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    padding: 8px;
    margin-bottom: 40px;
}

.witget-promotion__slider__top {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.witget-promotion__slider__cat {
    display: inline-block;
    top: 8px;
    left: 8px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid var(--color-brand);
    border-radius: 0;
    padding: 6px 12px;
    background: transparent;
    color: var(--color-white);
}

.witget-promotion__slider__promotion {
    display: inline-block;
    background: var(--color-brand);
    border-radius: 0;
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
}

.witget-promotion__img {
    display: block !important;
    padding: 0 !important;
    width: 200px;
    height: 180px;
    object-fit: cover;
    margin: auto;
    margin-top: -10px;
}

.witget-promotion__img img {
    width: 100%;
    height: 100%;
    /* Товар в карточке акции тоже показываем целиком */
    object-fit: contain;
}

.witget-promotion__slider__name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin-top: 12px;
    justify-content: center;
}

.witget-promotion__slider__price {
    display: flex;
    gap: 12px;
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
}

.witget-promotion__slider__price span {
    display: flex;
    align-items: center;
    color: var(--color-brand);
    font-size: 14px;
    font-weight: 500;
    text-decoration: line-through;
}

.mega-menu__witget-promotion .splide__pagination {
    bottom: -30px;   
}


.witget-promotion__colors {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.color-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.color-dot.active {
    border: 1px solid var(--color-black);
}

.color-dot span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--color-gray);
}

/* Превью товара */

.menu-promotion-preview {
    width: 100%;
    height: 100%;
    display: none; /* Управляется через JS */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 20;
}

/* Фото вписывается целиком: cover при фиксированных 316×282 срезал колёса,
   да и 316px было шире колонки виджета (290px) */
.menu-promotion-preview img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 340px;
    margin: auto;
    object-fit: contain;
}

#promotion-slider {
    width: 100%;
    transition: opacity 0.3s ease;
    height: max-content;
    display: none; /* Скрыт по умолчанию */
}

/* попапы */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Затемнение фона */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    padding: 20px;
}

.popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.popup-body {
    background: #fff;
    /* Цвет текста задаём явно: попап всплывает и над тёмными страницами
       (корзина, оплата, «спасибо»), где body красит текст белым — на белом
       окне заголовок и согласие становились невидимыми. */
    color: #1a1a1a;
    padding: 40px 44px;
    max-width: 500px;
    width: 100%;
    border-radius: 32px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

@media screen and (max-width: 600px) {
    .popup-body {
        padding: 30px;
        padding-top: 40px;
        max-height: 98vh;
        overflow-y: scroll;
        /* Скрываем полосу прокрутки */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE и Edge */
    }
    
    /* Скрываем полосу прокрутки для WebKit браузеров (Chrome, Safari) */
    .popup-body::-webkit-scrollbar {
        display: none;
    }
}

.popup-overlay.is-active .popup-body {
    transform: translateY(0);
}

.popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: url(../images/icons/Close.svg) no-repeat center center;
    background-size: contain;
    border: none;
    z-index: 1;
}

.popup-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
    text-transform: uppercase;
    font-family: var(--font-tiktok-sans)
}

.popup-title span {
    color: var(--color-brand);
}

.fluentform .ff-el-input--label,
.gmotor-checkout-form__label {
    font-size: 14px !important;
    color: #767E8F !important;
    margin-bottom: 4px !important;
    display: block;
}

input::placeholder {
    color: #A8AEBC !important;
}

.ff-default .ff-el-form-control,
.gmotor-checkout-form__input {
    height: 48px !important;
    border-radius: 100px !important;
    color: #000 !important;
}

/* Кастомный селект Fluent Forms (форма контактов) */
.ff-custom-select-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ff-custom-select-wrapper {
    position: relative;
}

.ff-custom-select-current {
    width: 100%;
    text-align: left;
    border-radius: 100px;
    border: 1px solid var(--fluentform-border-color);
    padding: 10px 16px;
    background: #fff;
    font-size: 14px;
    line-height: 1.3;
    color: #9B9B9B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ff-has-value ~ .ff-custom-select-wrapper .ff-custom-select-current {
    color: #101820;
}

.ff-custom-select-current::after {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.36133 9.2948C5.28962 9.1972 5.29936 9.06547 5.37695 8.97937L5.41406 8.94519C5.5251 8.86339 5.68172 8.88683 5.76367 8.99792L5.76758 9.00281C5.88871 9.16322 6.25493 9.64907 6.47461 9.93054C6.91191 10.4909 7.51095 11.2368 8.1582 11.9823C8.80658 12.729 9.49868 13.4696 10.123 14.0214C10.4354 14.2972 10.7252 14.5214 10.9795 14.6747C11.1063 14.7512 11.2137 14.8007 11.2959 14.8329C11.3369 14.8489 11.3718 14.8608 11.3994 14.869C11.4131 14.8731 11.4254 14.8762 11.4355 14.8788C11.4406 14.8801 11.4451 14.8817 11.4492 14.8827C11.4513 14.8832 11.4533 14.8833 11.4551 14.8837L11.458 14.8846H11.46L11.5654 14.9071L11.6709 14.8837H11.6738L11.6758 14.8827C11.6775 14.8823 11.6797 14.8822 11.6816 14.8817C11.6858 14.8807 11.6912 14.8791 11.6963 14.8778C11.7063 14.8752 11.7181 14.8721 11.7314 14.868C11.7587 14.8597 11.7928 14.8479 11.833 14.8319C11.9137 14.7998 12.019 14.7503 12.1445 14.6747H12.1455C12.3996 14.5215 12.6887 14.2972 13.001 14.0214C13.6254 13.4696 14.3184 12.7291 14.9668 11.9823C15.614 11.2368 16.2131 10.4908 16.6504 9.93054C16.8699 9.64923 17.2352 9.16437 17.3564 9.00378L17.3604 8.9989C17.4427 8.88708 17.6004 8.86377 17.7109 8.94519C17.8218 9.02709 17.8455 9.18364 17.7637 9.2948V9.29578C17.6331 9.4688 17.2609 9.95935 17.0439 10.2372V10.2382C16.6035 10.8027 15.9985 11.5562 15.3438 12.3104C14.6898 13.0635 13.9807 13.8232 13.332 14.3964C13.0081 14.6825 12.6934 14.9276 12.4033 15.1024C12.1205 15.2729 11.83 15.3963 11.5625 15.3964C11.295 15.3964 11.0046 15.2729 10.7217 15.1024C10.4315 14.9275 10.1161 14.6827 9.79199 14.3964C9.14322 13.8231 8.43412 13.0635 7.78027 12.3104C7.12538 11.5561 6.52068 10.8027 6.08008 10.2382C5.86283 9.95974 5.49061 9.46823 5.36035 9.29578L5.36133 9.2948Z' fill='%2387898F' stroke='%2387898F'/%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
    transform: rotate(0deg);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ff-custom-select-wrapper.is-open .ff-custom-select-current::after {
    transform: rotate(-180deg);
}

.ff-custom-select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border-radius: 12px;
    border: 1px solid #cfd0d2;
    box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.08);
    max-height: 260px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
    padding: 4px;
}

.ff-custom-select-wrapper.is-open .ff-custom-select-list {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ff-custom-select-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.3;
    color: #101820;
    border-radius: 8px;
}

.ff-custom-select-item:hover,
.ff-custom-select-item.is-active {
    background: #F3F4F6;
}

.fluentform .ff-el-form-control,
.gmotor-checkout-form__input {
    display: block;
    width: 100%;
}

.ff-default .ff-el-form-control,
.gmotor-checkout-form__input:not([type="checkbox"]) {
    background-clip: padding-box;
    background-image: none;
    border: 1px solid var(--fluentform-border-color);
    border-radius: var(--fluentform-border-radius);
    color: var(--fluentform-secondary);
    font-family: var(--font-manrope);
    line-height: 1;
    margin-bottom: 0;
    max-width: 100%;
    padding: 11px 15px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.36133 9.29486C5.28962 9.19726 5.29936 9.06553 5.37695 8.97943L5.41406 8.94525C5.5251 8.86345 5.68172 8.86345 5.76367 8.99799L5.76758 9.00287C5.88871 9.16328 6.25493 9.64913 6.47461 9.9306C6.91191 10.4909 7.51095 11.2369 8.1582 11.9824C8.80658 12.7291 9.49868 13.4696 10.123 14.0214C10.4354 14.2973 10.7252 14.5215 10.9795 14.6747C11.1063 14.7512 11.2137 14.8008 11.2959 14.8329C11.3369 14.849 11.3718 14.8608 11.3994 14.8691C11.4131 14.8732 11.4254 14.8763 11.4355 14.8788C11.4406 14.8801 11.4451 14.8818 11.4492 14.8828C11.4513 14.8832 11.4533 14.8833 11.4551 14.8837L11.458 14.8847H11.46L11.5654 14.9072L11.6709 14.8837H11.6738L11.6758 14.8828C11.6775 14.8824 11.6797 14.8822 11.6816 14.8818C11.6858 14.8808 11.6912 14.8792 11.6963 14.8779C11.7063 14.8752 11.7181 14.8722 11.7314 14.8681C11.7587 14.8598 11.7928 14.848 11.833 14.832C11.9137 14.7999 12.019 14.7504 12.1445 14.6747H12.1455C12.3996 14.5215 12.6887 14.2972 13.001 14.0214C13.6254 13.4696 14.3184 12.7292 14.9668 11.9824C15.614 11.2369 16.2131 10.4909 16.6504 9.9306C16.8699 9.64929 17.2352 9.16443 17.3564 9.00385L17.3604 8.99896C17.4427 8.88714 17.6004 8.86383 17.7109 8.94525C17.8218 9.02715 17.8455 9.18371 17.7637 9.29486V9.29584C17.6331 9.46886 17.2609 9.95941 17.0439 10.2372V10.2382C16.6035 10.8027 15.9985 11.5563 15.3438 12.3105C14.6898 13.0636 13.9807 13.8232 13.332 14.3964C13.0081 14.6826 12.6934 14.9276 12.4033 15.1025C12.1205 15.273 11.83 15.3964 11.5625 15.3964C11.295 15.3964 11.0046 15.273 10.7217 15.1025C10.4315 14.9275 10.1161 14.6828 9.79199 14.3964C9.14322 13.8232 8.43412 13.0636 7.78027 12.3105C7.12538 11.5562 6.52068 10.8027 6.08008 10.2382C5.86283 9.9598 5.49061 9.46829 5.36035 9.29584L5.36133 9.29486Z' fill='%2387898F'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px;

    -webkit-appearance: none; /* Для Safari и Chrome */
    -moz-appearance: none;    /* Для Firefox */
    appearance: none;         /* Стандарт */
}

.fluentform .ff-el-group {
    margin-bottom: 16px !important;
    margin-top: 0 !important;
}

.fluentform .ff-el-form-check {
    font-size: 12px;
}

/* Согласие на обработку данных: Fluent Forms раскладывает строку таблицей
   (label — table-row), из-за чего текст рядом с чекбоксом переносился
   лесенкой и выглядел центрированным. Ставим обычный флекс: галочка слева,
   текст прижат к левому краю и переносится под собой. */
.fluentform .ff-el-form-check .ff-el-form-check-label,
.fluentform .ff-el-form-check .ff_tc_label {
    display: flex;
    align-items: flex-start;
    gap: 0;
    text-align: left;
}

.fluentform .ff-el-form-check .ff_tc_checkbox {
    display: flex;
    align-items: center;
    height: 20px;
    flex-shrink: 0;
}

.fluentform .ff-el-form-check .ff_t_c,
.fluentform .ff-el-form-check .ff_t_c p {
    text-align: left;
    margin: 0;
}

.fluentform .ff-el-form-check-label a,
.gmotor-checkout-form__privacy-policy {
    color: var(--color-brand);
}

.gmotor-checkout-form__privacy-policy {
    margin-left: 5px;
}

/* 1. Основные стили чекбокса (размер, бордер, скругление) */
.fluentform .ff-el-form-check-input,
.gmotor-checkout-form__input.input-checkbox {
    /* Убираем системные стили, если они остались */
    -webkit-appearance: none;
    appearance: none;
    
    /* РАЗМЕРЫ */
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    flex-shrink: 0;
    
    /* БОРДЕР */
    border: 1px solid #CFD0D2 !important; 
    
    /* СКРУГЛЕНИЕ */
    border-radius: 6px !important; 
    
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0;
    padding: 0;

    margin-right: 12px !important;
}

/* Состояние checked для чекбокса политики конфиденциальности */
.gmotor-checkout-form__input.input-checkbox:checked {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

.gmotor-checkout-form__input.input-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 2. Цвет при наведении */
.fluentform .ff-el-form-check-input:hover {
    border-color: #000 !important;
}

/* 3. Стиль, когда галочка активна (Checked) */
.fluentform .ff-el-form-check-input:checked {
    background-color: #000 !important; /* Цвет фона при клике */
    border-color: #000 !important;     /* Цвет бордера при клике */
}

/* 4. Рисуем саму белую галочку внутри */
.fluentform .ff-el-form-check-input:checked:after {
    content: '';
    position: absolute;
    /* Позиционирование галочки */
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    /* Сама галочка */
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fluentform .ff-el-group.ff_submit_btn_wrapper {
    margin-top: 28px;
    margin-bottom: 0 !important;
}

/* 1. Основное состояние кнопки */
.fluentform .ff-btn-submit {
    /* ЦВЕТА */
    background-color: var(--color-brand) !important; /* Черный фон */
    color: #fff !important;           /* Белый текст */
    height: 48px !important;
    
    /* ГЕОМЕТРИЯ */
    width: 100% !important;           /* На всю ширину (если нужно) */ /* Внутренние отступы */
    border: none !important;          /* Убираем рамку */
    border-radius: 100px !important;    /* Скругление (как у чекбоксов) */
    
    /* ТЕКСТ */
    font-size: 14px !important;
    font-weight: 700 !important;
    
    cursor: pointer;
    transition: all 0.3s ease !important;
    display: inline-block;
    outline: none !important;
    box-shadow: none !important;      /* Убираем дефолтную тень */
    opacity: 1 !important;
}

/* 2. Эффект при наведении (Hover) */
.fluentform .ff-btn-submit:hover {
    background-color: var(--color-brand-dark) !important;
}

/* 4. Если кнопка в состоянии загрузки (после клика) */
.fluentform .ff-btn-submit:disabled {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.8 !important;
}


/* Стилизуем контейнер, который заменяет форму */
.fluentform .ff-message-success {
    display: block; /* Показывается самим плагином */
    opacity: 0;
    animation: fadeIn 0.4s ease forwards; /* Плавное появление */
    min-height: 200px; /* Чтобы высота окна резко не схлопывалась */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* В попапах стандартный текст успеха скрываем (используем свой попап) */
.popup-body .ff-message-success {
    display: none !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Если внутри popup-body есть видимое сообщение об успехе, скрываем заголовок */
.popup-body:has(.ff-message-success:not(:empty)) .popup-title {
    display: none !important;
}

.custom-success-wrapper {
    padding: 0 30px;
}

.custom-success-wrapper .success-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background: var(--color-brand);
    border-radius: 50%;
    margin: auto;
}

.custom-success-wrapper .success-title {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
    text-transform: uppercase;
    text-align: center;
    margin-top: 44px;
}

.custom-success-wrapper .success-title span {
    color: var(--color-brand);
}

.custom-success-wrapper p {
    font-size: 14px;
    color: #0F141E;
    line-height: 22px;
    margin-top: 8px;
    text-align: center;
}

/* Прячем стандартное success-сообщение формы контактов (используем попап) */
.page-conacts__form #fluentform_6_success {
    display: none !important;
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 16px 0;
    background: rgba(15, 20, 30, 0.98);
    color: #fff;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.cookie-banner--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.cookie-banner__inner {
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding: 0 20px; */
    display: flex;
    align-items: center;
    gap: 16px;
}

.cookie-banner__text {
    font-size: 13px;
    line-height: 1.5;
    color: #E4E7F0;
    max-width: 1000px;
}

.cookie-banner__button {
    margin-left: auto;
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 999px;
    border: none;
    background: var(--color-brand);
    color: #fff;
    font-family: var(--font-tiktok-sans);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.cookie-banner__button:hover {
    background: var(--color-brand-dark);
}

.cookie-banner__button:active {
    transform: translateY(1px);
}

@media (max-width: 767px) {
    .cookie-banner__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-banner__button {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
}


/* page 404 */
body.error404 {
    background: var(--color-fon-contrast);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.error404 .site-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.error404 .error-404 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.not-found {
    background-image: url(../images/404-bg.webp);
    /* background-size: contain; */
    background-size: 892px;
    background-position: top center;
    background-repeat: no-repeat;
}

@media (max-width: 600px) {
    .not-found {
        background-size: 650px;
    }
}

.not-found__page-title {
    font-size: 120px;
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
    text-transform: uppercase;
    text-align: center;
    font-style: italic;
    color: white;
    transform: scaleX(1.5);
    /* transform-origin: left; */
    word-break: break-word;
    margin-top: 165px;
}

@media (max-width: 1024px) {
    .not-found__page-title {
        font-size: 100px;
    }
}

@media (max-width: 700px) {
    .not-found__page-title {
        font-size: 80px;
    }
}

.not-found__content {
    margin-top: 0;
    width: 442px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    color: white;
}

.not-found__subtitle {
    font-family: var(--font-tiktok-sans);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1024px) {
    .not-found__subtitle {
        font-size: 16px;
    }
}

.not-found__text {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 1024px) {
    .not-found__text {
        font-size: 12px;
    }
}

.not-found__button {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

.not-found__product-category-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 104px;
    width: 902px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .not-found__product-category-list {
        gap: 8px;
    }
}

@media (max-width: 1024px) {
    .not-found__product-category-list {
        margin-top: 100px;
    }
}

.not-found__product-category-list li {
    flex: 1;
    background: var(--color-contrast-lite);
    border-radius: 24px;

    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding-top: 30px;
    overflow: hidden;
    transition: background 0.3s ease, transform 0.3s ease;
}

@media (max-width: 700px) {
    .not-found__product-category-list li {
        padding-top: 20px;
        border-radius: 20px;
    }
}

.not-found__product-category-list li:hover {
    background: var(--color-brand-dark);
    transform: translateY(-4px);
}

.not-found__product-category-list li a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.not-found__product-category-list li span {
    display: block;
    padding: 0 24px;
    font-family: var(--font-tiktok-sans);
    transition: transform 0.3s ease;
}

.not-found__product-category-list li:hover span {
    transform: translateY(-2px);
}

@media (max-width: 700px) {
    .not-found__product-category-list li span {
        padding: 0 20px;
    }
}

.not-found__product-category-list-img {
    margin-left: auto;
    padding-left: 12.4%;
    margin-top: 15px;
    transition: transform 0.5s ease;
}

@media (max-width: 767px) {
    .not-found__product-category-list-img {
        margin-top: 15px;
    }
}

.not-found__product-category-list li:hover .not-found__product-category-list-img {
    transform: translateX(-17%) scale(1.05) translateY(-10px);
}

@media (max-width: 1023px) {
    .not-found__product-category-list {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .not-found__product-category-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1023px) {
    .not-found__product-category-list li:hover .not-found__product-category-list-img {
        transform: translateX(-14%) scale(0.9) translateY(-10px);
    }
}

.not-found__product-category-list-img img {
    position: relative;
    top: 5px;
    left: 12%;
}

@media (max-width: 767px) {
    .not-found__product-category-list-img img {
        left: 7%;
        max-width: min-content;
        width: 200px;
    }
}

/* Главная страница */
body.home {
    background: var(--color-fon-contrast);
}

.front-page__hero {
    position: sticky;
    top: 0;
    /* Чуть ниже высоты экрана — чтобы блок контента (main-container) сразу выглядывал снизу */
    height: 85vh;
    z-index: 10;
    overflow: hidden;
    display: block;
}

@media screen and (max-width: 767px) {
    .front-page__hero {
        position: relative;
    }
}

.front-page__hero .btn-secondary {
    color: var(--color-white);
}

.front-page__hero .video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Заполняет hero по высоте (подстраивается под высоту экрана), ширина всегда 100% */
    height: 100%;
    z-index: 1;
}

.front-page__hero .video-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(110deg, #000 0%, rgba(0, 0, 0, 0) 73%);
    opacity: 0.6;
}

@media screen and (max-width: 767px) {
    .front-page__hero .video-bg::after {
        background: linear-gradient(110deg, #000 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }
}

.front-page__hero .video-bg video,
.front-page__hero .video-bg .hero-bg-img {
    /* Высота = высота hero (подстраивается под экран), ширина всегда 100%, кроп по краям */
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 767px) {
    .front-page__hero .video-bg video,
    .front-page__hero .video-bg .hero-bg-img {
        height: 85vh;
        width: 100%;
        object-fit: cover;
        object-position: center;
        max-height: 700px;
    }
}

.front-page__hero .hero-content__buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    /* Левый край кнопок совпадает с левым краем плашки заголовка (у плашки скошенный
       фон симметрично выступает влево-вправо от этой линии) */
    margin-left: 0;
}

@media screen and (max-width: 1023px) {
    .front-page__hero .hero-content__buttons {
        margin-top: 36px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__hero .hero-content__buttons {
        flex-direction: column;
        margin-top: 36px;
    }

    .front-page__hero .hero-content__buttons .btn {
        min-width: 100%;
    }
}

/* ===== Hero-карточка в стиле Motors: стопка скошенных «ромбов»-плашек ===== */
:root {
    --hero-skew: -16deg;
}

.hero-content__card {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    /* Без общего gap: плашка цены примыкает к заголовку вплотную (как в Motors),
       а отступ до кнопок задаётся явно у .hero-content__buttons */
    gap: 0;
}

/* Белая скошенная плашка с заголовком (тот самый «белый ромб»).
   Padding-left больше правого: скос отсчитывается от нижнего левого угла,
   поэтому вверху фон уходит вправо и без запаса текст подошёл бы к самой кромке. */
.hero-content__title-plate {
    position: relative;
    display: inline-block;
    padding: 16px 30px 18px 50px;
    z-index: 0;
}
.hero-content__title-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #ffffff;
    transform: skewX(var(--hero-skew));
    /* Скос от нижнего левого угла: угол плашки не выступает влево за левый край
       стопки — линия совпадает с кнопкой при любой высоте и переносах заголовка */
    transform-origin: bottom left;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.front-page__hero h1,
.front-page__hero .hero-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    font-family: var(--font-exo2);
    text-transform: uppercase;
    color: #0e1315;
    letter-spacing: -0.01em;
    line-height: 1.02;
    font-style: normal;
}
.front-page__hero h1 p,
.front-page__hero .hero-title p {
    margin: 0;
}

@media screen and (max-width: 1023px) {
    .front-page__hero h1,
    .front-page__hero .hero-title {
        font-size: 32px;
    }
}

@media screen and (max-width: 767px) {
    .hero-content__title-plate {
        /* Запас слева рассчитан на заголовок в две строки — при большей высоте
           скошенный край сверху уходит правее */
        padding: 12px 20px 13px 38px;
    }
    .front-page__hero h1,
    .front-page__hero .hero-title {
        font-size: 30px;
    }
}

.front-page__hero h1 span,
.front-page__hero .hero-title span {
    color: var(--color-brand);
}

.front-page__hero .hero-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: max-content;
    z-index: 15;
    display: flex;
    align-items: center;
    /* Опускаем контент на высоту чёрной плашки хедера (64px), чтобы визуально центрировался
       относительно видимой области под шапкой, а не всего hero */
    transform: translateY(64px);
}

@media screen and (max-width: 767px) {
    .front-page__hero .hero-content {
        margin-top: auto;
        top: auto;
        bottom: 40px;
        /* На мобиле контент привязан к низу — сдвиг не нужен */
        transform: none;
    }
}

.front-page__hero .hero-content__arrow {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    z-index: 16;
}

@media screen and (max-width: 767px) {
    .front-page__hero .hero-content__arrow {
        display: none;
    }
}

/* ===== Hero-слайдер: стопка слайдов, автолистание с диагональным wipe ===== */
.hero-slider__slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    visibility: hidden;
    /* Подложка на случай слайда без фото — чтобы сквозь него не просвечивал предыдущий */
    background: #0e1315;
}

.hero-slider__slide.is-active {
    visibility: visible;
    z-index: 2;
}

/* Входящий слайд — скошенная шторка (clip-path) под тем же углом, что плашки (--hero-skew).
   Старт: шторка целиком за левым краем; JS добавляет .is-wiping — край уезжает за правый. */
.hero-slider__slide.is-entering {
    visibility: visible;
    z-index: 3;
    clip-path: polygon(-120% 0%, 0% 0%, -14% 100%, -134% 100%);
}

.hero-slider__slide.is-wiping {
    clip-path: polygon(-120% 0%, 114% 0%, 100% 100%, -134% 100%);
    transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1);
}

/* Карточка плашек входящего слайда въезжает слева с небольшой задержкой */
.hero-slider__slide.is-entering .hero-content__card {
    opacity: 0;
    transform: translateX(-48px);
}

.hero-slider__slide.is-wiping .hero-content__card {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.6s ease 0.35s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider__slide.is-entering {
        clip-path: none;
        opacity: 0;
    }

    .hero-slider__slide.is-wiping {
        clip-path: none;
        opacity: 1;
        transition: opacity 0.8s ease;
    }

    .hero-slider__slide.is-entering .hero-content__card,
    .hero-slider__slide.is-wiping .hero-content__card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Красная скошенная плашка с ценой (стиль Motors, как белая плашка заголовка) */
.hero-content__price-plate {
    position: relative;
    display: inline-block;
    margin-left: 40px;
    padding: 10px 25px 12px 39px;
    z-index: 0;
    font-family: var(--font-exo2);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-white);
}

.hero-content__price-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-brand);
    transform: skewX(var(--hero-skew));
    transform-origin: bottom left;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 767px) {
    .hero-content__price-plate {
        margin-left: 28px;
        padding: 8px 20px 10px 32px;
        font-size: 18px;
    }
}

.front-page__main-container__box-shadow {
    position: absolute;
    background: linear-gradient(0deg, #101820 0%, rgba(17, 12, 25, 0.7) 50%, rgba(17, 0, 17, 0) 100%);
    height: 250px;
    width: 100%;
    top: -250px;
    /* top: -310px; */
}

@media screen and (max-width: 767px) {
    .front-page__main-container__box-shadow {
        display: none;
    }
    
    .video-bg::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 301px;
        background: linear-gradient(0deg, #101820 0%, rgba(17, 12, 25, 0.7) 50%, rgba(17, 0, 17, 0) 100%);
        z-index: 2;
    }
}

/* Контент, который наезжает на hero */
.front-page__main-container {
    position: relative;
    z-index: 20;
    /* Тёмный фон секции каталога — как в новой теме Motors */
    background: #0e1315;
    min-height: 100vh;
}

.front-page__best-offer {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 20;
    margin-top: 60px;
}

@media screen and (max-width: 767px) {
    .front-page__best-offer {
        flex-direction: column;
        gap: 15px;
        margin-top: 24px;
    }
}

.front-page__categories-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
    padding-bottom: 64px;
}

@media (max-width: 1023px) {
    .front-page__categories-list {
        margin-top: 100px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list {
        margin-top: 49px;
        gap: 8px;
        padding-bottom: 48px;
    }
}

.front-page__categories-list a {
    display: block;
    background-color: var(--color-primary-dark);
    border-radius: 24px;
    height: 340px;
    padding-top: 40px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 32px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.4s ease, transform 0.4s ease;
}

@media (max-width: 1023px) {
    .front-page__categories-list a {
        padding-top: 40px;
        padding-left: 24px;
        padding-bottom: 0;
        height: 500px;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list a {
        padding-left: 20px;
        padding-top: 24px;
        height: 220px;
    }
}

/* Псевдоэлемент для фонового изображения */
.front-page__categories-list-img-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(1.1) translateX(20px);
    z-index: 0;
}

/* .front-page__categories-list .front-page__categories-list-img-bg:nth-child(1) {
    background-image: url('../images/tire_tracks-1.webp');
}

.front-page__categories-list .front-page__categories-list-img-bg:nth-child(2) {
    background-image: url('../images/tire_tracks-2.webp');
}

.front-page__categories-list .front-page__categories-list-img-bg:nth-child(3) {
    background-image: url('../images/tire_tracks-3.webp');
}

.front-page__categories-list .front-page__categories-list-img-bg:nth-child(4) {
    background-image: url('../images/tire_tracks-4.webp');
} */

.front-page__categories-list a:hover {
    background-color: var(--color-brand-dark);
    transform: translateY(-4px);
}

.front-page__categories-list a:hover .front-page__categories-list-img-bg {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.front-page__categories-list-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease, color 0.4s ease;
}

@media (max-width: 1023px) {
    .front-page__categories-list-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list-title {
        font-size: 20px;
    }
}

.front-page__categories-list-description {
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-tiktok-sans);
    margin-top: 13px;
    line-height: 129%;
    color: var(--color-disable);
    transition: color 0.4s ease, transform 0.4s ease;
    position: relative;
    z-index: 1;
}

@media (max-width: 1023px) {
    .front-page__categories-list-description {
        font-size: 16px;
        line-height: 133%;
        margin-top: 15px;
        width: 272px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list-description {
        display: none;
    }
}

.front-page__categories-list a:hover .front-page__categories-list-title {
    transform: translateY(-2px);
}

.front-page__categories-list a:hover .front-page__categories-list-description {
    color: white;
    transform: translateY(-2px);
}

.front-page__categories-list-title,
.front-page__categories-list-description {
    width: 240px;
}

@media screen and (max-width: 767px) {
    .front-page__categories-list-title,
    .front-page__categories-list-description {
        width: 100%;
        line-height: 115%;
    }
}

.front-page__product-category-list-img {
    width: 450px;
    position: absolute;
    bottom: 0;
    left: 48%;
    z-index: 1;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 1;
}

@media screen and (max-width: 1023px) {
    .front-page__product-category-list-img {
        min-width: 450px;
        left: 16px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__product-category-list-img {
        min-width: 202px;
        left: 29px;
    }
}

.front-page__categories-list a:hover .front-page__product-category-list-img {
    transform: translateX(-25%) scale(1.05) translateY(-10px);
}

@media screen and (max-width: 1023px) {

    .front-page__categories-list a:hover .front-page__product-category-list-img {
        transform: translateX(-5%) scale(.75) translateY(-10px);
    }
}

.front-page__categories-list-button {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 56px;
    height: 56px;
    border: none;
    position: absolute;
    bottom: 32px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

@media screen and (max-width: 1023px) {
    .front-page__categories-list-button {
        display: none;
    }
}

.front-page__categories-list-button svg {
    transition: transform 0.4s ease;
}

.front-page__categories-list a:hover .front-page__categories-list-button {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(4px);
}

.front-page__categories-list a:hover .front-page__categories-list-button svg {
    transform: translateX(4px);
}


/* Блок с лучшими предложениями */
.front-page__best-offer {
    position: relative;
    background: var(--color-brand);
    border-radius: 24px;
}

.front-page__best-offer-title {
    display: flex;
    align-items: center;
    width: max-content;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    background: var(--color-white);
    color: var(--color-black);
    padding-left: 18px;
    padding-right: 33px;
    height: 32px;
    position: relative;

    transform: scaleX(1.05);
    transform-origin: left;

    clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
}

@media (max-width: 1023px) {
    .front-page__best-offer-title {
        font-size: 14px;
        padding-left: 15px;
        padding-right: 28px;
    }
}

.front-page__best-offer-title-line {
    width: 23px;
    height: 32px;
    background: var(--color-white);
    transform: skew(-22deg);

    position: absolute;
    top: 0;
    left: calc(100% + 20px);
}

@media (max-width: 1023px) {
    .front-page__best-offer-title-line {
        left: calc(100% + 11px);
    }
}

.front-page__best-offer-content-container{
    padding-top: 40px;
    padding-left: 40px;
    padding-bottom: 30px;
}

@media (max-width: 1023px) {
    .front-page__best-offer-content-container {
        padding-top: 32px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__best-offer-content-container {
        padding-left: 24px;
    }
}

.front-page__best-offer-content {
    margin-top: 17px;
    font-size: 40px;
    line-height: 110%;
    font-weight: 700;
    color: var(--color-white);
    font-family: var(--font-tiktok-sans);
}

@media (max-width: 1023px) {
    .front-page__best-offer-content {
        font-size: 32px;
        margin-top: 22px;
        line-height: 118%;
    }
}

@media screen and (max-width: 767px) {
    .front-page__best-offer-content {
        line-height: 125%;
    }
}

.front-page__best-offer-content span {
    transform: scaleX(1.5);
    transform-origin: left;
    word-break: break-word;
    display: inline-block;
    letter-spacing: -0.04em;
    font-weight: 800;
}

@media (max-width: 1280px) {
    .front-page__best-offer-content span {
        display: block;
        transform: none;
    }
}

.front-page__best-offer-title-container {
    position: relative;
    display: inline-block;
}

.front-page__best-offer-start-sales-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #232D37;
    background-image: url('../images/best-offer-start-sales.webp');
    background-size: 82%;
    background-position: 213% 32%;
    background-repeat: no-repeat;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    width: 500px;
    position: relative;
    /* clip-path: polygon(65px 0, 100% 0, 100% 100%, 0 100%); */
}

@media (max-width: 1023px) {
    .front-page__best-offer-start-sales-container {
        width: 55%;
    }
}

@media screen and (max-width: 767px) {
    .front-page__best-offer-start-sales-container {
        height: 148px;
        width: 85%;
        border-top-right-radius: 0;
        margin-left: auto;
    }
}

.front-page__best-offer-start-sales-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 67px;
    height: 100%;
    background-color: var(--color-brand);
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%);
}

.front-page__best-offer-start-sales {
    background: var(--color-white);
    transform: skew(-22deg);
    width: max-content;
    padding: 14px 18px;
    font-weight: 700;
    font-size: 16px;
    font-family: var(--font-exo2);
    z-index: 1;
}

@media (max-width: 1023px) {
    .front-page__best-offer-start-sales {
        position: absolute;
        right: 14%;
        top: 90px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__best-offer-start-sales {
        right: 25px;
        top: -17px;
        padding: 10px 13px;
    }
}

.front-page__best-offer-start-sales-text {
    transform: skew(13deg);
}

@media screen and (max-width: 767px) {
    .front-page__best-offer-start-sales-text {
        font-size: 12px;
    }
}

.front-page__best-offer-bg {
    position: absolute;
    width: 304px;
    bottom: 0;
    right: 280px;
    z-index: 1;
}

@media (max-width: 1023px) {
    .front-page__best-offer-bg {
        left: -50px;
        right: auto;
        width: 324px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__best-offer-bg {
        width: 250px;
    }
}

/* Новинка сезона: слайдер с fade и адаптивными картинками */
.front-page__season-slider-wrap {
    margin-top: 24px;
    margin-bottom: 24px;
}

.front-page__season-slider.front-page__season-slider {
    /* padding-bottom: 30px; */
}

/* Разная высота слайдов: выравнивание по низу и по центру по горизонтали */
.front-page__season-slider .splide__list {
    align-items: flex-end;
}

.front-page__season-slider .splide__slide {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: auto;
}

.front-page__season-slider-slide {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.front-page__season-slider-slide picture {
    display: block;
    width: 100%;
}

.front-page__season-slider-img {
    width: 100%;
    height: auto;
    display: block;
}

.front-page__popular-motorcycles-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1023px) {
    .front-page__popular-motorcycles-title-container {
        align-items: flex-start;
    }
}

.front-page__popular-motorcycles-title {
    font-size: 32px;
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media (max-width: 1023px) {
    .front-page__popular-motorcycles-title {
        font-size: 28px;
        width: 310px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-title {
        font-size: 24px;
        width: 275px;
    }
}

.front-page__popular-motorcycles-title .font-tiktok-sans {
    font-weight: 700;
}

.front-page__popular-motorcycles-title .text-family-brand {
    transform: scaleX(1.2);
    transform-origin: left;
}

.front-page__popular-motorcycles-title-button {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-title-button {
        min-width: 100%;
    }
}

.btn-secondary.btn-arrow-right-black::after
{
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Кнопка «Перейти в каталог» теперь красная — стрелка белая */
.front-page__popular-motorcycles-title-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.front-page__popular-motorcycles-title-button:hover::after,
.btn-secondary.btn-arrow-right-black:hover::after
{
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.front-page__popular-motorcycles-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-controls {
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }
}

.front-page__popular-motorcycles-arrows {
    display: flex;
    gap: 8px;
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-arrows {
        display: none;
    }
}

.front-page__popular-motorcycles-arrows .splide__arrow {
    position: static;
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(0);
    /* transition: all 0.3s ease; */
    transition: background-color 0.3s ease;
}

.front-page__popular-motorcycles-arrows .splide__arrow:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.front-page__popular-motorcycles-arrows .splide__arrow svg path {
    transition: stroke 0.2s ease;
}


.front-page__popular-motorcycles-arrows .splide__arrow:hover svg path{
    stroke: var(--color-white);
}

.front-page__popular-motorcycles-arrows svg path{
    fill: transparent !important;
    transition: fill 0.3s ease;
}

.front-page__popular-motorcycles-arrows .splide__arrow svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-black);
    transition: stroke 0.3s ease;
}

.front-page__popular-motorcycles-arrows .splide__arrow:hover svg {
    stroke: var(--color-white);
}

.front-page__popular-motorcycles-arrows .splide__arrow--prev svg {
    transform: rotate(0deg);
}

.front-page__popular-motorcycles-arrows .splide__arrow:disabled,
.front-page__popular-motorcycles-arrows .splide__arrow[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.front-page__popular-motorcycles-arrows .splide__arrow:disabled:hover,
.front-page__popular-motorcycles-arrows .splide__arrow[disabled]:hover {
    background: var(--color-white);
    border-color: var(--color-gray);
}

.front-page__popular-motorcycles-arrows .splide__arrow:disabled:hover svg,
.front-page__popular-motorcycles-arrows .splide__arrow[disabled]:hover svg {
    stroke: var(--color-black);
}

.front-page__best-offer-content .text-family-brand {
    transform: scaleX(1.3);
}

.front-page__section-white {
    background-color: var(--color-white);
    padding-top: 64px;
    border-top-left-radius: 56px;
    border-top-right-radius: 56px;
}

@media screen and (max-width: 1023px) {
    .front-page__section-white {
        background-color: var(--fon-gray-lite);
    }
}

@media screen and (max-width: 767px) {
    .front-page__section-white {
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        padding-top: 24px;
    }
}

.text-popular-models {
    color: var(--color-brand);
}

.front-page__popular-motorcycles-slider {
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-slider {
        margin-top: 22px;
    }
}

.popular-motorcycle-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popular-motorcycle-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.popular-motorcycle-card__content {
    padding: 20px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

@media screen and (max-width: 767px) {
    .popular-motorcycle-card__content {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 359px) {
    .popular-motorcycle-card__content {
        padding: 20px 0;
    }
}

.front-page__popular-motorcycles {
    position: relative;
}

.front-page__popular-motorcycles-slider {
    padding-bottom: 72px;
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-slider {
        padding-bottom: 112px;
    }
}

/* Splide задаёт списку height: 100%, и если трек оказывается выше содержимого,
   слайды растягиваются: кнопки с margin-top: auto уезжают к низу карточки, а между
   характеристиками и кнопками зияет пустота. Высоту списка задаёт самый высокий слайд. */
.front-page__popular-motorcycles-slider .splide__track > .splide__list {
    height: auto;
}

.front-page__popular-motorcycles-slider .splide__pagination {
    gap: 0 24px !important;
    bottom: 30px !important;
}

@media (max-width: 1023px) {
    .front-page__popular-motorcycles-slider .splide__pagination {
        bottom: 40px !important;
    }
}

@media screen and (max-width: 767px) {
    .front-page__popular-motorcycles-slider .splide__pagination {
        bottom: 80px !important;
    }
}

@media screen and (max-width: 359px) {
    .front-page__popular-motorcycles-slider .splide__pagination {
        gap: 0 14px !important;
    }
}


.front-page__popular-motorcycles-slider .splide__pagination button {
    width: 8px !important;
    height: 8px !important;
}

.front-page__popular-motorcycles-slider .splide__pagination__page.is-active {
    transform: scale(1.5) !important;
}

/* 
    Product-card styles
*/

.product-card {
    border-radius: 24px;
    padding: 8px;
    padding-bottom: 16px;
    /* transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
    background: var(--fon-gray-lite);
}

@media screen and (max-width: 1023px) {
    .splide__list .product-card {
        background: var(--color-white);
    }

    /* .product-card:hover {
        background: var(--color-white);
    } */
}

@media screen and (min-width: 1024px) {
    /* .product-card:hover, */
    .product-card.product-card__hover-effect {
        background: #fff;
    }

   .product-card:hover,
    body.home .product-card.product-card__hover-effect {
        background: var(--fon-gray-lite);
    }
}

/* header btns */
.product-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 8px;
    height: 32px;
    z-index: 3;
    position: relative;
}

@media screen and (max-width: 767px) {
    .product-card__header {
        padding: 0;
    }
}

.product-card__header > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
}

.product-card__header-category {
    border: 1px solid var(--color-brand);
    text-transform: uppercase;
}

.product-card__header-new {
    background: var(--color-fon-contrast);
    color: var(--color-white);
}

.product-card__header-promotion {
    background: #eaf429;
    font-style: italic;
}

.product-card__header-promotion-text {
    font-family: var(--font-tiktok-sans);
}

.product-card__image-container {
    position: relative;
    margin-top: 20px;
    margin-left: 24px;
    margin-right: 24px;
}

.product-card__image-container > svg {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

@media screen and (max-width: 359px) {
    .product-card__image-container > svg {
        width: 120%;
    }
}

/* Базовые CSS переменные для SVG анимации */
.product-card {
    /* Базовый цвет и прозрачность */
    --icon-fill: #EFEFEF;
    --group-op: 1;
}

/* При наведении на всю карточку меняем переменные */
.product-card:hover {
    /* Цвет при наведении */
    --icon-fill: var(--color-brand, #D8282F);
    --group-op: 0.16;
}

.card-bg-svg {
    color: var(--icon-fill, #EFEFEF); /* Это попадет в fill="currentColor" */
    transition: color 0.4s ease;
    
    /* Создаем эффект затухания градиентом прямо в CSS */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
}

.card-bg-svg .icon-group {
    opacity: var(--group-op, 1);
    transition: opacity 0.4s ease;
}

.product-card-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 1;
}

.product-card-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.product-card-item img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    height: 143px;
}

.product-card-wrapper {
    height: 143px;
    position: relative;
    overflow: hidden;
    display: block;
}

@media screen and (max-width: 1023px) {
    .product-card-wrapper {
        max-width: 286px;
        margin-left: auto;
        margin-right: auto;
    }
}

.product-card-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: flex-end;
    margin-top: 17px;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-card-pagination {
    opacity: 1;
}

.product-card-pagination > div {
    
    /* height: 2px; */
    height: 100%;
    width: 40px;
    /* background: #cfd0d2; */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /* overflow: hidden; */
}

.product-card-pagination > div::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #cfd0d2;
    border-radius: 2px;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card-pagination > div.active::before {
    background: var(--color-brand);
    height: 4px;
}

.product-card-pagination > div:hover:not(.active)::before {
    background: rgba(207, 208, 210, 0.8);
}

.product-card-color-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 1;
    margin-top: 37px;
    flex-shrink: 0;
}

/* Точки цветов в слайдере каталога — не обрезать */
.front-page__popular-motorcycles-slider .splide__slide .product-card-color-dots {
    min-height: 26px;
}

.product-card-color-dot {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.product-card-color-dot.active {
    border: 1px solid var(--color-black);
}

.product-card-color-dot span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid var(--color-gray);
}

.product-card-color-dot span svg {
    display: none;
}

.product-card-color-dot.active span svg {
    display: block;
}

.product-card-color-dot span img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.product-card-color-dot span svg {
    position: relative;
    z-index: 2;
}

.popular-motorcycle-card__title {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    color: var(--color-black);
}

.popular-motorcycle-card__price {
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 129%;
    letter-spacing: -0.01em;
    text-align: center;
}

.popular-motorcycle-card__price-old {
    font-size: 12px;
    text-transform: lowercase;
    text-decoration: line-through;
}

.popular-motorcycle-card__price-sale {
    color: var(--color-brand);
}

/* Когда нет скидки (нет старой цены), цена должна быть черной */
.popular-motorcycle-card__price:not(:has(.popular-motorcycle-card__price-old)) .popular-motorcycle-card__price-sale {
    color: var(--color-black);
}

/* Альтернативный вариант для браузеров без поддержки :has() */
.popular-motorcycle-card__price .popular-motorcycle-card__price-sale:only-child {
    color: var(--color-black);
}

.product-card__characteristics {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin-top: 8px;
}

.product-card__characteristics-item {
    background: var(--color-gray);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 10px;
    text-align: center;
    flex: 1;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (min-width: 1024px) {
    .product-card:hover .product-card__characteristics-item {
        background: var(--color-white);
    }
}

.product-card__characteristics-item-value {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: -0.01em;
    display: flex;
    justify-content: center;
    gap: 2px;
    align-items: baseline;
}

@media screen and (max-width: 767px) {
    .product-card__characteristics-item-value {
        line-height: 1;
        margin-top: 1px;
    }
}

.product-card__characteristics-item-value span {
    font-size: 10px;
}

.product-card__characteristics-item-value__cooling {
    font-size: 10px;
}

.product-card__characteristics-item-title {
    color: var(--color-secondary);
    font-size: 10px;
}

.product-card__add-to-cart {
    height: 44px;
    max-width: none;
    width: 100%;
}

/* Контролы количества товара в корзине */
.product-card__cart-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    width: 100%;
    background: var(--primary-color, #101820);
    border-radius: 100px;
    padding: 0;
    gap: 0;
}

.product-card__cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 4px;
    background: #fff;
    border-radius: 50%;
    /* background: transparent; */
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.product-card__cart-btn:hover {
    opacity: 0.7;
}

.product-card__cart-btn:active {
    opacity: 0.5;
}

.product-card__cart-btn svg {
    display: block;
    width: 16px;
    height: 16px;
}

.product-card__cart-quantity {
    flex: 1;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-align: center;
    color: white;
}

.product-card__btns {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (min-width: 1024px) {
    .product-card__btns {
        opacity: 0;
    }
}

@media screen and (max-width: 767px) {
    .product-card__btns {
        margin-top: 2px;
    }
}

.product-card:hover .product-card__btns,
.product-card.product-card__hover-effect .product-card__btns {
    opacity: 1;
}

.product-card__btn-wishlist {
    border: 1px solid #CFD0D2;
    height: 44px;
    width: 44px;
    min-width: 44px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #fff;
    position: relative;

    transition: all 0.3s ease;
}

.product-card__btn-wishlist:hover {
    border-color: var(--color-brand);
}

.product-card__btn-wishlist svg path {
    transition: all 0.3s ease;
}

.product-card__btn-wishlist:hover svg path {
    fill: var(--color-brand);
}

.product-card__btn-wishlist.is-active {
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0.8);
}

.product-card__btn-wishlist.is-active svg path {
    fill: #fff;
}

.single-product__compare-btn-text-not-compare,
.single-product__compare-btn-icon-active {
    display: none;
}

.single-product__compare-btn.is-active .single-product__compare-btn-text-compare,
.single-product__compare-btn.is-active svg.single-product__compare-btn-icon {
    display: none;
}

.single-product__compare-btn.is-active .single-product__compare-btn-text-not-compare,
.single-product__compare-btn.is-active svg.single-product__compare-btn-icon-active {
    display: block;
}

.compare-inline-count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--color-fon-contrast);
    color: var(--color-white);
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.compare-category-count {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: var(--color-black);
    font-weight: 400;
}

.compare-page__categories-dropdown-list .compare-category-count {
    background: var(--color-gray);
}

.compare-page__categories-dropdown-list.is-active .compare-category-count {
    background: var(--color-brand);
    color: var(--color-white);
}

.single-product__compare-btn {
    position: relative;
}

.single-product__compare-btn.is-active {
    border-color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.single-product__compare-btn.is-active:hover {
    border-color: var(--color-brand);
}

.single-product__compare-btn.is-active svg path {
    fill: #fff;
}

.compare-page__actions {
    margin-bottom: 20px;
}

.compare-page__clear-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    background: none;
    color: var(--color-black);
    font-size: 14px;
    line-height: 129%;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: text-decoration 0.3s ease;
}

@media screen and (max-width: 767px) {
    .compare-page__clear-btn {
        position: absolute;
        bottom: 3px;
        right: 0px;
    }
}

.compare-page__clear-btn:hover {
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .compare-page__clear-btn-text {
        display: none;
    }
}

.compare-page__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-gray);
    padding: 4px;
    border-radius: 100px;
}

.compare-page__categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compare-page__categories-dropdown-host {
    display: none;
    width: 100%;
}

.compare-page__categories--dropdown-only {
    display: none;
}

.compare-page__categories--dropdown-only + .compare-page__categories-dropdown-host {
    display: block;
}

.compare-page__categories--dropdown-only + .compare-page__categories-dropdown-host .hero-category__dropdown {
    display: block;
}

.compare-page__categories-dropdown-list .compare-page__category-btn {
    width: 100%;
    justify-content: space-between;
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 400;
}

.compare-page__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
    max-height: 900px;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease, max-height 0.4s ease, margin-bottom 0.4s ease, gap 0.4s ease;
}

.compare-page.compare-page--list-loading .compare-page__filters {
    max-height: 0;
    margin-bottom: 0;
    gap: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .compare-page__filters {
        flex-direction: column;
        align-items: flex-start;
    }
}

.compare-page__filters-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

@media screen and (max-width: 767px) {
    .compare-page__filters-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        width: 100%;
    }
}

/* Hero как на странице корзины */
.compare-hero {
    background: var(--color-fon-contrast);
    padding-top: 104px;
    padding-bottom: 96px;
}

@media screen and (max-width: 1023px) {
    .compare-hero {
        padding-top: 120px;
    }
}

.compare-table-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 56px 56px 0 0;
    padding-top: 20px;
    margin-top: -56px;
    padding-bottom: 64px;
    /* min-height: calc(100vh - 260px); */
    min-height: 400px;
}

@media screen and (max-width: 767px) {
    .compare-table-wrapper {
        border-radius: 32px 32px 0 0;
        padding: 12px 12px 44px;
        padding-left: 0;
        padding-right: 0;
    }
}

.compare-page__category-btn {
    display: flex;
    justify-content: flex-start !important;
    gap: 8px;
    border: none;
    font-size: 14px;
    line-height: 129%;
    font-weight: 700;
    cursor: pointer;
    border-radius: 100px;
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
}

.compare-page__category-btn:hover {
    background-color: var(--color-gray);
}

.compare-page__category-btn.is-active {
    color: var(--color-white);
    background: var(--color-brand);
}

.compare-page__categories-dropdown-list .compare-page__category-btn.is-active {
    background: var(--color-gray);
    color: var(--color-brand);
    font-weight: 700;
}

.compare-page__categories-dropdown-list .compare-page__category-btn.is-active .compare-category-count {
    background: var(--color-brand);
    color: var(--color-white);
}

.compare-page__categories--dropdown-only {
    border-radius: 8px !important;
}

.compare-page__categories--dropdown-only.is-active .compare-category-count {
    background: var(--color-brand);
    color: var(--color-white);
}

.compare-page__categories--dropdown-only.is-active {
    color: var(--color-brand);
    font-weight: 700;
}

.compare-page__only-diff {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    white-space: nowrap;
}

.compare-page__only-diff-text {
    font-size: 14px;
    line-height: 1.2;
    color: #101820;
}

.compare-page__switch {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 24px;
}

.compare-page__switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.compare-page__switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #CFD0D2;
    transition: background 0.2s ease;
    cursor: pointer;
}

.compare-page__switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.compare-page__switch input:checked + .compare-page__switch-slider {
    background: var(--color-brand);
}

.compare-page__switch input:checked + .compare-page__switch-slider::before {
    transform: translateX(18px);
}

.compare-page__empty {
    display: none;
    padding: 24px 0;
    flex-direction: column;
    margin: auto;
    width: max-content;
    align-items: center;
    gap: 10px;
}

.compare-page__list-shell {
    position: relative;
    width: 100%;
}

.compare-page.compare-page--list-loading .compare-page__list-shell {
    min-height: 220px;
}

.compare-page__list-loader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 48px 24px;
    min-height: 220px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.compare-page__list-loader.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.compare-page__list-loader-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(16, 24, 32, 0.12);
    border-top-color: var(--color-brand);
    animation: none;
}

.compare-page__list-loader.is-active .compare-page__list-loader-spinner {
    animation: compare-list-loader-spin 0.75s linear infinite;
}

.compare-page__list-loader-text {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-secondary, #87898f);
}

@keyframes compare-list-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .compare-page__list-loader {
        transition-duration: 0.01ms;
    }

    .compare-page.compare-page--list-loading .compare-page__filters,
    .compare-page__filters {
        transition-duration: 0.01ms;
    }

    .compare-page__list-loader-spinner,
    .compare-page__list-loader.is-active .compare-page__list-loader-spinner {
        animation: none;
        border-color: rgba(16, 24, 32, 0.2);
        border-top-color: var(--color-brand);
    }
}

/* Горизонтальный скролл + drag мышью (main.js). Без 100vw — иначе обрезание справа из‑за полосы прокрутки/вьюпорта */
.compare-page__list {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding-left: 12px;
    padding-right: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.compare-page__list--dragging {
    cursor: grabbing;
    user-select: none;
}

.compare-page__list.compare-page__list--matrix-tab-enter {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
}

.compare-page__list.compare-page__list--matrix-tab-enter.compare-page__list--matrix-tab-enter-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .compare-page__list.compare-page__list--matrix-tab-enter,
    .compare-page__list.compare-page__list--matrix-tab-enter.compare-page__list--matrix-tab-enter-active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.compare-page__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Не даём браузеру таскать картинку при горизонтальном скролле */
.compare-page__list img {
    -webkit-user-drag: none;
    user-select: none;
}

.compare-page__list .compare-card__image {
    -webkit-user-drag: none;
}

@media (min-width: 768px) {
    .compare-page__list {
        padding-left: 24px;
    }
}

@media (min-width: 1024px) {
    .compare-page__list {
        padding-left: 40px;
    }
}

@media (min-width: 1280px) {
    .compare-page__list {
        padding-left: max(40px, calc((100vw - 1440px) / 2 + 40px));
    }
}

/* Пустой flex-элемент в конце ряда — реально удлиняет scrollWidth (padding на матрице не помогал) */
.compare-page__list .compare-matrix__head::after,
.compare-page__list .compare-matrix__row-values::after {
    content: '';
    flex: 0 0 12px;
    width: 12px;
    min-width: 12px;
    align-self: stretch;
}

@media (min-width: 768px) {
    .compare-page__list .compare-matrix__head::after,
    .compare-page__list .compare-matrix__row-values::after {
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;
    }
}

@media (min-width: 1024px) {
    .compare-page__list .compare-matrix__head::after,
    .compare-page__list .compare-matrix__row-values::after {
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
    }
}

@media (min-width: 1280px) {
    .compare-page__list .compare-matrix__head::after,
    .compare-page__list .compare-matrix__row-values::after {
        flex: 0 0 max(40px, calc((100vw - 1440px) / 2 + 40px));
        width: max(40px, calc((100vw - 1440px) / 2 + 40px));
        min-width: max(40px, calc((100vw - 1440px) / 2 + 40px));
    }
}

.compare-page__list > .compare-matrix {
    width: max-content;
    max-width: none;
}

.compare-card {
    position: relative;
}

.compare-card__remove {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--color-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.compare-card__image {
    display: block;
    margin-bottom: 12px;
    /* border-radius: 12px; */
    overflow: hidden;
    /* border: 1px solid #ECECEE; */
}

.compare-card__image img {
    width: 100%;
    height: 196px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

@media screen and (max-width: 767px) {
    .compare-card__image img {
        height: 140px;
    }
}

.compare-card__title {
    font-family: var(--font-tiktok-sans);
    display: block;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 900;
    line-height: 120%;
    letter-spacing: -0.01em;
    font-style: italic;
    color: #101820;
    text-decoration: none;
}

.compare-card__price {
    font-weight: 600;
}

/* Вариативный товар / явная разметка: актуальная красным, старая зачёркнутая ниже */
.compare-card__price-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
}

.compare-card__price-current {
    font-family: var(--font-tiktok-sans);
    color: var(--color-brand);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
}

.compare-card__price-old {
    font-size: 14px;
    line-height: 129%;
    font-weight: 400;
    color: #767e8f;
    text-decoration: line-through;
    margin-top: 2px;
}

/* Цена со скидкой: актуальная красным сверху, старая зачёркнутая ниже (разметка WooCommerce: del + ins) */
.compare-card__price .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1.2;
}

.compare-card__price .price ins {
    order: 1;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: var(--color-brand);
    font-weight: 700;
}

.compare-card__price .price del {
    order: 2;
    margin: 0;
    opacity: 0.65;
    font-size: 0.9em;
    font-weight: 500;
    color: #6b7280;
    text-decoration: line-through;
}

.compare-card__specs {
    display: grid;
    gap: 8px;
}

/* .compare-matrix {
    display: grid;
    gap: 12px;
} */

.compare-matrix__head,
.compare-matrix__row-values {
    display: flex;
    gap: 24px;
}

.compare-matrix__head-cell,
.compare-matrix__value-cell {
    width: 240px;
    min-width: 240px;
}

@media screen and (max-width: 767px) {
    .compare-matrix__head-cell,
    .compare-matrix__value-cell {
        width: 160px;
        min-width: 160px;
    }
}

.compare-matrix__head-label {
    min-height: 1px;
}

.compare-matrix__head-cell {
    position: relative;
    background: #fff;
}

.compare-matrix__body {
    display: grid;
    gap: 8px;
}

.compare-matrix__row {
    padding-top: 32px;
    margin-top: 40px;
    border-top: 1px solid #d8d8d8;
}

.compare-matrix__label-toggle {
    position: absolute;
    top: -49px;
    border: none;
    border-radius: 8px;
    background: #efefef;
    color: #0f141e;
    min-height: 32px;
    padding: 0 12px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    width: fit-content;
}

.compare-matrix__label-icon {
    color: #4f4f4f;
    line-height: 0;
    width: 16px;
    flex-shrink: 0;
    display: inline-flex;
    transition: transform 0.2s ease;
}

.compare-matrix__label-text {
    font-size: 12px;
    line-height: 133%;
    font-weight: 600;
    color: #0f141e;
    white-space: nowrap;
}

/* .compare-matrix__row-values {

} */

.compare-matrix__value-cell {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
}

.compare-matrix__value-text {
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
}

@media screen and (max-width: 1023px) {
    .compare-matrix__value-text {
        font-size: 14px;
        line-height: 129%;
    }
}

.compare-matrix__value-cell--first .compare-matrix__label-toggle {
    margin-bottom: 10px;
}

.compare-matrix__row.is-collapsed .compare-matrix__value-cell:not(.compare-matrix__value-cell--first) {
    display: none;
}

.compare-matrix__row.is-collapsed .compare-matrix__value-cell--first .compare-matrix__value-text {
    display: none;
}

.compare-matrix__row.is-collapsed .compare-matrix__value-cell--first .compare-matrix__label-toggle {
    margin-bottom: 0;
}

.compare-matrix__row.is-collapsed .compare-matrix__label-icon {
    transform: rotate(180deg);
}

.compare-matrix__empty {
    border: 1px solid #ECECEE;
    border-radius: 10px;
    padding: 12px;
    color: #87898F;
    background: #fff;
    margin-top: 32px;
}

.compare-card__settings {
    margin-top: 4px;
}

.compare-card__settings-inner {
    margin: 0;
}

.compare-settings-item {
    border: 1px solid #ECECEE;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #fff;
}

.compare-settings-item:last-child {
    margin-bottom: 0;
}

.compare-settings-item__label {
    border: 0;
}

.compare-settings-item .product-main__settings-label-button {
    font-size: 13px;
    line-height: 1.25;
}

.compare-settings-item__label .product-main__settings-label-text {
    font-size: 13px;
    line-height: 1.25;
    color: #101820;
}

.compare-settings-item__value {
    border: 0;
}

.compare-settings-item__value .product-main__settings-value-inner {
    padding: 8px 0 0;
    font-size: 14px;
    line-height: 1.35;
    color: #101820;
}

.compare-settings-item--empty .product-main__settings-value-inner {
    color: #87898F;
    padding-top: 12px;
}

.compare-page__error {
    color: #b42318;
}

@media (max-width: 1199px) {

}

@media (max-width: 899px) {
    /* .compare-matrix__row-values {
        grid-template-columns: 1fr;
    }

    .compare-matrix__label-text {
        font-size: 16px;
    }

    .compare-matrix__value-text {
        font-size: 22px;
    }

    .compare-page__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    } */
}

@media (max-width: 599px) {
    .compare-page__filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .compare-page__list {
        grid-template-columns: 1fr;
    }
}


/* Дилерская сеть */
.dealer-network-title {
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .dealer-network-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network-title {
        font-size: 24px;
        line-height: 117%;
    }
}

@media screen and (max-width: 350px) {
    .dealer-network-title {
        font-size: 20px;
    }
}

.dealer-network-title > * {
    color: var(--color-brand);
    transform: scaleX(1.4);
    transform-origin: left;
    letter-spacing: -0.02em;
    font-weight: 900;
}

@media (max-width: 1023px) {
    .dealer-network-title > * {
        font-weight: 700;
    }
}

.dealer-network-content {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 1023px) {
    .dealer-network-content {
        margin-top: 30px;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network-content {
        flex-direction: column;
        margin-top: 25px;
    }
}

.dealer-network-content-item {
    width: 175px;
}

@media (max-width: 1023px) {
    .dealer-network-content-item {
        width: auto;
        padding-right: 58px;
    }
}

.dealer-network-content-item__number {
    font-weight: 700;
    font-size: 52px;
    letter-spacing: -0.02em;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
}

@media (max-width: 1023px) {
    .dealer-network-content-item__number {
        font-size: 44px;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network-content-item__number {
        font-size: 40px;
        line-height: 125%;
    }
}


.dealer-network-content-item__description {
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
    .dealer-network-content-item__description {
        font-size: 14px;
        line-height: 129%;
    }
}

.dealer-network-content-button {
    margin-top: 40px;
}

@media (max-width: 1023px) {
    .dealer-network-content-button {
        margin-top: 24px;
    }
}

.dealer-network {
    padding-top: 115px;
    background-size: 1192px;
    background-position: calc(50vw - 65px) top;
    background-repeat: no-repeat;
}

@media (max-width: 1023px) {
    .dealer-network {
        padding-top: 98px;
        background-size: 673px;
        background-position: calc(50vw - 65px) -20px;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network {
        padding-top: 72px;
        background-size: 430px;
        background-position: calc(50vw - 92px) 147px;
    }
}

.dealer-network-cta-container {
    margin-top: 180px;
}


@media (max-width: 1023px) {
    .dealer-network-cta-container {
        margin-top: 38px;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network-cta-container {
        margin-top: 57px;
    }
}

.dealer-network-cta-container .cta-card {
    padding: 40px 44px;
    width: 902px;
    background-position-x: 384px;
    background-position-y: 20px;
}

@media (max-width: 1023px) {
    .dealer-network-cta-container .cta-card {
        width: 100%;
        border-radius: 32px;
        background-position-x: 224px;
        background-position-y: 0px;
    }

    .dealer-network-cta-container .cta-content {
        flex-direction: row;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network-cta-container .cta-card {
        padding: 64px 24px;
    }

    .dealer-network-cta-container .cta-content {
        flex-direction: column;
        gap: 28px;
    }

    .dealer-network-cta-container .cta-buttons .btn {
        width: max-content;
    }
}

.front-page__blog {
    color: var(--color-white);
    background: var(--color-fon-contrast);
    display: flex;
    gap: 16px;
    padding-top: 64px;
    border-top-left-radius: 54px;
    border-top-right-radius: 54px;
    margin-top: 64px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .front-page__blog {
        margin-top: 48px;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        padding-top: 24px;
        padding-bottom: 313px;
    }
}

.front-page__blog-text {
    position: sticky;
    top: 50px;
    width: calc(100% / 3);
    padding-left: 116px;
    padding-top: 40px;
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    margin-bottom: 80px;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-text {
        padding-left: 0;
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-text {
        position: static;
        width: 100%;
        padding-left: 0;
        padding-top: 0;
        margin-bottom: 0;

        opacity: 1;
        transform: none;
    }
}

.front-page__blog-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 767px) {
    .front-page__blog-text.is-visible {
        transform: none;
        opacity: 1;
    }
}

.front-page__blog-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-family: var(--font-tiktok-sans);
    overflow: hidden;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-title {
        font-size: 28px;
        line-height: 124%;
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-title {
        font-size: 24px;
        line-height: 117%;
    }
}

.front-page__blog-title span {
    display: block;
    color: var(--color-brand);
    transform: scaleX(1.5);
    transform-origin: left;
    letter-spacing: -0.02em;
    font-weight: 600;
    font-family: var(--font-tiktok-sans);
}

@media screen and (max-width: 1023px) {
    /* .front-page__blog-title span {
        transform: scaleX(1.3);
    } */
}

.front-page__blog-description {
    margin-top: 20px;
    font-size: 14px;
    line-height: 129%;
}

.front-page__blog-button {
    margin-top: 20px;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .front-page__blog-button-container {
        position: absolute;
        bottom: 0;
    }
}

.front-page__blog-posts-text-bg {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 44px;
    font-style: italic;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    text-transform: uppercase;
    font-family: var(--font-tiktok-sans);
    color: var(--color-secondary);
    width: 250px;
}

.front-page__blog-posts-text-bg > div {
    transform: scaleX(1.3);
    transform-origin: left;
}

.front-page__blog-posts-text-bg > div:last-child {
    color: var(--color-brand);
}

.front-page__blog-posts {
    width: calc(100% * 2 / 3);
    display: flex;
    gap: 16px;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-posts {
        flex-direction: column;
        width: 50%;
        gap: 24px
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-posts {
        width: 100%;
        /* margin-top: 16px; */
    }
}

.front-page__blog-container {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-container {
        gap: 16px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-container {
        flex-direction: column;
    }
}

.front-page__blog-posts-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-left: 114px;
    width: 50%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-posts-left {
        width: 100%;
        padding-left: 24px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-posts-left {
        padding-left: 0;
    }
}

.front-page__blog-posts-left.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.front-page__blog-posts-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 50%;
    padding-right: 114px;
    margin-top: 80px;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-posts-right {
        width: 100%;
        padding-right: 0;
        margin-top: 0;
        padding-left: 24px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-posts-right {
        padding-left: 0;
        display: none;
    }
}

.front-page__blog-posts-right.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.front-page__blog-posts-item {
    border: 1px solid #242f3a;
    border-radius: 20px;
    padding: 8px 8px 16px;
    position: relative;
    transition: background 0.3s ease, transform 0.3s ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.front-page__blog-posts-item:hover {
    background: #242F3A;
    transform: translateY(-4px);
}

.front-page__blog-posts-item-image {
    overflow: hidden;
    border-radius: 16px;
}

.front-page__blog-posts-item-image img {
    border-radius: 16px;
    /* height: 176px; */
    height: auto;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.front-page__blog-posts-item:hover .front-page__blog-posts-item-image img {
    transform: scale(1.05);
}

/* .front-page__blog-posts-item:hover .front-page__blog-posts-item-title {
    color: var(--color-brand);
} */

.front-page__blog-posts-item-title {
    margin-top: 12px;
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    letter-spacing: -0.01em;
    font-family: var(--font-tiktok-sans);
    padding: 0 12px;
    font-style: italic;
    transition: color 0.3s ease;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-posts-item-title {
        margin-top: 6px;
    }
}

.front-page__blog-posts-item-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-secondary);
    padding: 0 12px;
    margin-top: 8px;

    display: -webkit-box;           /* Включаем специальный flex-контейнер */
    -webkit-line-clamp: 3;          /* Указываем количество строк */
    -webkit-box-orient: vertical;   /* Задаем вертикальную ориентацию */
    overflow: hidden;               /* Прячем всё, что не влезло */
}

.front-page__blog-posts-date {
    width: max-content;
    position: absolute;
    right: 8px;
    top: -12px;
    z-index: 1;
    color: #fff;
}

.front-page__blog-posts-date.is-past path {
    fill: var(--color-contrast-lite);
}

.front-page__blog-posts-date-text {
    position: absolute;
    text-align: center;
    top: 8px;
    width: 100%;
}

.front-page__blog-posts-date-day {
    font-weight: 800;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -0.01em;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
}

.front-page__blog-posts-date-month {
    font-style: italic;
    font-weight: 400;
    font-size: 10px;
    line-height: 120%;
    width: calc(100% - 10px);
}

.front-page__blog-bg {
    position: absolute;
    top: 95%;
    right: -130px;
    width: 280px;
    object-fit: cover;
    z-index: -1;
}

@media screen and (max-width: 1023px) {
    .front-page__blog-bg {
        right: -30px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__blog-bg {
        /* top: 233px; */
        /* right: 13px; */
        width: 200px;
        display: block;
        z-index: 1;
        position: relative;
        top: 0;
        left: 100%;
        transform: translateX(-100%);
    }
}

.social-networks {
    padding-top: 64px;
    background: var(--color-fon-contrast);
}

@media screen and (max-width: 1023px) {
    .social-networks {
        padding-top: 128px;
    }
}

@media screen and (max-width: 767px) {
    .social-networks {
        padding-top: 72px;
    }
}

.social-networks-container {
    position: relative;
}

.social-networks-container > img {
    border-radius: 44px;
}

@media screen and (max-width: 1023px) {
    .social-networks-container > img {
        position: absolute;
        height: 100%;
        border-radius: 32px;
        object-fit: cover;
        object-position: left;
    }
}

@media screen and (max-width: 767px) {
    .social-networks-container > img {
        border-radius: 24px;
    }
}

.social-networks-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-white);
    padding-right: 95px;
    padding-left: 80px;
}

@media screen and (max-width: 1023px) {
    .social-networks-content {
        flex-direction: column;
        padding: 44px 55px;
        position: relative;
        gap: 40px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 767px) {
    .social-networks-content {
        padding: 36px 32px;
        gap: 32px;
    }
}

.social-networks-content__title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 125%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .social-networks-content__title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    .social-networks-content__title {
        font-size: 20px;
        line-height: 120%;
    }
}

.social-networks-content__description {
    font-family: var(--font-tiktok-sans);
    font-weight: 500;
    font-size: 24px;
    line-height: 117%;
    letter-spacing: -0.01em;
    margin-top: 12px;
}

@media screen and (max-width: 1023px) {
    .social-networks-content__description {
        font-size: 20px;
        margin-top: 12px;
    }
}

@media screen and (max-width: 767px) {
    .social-networks-content__description {
        font-size: 16px;
        line-height: 125%;
        margin-top: 8px;
    }
}

.social-networks-content__text {
    width: 50%;
}

@media screen and (max-width: 1023px) {
    .social-networks-content__text {
        width: 100%;
    }
}

.social-networks-content__buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

@media screen and (max-width: 767px) {
    .social-networks-content__buttons {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

.social-networks-content__link {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-white);
    border-radius: 20px;
    width: 76px;
    height: 76px;
}

@media screen and (max-width: 767px) {
    .social-networks-content__link {
        width: 68px;
        height: 68px;
    }
}

/* Product-card-list styles */
.product-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 40px;
    position: relative;
    margin-top: -24px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: var(--color-white);
}

@media screen and (max-width: 1279px) {
    .product-card-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 1023px) {
    .product-card-list {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 32px;
        /* background-color: var(--fon-gray-lite); */
        margin-top: -16px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding-bottom: 32px;
    }

    /* body.post-type-archive-product .hero-bottom {
        background-color: var(--fon-gray-lite);
    } */
}

@media screen and (max-width: 767px) {
    .product-card-list {
        padding: 0 12px;
        margin-top: -18px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding-bottom: 32px;
    }
}

/* Узкий мобильный — одна колонка: в двух колонках содержимое карточки
   (характеристики, кнопки) перестаёт помещаться по ширине */
@media screen and (max-width: 459px) {
    .product-card-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Pagination styles */
.woocommerce-pagination {
    margin: 0 auto;
    width: max-content;
    margin-top: 16px;
}

.woocommerce-pagination ul.page-numbers {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    list-style: none;
}

@media screen and (max-width: 1023px) {
    .woocommerce-pagination {
        /* background-color: var(--fon-gray-lite); */
        width: 100%;
        padding-bottom: 32px;
    }
}
@media screen and (max-width: 767px) {
    .woocommerce-pagination {
        margin: 0 auto;

    }
}

.woocommerce-pagination ul.page-numbers .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--color-black);
    font-weight: 700;
    font-size: 14px;
    line-height: 129%;
    letter-spacing: -0.01em;
    text-align: center;
    transition: all 0.3s ease;
}

.woocommerce-pagination ul.page-numbers .page-numbers:hover {
    background-color: var(--color-gray);
}

.woocommerce-pagination ul.page-numbers .page-numbers.current {
    background-color: var(--color-brand);
    color: var(--color-white);
    border-color: var(--color-brand);
}

.woocommerce-pagination ul.page-numbers .prev.page-numbers,
.woocommerce-pagination ul.page-numbers .next.page-numbers {
    border: 1px solid var(--color-gray);
}

.woocommerce-pagination ul.page-numbers .prev.page-numbers {
    margin-right: 24px;
}
.woocommerce-pagination ul.page-numbers .next.page-numbers {
    margin-left: 24px;
}

.page-description,
.term-description {
    margin-top: 64px;
    padding: 0 115px;
}

@media screen and (max-width: 1023px) {
    .page-description,
    .term-description {
        margin-top: 48px;
        padding: 0;
    }
}

.catalog-description p {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    margin-top: 10px;
}

.page-description a {
    color: var(--color-brand);
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .product-card-list__catalog-page .product-card__characteristics {
        flex-wrap: wrap;
    }

    .product-card-list__catalog-page .product-card__characteristics .product-card__characteristics-item:nth-child(2) {
        order: 1;
    }

    .product-card-list__catalog-page .product-card {
        justify-content: space-between;
    }

    .product-card-list__catalog-page .popular-motorcycle-card__content {
        padding: 0;
        padding-top: 16px;
        flex: none;
        /* justify-content: space-between; */
    }

    .product-card-list__catalog-page .product-card__image-container {
        margin-left: 4px;
        margin-right: 4px;
        margin-top: 16px;
    }

    .product-card-list__catalog-page .product-card__add-to-cart {
        font-size: 0;
        display: block;
    }

    .product-card-list__catalog-page .product-card__characteristics-item-value {
        font-size: 12px;
    }

    .product-card-list__catalog-page .product-card__characteristics {
        gap: 4px;
    }

    .product-card-list__catalog-page .product-card-color-dots {
        margin-top: 0;
    }

    .product-card-list__catalog-page .product-card__header > div {
        font-size: 10px;
        padding: 0 8px;
        height: 22px;
    }

    .product-card-list__catalog-page .product-card__header {
        height: 22px;
    }

    .product-card-list__catalog-page .popular-motorcycle-card__title {
        line-height: 1;
        text-align: center;
    }

    .product-card-list__catalog-page {
        gap: 24px 8px;
    }

    .product-card-list__catalog-page .product-card-pagination {
        display: none;
    }

    .product-card-list__catalog-page .product-card__image-container > svg {
        width: 100%;
        height: 100%;
    }

    .product-card-list__catalog-page .product-card {
        display: flex;
        flex-direction: column;
        padding: 4px;
        border-radius: 16px;
    }

    .product-card-list__catalog-page .product-card__btns {
        margin-top: 12px;
    }

}

/* Single-product styles */
.single-product-container {
    background: transparent;
    /* Отступ считается от фактической высоты шапки: на десктопе она двухуровневая,
       и хлебные крошки раньше заезжали под неё. */
    padding-top: calc(var(--header-height) + 48px);
}

@media screen and (max-width: 1023px) {
    .single-product-container {
        padding-top: calc(var(--header-height) + 40px);
    }
}

@media screen and (max-width: 767px) {
    .single-product-container {
        padding-top: calc(var(--header-height) + 24px);
    }
}

.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 14px;
    color: var(--color-disable);
}

/* Страница товара в стиле Motors: тёмная подложка, панели с красной кромкой, без скруглений.
   Токены собраны локально, чтобы не задевать светлые страницы (каталог, сравнение, корзина). */
body.single-product {
    --pp-bg: #0e1315;
    --pp-panel: rgba(36, 49, 56, 0.8);
    --pp-panel-solid: #1a2126;
    --pp-line: rgba(255, 255, 255, 0.1);
    --pp-line-strong: rgba(255, 255, 255, 0.18);
    --pp-text-muted: #9aa4a9;
    /* Единственный зелёный на странице — метка «есть на складе».
       Красный тут занят брендом, и наличием его помечать нельзя. */
    --pp-stock-in: #4fae5a;
    background-color: var(--pp-bg);
    color: #fff;
}

.product-main-container {
    border-radius: 0;
    padding: 0;
    background: transparent;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .product-main-container {
        margin-top: 16px;
        padding: 0;
    }
}

.product-main-container__flex {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

@media screen and (max-width: 1199px) {
    .product-main-container__flex {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* На планшете/мобиле фото важнее панели — поднимаем медиа-колонку наверх */
@media screen and (max-width: 1199px) {
    .product-main-container__media {
        order: -1;
    }
}

.product-main-container__media {
    min-width: 0;
}

.woocommerce-product-gallery {
    display: flex;
    gap: 30px;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
    order: -1;
}

.single-product .woocommerce-product-gallery .flex-viewport {
    flex: 1;
}

.product-main-container__images {
    display: flex;
    flex: 1;
    gap: 16px;
}

/* Главное фото слева, лента миниатюр — справа от него */
.variation-image-main {
    order: 1;
}

.variation-images-wrapper {
    order: 2;
}

@media screen and (max-width: 1023px) {
    .product-main-container__images {
        flex-flow: column;
        gap: 16px;
    }
}

/* Студийная сцена под фото: техника приходит прозрачным PNG, на чёрном она «висит».
   Слои: тень-эллипс под колёсами + световое пятно за техникой + светлый градиент-пол. */
.variation-image-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(115% 60% at 50% 104%, rgba(16, 24, 32, 0.22) 0%, rgba(16, 24, 32, 0) 60%),
        radial-gradient(85% 68% at 50% 38%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #f4f6f7 0%, #e6eaec 58%, #d4d9dd 100%);
    border-top: 4px solid var(--color-brand);
}

.variation-image-main__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 462px;
    display: block;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.variation-image-main__img.is-swipe-changing {
    opacity: 0.18;
}

/* Планшет: фото ниже, чтобы блок покупки оставался близко к первому экрану */
@media screen and (max-width: 1199px) {
    .variation-image-main__img {
        height: 380px;
    }
}

@media screen and (max-width: 767px) {
    .variation-image-main__img {
        height: 266px;
    }
}

.variation-images-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 466px;
    overflow: auto;
    /* Скрываем полосу прокрутки */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

@media screen and (max-width: 1023px) {
    .variation-images-list {
        flex-flow: row;
        overflow-x: auto;
        max-height: none;
        margin-right: 0;

        /* Убираем полосу прокрутки для красоты */
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
}

.variation-images-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.variation-images-arrow-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.variation-images-arrow-wrapper--up {
    top: 3px;
}

.variation-images-arrow-wrapper--down {
    bottom: 0;
}

.variation-images-arrow {
    width: 40px;
    height: 40px;
    border-radius: 0;
    border: 1px solid rgba(15, 20, 30, 0.12);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.45);
    background: #f2f4f5;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.variation-images-arrow-wrapper::before {
    content: '';
    width: 88px;
    height: 62px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.variation-images-arrow-wrapper--up::before {
    background: linear-gradient(0deg, rgba(14, 19, 21, 0) 0%, rgba(14, 19, 21, 0.7) 50%, #0e1315 100%);
}

.variation-images-arrow-wrapper--down::before {
    background: linear-gradient(180deg, rgba(14, 19, 21, 0) 0%, rgba(14, 19, 21, 0.7) 50%, #0e1315 100%);
}

.variation-images-wrapper--scrollable .variation-images-arrow {
    opacity: 1;
    pointer-events: auto;
}

.variation-images-arrow--up {
    top: -21px;
}

.variation-images-arrow--down {
    bottom: 3px;
}

.variation-images-arrow[disabled] {
    opacity: 0;
    cursor: default;
}

@media screen and (max-width: 1023px) {
    .variation-images-arrow {
        display: none;
    }
}

.variation-image-item {
    width: 88px;
    height: 68px;
    min-height: 68px;
    border: 1px solid transparent;
    border-radius: 0;
    background: linear-gradient(180deg, #f6f8f8 0%, #e3e7ea 100%);
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1023px) {
    .variation-image-item {
        width: 110px;
        min-width: 110px;
        height: 80px;
        min-height: auto;
    }
}

@media screen and (max-width: 767px) {
    .variation-image-item {
        width: 76px;
        min-width: 76px;
        height: 57px;
    }
}

.variation-image-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.variation-image-item.fade-out img {
    opacity: 0;
}

.variation-image-item.fade-in img {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.variation-image-item:hover {
    border-color: var(--color-brand);
    opacity: 0.8;
}

.variation-image-item.is-active {
    border-color: var(--color-brand);
    border-width: 2px;
}

.variation-image-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.product-main-container__content {
    width: 100%;
    border-radius: 0;
    border-top: 4px solid var(--color-brand);
    padding: 18px 22px 22px;
    background: var(--pp-panel);
    color: #fff;
}

@media screen and (max-width: 767px) {
    .product-main-container__content {
        padding: 16px;
    }
}

.product-main-container__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pp-line);
}

.product-main-container__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-main-container__meta-label {
    font-size: 14px;
    color: var(--pp-text-muted);
}

.product-main-container__meta-value {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.product-main-container__meta-category {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 7px 12px;
    width: max-content;
    height: auto;
    color: #fff;
    background: var(--color-brand);
}

.product-main-container__meta-sku-copy {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pp-text-muted);
}

.product-main-container__meta-sku-copy:hover {
    color: #fff;
}

.product-main-container__meta-sku-copy svg {
    flex-shrink: 0;
    transition: fill 0.3s ease;
}

.product-main-container__meta-sku-copy svg path {
    transition: fill 0.3s ease;
}

.product-main-container__meta-sku-copy:hover svg path {
    fill: #fff;
}

/* Шапка карточки на всю ширину контейнера: имя модели слева,
   скошенная красная плашка с ценой справа (как в Motors) */
.product-main-container__headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--pp-line);
}

@media screen and (max-width: 767px) {
    .product-main-container__headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}

.product-main-container__content-title {
    font-style: normal;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    font-family: var(--font-exo2);
    color: #fff;
    margin-top: 0;
}

@media screen and (max-width: 1023px) {
    .product-main-container__content-title {
        font-size: 30px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__content-title {
        font-size: 24px;
        line-height: 1.15;
    }
}

.product-main-container__content-price {
    display: block;
    flex-shrink: 0;
    margin: 0;
    border-top: none;
    padding: 8px 24px 10px 34px;
    background: var(--color-brand);
    text-align: right;
    /* Скос слева — фирменный приём Motors */
    clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width: 767px) {
    .product-main-container__content-price {
        padding: 8px 18px 10px 26px;
        clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
    }
}

.product-main-container__content-price-label {
    font-family: var(--font-exo2);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    display: block;
}

.product-main-container__color-selector-label {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--pp-text-muted);
    display: flex;
    align-items: flex-start;
}

.product-main-container__content-price-value {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: right;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .product-main-container__content-price-value {
        font-size: 22px;
    }
}

.product-main-container__content-price ins {
    font-family: var(--font-exo2);
    text-align: right;
    color: #fff;
    text-decoration: none;
    padding-left: 10px;
}

.product-main-container__content-price del {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* Цвет — такая же строка списка, как характеристики выше: разделитель даёт
   border-bottom предыдущей строки, своей линии и отступа у блока нет. */
.product-main-container__color-selector {
    display: flex;
    margin-top: 0;
    padding-top: 11px;
    border-top: none;
    justify-content: space-between;
    margin-right: 0;
}

.product-main-container__color-selector-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.product-main-container__color-active-name {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
    min-height: 14px;
}

.product-main-container__color-selector .product-card-color-dot {
    width: 28px;
    height: 28px;
    /* min-width: 38px; */
    border-radius: 50%;
    /* flex-direction: column; */
    align-items: center;
    /* justify-content: flex-start; */
    justify-content: center;
    gap: 6px;
}

.product-main-container__color-selector .product-card-color-dot span {
    width: 24px;
    height: 24px;
}

.product-main-container__color-selector .product-card-color-dots {
    gap: 8px;
    margin-top: 0;
}

/* Наличие на складах зоны покупателя. Строка меняется при выборе цвета:
   остаток в 1С лежит на конкретной вариации, а не на модели. */
.product-main-container__stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--pp-text-muted);
}

.product-main-container__stock-mark {
    /* Квадрат, а не кружок: на странице товара скруглений нет (стиль Motors). */
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--pp-text-muted);
}

.product-main-container__stock--in {
    color: #fff;
}

.product-main-container__stock--in .product-main-container__stock-mark {
    background: var(--pp-stock-in);
}

.product-main-container__content-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pp-line);
}

.product-main-container__content-buttons > * {
    width: 100%;
    max-width: 100%;
}

/* Главное действие — красная плашка Motors, второстепенное — контурная кнопка */
.product-main-container__content-buttons .single-product__add-to-cart {
    background-color: var(--color-brand);
    color: var(--color-white);
}

.product-main-container__content-buttons .single-product__add-to-cart:hover {
    background-color: var(--color-brand-dark) !important;
}

.product-main-container__content-buttons .single-product__add-to-cart svg path {
    fill: #fff;
}

.product-main-container__content-buttons .single-product__compare-btn {
    background-color: transparent;
    border: 1px solid var(--pp-line-strong);
    color: #fff;
}

.product-main-container__content-buttons .single-product__compare-btn svg path {
    stroke: #fff;
}

.product-main-container__content-buttons .single-product__compare-btn:hover {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand);
}

/* Контрол количества на месте кнопки покупки — та же красная плашка Motors */
.product-main-container__content-buttons .single-product__cart-controls {
    height: 48px;
    border-radius: 0;
    background: var(--color-brand);
    padding: 0 6px;
}

.product-main-container__content-buttons .single-product__cart-controls .product-card__cart-btn {
    background: transparent;
    border-radius: 0;
    width: 40px;
    height: 40px;
}

.product-main-container__content-buttons .single-product__cart-controls .product-card__cart-btn svg path {
    fill: #fff;
}

.product-main-container__content-buttons .single-product__cart-controls .product-card__cart-quantity {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0;
}

@media screen and (max-width: 767px) {
    .product-main-container__content-buttons .single-product__cart-controls {
        height: 44px;
    }
}

.product-main-container__content-disclaimer {
    margin-top: 16px;
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--pp-text-muted);
    display: flex;
    gap: 8px;
}

/* Краткие характеристики — строки label/value внутри левой панели (как «TYPE / MILEAGE» в Motors) */
.product-main-container__content-info {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
}

.product-main-container__content-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0 10px;
    border-bottom: 1px solid var(--pp-line);
}

.product-main-container__content-info-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.product-main-container__content-info img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.product-main-container__content-info-title {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}

.product-main-container__content-info-value {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    margin-top: 0;
    text-align: right;
    color: #fff;
}

.product-main-container__content-info-value span {
    font-size: 13px;
    line-height: 1.3;
}

.product-main-container__description {
    background-color: transparent;
    border-radius: 0;
    padding: 56px 0 64px;
    margin-top: 0;
}

@media screen and (max-width: 1023px) {
    .product-main-container__description {
        margin-top: 0;
        padding: 40px 0 48px;
    }
}

.product-main__description {
    margin-top: 0;
    display: flex;
    gap: 40px;
}

@media screen and (max-width: 1023px) {
    .product-main__description {
        flex-direction: column;
        gap: 28px;
    }
}

/* Заголовок + тонкая линия под ним — как в блоке описания Motors */
.product-main__description-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pp-line);
}

@media screen and (max-width: 1023px) {
    .product-main__description-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 767px) {
    .product-main__description-title {
        font-size: 20px;
        padding-bottom: 14px;
    }
}

.product-main__description-description {
    margin-top: 20px;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0;
    padding-right: 48px;
    color: #c3cacd;
}

@media screen and (max-width: 1023px) {
    .product-main__description-description {
        margin-top: 16px;
        padding-right: 0;
    }
}

@media screen and (max-width: 767px) {
    .product-main__description-description {
        font-size: 14px;
        line-height: 1.7;
    }
}

.product-main__description-description p {
    margin-top: 16px;
}

@media screen and (max-width: 1023px) {
    .product-main__description-description p {
        margin-top: 8px;
    }
}

.product-main__settings {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 56px;
    padding-bottom: 8px;
}

@media screen and (max-width: 1023px) {
    .product-main__settings {
        flex-direction: column;
        gap: 44px;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .product-main__settings {
        margin-top: 42px;
    }
}

.product-main__settings-left {
    width: 50%;
    min-width: 0;
}

.product-main__settings-right {
    width: 50%;
    min-width: 0;
    padding-top: 62px;
}

@media screen and (max-width: 1023px) {
    .product-main__settings-left,
    .product-main__settings-right {
        width: 100%;
        padding-top: 0;
    }
}

.product-main__settings-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pp-line);
}

@media screen and (max-width: 1023px) {
    .product-main__settings-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 767px) {
    .product-main__settings-title {
        font-size: 20px;
        padding-bottom: 14px;
        margin-bottom: 4px;
    }
}

/* Аккордеон для каждого элемента характеристик */
.product-main__gruppa_akkordionov-list {
    margin-top: 24px;
    width: 557px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media screen and (max-width: 1199px) {
    .product-main__gruppa_akkordionov-list {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .product-main__gruppa_akkordionov-list {
        margin-top: 17px;
    }
}

.product-main__settings-list-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Тёмная тема аккордеонов — только на странице товара:
   те же классы переиспользуются в корзине и сравнении на светлом фоне. */
.product-main__settings .product-main__settings-item {
    border-radius: 0;
    padding: 16px 4px 16px 0;
    background: transparent;
    border-bottom: 1px solid var(--pp-line);
}

.product-main__settings .product-main__settings-item.is-collapsed {
    background: transparent;
}

/* Типографика как в таблице спецификаций Motors:
   заголовок группы — Exo 2 uppercase, подпись строки — Open Sans uppercase,
   значение — Exo 2 bold. */
.product-main__settings .product-main__settings-label-button {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}

.product-main__settings .product-main__settings-label-button:hover {
    opacity: 1;
    color: var(--color-brand);
}

.product-main__settings .product-main__settings-accordion-label {
    font-family: var(--font-manrope);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}

.product-main__settings .product-main__settings-accordion-value {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.product-main__settings .product-main__settings-accordion-item {
    align-items: baseline;
    margin-bottom: 10px;
}

/* Одиночные поля без аккордеона — то же оформление значения */
.product-main__settings .product-main__settings-value-inner {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

/* На узких экранах длинные подписи в верхнем регистре должны переноситься */
@media screen and (max-width: 767px) {
    .product-main__settings .product-main__settings-accordion-label {
        white-space: normal;
    }
}

.product-main__settings-label {
    margin: 0;
    padding: 0;
}

.product-main__settings-label-button {
    font-weight: 700;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.3s ease;
}

.product-main__settings-label-button:hover {
    opacity: 0.8;
}

.product-main__settings-label-text {
    flex: 1;
}

.product-main__settings-label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    flex-shrink: 0;
    position: relative;
    width: 16px;
    height: 16px;
}

.product-main__settings-label-icon .icon-plus,
.product-main__settings-label-icon .icon-minus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
}

.product-main__settings-label-button[aria-expanded="false"] .icon-plus {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.product-main__settings-label-button[aria-expanded="false"] .icon-minus {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    pointer-events: none;
}

.product-main__settings-label-button[aria-expanded="true"] .icon-plus {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
}

.product-main__settings-label-button[aria-expanded="true"] .icon-minus {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg);
}

.product-main__settings-value {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.product-main__settings-value-inner {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease;
    max-height: 2000px;
    opacity: 1;
    padding-top: 16px;
}

.product-main__settings-item {
    border-radius: 20px;
    padding: 20px 24px 19px;
    background: var(--color-gray);
    transition: background 0.3s ease;
}

.product-main__settings-item.is-collapsed {
    
    background: var(--color-gray-lite);
}


.product-main__settings-item.is-collapsed .product-main__settings-value-inner {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
}

/* Стили для внутренних элементов аккордеона */
.product-main__settings-accordion-inner {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-main__settings-accordion-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
    align-items: flex-start;
}

.product-main__settings-accordion-item:last-child {
    margin-bottom: 0;
}

.product-main__settings-accordion-label {
    margin:0;
    padding: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-secondary);
    white-space: nowrap;
}

.product-main__settings-accordion-label a {
    color: var(--color-brand);
    text-decoration: underline;
}

.product-main__settings-accordion-value {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    text-align: right;
    max-width: 50%;
}


/* Схема габаритов приходит прозрачным PNG с чёрными подписями — на тёмном фоне
   без светлой подложки размеры не читаются. */
.product-main__settings-right-image {
    background: #fff;
    padding: 20px;
}

.product-main__settings-right-image img {
    display: block;
    width: 100%;
    height: auto;
}

.product-main__settings-fields {
    display: flex;
    gap: 16px;
    margin-top: 30px;
}

@media screen and (max-width: 1023px) {
    .product-main__settings-fields {
        margin-top: 22px;
    }
}

@media screen and (max-width: 767px) {
    .product-main__settings-fields {
        flex-direction: column;
    }
}

.product-main__settings-field {
    flex: 1;
}

.product-main__settings-field > a {
    display: block;
    border: 1px solid var(--pp-line-strong);
    border-radius: 0;
    padding: 18px 20px;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 129%;
    color: #fff;
    background: var(--pp-panel);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.product-main__settings-field > a:hover {
    border-color: var(--color-brand);
    background: var(--pp-panel-solid);
}

@media screen and (max-width: 767px) {
    .product-main__settings-field > a {
        display: flex;
        align-items: center;
        gap: 20px;
    }
}

.product-main__settings-field > a .wp-caption-text {
    font-family: var(--font-manrope);
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--pp-text-muted);
    margin-top: 4px;
}

.product-main__settings-field > a span {
    display: block;
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .product-main__settings-field > a span {
        margin-top: 0;
    }
}

.product-main-container__photo-text_container {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.product-main-container__photo-text {
    background: #131a1e;
    border-radius: 0;
    padding-top: 88px;
    padding-bottom: 88px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__photo-text {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__photo-text {
        border-radius: 0;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.product-main-container__photo-text .container{
    position: relative;
    z-index: 1;
}

.product-main-container__photo-text_items {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 0 40px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__photo-text_items {
        gap: 48px;
        padding: 0 25px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__photo-text_items {
        padding: 0;
    }
}

.product-main-container__photo-text_items > div {
    position: relative;
}

.product-main-container__photo-text_items > div:nth-child(odd) {
    flex-direction: row-reverse;
}

.product-main-container__photo-text_item {
    display: flex;
    gap: 132px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__photo-text_item {
        flex-direction: column !important;
        gap: 16px;
    }
}

.product-main-container__photo-text_item-image, .product-main-container__photo-text_item-text {
    flex: 1;
}

.product-main-container__photo-text_item-text {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-main-container__photo-text_item-content-title,
.product-main-container__photo-text_item-content-title-mobile {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pp-line);
}

.product-main-container__photo-text_item-content-title-mobile {
    display: none;
}

@media screen and (max-width: 1023px) {
    .product-main-container__photo-text_item-content-title {
        display: none;
    }

    .product-main-container__photo-text_item-content-title-mobile {
        font-size: 22px;
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__photo-text_item-content-title {
        font-size: 20px;
    }

    .product-main-container__photo-text_item-content-title-mobile {
        font-size: 20px;
        padding-bottom: 12px;
    }
}

.product-main-container__photo-text_item-content-description {
    margin-top: 18px;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: 0;
    color: #c3cacd;
}

@media screen and (max-width: 1023px) {
    .product-main-container__photo-text_item-content-description {
        margin-top: 0;
    }
}

.product-main-container__photo-text_item-image {
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
    position: relative;
}

.product-main-container__photo-text_item-image img {
    border-radius: 0;
    width: 574px;
    height: 340px;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease-out;
    transform-origin: center;
    transform: scale(1);
}

@media screen and (max-width: 767px) {
    .product-main-container__photo-text_item-image img {
        width: 100%;
        height: auto;
    }
}

.product-main-container__photo-text_item-image:hover img {
    transform: scale(1.1);
    transition: transform 0.2s ease-out;
}

.product-main-container__bg-top_container {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.product-main-container__bg-top {
    
    width: 1128px;
    height: 902px;
    background-color: #fff;
    background-size: cover;
    transform: translateY(-40%) translateX(-40%);
    border-radius: 100%;
    filter: blur(400px);
    opacity: 0.15;

}

.product-main-container__photo-text_items > div:nth-child(even)::before {
    content: '';
    position: absolute;
    top: -64px;
    left: 22%;
    width: 1995px;
    height: 580px;
    background-color: #fff;
    background-size: cover;
    border-radius: 100%;
    filter: blur(400px);
    opacity: 0.2;
}

.product-main-container__gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

/* Планшет и телефон: галерея — слайдер Splide (1 слайд), стрелки сверху */
.product-main-container__gallery.splide {
    display: block;
    margin-top: 24px;
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery.splide {
        margin-top: 18px;
    }
}

.product-main-container__gallery-header {
    display: none;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 16px;
}

.product-main-container__gallery_arrows {
    display: flex;
    gap: 12px;
}

.product-main-container__gallery_arrows .splide__arrow {
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-main-container__gallery_arrows .splide__arrow:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.product-main-container__gallery_arrows .splide__arrow svg {
    width: 24px;
    height: 24px;
    stroke: var(--color-black);
    transition: stroke 0.3s ease;
}

.product-main-container__gallery_arrows .splide__arrow:hover svg path {
    stroke: var(--color-white);
}

.product-main-container__gallery_arrows .splide__arrow:disabled,
.product-main-container__gallery_arrows .splide__arrow[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.product-main-container__gallery .splide__slide .product-main-container__gallery-item {
    height: 100%;
}

.product-main-container__gallery .splide__slide .product-main-container__gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__gallery .splide__slide .product-main-container__gallery-item img {
        height: 370px;
    }

    .product-main-container__gallery-header {
        display: flex;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery .splide__slide .product-main-container__gallery-item img {
        height: 200px;
    }
}

/* Десктоп: галерея как сетка без слайдера (Splide не запускается), стрелки скрыты */
@media screen and (min-width: 1024px) {
    .product-main-container__gallery-header {
        display: none !important;
    }
    .product-main-container__gallery.splide {
        visibility: visible;
    }
    .product-main-container__gallery.splide .splide__track {
        overflow: visible;
    }
    .product-main-container__gallery.splide .splide__list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .product-main-container__gallery.splide .splide__slide {
        width: auto;
        margin: 0;
    }
}

.product-main-container__gallery_container {
    background: transparent;
    border-radius: 0;
    padding-top: 64px;
    padding-bottom: 64px;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1023px) {
    .product-main-container__gallery_container {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery_container {
        border-radius: 0;
        padding-top: 36px;
        padding-bottom: 24px;
    }
}

.product-main-container__gallery-item {
    overflow: hidden;
    border-radius: 0;
    cursor: pointer;
    position: relative;
}

.product-main-container__gallery-item img {
    height: 220px;
    object-fit: cover;
    width: 100%;
    border-radius: 0;
    display: block;
    transition: transform 0.2s ease-out;
    transform-origin: center;
    transform: scale(1);
}

.product-main-container__gallery-item:hover img {
    transform: scale(1.1);
    transition: transform 0.2s ease-out;
}

.product-main-container__gallery_container-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pp-line);
}

@media screen and (max-width: 1023px) {
    .product-main-container__gallery_container-title {
        font-size: 22px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery_container-title {
        font-size: 20px;
        padding-bottom: 14px;
    }
}

.single-product__slider {
    background: #131a1e;
    padding-top: 64px;
    padding-bottom: 8px;
}

@media screen and (max-width: 767px) {
    .single-product__slider {
        padding-top: 40px;
    }
}

/* «Другие модели в линейке» — как блок результатов в Motors: красная линия сверху,
   круглые стрелки, карточка сведена к фото + цена + название.
   Правила скоуплены: тот же компонент используется на главной и в каталоге. */
.single-product__slider .front-page__popular-motorcycles {
    border-top: 3px solid var(--color-brand);
    padding-top: 28px;
}

.single-product__slider .front-page__popular-motorcycles-title {
    font-size: 24px;
}

@media screen and (max-width: 767px) {
    .single-product__slider .front-page__popular-motorcycles-title {
        font-size: 20px;
    }
}

/* Единственное исключение из глобального «без скруглений»: в макете Motors
   переключатели этого блока — круглые белые кнопки. */
.single-product__slider .front-page__popular-motorcycles-arrows .splide__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    border: none;
    background: var(--color-white);
}

.single-product__slider .front-page__popular-motorcycles-arrows .splide__arrow svg {
    width: 20px;
    height: 20px;
}

/* Splide держит на своих стрелках opacity .7 — активная кнопка должна быть плотно белой */
.single-product__slider .front-page__popular-motorcycles-arrows .splide__arrow:not([disabled]) {
    opacity: 1;
}

.single-product__slider .front-page__popular-motorcycles-arrows .splide__arrow:disabled,
.single-product__slider .front-page__popular-motorcycles-arrows .splide__arrow[disabled] {
    opacity: 0.35;
}

/* Карточка: без белой плашки вокруг, фон только под фото */
.single-product__slider .product-card,
.single-product__slider .product-card:hover,
.single-product__slider .splide__list .product-card {
    background: transparent;
    padding: 0;
}

.single-product__slider .product-card__header,
.single-product__slider .product-card-pagination,
.single-product__slider .product-card-color-dots,
.single-product__slider .product-card__characteristics,
.single-product__slider .product-card__btns {
    display: none;
}

.single-product__slider .product-card .product-card__image-container {
    margin: 0;
    padding: 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #e7ebec 100%);
    /* оранжевой акцентной линии под фото в этом блоке нет — ценник сам делит фото и подпись */
    border-bottom: none;
}

/* Ценник прижат к нижнему правому углу фото, без выноса за подложку */
.single-product__slider .product-card .product-card__image-container .popular-motorcycle-card__price {
    right: 0;
    bottom: 0;
}

.single-product__slider .popular-motorcycle-card__content {
    padding: 0;
    margin-top: 16px;
    gap: 0;
}

.single-product__slider .product-card .popular-motorcycle-card__title {
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 0;
    /* базовый стиль карточки центрирует подпись — здесь она идёт по левому краю блока */
    text-align: left;
}

@media screen and (max-width: 1023px) {

    .product-main-container__gallery_container .splide__pagination {
        bottom: -37px;
    }

    .product-main-container__gallery_container .splide__slide {
        width: 597px !important;
    }


    .product-main-container__gallery_container .splide__track {
        margin-right: -24px;
    }

    body.single-product .footer {
        margin-top: 0;
    }
}


@media screen and (max-width: 767px) {
    .product-main-container__gallery_container .splide__slide {
        width: 89% !important;
    }

    body.single-product .footer {
        margin-top: 48px;
    }
}

/* Корзина */
.cart-not-empty {
    background: white;
}

.cart-not-empty svg path {
    fill: var(--color-brand);
}

.cart-not-empty:hover {
    background: white;
}

.compare-not-empty {
    background: white;
}

.compare-not-empty svg path  {
    stroke: var(--color-brand);
}

/* Форма оформления заявки на странице корзины — поля ввода */
.gmotor-cart-checkout-form .woocommerce-billing-fields__field-wrapper,
.cart-checkout-form-wrapper .woocommerce-billing-fields__field-wrapper {
    display: block !important;
}

.gmotor-cart-checkout-form .form-row,
.cart-checkout-form-wrapper .form-row {
    display: block !important;
    margin-bottom: 1rem;
}

.gmotor-cart-checkout-form .form-row label,
.cart-checkout-form-wrapper .form-row label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.gmotor-cart-checkout-form .form-row .input-text,
.gmotor-cart-checkout-form .form-row input[type="text"],
.gmotor-cart-checkout-form .form-row input[type="tel"],
.gmotor-cart-checkout-form .form-row input[type="email"],
.cart-checkout-form-wrapper .form-row .input-text,
.cart-checkout-form-wrapper .form-row input[type="text"],
.cart-checkout-form-wrapper .form-row input[type="tel"],
.cart-checkout-form-wrapper .form-row input[type="email"] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Единый шаблон формы оформления заявки — .gmotor-checkout-form */
.gmotor-checkout-form__title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 133%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-black);
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__title {
        font-size: 20px;
        line-height: 120%;
    }
}

.gmotor-checkout-form__columns {
    display: flex;
    flex-wrap: wrap;
    margin-top: 32px
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__columns {
        margin-top: 24px;
    }
}

.gmotor-checkout-form__col {
    flex: 1;
    /* min-width: 280px; */
}

@media screen and (max-width: 1199px) {
    .gmotor-checkout-form__col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 24px;
    }
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__col {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0 24px;
    }
}

.gmotor-checkout-form__subtitle {
    margin-bottom: 1rem;
}

.gmotor-checkout-form__field {
    margin-bottom: 12px;
}

.gmotor-checkout-form__label--privacy {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 133% !important;
    color: black;
    margin-bottom: 0 !important;
}

.gmotor-checkout-form__label .required {
    color: #c00;
}

.gmotor-checkout-form__field--privacy {
    display: flex;
    align-items: flex-start;
    /* gap: 12px; */
    cursor: pointer;
}

.gmotor-checkout-form__field--privacy a {
    color: var(--color-brand);
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__field--privacy {
        margin-top: 10px;
    }
}

.gmotor-checkout-form__field--privacy input[type="checkbox"] {
    /* margin-top: 2px; */
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
}

.gmotor-checkout-form__field--privacy label {
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__field--privacy label {
        gap: 0;
    }
}

.gmotor-checkout-form__submit {
    width: 100%;
}

@media screen and (max-width: 1199px) {
    .gmotor-checkout-form__submit {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 16px;
    }
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__submit {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 12px;
        gap: 0;
    }
}

.gmotor-checkout-form__submit button {
    min-width: 100%;
}

.gmotor-checkout-form__success {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}

.gmotor-checkout-form__error {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.gmotor-checkout-form__description {
    font-size: 12px;
    margin-top: 4px;
}

.gmotor-checkout-form__privacy-policy-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    text-align: center;
    color: var(--color-secondary);
    margin-top: 12px;
}

@media screen and (max-width: 1199px) {
    .gmotor-checkout-form__privacy-policy-text {
        margin-top: 20px;
        text-align: right;
    }
}

@media screen and (max-width: 767px) {
    .gmotor-checkout-form__privacy-policy-text {
        text-align: center;
    }
}

body.woocommerce-cart {
    background: var(--color-fon-contrast);
    padding-top: 104px;
}

body.woocommerce-cart footer {
    margin-top: 0;
}

.cart-title {
    font-style: italic;
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 52px;
    line-height: 115%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: white;
}

@media screen and (max-width: 1023px) {
    .cart-title {
        font-size: 32px;
        line-height: 127%;
    }
}

@media screen and (max-width: 767px) {
    .cart-title {
        font-size: 32px;
        line-height: 138%;
    }
}

body.woocommerce-cart .site-main {
    padding-top: 104px;
}

@media screen and (max-width: 1023px) {
    body.woocommerce-cart .site-main {
        padding-top: 120px;
    }
}

.cart-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-items-count {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-table-wrapper {
    background: white;
    border-radius: 56px 56px 0 0;
    padding-top: 20px;
    margin-top: 40px;
    padding-bottom: 64px;
}

@media screen and (max-width: 1023px) {
    .cart-table-wrapper {
        margin-top: 24px;
        border-radius: 48px 48px 0 0;
    }
}

@media screen and (max-width: 767px) {
    .cart-table-wrapper {
        border-radius: 32px 32px 0 0;
        padding: 12px 12px 44px;
        padding-left: 0;
        padding-right: 0;
    }
}

.woocommerce-cart-form  {
    flex: 1;
}

.woocommerce-cart-form__cart-item {
    display: flex;
    align-items: center;
}

.cart-product-name {
    display: block;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: var(--color-black);
    margin-top: 12px;
}

@media screen and (max-width: 767px) {
    .cart-product-name {
        font-size: 16px;
        line-height: 113%;
    }
}

.cart-product-name__header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cart-product-name__header > div {
    border: 1px solid black;
    border-radius: 100px;
    padding: 0 8px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-tiktok-sans);
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;
}

.cart-product-thumbnail {
    margin-right: 32px;
    line-height: 0;
}

@media screen and (max-width: 767px) {
    .cart-product-thumbnail {
        margin-right: 23px;
    }
}

@media screen and (max-width: 350px) {
    .cart-product-thumbnail {
        margin-right: 12px;
    }
}

.cart-product-thumbnail-wrapper img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    object-position: center;
}

@media screen and (max-width: 767px) {
    .cart-product-thumbnail-wrapper img {
        width: 100px;
        height: 100px;
    }
}

@media screen and (max-width: 350px) {
    .cart-product-thumbnail-wrapper img {
        width: 70px;
        height: 70px
    }
}

.cart-product-name__color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    border: 1px solid var(--color-gray-lite);
}

.cart-product-name__color-image {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    /* border: 1px solid var(--color-gray-lite); */
    object-fit: cover;
}

.cart-product-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

@media screen and (max-width: 767px) {
    .cart-product-info {
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px 0;
    }
}

/* Старая и новая цена в корзине */
.product-price-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
}
.product-price-new {
    color: var(--color-brand);
    font-weight: 700;
}

/* Контролы количества в корзине (как в карточках) */
.cart-item-quantity-controls {
    max-width: 200px;
    margin: 0 auto;
}

.cart-item-quantity-controls .product-card__cart-btn--minus,
.cart-item-quantity-controls .product-card__cart-btn--cart {
    display: flex;
}

.cart-item-quantity-controls .product-card__cart-btn--minus[style*="display: none"],
.cart-item-quantity-controls .product-card__cart-btn--cart[style*="display: none"] {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .product-card__cart-btn {
        width: 32px;
        height: 32px;
    }
}

.product-quantity__cart {
    width: 115px;
}

.product-price__cart {
    width: 125px;
}

@media screen and (max-width: 767px) {
    .product-price__cart {
        width: auto;
        flex: 1;
    }
}

.product-name-wrapper {
    flex: 1;
    padding-right: 20px;
}

@media screen and (max-width: 767px) {
    .product-name-wrapper {
        min-width: 100%;
        padding-right: 0;
    }  
}

.woocommerce-cart-form__cart-item {
    border-bottom: 1px solid #E5E5E5;
}

@media screen and (max-width: 350px) {
    .woocommerce-cart-form__cart-item {
        padding-top: 10px;
    }
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: 27px 0;
    padding-left: 172px;
}

@media screen and (max-width: 767px) {
    .cart-total-row {
        justify-content: flex-start;
        padding-left: 0;
        gap: 70px;
    }
}

@media screen and (max-width: 359px) {
    .cart-total-row {
        gap: 35px;
    }
}

.cart-table-container {
    display: flex;
    gap: 131px;

}

@media screen and (max-width: 1400px) {
    .cart-table-container {
        gap: 60px;
    }
}

@media screen and (max-width: 1199px) {
    .cart-table-container {
        flex-direction: column;
        gap: 0;
    }
}

.input-form-cart {
    width: 443px;
}

@media screen and (max-width: 1199px) {
    .input-form-cart {
        width: 100%;
    } 
}

/* Форма промокода в корзине (аккордеон) */
.cart-coupon-accordion-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cart-coupon-item {
    width: 100%;
    max-width: 557px;
}
@media screen and (max-width: 1199px) {
    .cart-coupon-item {
        max-width: 100%;
    }
}
.cart-coupon-form {
    width: 100%;
}
.cart-coupon-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cart-coupon-input {
    flex: 1;
    min-width: 200px;
    height: 48px;
    padding: 11px 15px;
    border: 1px solid var(--fluentform-border-color, #CFD0D2);
    border-radius: 100px;
    font-size: 14px;
    background: white;
    font-family: var(--font-manrope);
    color: var(--fluentform-secondary, #A8AEBC);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.cart-coupon-input:focus {
    outline: none;
    border-color: var(--color-brand, #101820);
    box-shadow: 0 0 0 0.2rem rgba(16, 24, 32, 0.1);
}
.cart-coupon-input::placeholder {
    color: var(--fluentform-secondary, #A8AEBC);
}
.cart-coupon-btn {
    height: 48px;
    padding: 0 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    border: none;
    background-color: var(--color-brand);
    color: var(--color-white);
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cart-coupon-btn:hover {
    background-color: var(--color-brand-dark) !important;
}

/* Сообщения над формой промокода (успех / ошибка) */
.cart-coupon-notice {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 14px;
    border-radius: 8px;
}
.cart-coupon-notice--error {
    color: var(--color-brand, #d8282f);
    background: rgba(216, 40, 47, 0.08);
}
.cart-coupon-notice--success {
    color: #0a5;
    background: rgba(0, 170, 85, 0.08);
}

/* Применённые промокоды */
.cart-applied-coupons {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e5;
}
.cart-applied-coupons-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #101820;
}
.cart-applied-coupons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cart-applied-coupon-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 14px;
}
.cart-applied-coupon-code {
    font-weight: 600;
    color: #101820;
    flex: 1;
}
.cart-applied-coupon-discount {
    color: #155724;
    font-weight: 600;
}
.cart-remove-coupon-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #767E8F;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.cart-remove-coupon-btn:hover {
    color: #D8282F;
}

/* Уведомления WooCommerce под формой промокода */
.cart-coupon-form + .woocommerce-error,
.cart-coupon-form + .woocommerce-message,
.cart-coupon-form + .woocommerce-info,
.product-main__settings-value-inner > .woocommerce-error,
.product-main__settings-value-inner > .woocommerce-message,
.product-main__settings-value-inner > .woocommerce-info {
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    list-style: none;
    padding-left: 1rem;
}
.product-main__settings-value-inner > .woocommerce-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}
.product-main__settings-value-inner > .woocommerce-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}
.product-main__settings-value-inner > .woocommerce-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}
.product-main__settings-value-inner > .woocommerce-error li,
.product-main__settings-value-inner > .woocommerce-message li,
.product-main__settings-value-inner > .woocommerce-info li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-product-info .product-card__cart-quantity {
    font-size: 14px;
    line-height: 129%;
    font-weight: 400;
    color: var(--color-black);
}

.cart-product-info .product-card__cart-controls {
    background: var(--color-gray);
}

@media screen and (max-width: 767px) {
    .product-card__cart-controls {
        height: 40px;
    }
}

.cart-total-row .cart-total-label strong {
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
}

.cart-total-amount {
    width: 240px;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
}

@media screen and (max-width: 600px) {
    .cart-total-amount {
        width: auto;
        font-size: 16px;
        line-height: 113%;
    }
}
.cart-total-price-wrapper {
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; */
    /* gap: 0.25rem; */
}
.cart-total-price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
    font-weight: normal;
}
.cart-total-price-new {
    color: var(--color-brand, #101820);
    font-size: 1em;
    font-weight: bold;
}

.cart-checkout-form-wrapper {
    background: var(--color-gray-lite);
    border-radius: 24px;
    padding: 32px 40px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .cart-checkout-form-wrapper {
        padding: 24px;
    }
}

/* Страница пустой корзины */
/* Стили старой разметки пустой корзины (.cart-empty-wrapper / -content /
   -actions и крупная иконка на пол-экрана) удалены: она заменена панелью
   .cart-empty-box в конце файла. */

/* Lightbox для галереи фото товара */
.product-gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-gallery-lightbox.is-active {
    display: flex;
    opacity: 1;
}

.product-gallery-lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.product-gallery-lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: calc(90vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 140px;
}

.product-gallery-lightbox__image {
    max-width: 100%;
    max-height: calc(90vh - 140px);
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.product-gallery-lightbox__image.fade-out {
    opacity: 0;
}

.product-gallery-lightbox__image.fade-in {
    opacity: 1;
}

.product-gallery-lightbox__close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    z-index: 10001;
}

.product-gallery-lightbox__close:hover {
    opacity: 0.7;
}

.product-gallery-lightbox__prev,
.product-gallery-lightbox__next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease, opacity 0.3s ease;
    z-index: 10001;
}

.product-gallery-lightbox__next {
    display: flex;
}

.product-gallery-lightbox__prev {
    left: 20px;
}

.product-gallery-lightbox__next {
    right: 20px;
}

.product-gallery-lightbox__prev:hover,
.product-gallery-lightbox__next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.product-gallery-lightbox__pagination {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    z-index: 10001;
    max-width: 90vw;
    /* overflow-x: auto;
    overflow-y: hidden; */
    padding: 0 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    scroll-behavior: smooth;
}

.product-gallery-lightbox__pagination::-webkit-scrollbar {
    height: 4px;
}

.product-gallery-lightbox__pagination::-webkit-scrollbar-track {
    background: transparent;
}

.product-gallery-lightbox__pagination::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.product-gallery-lightbox__pagination-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    z-index: 10001;
    flex-shrink: 0;
    opacity: 0.6;
}

.product-gallery-lightbox__pagination-thumb:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
    opacity: 0.9;
}

.product-gallery-lightbox__pagination-thumb.is-active {
    border-color: #fff;
    transform: scale(1.15);
    opacity: 1;
}

.product-gallery-lightbox__pagination-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 1023px) {
    .product-gallery-lightbox__content {
        max-height: calc(90vh - 100px);
        margin-bottom: 100px;
    }

    .product-gallery-lightbox__image {
        max-height: calc(90vh - 100px);
    }

    .product-gallery-lightbox__prev {
        left: 10px;
        width: 50px;
        height: 50px;
        font-size: 40px;
    }

    .product-gallery-lightbox__next {
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 40px;
    }

    .product-gallery-lightbox__close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 40px;
    }

    .product-gallery-lightbox__pagination {
        bottom: 20px;
        gap: 8px;
        padding: 0 10px;
    }

    .product-gallery-lightbox__pagination-thumb {
        width: 60px;
        height: 60px;
    }
}

.single-product__cart-controls {
    height: 48px;
}

.single-product__cart-controls button {
    height: 40px;
    width: 40px;
}

.gmotor-checkout-form__field--privacy .gmotor-checkout-form__privacy-policy {
    margin: 0;
}

/* Новости */
.dropdown-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-wrapper > button {
    margin-top: 16px;
    color: var(--color-brand);
}

.dropdown-wrapper > a.btn-outline-brand {
    margin-top: 16px;
}

.news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
}

@media screen and (max-width: 1023px) {
    .news-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .news-list {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }
}

.news-card__link {
    color: #000;
    border: 1px solid #efefef;
    border-radius: 20px;
    padding: 8px 8px 16px;
    display: block;
    height: 100%;
}

.news-card__title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    line-height: 125%;
    letter-spacing: -0.01em;
    margin-top: 12px;
}

.news-card__excerpt {
    font-family: var(--font-manrope);
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-secondary);
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card__image {
    line-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.news-card__image img {
    /* height: 240px; */
    height: auto;
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease-out;
    transform-origin: center;
    transform: scale(1);
}

.news-card__image:hover img {
    transform: scale(1.1);
}

@media screen and (max-width: 1023px) {
    .news-card__image img {
        /* height: 189px; */
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    .news-card__image img {
        /* height: 180px; */
        height: auto;
    }
}

.news-card__date {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-secondary);
    margin-top: 12px;
}

.news-card__content {
    padding: 0 12px;
}

/* Полноширинный блок после 6-й новости на каждой странице пагинации */
.news-insert-block--full {
    width: 100%;
    margin: 0;
}

.news-card__link {
    position: relative;
}

.news-card__category {
    position: absolute;
    box-shadow: 0 0 20px 0 rgba(17, 19, 26, 0.04);
    background: rgba(0, 0, 0, 0.8);
    border-radius: 24px;
    padding: 0 12px;
    height: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    top: 12px;
    left: 12px;
    font-weight: 500;
    font-size: 12px;
    line-height: 133%;
    z-index: 1;
}

@keyframes product-card-cart-btn-spin {
	to {
		transform: rotate(360deg);
	}
}

.product-card__cart-btn-loading {
	display: inline-flex;
	animation: product-card-cart-btn-spin 0.8s linear infinite;
}

.cart-product-name__header > div.cart-product-name__category {
    border-color: var(--color-brand);
}


/* Новости подписка */
.news-insert-block {
    background-color: var(--color-fon-contrast);
    border-radius: 44px;
    padding: 32px 48px;
    margin: 24px 0;
    background-image: url(../images/news-form-icon.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (max-width: 1023px) {
    .news-insert-block {
        margin: 16px 0;
        border-radius: 24px;
        padding: 32px;
        background-position: calc(100% + 67px) 54px;
        background-size: 300px;
    }
}

@media screen and (max-width: 600px) {
    .news-insert-block {
        padding: 32px 24px;
        padding-bottom: 172px;
        background-position: center bottom;
    }
}

.news-insert-block__title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media screen and (max-width: 1023px) {
    .news-insert-block__title {
        font-size: 28px;
    }
}

@media screen and (max-width: 600px) {
    .news-insert-block__title {
        font-size: 24px;
        line-height: 117%;
    }
}

.news-insert-block__title span  {
    color: var(--color-brand);
}

.news-insert-block__description {
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    color: #fff;
    margin-top: 16px;
}

@media screen and (max-width: 1023px) {
    .news-insert-block__description {
        margin-top: 8px;
    }
}

@media screen and (max-width: 600px) {
    .news-insert-block__description {
        font-size: 14px;
        line-height: 129%;
    }
}

.news-insert-block__form {
    margin-top: 32px;
}

/* @media screen and (max-width: 600px) {
    .news-insert-block__form {
        margin-top: 27px;
    }
} */

.news-insert-block__form input[type="email"] {
    width: 300px;
}

@media screen and (max-width: 600px) {
    .news-insert-block__form input[type="email"] {
        width: 100%;
        /* margin-top: 17px; */
    }

    .news-insert-block__form button {
        margin-bottom: 24px;
    }
}

.news-insert-block__form button {
    min-width: auto !important;
    max-width: max-content !important;
}

@media screen and (max-width: 600px) {
    .news-insert-block__form button {
        max-width: 100% !important;
    }
}

.news-insert-block__form .ff-column-container {
    width: max-content !important;
}

@media screen and (max-width: 600px) {
    .news-insert-block__form .ff-column-container {
        width: 100% !important;
    }
}

.ff-column-container {
    display: flex;
    gap: 16px;
}

@media screen and (max-width: 600px) {
    .ff-column-container {
        flex-direction: column;
        gap: 0;
    }
}

.fluentform .ff-el-form-check {
    margin-bottom: 0 !important;
}

.news-insert-block__form .ff-el-input--content {
    margin-bottom: 0 !important;
}

/* @media screen and (max-width: 600px) {
    .news-insert-block__form .ff-el-input--content {
        margin-top: 23px;
    }
} */

.news-insert-block__form .ff-el-form-check-label {
    color: #a8aebc;
}

.news-insert-block__form .fluentform .ff-el-form-check-input:checked {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

.news-insert-block__form .fluentform .ff-el-tc label.ff_tc_label>span {
    padding-top: 0px !important;
}

.news-insert-block .fluentform .ff-el-group.ff_submit_btn_wrapper {
 margin-top: 0 !important;
}

/* В блоке подписки новостей скрываем стандартный текст успеха Fluent Forms */
.news-insert-block__form .ff-message-success {
    display: none !important;
}

body.page-id-515 .hero-bottom,
.news-hero .hero-bottom {
    height: 44px;
}

@media screen and (max-width: 1023px) {
    body.page-id-515 .hero-bottom,
    .news-hero .hero-bottom {
        height: 32px;
    }
}

@media screen and (max-width: 640px) {
    body.page-id-515 .hero-bottom,
    .news-hero .hero-bottom {
        height: 26px;
    }
}

@media screen and (max-width: 767px) {
    body.tax-news_category .dropdown-wrapper > a.btn-outline-brand,
    body.page-id-515 .dropdown-wrapper > a.btn-outline-brand {
        margin-top: 7px;

    }

    body.tax-news_category .dropdown-wrapper,
    body.page-id-515 .dropdown-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    body.tax-news_category .woocommerce-pagination,
    body.page-id-515 .woocommerce-pagination{
        background: #fff;
        margin-top: 40px;
        padding-bottom: 0;
    }
    
}

/* single news */
.single-news__image {
    position: relative;
}

.single-news__image img {
    width: 100%;
    /* height: 720px; */
    object-fit: cover;
    border-radius: 32px;
    margin-top: 12px;
}

@media screen and (max-width: 1023px) {
    .single-news__image img {
        /* height: 381px; */
        border-radius: 24px;
    }
}

@media screen and (max-width: 767px) {
    .single-news__image img {
        /* height: 178px; */
        border-radius: 16px;
    }
}

.single-news__description {
    margin-top: -213px;
    background-color: var(--color-white);
    border-radius: 56px 56px 0 0;
    padding-top: 275px;
}

@media screen and (max-width: 1023px) {
    .single-news__description {
        margin-top: -136px;
        padding-top: 153px;
    }
}

@media screen and (max-width: 767px) {
    .single-news__description {
        border-radius: 32px 32px 0 0;
        margin-top: -75px;
        padding-top: 92px;
    }
}

.single-news__description .front-page__blog-posts-date {
    right: 167px;
}

@media screen and (max-width: 1023px) {
    .single-news__description .front-page__blog-posts-date {
        right: 24px;
        bottom: -19px;
    }
}

.single-news__image .front-page__blog-posts-date svg {
    width: 164px;
    height: 106px;
}

@media screen and (max-width: 767px) {
    .single-news__image .front-page__blog-posts-date svg {
        width: 80px;
        height: 52px;
    }
}

.single-news__image .front-page__blog-posts-date-day {
    font-style: italic;
    font-weight: 800;
    font-size: 70px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-align: center;
    width: calc(100% - 10px);
}

@media screen and (max-width: 767px) {
    .single-news__image .front-page__blog-posts-date-day {
        font-size: 24px;
        width: calc(100% - 5px);
    }
}

.single-news__image .front-page__blog-posts-date-month {
    font-weight: 400;
    font-size: 20px;
    line-height: 70%;
    font-family: var(--font-tiktok-sans);
    width: calc(100% - 30px);
}

@media screen and (max-width: 767px) {
    .single-news__image .front-page__blog-posts-date-month {
        font-size: 10px;
        width: calc(100% - 10px);
        line-height: 110%;
    }
}

.single-news__image .front-page__blog-posts-date {
    top: auto;
    bottom: -25px;
    right: 168px;
}

@media screen and (max-width: 1023px) {
    .single-news__image .front-page__blog-posts-date {
        right: 32px;
    }
}

@media screen and (max-width: 767px) {
    .single-news__image .front-page__blog-posts-date {
        bottom: -15px;
        right: 16px;
    }
}

.single-news__content {
    width: 672px;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .single-news__content {
        width: 100%;
    }
}

.single-news__content-title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .single-news__content-title {
        margin-top: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .single-news__content-title {
        font-size: 24px;
    }
}

.single-news__content-text {
    margin-top: 24px;
}

@media screen and (max-width: 1023px) {
    .single-news__content-text {
        margin-top: 20px;
    }
}

@media screen and (max-width: 767px) {
    .single-news__content-text {
        margin-top: 24px;
    }
}

.single-news__content-text ol {
    padding-left: 15px;
    margin-bottom: 12px;
}

.single-news__content-block {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
}

.single-news__content-block img {
    border-radius: 16px;
    /* height: 340px; */
    width: 100%;
    object-fit: cover;
}

.single-news__content-block p {
    margin-bottom: 24px;
}

.single-news__content-block strong {
    font-family: var(--font-tiktok-sans);
    /* font-style: italic; */
    font-weight: 900;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: var(--text---primary);
}

@media screen and (max-width: 1023px) {
    .single-news__content-block strong {
        font-weight: 700;
            font-size: 16px;
            line-height: 125%;
    }
}

.single-news__content-block ul,
.privacy-policy-block__text-content ul,
.privacy-policy-block__text ul,
.text-page__textovoe-pole ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.single-news__content-block ul li,
.privacy-policy-block__text-content ul li,
.privacy-policy-block__text ul li,
.text-page__textovoe-pole ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 12px;
}

.single-news__content-block ul li::before,
.privacy-policy-block__text ul li::before,
.privacy-policy-block__text-content ul li::before,
.text-page__textovoe-pole ul li::before {
    content: '';
    position: absolute;
    left: 0;
    background: var(--color-brand, #D8282F);
    width: 8px;
    height: 8px;
    top: 6px;
}

.single-news__content-block a,
.privacy-policy-block__text-content a {
    color: var(--color-brand, #D8282F);
    text-decoration: underline;
}

.single-news__gallery .splide__slide .single-news__gallery-item {
    border-radius: 16px;
    height: 340px;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .single-news__gallery .splide__slide .single-news__gallery-item {
        height: auto;
        min-height: 180px;
        min-height: 500px;
        border-radius: 16px;
    }
}

.single-news__gallery {
    padding-bottom: 45px;
    margin: 24px 0;
}

@media screen and (max-width: 1023px) {
    .single-news__gallery {
        margin: 24px -24px;
    }
}

@media screen and (max-width: 767px) {
    .single-news__gallery {
        margin: 24px 0;
        margin-right: -10px;
    }
}

.single-news__gallery-arrows button {
    width: 44px;
    height: 44px;
    background: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 1;
}

.single-news__gallery-arrows button:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);

    svg path {
        stroke: var(--color-white);
    }
}

.single-news__gallery-arrows .splide__arrow--prev {
    left: -20px;
}

.single-news__gallery-arrows .splide__arrow--next {
    right: -20px;
}

@media screen and (max-width: 1023px) {
    .single-news__gallery-arrows .splide__arrow--prev {
        left: 4px;
    }
    .single-news__gallery-arrows .splide__arrow--next {
        right: 4px;
    }
}

.single-news__gallery-arrows .splide__arrow {
    transform: translateY(-100%);
}

.single-news__gallery-arrows .splide__arrow svg {
    width: 20px;
    height: 20px;
}

.single-news__gallery-arrows .splide__arrow:hover:not(:disabled) {
    opacity: 1;
}

.single-news  .product-main__description-video {
    width: 100%;
    margin: 24px 0;
}

.single-news .product-main__description-video > .btn {
    margin-top: 8px;
}

.single-news__footer {
    display: flex;
    justify-content: space-between;
    border-radius: 24px;
    padding: 24px;
    background: var(--color-gray);
    font-size: 14px;
    gap: 12px;
    margin-top: 24px;
}

@media screen and (max-width: 767px) {
    .single-news__footer > div {
        flex: 1;
    }
}

.single-news__copy-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    white-space: nowrap;
}

.single-news__copy-toast {
    position: fixed;
    transform: translate(-50%, -100%) translateY(10px);
    background: var(--color-contrast-lite);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.single-news__copy-toast::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-contrast-lite);
}

.single-news__copy-toast--visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -100%) translateY(0);
}

.single-news__header {
    display: flex;
    justify-content: space-between;
    color: #fff;
}

.single-news__header .single-news__copy-link svg path {
    fill: #fff;
}

.single-news__header .single-news__copy-link {
    font-size: 14px;
}

.single-news__back-up {
    border: 1px solid rgba(15, 20, 30, 0.1);
    border-radius: 40px;
    padding: 12px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    opacity: 1;
    position: absolute;
    top: 0;
    top: -10px;
    left: -94px;
    color: #000;
    font-size: 14px;
    line-height: 129%;
    font-size: 0;   
}

@media screen and (max-width: 1023px) {
    .single-news__back-up {
        position: static;
        width: max-content;
        font-size: 14px;
        gap: 10px;
    }
}

@media screen and (max-width: 767px) {
    .single-news__back-up {
        height: 44px;
    }
}

.single-news__back-up:hover {
    background-color: var(--color-gray-lite);
}

.single-news__header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.single-news__share-wrap {
    position: relative;
}

.single-news__share-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 6px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.single-news__share-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.single-news__share-dropdown[aria-hidden="true"] {
    pointer-events: none;
}

.single-news__share-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #333;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.single-news__share-link:hover {
    background: var(--color-gray-lite, #f5f5f5);
}

.single-news__share-link[data-network="vk"] { color: #0077ff; }
.single-news__share-link[data-network="vk"]:hover { background: rgba(0, 119, 255, 0.1); }

.single-news__share-link[data-network="ok"] { color: #ee8208; }
.single-news__share-link[data-network="ok"]:hover { background: rgba(238, 130, 8, 0.1); }

/* Иконка Max — SVG с градиентом, без фиксированного размера flex сжимает её по ширине */
.single-news__share-link svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.single-news__share-link[data-network="max"]:hover { background: rgba(83, 46, 238, 0.1); }

.single-news__share-link[data-network="telegram"] { color: #0088cc; }
.single-news__share-link[data-network="telegram"]:hover { background: rgba(0, 136, 204, 0.1); }

@media screen and (max-width: 767px) {
    .single-news__header-right {
        display: none;
    }
}

.front-page__blog-posts-date-mobile-svg {
    display: none;
}

@media screen and (max-width: 767px) {
    .front-page__blog-posts-date-desktop-svg {
        display: none;
    }
    .front-page__blog-posts-date-mobile-svg {
        display: block;
    }
}

/* Список дилеров */
.dealers-list__search {
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .dealers-list__search {
        margin-bottom: 8px;
    }
}

.dealers-list__search-field {
    position: relative;
    width: 100%;
}

.dealers-list__search-input {
    width: 100%;
    padding: 14px 52px;
    border-radius: 100px;
    border: 1px solid var(--color-gray);
    font-size: 14px;
    line-height: 1.3;
    width: calc(100% - 10px);
}

.dealers-list__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dealers-list__city-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 0;
    background: none;
    border: none;
    cursor: pointer;
}

.dealers-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dealers-list__city-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
}

.dealers-list__city-toggle-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dealers-list__city.is-collapsed .dealers-list__city-toggle-icon {
    transform: rotate(180deg);
}

.dealers-list__city:not(.is-collapsed) .dealers-list__city-toggle-icon {
    transform: rotate(0deg);
}

.dealers-list__items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 5px;
}

.dealers-list__city-body {
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.dealers-list__city.is-collapsed .dealers-list__city-body {
    max-height: 0;
}

.dealers-list__item {
    border: 1px solid var(--color-gray);
    border-radius: 16px;
    padding: 16px;
    width: calc(100% / 3 - 11px);
    /* cursor: pointer; */
}

@media screen and (max-width: 1023px) {
    .dealers-list__item {
        width: calc(100% / 2 - 8px);
    }
}

@media screen and (max-width: 767px) {
    .dealers-list__item {
        width: 100%;
    }
}

.dealers-map .dealers-list__item {
    cursor: pointer;
}

.dealers-list__item-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .dealers-list__item-title {
        font-size: 20px !important;
        margin-bottom: 16px;
    }
}

.dealers-list__item > * {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-black);
}

@media screen and (max-width: 1023px) {
    .dealers-list__item > * {
        font-size: 14px;
    }
}

.dealers-list__item > *:not(:last-child) {
    margin-bottom: 14px;
}

.dealers-list__item > a:hover {
    text-decoration: underline;
}

.dealers-list__item-site {
    color: var(--color-brand);
}

.dealers-map {
    display: flex;
    gap: 32px;
}

@media screen and (max-width: 1023px) {
    .dealers-map {
        flex-direction: column;
        gap: 20px;
    }
}

.dealers-map__sidebar {
    width: 33%;
    flex-shrink: 0;
}

@media screen and (max-width: 1023px) {
    .dealers-map__sidebar {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .dealers-map__sidebar {
        display: none;
    }
}

.dealers-map__map {
    flex: 1 1 0;
    min-width: 0;
    min-height: 500px;
    max-height: 712px;
    border-radius: 32px;
    overflow: hidden;
    /* Тёмная подложка под картой, пока плитки грузятся */
    background: #0e1315;
}

/* Балон при клике на маркер карты дилеров (Yandex Maps) */
.ymaps-2-1-79-balloon {
    transform: translateY(-20px);
}

.ymaps-2-1-79-balloon__content > ymaps {
    height: auto !important;
    /* min-height: 120px; */
    width: auto !important;
    min-width: 220px;
    overflow: visible !important;
}

.dealers-balloon {
    min-width: 250px;
}

.dealers-balloon__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #101820;
}

.dealers-balloon__address {
    font-size: 12px;
    line-height: 1.4;
    color: #666;
    margin-bottom: 5px;
}

.dealers-balloon__phone,
.dealers-balloon__email,
.dealers-balloon__site {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-brand, #F02D3C);
    text-decoration: none;
}

.dealers-balloon__phone:hover,
.dealers-balloon__email:hover,
.dealers-balloon__site:hover {
    text-decoration: underline;
}

.dealers-balloon__phone {
    margin-bottom: 4px;
}

.dealers-balloon__email {
    margin-bottom: 4px;
}

.dealers-balloon__site {
    margin-top: 4px;
}

.dealers-map__sidebar .dealers-list {
    height: 700px;
    overflow: auto;
    padding-right: 20px;
    scrollbar-width: thin;
    scrollbar-color: #0f1419 transparent;
    padding-bottom: 30px;
}

@media screen and (max-width: 1023px) {
    .dealers-map__sidebar .dealers-list {
        flex-direction: row;
        height: auto;
        margin-right: -24px;
        padding-bottom: 10px;
        padding-right: 24px;
    }
}

@media screen and (max-width: 767px) {
    .dealers-map__sidebar .dealers-list {
        display: none;
    }
}


.dealers-map__sidebar .dealers-list::-webkit-scrollbar {
    width: 8px;
}

.dealers-map__sidebar .dealers-list::-webkit-scrollbar-track {
    background: transparent;
}

.dealers-map__sidebar .dealers-list::-webkit-scrollbar-thumb {
    background: #0f1419;
    border-radius: 4px;
}

.dealers-map__sidebar .dealers-list::-webkit-scrollbar-thumb:hover {
    background: #000;
}

.dealers-map .dealers-list__search {
    /* margin-right: 10px; */
    margin-right: 21px;
}

@media screen and (max-width: 1023px) {
    .dealers-map .dealers-list__search {
        margin-right: 0;
    }
}

.dealers-map .dealers-list__item {
    width: 100%;
    transition: border-color 0.3s ease;
}

@media screen and (max-width: 1023px) {
    .dealers-map .dealers-list__item {
        min-width: 46%;
        width: 46%;
    }
}

.dealers-map .dealers-list__item:hover {
    border-color: var(--color-brand);
}

.dealers-list-page {
    margin-top: -24px;
}

@media screen and (max-width: 1023px) {
    .dealers-list-page {
        margin-top: -27px;
        margin-bottom: 44px;
    }
}

@media screen and (max-width: 767px) {
    .dealers-list-page {
        margin-top: -16px;
        margin-bottom: 30px;
    }
}

.single-news__footer-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

@media screen and (max-width: 767px) {
    .single-news__footer-wrap {
        font-size: 12px;
    }
}

.single-news__footer-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ymaps-2-1-79-balloon {
    box-shadow: none !important;
    
}

.ymaps-2-1-79-balloon__layout {
    border-radius: 16px !important;
    border: 1px solid var(--color-gray);
}

.ymaps-2-1-79-balloon__content {
    padding: 12px 16px !important;
    margin: 0 !important;
}

.ymaps-2-1-79-balloon__tail:after {
    border-radius: 2px;
}

.ymaps-2-1-79-balloon__tail {
    background: var(--color-gray) !important;
}

.ymaps-2-1-79-balloon__close {
    margin-right: 5px;
}

/* Стр Контакты */
.page-conacts__title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .page-conacts__title {
        font-size: 28px;
    }
}

.page-conacts__items {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-conacts__item-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-secondary);
}

.page-conacts__item-content {
    font-family: var(--font-tiktok-sans);
    font-weight: 400;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: #101820;
}

@media screen and (max-width: 1023px) {
    .page-conacts__item-content {
        font-size: 16px;
        line-height: 138%;
        margin-top: 4px;
    }
}

.page-conacts__item-content a {
    color: var(--color-brand);
    text-decoration: underline;
}

.page-conacts__social-title {
    margin-top: 48px;
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .page-conacts__social-title {
        font-size: 28px;
    }
}

.page-conacts__social-title span {
    color: var(--color-brand);
    font-style: italic;
}

.page-conacts__social-links {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media screen and (max-width: 767px) {
    .page-conacts__social-links {
        gap: 8px;
    }
}

@media screen and (max-width: 350px) {
    .page-conacts__social-links {
        grid-template-columns: repeat(1, 1fr);
    }
}

.page-conacts__social-links > a.btn-secondary {
    border-color: #CFD0D2;
}

.page-conacts__social-link {
    max-width: none;
    justify-content: flex-start;
    height: 52px;
}

.page-conacts__social-link img {
    filter: brightness(0) saturate(100%) invert(14%) sepia(92%) saturate(4234%) hue-rotate(357deg) brightness(92%) contrast(91%);
    transition: filter 0.2s ease;
}

.page-conacts__social-link:hover img {
    filter: none;
}


.page-conacts__container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

@media screen and (max-width: 1023px) {
    .page-conacts__container {
        flex-direction: column;
        gap: 48px;
    }
}

.page-conacts__content {
    width: 672px;
}

@media screen and (max-width: 1023px) {
    .page-conacts__content {
        width: 100%;
    }
}

.page-conacts__form {
    width: 556px;
    background: var(--color-gray-lite);
    padding: 32px;
    border-radius: 32px;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .page-conacts__form {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .page-conacts__form {
        padding: 24px;
    }
}

.page-conacts__form-fields {
    margin-top: 28px;
}

.ff-default textarea.ff-el-form-control,
.ff-el-input--content textarea {
    height: 120px !important;
    border-radius: 25px !important;
    padding: 15px 16px !important;
}

.page-conacts__form .fluentform .ff-btn-submit {
    width: 213px !important;
}

@media screen and (max-width: 767px) {
    .page-conacts__form .fluentform .ff-btn-submit {
        width: 100% !important;
    }
}

/* Кастомный прелоадер на кнопке отправки формы контактов */
.page-conacts__form .fluentform .ff-btn-submit {
    position: relative;
}

/* .page-conacts__form .fluentform .ff-btn-submit:disabled {
    color: transparent !important;
} */

.page-conacts__form .fluentform .ff-btn-submit:disabled::after {
    content: "";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-conacts__form-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 133%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .page-conacts__form-title {
        font-size: 22px;
    }
}

.page-conacts__form-description {
    margin-top: 8px;
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
}

.page-conacts__form-description p {
    margin-bottom: 10px;
}

.page-conacts__cta-card {
    margin-top: 80px;
}

@media screen and (max-width: 1023px) {
    .page-conacts__cta-card {
        margin-top: 92px;
    }
}

.page-conacts__cta-card .cta-title span {
    font-family: var(--font-tiktok-sans);
    transform: scaleX(1.4);
    display: block;
    margin-top: 5px;
    transform-origin: left;
    font-style: italic;
    color: var(--color-brand);
}

@media screen and (max-width: 767px) {
    .page-conacts__cta-card .cta-title span {
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        transform-origin: center;
    }
}

@media screen and (max-width: 390px) {
    .page-conacts__cta-card .cta-title span {
        width: 200px;
    }
}

@media screen and (max-width: 767px) {
    .page-conacts__cta-card .cta-card {
        padding: 64px 32px 32px;
    }
}

.page-conacts__section {
    margin-top: -24px;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .page-conacts__section {
        margin-top: 0px;
    }
}

@media screen and (max-width: 767px) {
    .page-conacts__section {
        margin-top: -8px;
    }
}

/* Селект формы: placeholder серый, выбранное значение тёмное */
.ff-default #ff_6_dropdown {
    color: #9B9B9B !important;
}

.ff-default #ff_6_dropdown.ff-has-value {
    color: #101820 !important;
}

.fluentform .ff-btn-submit:disabled {
    background-color: #fbc0c4 !important;
    opacity: 1 !important;
}

.fluentform .ff-el-group.page-conacts__form-description-privacy {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-secondary);
    margin-top: 16px !important;
    margin-top: 0 !important;
}

.page-conacts__form-description-privacy a {
    color: var(--color-brand);
    text-decoration: underline;
}

/* Монохромная подложка Яндекс-карты — и на главной, и на странице точек продаж.
   Фильтр вешаем ТОЛЬКО на слой плиток: красные маркеры, кластеры и балуны остаются
   в цвете и становятся единственным цветным пятном на карте. */
#dealers-map [class*="ymaps-"][class*="-ground-pane"] {
    filter: grayscale(1) brightness(1.04) contrast(0.96);
}

.cookie-banner__text a {
    color: var(--color-brand);
    text-decoration: underline;
}

.product-main__gruppa_akkordionov-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.manuals-section .product-main__settings-list {
    max-width: 675px;
    width: auto;
    margin-top: 10px;
}

.page-conacts__form-description-subscribe {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    text-align: center;
    color: var(--color-secondary);
    margin-top: 16px;
}

#popup-subscribe .popup-title {
    margin-bottom: 8px;
}

#popup-subscribe .fluentform .ff-el-group {
    margin-bottom: 0 !important;
    margin-top: 16px !important;
}

/* Политика */
.privacy-policy-section {
    border-bottom: 1px solid #cfd0d2;
    padding-bottom: 28px;
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .privacy-policy-section {
        padding-bottom: 12px;
        margin-bottom: 24px;
    }
}

.privacy-policy-content {
    flex: 1;
    max-width: 900px;
    gap: 30px;
}

.privacy-policy-content .privacy-policy-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.privacy-policy-section__title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

@media screen and (max-width: 1023px) {
    .privacy-policy-section__title {
        font-size: 28px;
        line-height: 121%;
    }
}

@media screen and (max-width: 767px) {
    .privacy-policy-section__title {
        font-size: 24px;
        line-height: 117%;
    }
}

.privacy-policy-block__heading {
    font-family: var(--font-manrope);
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-top: 24px;
    margin-bottom: 12px;

    display: flex;
    gap: 8px;
}

@media screen and (max-width: 767px) {
    .privacy-policy-block__heading {
        font-size: 16px;
        line-height: 125%;
        margin-top: 16px;
    }
}

.privacy-policy-table {
    padding: 12px 0;
}

@media screen and (max-width: 767px) {
    .privacy-policy-table {
        padding-top: 0;
    }
}

.privacy-policy-table.is-desc {
    padding-left: 36px;
}

.privacy-policy-table__row {
    border-bottom: 1px solid #cfd0d2;
    padding: 12px 0;
}

.privacy-policy-table__header {
    padding-bottom: 12px;
    border-bottom: 1px solid #cfd0d2;
}

.privacy-policy-table__row,
.privacy-policy-table__header {
    display: grid;
    grid-template-columns: 180px repeat(var(--pp-cols-rest, 1), minmax(0, 1fr));
    gap: 16px;
}

@media screen and (max-width: 767px) {
    .privacy-policy-table__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media screen and (max-width: 767px) {
    .privacy-policy-table__header {
        display: none;
    }
}

.privacy-policy-table__cell {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
}

.privacy-policy-table__cell--head {
    font-weight: 700;
}

.privacy-policy-table__row .privacy-policy-table__cell:first-child {
    font-weight: 700;
}

.privacy-policy-block__text {
    display: flex;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
}

.privacy-policy-block__text-number {
    width: 28px;
}

.privacy-policy-block__number {
    width: 28px;
}

@media screen and (max-width: 767px) {
    .privacy-policy-block__number,
    .privacy-policy-block__text-number {
        width: 20px;
    }
}

.privacy-policy-block__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

/* .privacy-policy-block__text-content p, */
.privacy-policy-block__text-content ul,
.privacy-policy-block__text-content ol,
.text-page__textovoe-pole ul {
    margin: 8px 0;
}

.privacy-policy-block__text-content ul li,
.text-page__textovoe-pole ul li {
    margin-bottom: 4px;
}

.privacy-policy-block__text-content p:not(:first-child) {
    margin-top: 8px;
}

.privacy-policy-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

@media screen and (max-width: 1023px) {
    .privacy-policy-container {
        flex-direction: column;
        gap: 36px;
        margin-top: -15px;
    }
}

@media screen and (max-width: 767px) {
    .privacy-policy-container {
        gap: 24px;
    }
}

.privacy-policy__nav {
    width: 343px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    height: 100%;
    top: 108px;
}

@media screen and (max-width: 1023px) {
    .privacy-policy__nav {
        width: 100%;
        flex-direction: row;
        background: #fff;
        border-radius: 50px;
        border: 1px solid #cfd0d2;
        padding: 4px;
        top: 84px;
        overflow: auto;
        z-index: 100;

        /* Скрываем полосу прокрутки */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE и Edge */

        transition: margin 0.3s ease, width 0.3s ease;
    }

    .privacy-policy__nav.is-sticky {
        margin: 0 -16px;
        width: calc(100% + 32px);
    }

    .privacy-policy__nav > a::after {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .privacy-policy__nav.is-sticky {
        margin: 0;
        width: 100%;
    }
}

.privacy-policy__nav-link  {
    border: none !important;
    white-space: normal;
    line-height: 1;
}

@media screen and (max-width: 1023px) {
    .privacy-policy__nav-link {
        font-size: 12px;
        height: 40px;
        padding: 0 16px;
        min-width: max-content;
    }
}

.privacy-policy__nav-link:hover {
    background-color: var(--color-gray) !important;
    color: var(--color-brand);
}

.privacy-policy__nav-link:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' stroke='%23D8282F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

}

.privacy-policy-page .hero-section {
    height: 344px; /* +64px */
}

@media screen and (max-width: 1023px) {
    .privacy-policy-page .hero-section {
        height: calc(310px + 34px); /* +34px */
    }
}
@media screen and (max-width: 767px) {
    .privacy-policy-page .hero-section {
        height: calc(212px + 32px); /* +32px */
    }
}

/* .privacy-policy-page .hero-title {
    margin-top: 0;
} */

.privacy-policy-block__title {
    flex: 1;
}

@media screen and (max-width: 767px) {
    body.privacy-policy .hero-title {
        font-size: 24px;
    }
}

@media screen and (max-width: 350px) {
    body.privacy-policy .hero-title {
        font-size: 21px;
    }
}

@media screen and (max-width: 1023px) {
    .manuals-page .about-container .about-image {
        position: static;
        margin-right: auto;
    }
}

@media screen and (max-width: 767px) {
    .manuals-page .hero-title {
        font-size: 25px;
    }
}

@media screen and (max-width: 350px) {
    .manuals-page .hero-title {
        font-size: 21px;
    }
}

body.page-id-539 footer {
    margin-top: 0;
}

.page-conacts__social-link_popup {
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .page-conacts__social-link_popup {
        min-width: 100%;
    }
    .page-conacts__social-links_popup {
        display: block;
    }
}

/* Стать дилером */
body.page-id-681 {
    background: var(--color-fon-contrast);
}

.stat-dilerom__about {
    color: #fff;
}

.stat-dilerom__about-cards-list {
    display: grid;
    grid-template-columns: 328px 1fr 328px; /* 3 колонки по 1/4 (условно) */
    gap: 16px;
    margin-top: 64px;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-list {
        margin-top: 96px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-list {
        margin-top: 48px;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.stat-dilerom__about-cards-item-banner,
.stat-dilerom__about-cards-item{
    background: var(--color-contrast-lite);
    border-radius: 24px;
}

@media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item,
    .stat-dilerom__about-cards-item-banner {
        border-radius: 20px;
    }
}

/* Распределяем элементы по колонкам для десктопа */
.stat-dilerom__about-cards-item-banner {
    grid-column: 2; /* Всегда во второй колонке */
    grid-row: 1 / span 3; /* Растягивается на 3 ряда */
    aspect-ratio: 1/0;
    background: var(--color-brand);
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item-banner {
        grid-column: 1 / 4;
        grid-row: 2 / span 1;
        aspect-ratio: 1 / 1;
        height: 470px;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-banner {
        grid-column: 1 / 3;
        grid-row: 2 / span 1;
        height: 343px;
        margin: 8px 0;
    }
}

.stat-dilerom__about-cards-item {
    padding: 40px 32px;
    height: 192px;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item {
        padding: 24px 32px;
        height: 182px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item {
        padding: 20px 16px;
        padding-bottom: 20px;
        height: auto;
    }
}

  .stat-dilerom__about-title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 44px;
    line-height: 127%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
  }

  @media screen and (max-width: 1023px) {
    .stat-dilerom__about-title {
        font-size: 36px;
        line-height: 111%;
    }
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-title {
        font-size: 32px;
        line-height: 113%;
        margin-top: 26px;
        padding: 0 12px;
    }
  }

  .stat-dilerom__about-content {
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    margin-top: 24px;
    width: 672px;
    color: #fff;
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-content {
        font-size: 14px;
        line-height: 129%;
        width: 100%;
        padding: 0 12px;
    }
  }

  .stat-dilerom__about-content p {
    margin: 16px 0;
  }

  .stat-dilerom__about-cards-item-number {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 52px;
    line-height: 115%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-brand);
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-number {
        font-size: 44px;
        line-height: 109%;
    }
  }

  .stat-dilerom__about-cards-item-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    margin-top: 16px;
  }

  @media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item-description {
        margin-top: 8px;
    }
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-description {
        font-size: 14px;
        line-height: 129%;
    }
  }

  .stat-dilerom__about-cards-item-banner-inner {
    position: relative;
    overflow: hidden;
    height: 100%;
  }

  .stat-dilerom__about-cards-item-banner-img {
    position: absolute;
    bottom: -111px;
    right: -32px;
    width: 500px;
    height: auto;
    object-fit: cover;
  }

  @media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item-banner-img {
        bottom: -69px;
        right: auto;
        width: 391px;
        left: 307px;
    }
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-banner-img {
        bottom: -36px;
        width: 213px;
        left: 90px;
    }
  }

  .stat-dilerom__about-cards-item-banner-svg {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    width: 500px !important;
  }

  @media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item-banner-svg {
        width: 400px !important;
    }
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-banner-svg {
        width: calc(100% - 20px) !important;
        bottom: -30px !important;
    }
  }

  .stat-dilerom__about-cards-item-banner-svg-2 {
    position: absolute;
    top: 329px;
    left: 54px;
    width: auto !important;
  }

  @media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item-banner-svg-2 {
        top: 238px;
        width: 425px !important;
        left: 149px;
    }
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-banner-svg-2 {
        top: 216px;
        width: 249px !important;
        left: 43px;
    }
  }

  .stat-dilerom__about-cards-item-banner-content {
    font-family: var(--font-tiktok-sans);
    /* font-variation-settings: "wdth" 150, "wght" 500, "slnt" -6; */
    /* Variable font settings */
    /* font-optical-sizing: none;
    font-variation-settings:
        "wght" 500,   
        "wdth" 150,  
        "slnt" -6,   
        "opsz" 20;    */

    font-style: oblique -6deg;
    font-stretch: 150%;
    font-optical-sizing: none;
    font-variation-settings: "wdth" 150, "slnt" -6, "opsz" 20;
    /* font-style: italic; */
    font-weight: 500;
    font-size: 20px;
    line-height: 143%;
    letter-spacing: -0.01em;
    padding-left: 58px;
    padding-top: 112px;
    padding-right: 101px;
  }

  @media screen and (max-width: 1023px) {
    .stat-dilerom__about-cards-item-banner-content {
        font-style: oblique -6deg;
        font-stretch: 150%;
        font-optical-sizing: none;
        font-variation-settings: "wdth" 150, "slnt" -6, "opsz" 20;
        font-size: 18px;
        line-height: 160%;
        padding-left: 56px;
        padding-top: 44px;
        width: 630px;
        font-weight: 400;
    }
  }

  @media screen and (max-width: 767px) {
    .stat-dilerom__about-cards-item-banner-content {
        font-size: 16px;
        line-height: 125%;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 20px;
        width: 100%;
    }
  }

  @media screen and (max-width: 350px) {
    .stat-dilerom__about-cards-item-banner-content {
        font-size: 15px;
    }
  }

.stat-dilerom__success {
    margin-top: 64px;
    padding-top: 69px;
    padding-bottom: 64px;
    position: relative;
    color: #fff;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__success {
        margin-top: 48px;
        padding-top: 48px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success {
        padding-top: 0;
    }
}

.stat-dilerom__success::before {
    content: '';
    display: block;
    height: 359px;
    width: 100%;
    background: linear-gradient(180deg, #101820 0%, rgba(17, 0, 17, 0) 100%);
    position: absolute;
    top: 0;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__success::before {
        height: 160px;
        top: 190px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success::before {
        height: 260px;
        top: 50px;
    }
}

.stat-dilerom__success-fon-container {
    position: absolute;
    top: 0;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__success-fon-container {
        top: 190px;
        width: 100%;
    }

    .stat-dilerom__success-fon-container img {
        max-width: 1210px;
        object-position: center;
        width: 1100px;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }
    
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-fon-container {
        top: 56px;
    }

    .stat-dilerom__success-fon-container img {
        left: calc(50% - 81px);
        max-width: 850px;
        width: 850px;
    }
}

@media screen and (max-width: 890px) {

    .stat-dilerom__success-fon-container img {
        left: calc(50% - 112px);
    }
}

.stat-dilerom__success-fon-container::after {
    content: '';
    display: block;
    height: 215px;
    width: 100%;
    background: linear-gradient(0deg, #101820 0%, rgba(17, 0, 17, 0) 100%);
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.stat-dilerom__success-title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 44px;
    line-height: 127%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__success-title {
        font-size: 36px;
        line-height: 111%;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-title {
        font-size: 32px;
        line-height: 113%;
    }
}

.stat-dilerom__success-title span {
    color: var(--color-brand)
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-title span {
        display: block;
    }
}

.stat-dilerom__container {
    position: relative;
    z-index: 2;
}

.stat-dilerom__success-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 44px;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__success-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 16px;
        gap: 13px;
        margin-top: 5px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-content {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        margin-top: 16px;
    }

    .stat-dilerom__success-content-item {
        display: flex;
        align-items: center;
        gap: 42px;
    }
}

.stat-dilerom__success-content-item-icon {
    position: relative;
}

.stat-dilerom__success-content-item-icon img {
    position: absolute;
    top: 13px;
    left: 0;
    right: -58px;
    bottom: 0;
    margin: auto;
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-content-item-icon img {
        top: -4px;
        right: -51px;

    }
}

.stat-dilerom__item-number {
    position: relative;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 120px;
    line-height: 100%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.1);
    width: max-content;
    margin: 0 auto;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__item-number {
        font-size: 100px;
        line-height: 110%;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__item-number {
        font-size: 80px;
        line-height: 125%;
        letter-spacing: -0.02em;
        width: 42px;
    }
}

.stat-dilerom__success-content-item-text {
    text-align: center;
    padding: 0 32px;
    padding-bottom: 44px;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__success-content-item-text {
        padding: 0 16px;
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-content-item-text {
        padding: 0;
    }
}

.stat-dilerom__success-content-item-text-title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-content-item-text-title {
        font-size: 16px;
        line-height: 125%;
        text-align: left;
    }
}

.stat-dilerom__success-content-item-text-description {
    margin-top: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-disable);
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-content-item-text-description {
        font-size: 12px;
        line-height: 133%;
        margin-top: 8px;
        text-align: left;
    }
}

.stat-dilerom__success-content-item-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .stat-dilerom__success-content-item-button {
        margin-top: 23px;
        padding: 0 12px;
    }

    .stat-dilerom__success-content-item-button a {
        width: 100%;
        max-width: 100%;
    }
}

.stat-dilerom__text-center-container {
    position: relative;
    margin-top: 120px;
    margin-bottom: 64px;
    z-index: 1;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__text-center-container {
        margin-top: 113px;
        margin-bottom: 48px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__text-center-container {
        margin-top: 154px;
        margin-bottom: 67px;
    }
}

.stat-dilerom__text-center-fon {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 200px;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    opacity: 0.1;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__text-center-fon {
        font-size: 108px;
        line-height: 185%;
        font-variation-settings: "wdth" 121, "wght" 700, "slnt" -6;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__text-center-fon {
        font-size: 100px;
        line-height: 160%;
        top: -100px;
        width: 70%;
        word-break: break-word;
    }
}

@media screen and (max-width: 365px) {
    .stat-dilerom__text-center-fon {
        width: 80%;
    }
}

.stat-dilerom__text-center-content {
    width: 672px;
    margin: auto;
    color: #fff;
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.01em;
    text-align: center;
    text-shadow: 0 0 8px 0 #000;
    /* font-variation-settings: "wdth" 150, "wght" 500, "slnt" -6; */

    /* Variable font settings */
    font-optical-sizing: none;
    font-variation-settings:
        "wght" 500,   /* Weight */
        "wdth" 150,   /* Width */
        "slnt" -6,    /* Slant */
        "opsz" 20;    /* Optical size */
}

@media screen and (max-width: 767px) {
    .stat-dilerom__text-center-content {
        font-size: 16px;
        line-height: 125%;
        padding: 0 24px;
        width: 100%;
    }
}

.stat-dilerom__text-center-content p {
    margin: 16px 0;
}

.stat-dilerom__text-center-content.js-letter-reveal .stat-dilerom__text-letter {
    color: #7a7f86;
    transition: color 0.55s ease;
}

.stat-dilerom__text-center-content.js-letter-reveal.is-visible .stat-dilerom__text-letter {
    color: #ffffff;
}

.front-page__categories-list__stat-dilerom {
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    .front-page__categories-list__stat-dilerom {
        margin-top: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
}

.front-page__categories-list__stat-dilerom .front-page__categories-list-title{
    width: 340px;
    line-height: 121%;
}

@media screen and (max-width: 1023px) {
    .front-page__categories-list__stat-dilerom .front-page__categories-list-title {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list__stat-dilerom .front-page__categories-list-title {
        width: 176px;
        font-size: 14px;
        line-height: 150%;
    }
}

.front-page__categories-list__stat-dilerom .front-page__categories-list-description {
    width: 300px;
}

.front-page__categories-list__stat-dilerom .front-page__categories-list-description p {
    margin: 12px 0;
}

.front-page__categories-list__stat-dilerom .front-page__categories-list-button {
    display: none;
}

.front-page__categories-list__stat-dilerom .front-page__product-category-list-img {
    left: 51%;
}

@media screen and (max-width: 1023px) {
    .front-page__categories-list__stat-dilerom .front-page__product-category-list-img {
        left: 21%;
        min-width: 310px;
        width: 310px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list__stat-dilerom .front-page__product-category-list-img {
        left: 56%;
        min-width: 200px;
        width: 200px;
        bottom: -5px;
    }
}

.front-page__categories-list__stat-dilerom a {
    height: 370px;
    padding-left: 32px;
    padding-right: 32px;
}

@media screen and (max-width: 1023px) {
    .front-page__categories-list__stat-dilerom a {
        height: 540px;
        padding-left: 32px;
        padding-top: 40px;
    }
}

@media screen and (max-width: 767px) {
    .front-page__categories-list__stat-dilerom a {
        height: 140px;
        padding-left: 20px;
        padding-top: 24px;
    }
}

.front-page__categories-list__stat-dilerom a:hover .front-page__product-category-list-img {
    transform: translateX(-15%) scale(1.05) translateY(-10px);
}

@media screen and (max-width: 1023px) {
    .front-page__categories-list__stat-dilerom a:hover .front-page__product-category-list-img {
        transform: translateX(-7%) scale(1.05) translateY(-10px);
    }
}

.stat-dilerom__portfolio-title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 44px;
    line-height: 127%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #fff;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__portfolio-title {
        font-size: 36px;
        line-height: 111%;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__portfolio-title {
        font-size: 32px;
        line-height: 113%;
    }
}

.stat-dilerom__portfolio-container {
    padding-top: 64px;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__portfolio-container {
        padding-top: 75px;
    }
}

.stat-dilerom__clients-container-content {
    position: relative;
    height: 706px;
    width: 100%;
    border-radius: 32px;
    background: var(--color-brand);
    color: #fff;
    padding: 88px 64px;
    margin: 190px 0;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-container-content {
        padding: 56px 32px;
        height: 816px;
        margin-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-container-content {
        padding: 24px 20px;
        border-radius: 24px;
        height: auto;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.stat-dilerom__clients-container-content form {
    color: #000;
}

.stat-dilerom__clients-title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 700;
    font-size: 44px;
    line-height: 127%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    width: 500px;
    z-index: 2;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-title {
        font-size: 36px;
        line-height: 111%;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-title {
        font-size: 24px;
        line-height: 117%;
        width: 100%;
    }
}

.stat-dilerom__clients-content {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-top: 8px;
    z-index: 2;
    position: relative;
    width: 621px;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-content {
        font-size: 28px;
        line-height: 121%;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-content {
        font-size: 20px;
        line-height: 120%;
    }
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-title,
    .stat-dilerom__clients-content {
        width: 100%;
    }
}

.stat-dilerom__clients-container {
    position: relative;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-container {
        margin-bottom: 540px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-container {
        margin-bottom: 0;
    }
}

.stat-dilerom__clients-form {
    position: absolute;
    right: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    border-radius: 32px;
    padding: 32px;
    width: 556px;
    height: max-content;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-form {
        /* top: calc(646px + 56px); */
        position: relative;
        margin-top: 44px;
        z-index: 1;
        top: 0;

        width: 100%;
        right: 0;
        left: 0;

        margin-left: 0;
        margin-right: 0;
        margin-top: 56px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-form {
        width: 100%;
        /* top: 817px; */
        padding: 20px;
        padding-bottom: 0;
        border-radius: 24px;

        position: relative;
        margin-top: 44px;
        z-index: 1;
        top: 0;
        left: -20px;
        width: calc(100% + 40px);
    }
}


.stat-dilerom__clients-container-content-fon {
    position: absolute;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 1023px) {
    .stat-dilerom__clients-container-content-fon {
        top: 120px;
        right: 24px;
        left: auto;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-container-content-fon {
        width: 160px;
        top: 103px;
        right: 18px;
    }
}

.form__stat-dilerom__social {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 129%;
    letter-spacing: -0.01em; 
    color: #000;
}

.form__stat-dilerom__social-container {
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding-top: 16px;
    margin-bottom: 16px;
}

.stat-dilerom__clients-form .fluentform .ff-btn-submit {
    min-width: 213px !important;
    max-width: 213px !important;
}

@media screen and (max-width: 1023px) {
    .front-page__categories-list__stat-dilerom .front-page__categories-list-description {
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    .stat-dilerom__clients-form button {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 16px;
    }
}

.home-page__seo-tekst {
    margin-top: 64px;
    color: var(--color-secondary);
}

/* Текстовые старницы */
.text-page__text-image {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;
}

@media screen and (max-width: 767px) {
    .text-page__text-image {
        flex-direction: column;
        gap: 16px;
    }
}

.text-page__text-image_image {
    width: 557px;
    display: flex;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    min-height: 100%;
}

@media screen and (max-width: 1023px) {
    .text-page__text-image_image {
        width: 228px;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-image_image {
        width: 100%;
        height: 191px;
    }
}

.text-page__text-image_image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 767px) {
    .text-page__text-image_image img {
        border-radius: 24px;
        position: static;
    }
}

.text-page__text-image_text {
    width: 632px;
}

@media screen and (max-width: 1023px) {
    .text-page__text-image_text {
        font-size: 14px;
        line-height: 129%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-image_text {
       width: 100%;
    }
}

.text-page__text-image_text p + p {
    margin-top: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
}

.text-page__text-image_text strong,
.text-page__textovoe-pole strong {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 900;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;

        /* Variable font settings */
        font-optical-sizing: none;
        font-variation-settings:
            "wght" 900,   /* Weight */
            "wdth" 110,   /* Width */
            "slnt" -6,    /* Slant */
            "opsz" 20;    /* Optical size */
}

@media screen and (max-width: 1023px) {
    .text-page__text-image_text strong,
    .text-page__textovoe-pole strong {
        font-weight: 700;
        font-variation-settings:
            "wght" 700,   /* Weight */
            "wdth" 110,   /* Width */
            "slnt" -6,    /* Slant */
            "opsz" 20;    /* Optical size */
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-image_text strong,
    .text-page__textovoe-pole strong {
        font-size: 16px;
        line-height: 125%;
    }
}

.text-page__text-image_text a,
.text-page__textovoe-pole a {
    color: var(--color-brand);
    text-decoration: underline;
}

.text-page__text-image_text a:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
}

.text-page__banner,
.text-page__text-image,
.text-page__text-block,
.text-page__textovoe-pole {
    margin: 64px 0;
}

@media screen and (max-width: 1023px) {
    .text-page__banner,
    .text-page__text-image,
    .text-page__text-block,
    .text-page__textovoe-pole {
        margin: 32px 0;
    }
}

.text-page__banner {
    background: var(--color-fon-contrast);
    border-radius: 44px;
    padding: 48px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;
    position: relative;
}

@media screen and (max-width: 1023px) {
    .text-page__banner {
        border-radius: 32px;
    }
}

@media screen and (max-width: 767px) {
    .text-page__banner {
        padding: 32px;
        flex-direction: column;
        gap: 16px;
    }
}

.text-page__banner-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    width: 512px;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .text-page__banner-title {
        font-size: 28px;
        line-height: 121%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__banner-title {
        font-size: 24px;
        line-height: 117%;
        width: 100%;
    }
}

.text-page__banner-content {
    width: 624px;
}

@media screen and (max-width: 1023px) {
    .text-page__banner-content {
        font-size: 14px;
        line-height: 129%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__banner-content {
        width: 100%;
    }
}

.text-page__banner-content p:not(:first-child),
.text-page__text-block__right-content p:not(:first-child),
.text-page__text-block-content p:not(:first-child),
.text-page__textovoe-pole p:not(:first-child) {
    margin-top: 12px;
    line-height: 138%;
    letter-spacing: -0.01em;
}

.text-page__banner-content a,
.text-page__text-block__right-content a,
.text-page__text-block-content a,
.text-page__textovoe-pole a {
    color: var(--color-brand);
    text-decoration: underline;
}

.text-page__banner-content a:hover,
.text-page__text-block__right-content a:hover,
.text-page__text-block-content a:hover,
.text-page__textovoe-pole a:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
}

.text-page__banner-title span {
    color: var(--color-brand);
}

.text-page__banner-svg {
    position: absolute;
    bottom: -35px;
    left: 278px;
}

@media screen and (max-width: 1023px) {
    .text-page__banner-svg {
        bottom: -20px;
        left: 32px;
    }
}

@media screen and (max-width: 767px) {
    .text-page__banner-svg {
        top: 112px;
        bottom: 0;
        left: 45px;
    }
}

.text-page__text-block {
    display: flex;
    gap: 16px;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block {
        flex-direction: column;
        gap: 32px;
    }
}

.text-page__text-block-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block-title {
        font-size: 28px;
        line-height: 121%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-block-title {
        font-size: 24px;
        line-height: 117%;
    }
}

.text-page__text-block-content {
    margin-top: 24px;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block-content {
        margin-top: 16px;
        font-size: 14px;
    }
}

.text-page__text-block__right,
.text-page__text-block__left {
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__right,
    .text-page__text-block__left {
        width: 100%;
    }
}

.text-page__text-block__left {
    padding-right: 116px;
}

@media screen and (max-width: 1360px) {
    .text-page__text-block__left {
        padding-right: 16px;
    }
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__left {
        padding-right: 0;
    }
}

.text-page__text-block__right-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 133%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__right-title {
        font-size: 22px;
        line-height: 120%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-block__right-title {
        font-size: 20px;
        line-height: 125%;
    }
}

.text-page__text-block__right {
    border-radius: 32px;
    padding: 44px 200px 44px 44px;
    background: var(--color-gray-lite);
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__right {
        padding: 32px;
        border-radius: 24px;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-block__right {
        padding: 32px;
        padding-bottom: 120px;
    }
}

.text-page__text-block__right-content {
    margin-top: 24px;
    width: 388px;
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__right-content {
        width: 448px;
        font-size: 14px;
        line-height: 129%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-block__right-content {
        width: 100%;
    }
}

.text-page__text-block__right-image {
    position: absolute;
    right: 23px;
    top: 14px;
}

@media screen and (max-width: 1360px) {
    .text-page__text-block__right-image {
        right: -5px;
        top: -18px;
    }
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__right-image {
        right: 23px;
    top: 14px;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-block__right-image {
        right: 24px;
        bottom: -36px;
        top: auto;
    }
}

.text-page__text-block__right-image img {
    width: 200px;
    height: 200px;
}

@media screen and (max-width: 1360px) {
    .text-page__text-block__right-image img {
        width: 160px;
        height: 160px;
    }
}

@media screen and (max-width: 1023px) {
    .text-page__text-block__right-image img {
        width: 200px;
        height: 200px;
    }
}

@media screen and (max-width: 767px) {
    .text-page__text-block__right-image img {
        width: 160px;
        height: 160px;
    }
}


.text-page__container div:first-child {
    margin-top: 0;
}

.text-page__textovoe-pole-content h1,
.text-page__textovoe-pole-content h2,
.text-page__textovoe-pole-content h3,
.text-page__textovoe-pole-content h4,
.text-page__textovoe-pole-content h5 {
    font-family: var(--font-exo2);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.text-page__textovoe-pole-content h2 {
    font-size: 24px;
    line-height: 133%;
}

@media screen and (max-width: 1023px) {
    .text-page__textovoe-pole-content h2 {
        font-size: 22px;
        line-height: 120%;
    }
}

@media screen and (max-width: 767px) {
    .text-page__textovoe-pole-content h2 {
        font-size: 20px;
        line-height: 120%;
    }
}

/* Подзаголовок внутри текстового блока — ступенькой ниже h2, с воздухом от предыдущего абзаца */
.text-page__textovoe-pole-content h3 {
    font-size: 20px;
    line-height: 130%;
    margin-top: 32px;
}

@media screen and (max-width: 767px) {
    .text-page__textovoe-pole-content h3 {
        font-size: 18px;
        margin-top: 24px;
    }
}


.manuals-section__content {
    background: var(--color-gray);
    border-radius: 20px;
    padding: 24px;
    margin-top: 40px;
    display: flex;
    gap: 40px;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .manuals-section__content {
        flex-direction: column;
        gap: 24px;
    }
}

.manuals-section__content-image-icon {
    width: 200px;
    height: auto;
}

.manuals-section__content-text {
    font-size: 14px;
    line-height: 129%;
}

.manuals-section__content-text a {
    color: var(--color-brand);
}


/* Новости */
.blog-list {

}

.blog-list-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.blog-card {
    padding: 8px;
    border-radius: 24px;
    padding-right: 16px;
    transition: background 0.3s ease;
}

.blog-card:hover {
    background: var(--fon-gray-lite);
}

.blog-card__link {
    display: flex;
    gap: 24px;
}

@media screen and (max-width: 767px) {
    .blog-card__link {
        flex-direction: column;
        gap: 12px;
    }
}

.blog-card__image {
    flex-shrink: 0;
}

.blog-card__image img {
    border-radius: 16px;
    width: 328px;
    /* height: 188px; */
    object-fit: cover;
    display: block;
}

.blog-card__image--empty {
    border-radius: 16px;
    width: 328px;
    aspect-ratio: 328 / 188;
    background: var(--color-gray);
}

@media screen and (max-width: 767px) {
    .blog-card__image img {
        width: 100%;
        /* height: 280px; */
    }

    .blog-card__image--empty {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

@media screen and (max-width: 500px) {
    .blog-card__image img {
        /* height: 188px; */
    }
}

.blog-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 12px;
}

.blog-card__content {
    color: #000;
}

.blog-card__title {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-weight: 600;
    font-size: 24px;
    line-height: 117%;
    letter-spacing: -0.01em;
    color: var(--text---primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .blog-card__title {
        font-size: 20px;
        line-height: 120%;
    }
}

.blog-card__excerpt {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-secondary);
    margin-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.blog-card__date {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-secondary);
}

.blog-list-container {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.blog-list-list {
    flex: 1 1 0;
    min-width: 0;
    max-width: 787px;
}

.blog-sidebar {
    position: sticky;
    top: 100px;
    height: max-content;
    width: 443px;
}

.blog-sidebar--inline-mobile {
    display: none;
}

.blog-sidebar__form {
    background: var(--color-fon-contrast);
    border-radius: 24px;
    padding: 24px;
    padding: 32px;
    color: #fff;
    position: relative;
}

.blog-sidebar__form-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.blog-sidebar__form-title span {
    color: var(--color-brand);
    display: block;
}

@media screen and (max-width: 1023px) {
    .blog-sidebar__form-title span {
        display: inline-block;
    }

    /* .blog-sidebar__form-fields {
        width: 453px;
        position: relative;
        z-index: 1;
    } */
}

.blog-sidebar__form-description {
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    color: var(--color-white);
    margin-top: 16px;
    margin-bottom: 32px;
}

@media screen and (max-width: 1023px) {
    .blog-sidebar__form-description {
        margin-top: 8px;
        margin-bottom: 16px;
    }
}

.blog-list-container > .woocommerce-pagination {
    flex-basis: 100%;
    order: 10;
    margin-top: 24px;
}

@media screen and (max-width: 1199px) {
    .blog-list-container {
        display: block;
    }

    .blog-sidebar--desktop {
        display: none;
    }

    .blog-sidebar--inline-mobile {
        display: block;
        position: static;
        width: calc(100% - 16px);
        margin: 8px;
    }
}

@media screen and (max-width: 768px) {
    .blog-sidebar--inline-mobile {
        width: 100% ;
        margin: 8px 0;
    }
}

.blog-sidebar__bg {
    margin-top: 16px;
}

@media screen and (max-width: 1023px) {
    .blog-sidebar__bg {
        position: absolute;
        top: 0;
        bottom: 0;
        right: -70px;
        width: 300px;
        margin: auto;
    }
}

@media screen and (min-width: 1024px) {
    .blog-sidebar__form .fluentform .ff-el-group.ff-el-input--content {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }
}

/* @media screen and (max-width: 1023px) {
    .blog-sidebar__form .fluentform .ff-el-group.ff-el-input--content {
        grid-column: span 2;
        margin-top: 0 !important;
    }
} */

.blog-sidebar__form .fluentform button {
    width: max-content !important;
    min-width: max-content !important;
}

/* @media screen and (max-width: 1023px) {
    .blog-sidebar__form-fields form fieldset {
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr max-content;
    }

    .blog-sidebar__form-fields .fluentform .ff-el-group {
        margin-bottom: 0 !important;
    }
} */

.single-news__video {
    margin-bottom: 24px;
}

.single-news__video-link {
    margin-top: 15px;
}

.single-news__content-block-text {
    font-family: var(--font-tiktok-sans);
    font-style: italic;
    font-size: 16px;
    line-height: 125%;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-secondary);
}

.single-news__content-block-with-text {
    margin-bottom: 24px;
}

.not-photo-mt {
    margin-top: 0 !important;
    padding-top: 60px !important;
}

/* ===================== Motors-style шапка (чёрный топбар + красный скошенный нав) ===================== */
.header {
    /* Сам хедер прозрачный — чёрная подложка только у верхней строки (.header-topbar),
       ряд с красным меню лежит прямо на контенте/hero */
    background: transparent !important;
    transform: none;
    left: 0;
    box-shadow: none;
}
/* Чёрная полоса во весь экран — только над красным меню (строка лого + иконки) */
.header-topbar {
    background: #101820;
    width: 100%;
}
.header-active {
    top: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    background-color: transparent !important;
    box-shadow: none;
}
.header-container {
    max-width: 1416px;
    margin: 0 auto;
    align-items: center;
    /* Фиксированная компактная высота чёрной полосы (как после скролла) */
    padding-top: 8px;
    padding-bottom: 8px;
}
@media (min-width: 640px) {
    .header-container { align-items: center; }
}

/* Красный скошенный нав-бар */
.header-navbar {
    position: relative;
    z-index: 2;
    padding: 0 12px 8px;
}
.header-navbar__inner {
    max-width: 1416px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    padding: 0 40px;
}
/* Красная скошенная плашка — фоном на псевдоэлементе, чтобы clip-path не резал выпадающее мега-меню */
.header-navbar__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand);
    /* Скос в РАЗНЫЕ стороны: левый край \, правый край / (трапеция шире сверху) */
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
    z-index: -1;
}
.header-navbar .desktop-menu { display: block; }
.header-navbar .header-menu-list {
    justify-content: center;
    gap: 2px;
    color: #fff;
}
.header-navbar .header-menu-list > li > a {
    font-family: var(--font-exo2);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 14px;
    color: #fff;
    padding: 15px 18px;
    border-radius: 0;
}
.header-navbar .header-menu-list > li > a:hover {
    background: rgba(0,0,0,0.18);
}
.header-navbar .header-menu-list > li.current_page_item > a,
.header-navbar .header-menu-list > li.current_page_item > a:hover {
    background: rgba(0,0,0,0.25);
}
@media (max-width: 1279px) {
    .header-navbar { display: none; }
}


/* ===== Motors-стиль: красный скошенный таб на заголовке категории ===== */
.front-page__categories-list-title {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 8px 20px 9px;
    margin-left: -8px;
    color: #fff;
    line-height: 1.02;
    font-size: 26px;
}
@media (max-width: 767px) {
    .front-page__categories-list-title { font-size: 18px; padding: 6px 14px; }
}
.front-page__categories-list-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand);
    transform: skew(-14deg);
    transform-origin: bottom left;
    z-index: -1;
    box-shadow: 0 8px 20px -8px rgba(176, 40, 46, 0.55);
}
.front-page__categories-list a:hover .front-page__categories-list-title { color: #fff; }
.front-page__categories-list a:hover .front-page__categories-list-title::before { background: var(--color-brand-dark); }

/* ===== Motors точь-в-точь: картинка на всю карточку + только таб, без описаний ===== */
.front-page__categories-list a {
    height: 380px;
    padding: 0;
    background-color: #171d1f;
    border: 1px solid rgba(255,255,255,0.05);
}
@media (max-width: 1023px) {
    .front-page__categories-list a { height: 380px; padding: 0; display: block; }
}
@media (max-width: 767px) {
    .front-page__categories-list a { height: 220px; }
}
/* Прячем описание и круглую кнопку-стрелку */
.front-page__categories-list-description,
.front-page__categories-list-button { display: none !important; }

/* Скетч-фон каждой категории убираем — оставляем только фото товара на тёмном */
.front-page__categories-list-img-bg {
    display: none !important;
}

/* Товар (вырезанный мотоцикл) — крупно по центру карточки */
.front-page__product-category-list-img {
    width: auto;
    height: 82%;
    max-width: 94%;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    object-fit: contain;
    opacity: 1;
    z-index: 1;
}
@media (max-width: 1023px) {
    .front-page__product-category-list-img { min-width: 0; height: 78%; left: 50%; }
}
@media (max-width: 767px) {
    .front-page__product-category-list-img { min-width: 0; height: 74%; left: 50%; }
}
.front-page__categories-list a:hover .front-page__product-category-list-img,
.front-page__categories-list a:hover .front-page__product-category-list-img {
    transform: translateX(-50%) scale(1.06) translateY(-6px);
}

/* Затемнение сверху — чтобы таб читался поверх картинки */
.front-page__categories-list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 42%;
    background: linear-gradient(to bottom, rgba(23,37,48,0.72), rgba(23,37,48,0));
    z-index: 1;
    pointer-events: none;
}
/* Ховер карточки: не заливаем красным, только лёгкий подъём */
.front-page__categories-list a:hover { background-color: #1c2325; }

/* Контент-обёртка не мешает клику по всей карточке */
.front-page__categories-list-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
/* Название — красный скошенный таб сверху слева (как на референсе Motors) */
.front-page__categories-list-title {
    position: absolute;
    left: 24px;
    top: 24px;
    width: auto;
    max-width: calc(100% - 48px);
    margin: 0;
    z-index: 2;
}
@media (max-width: 767px) {
    .front-page__categories-list-title { left: 14px; top: 14px; }
}

/* Заголовок секции «КАТАЛОГ» */
/* Заголовок каталога — в едином стиле с .front-page__popular-motorcycles-title
   (32px / 700 / Exo 2 / uppercase / letter-spacing -0.01em). Цвет белый — фон блока тёмный. */
.front-page__categories-heading {
    color: #fff;
    font-family: var(--font-exo2, "Exo 2", sans-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding-top: 56px;
}
@media (max-width: 1023px) {
    .front-page__categories-heading { font-size: 28px; }
}
@media (max-width: 767px) {
    .front-page__categories-heading { font-size: 24px; padding-top: 36px; }
}

/* ============ Motors-стиль: плоский дизайн — убираем скругления по всему сайту ============ */
:is(a, button, input, select, textarea, label, form,
    div, section, article, aside, header, footer, nav, main, span,
    ul, ol, li, table, td, th, img, picture, figure, video, iframe,
    .btn, .card, .icon-button) {
    border-radius: 0 !important;
}
/* Точечно — компоненты со своим !important-скруглением */
.gmotor-checkout-form__input,
#menu-mobilnoe-menyu .sub-menu-open .sub-menu a,
.compare-page__categories--dropdown-only,
.ymaps-2-1-79-balloon__layout,
.ff-el-input--content textarea,
.ff-el-input--content input { border-radius: 0 !important; }

/* ===================== Motors-стиль карточки товара ===================== */
/* Скрываем верхние бейджи (New/категория) и кнопку сравнения — оставляем только «В корзину» */
.product-card .product-card__header { display: none !important; }
.product-card .product-card__btns .product-card__btn-wishlist { display: none !important; }
/* Убираем фоновый шеврон-водяной знак для чистого вида (Motors) */
.product-card .product-card__image-container > svg.card-bg-svg { display: none !important; }

/* Оранжевая акцентная линия под фото (Motors) */
.product-card .product-card__image-container {
    position: relative;
    padding-bottom: 12px;
    border-bottom: 3px solid #F5821F;
    margin-bottom: 6px;
    overflow: visible;
}

/* Ценник — красный скошенный флажок в правом нижнем углу фото */
.product-card .product-card__image-container .popular-motorcycle-card__price {
    position: absolute;
    right: -14px;
    bottom: -13px;
    z-index: 5;
    height: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 7px 18px 8px;
    background: var(--color-brand);
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: 0 8px 18px -6px rgba(0,0,0,0.55);
}
.product-card .product-card__image-container .popular-motorcycle-card__price .popular-motorcycle-card__price-sale {
    color: #fff !important;
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 18px;
    white-space: nowrap;
}
.product-card .product-card__image-container .popular-motorcycle-card__price .popular-motorcycle-card__price-old {
    color: rgba(255,255,255,0.72);
    font-size: 12px;
    font-weight: 600;
    text-decoration: line-through;
    white-space: nowrap;
}

/* Заголовок — прямой (не курсив) жирный, как в шаблоне */
.product-card .popular-motorcycle-card__title {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 19px;
    text-transform: none;
    margin-top: 6px;
}

/* Чтобы флажок не наезжал на свотчи цвета */
.product-card .product-card-color-dots { margin-top: 10px; }

/* ===== #5/#6: карта переходит сразу в соцсети, соцсети на чёрном фоне ===== */
/* Карта: убираем большие отступы (был margin 120px), чтобы не было белой полосы после карты */
.retail-network { margin: 32px 0 0 !important; }

/* Заголовок блока точек продаж — в едином стиле с «Каталог» и «Популярные модели» */
.retail-network__title {
    font-family: var(--font-exo2);
    font-size: 32px;
    font-weight: 700;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 32px;
}

/* Блок карты по умолчанию подтянут вверх (margin-top: -24px) — на главной он
   съедал отступ под заголовком, поэтому здесь наезд снимаем. */
.retail-network .retail-network__map {
    margin-top: 0;
}

@media (max-width: 1023px) {
    .retail-network__title {
        font-size: 28px;
        margin-bottom: 24px;
    }
}

@media (max-width: 767px) {
    .retail-network__title {
        font-size: 24px;
        margin-bottom: 20px;
    }
}
/* Соцсети: убираем картинку-баннер, контент выводится на чёрном фоне блока */
.social-networks-container > img { display: none !important; }
.social-networks-container { position: relative; }
.social-networks-content {
    position: static;
    padding: 8px 0 56px;
}
.social-networks-content__title,
.social-networks-content__description { color: #fff; }
@media (max-width: 1023px) {
    .social-networks-content { padding: 24px 0 48px; }
}

/* Булиты слайдера фото — над картинкой (чтобы не пересекались с ценником/линией/свотчами) */
.product-card .product-card__image-container { margin-top: 54px; }
.product-card .product-card-pagination {
    top: -40px;
    bottom: auto;
    height: 10px;
    align-items: flex-start;
}
.product-card .product-card-pagination > div { height: 10px; }
.product-card .product-card-pagination > div::before {
    top: 0;
    bottom: auto;
}

/* ===================== Карусель брендов (Motors-стиль) ===================== */
.brands-carousel {
    background: var(--color-primary-dark);
    width: 100%;
    overflow: hidden;
    padding: 22px 0;
    /* Обнуляем общий отступ section { margin:120px 0 } — иначе полоса брендов уезжает ниже экрана */
    margin: 0 !important;
    position: relative;
    z-index: 5;
}
.brands-carousel__viewport {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands-carousel__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: brands-marquee 38s linear infinite;
}
.brands-carousel:hover .brands-carousel__track { animation-play-state: paused; }
.brands-carousel__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 46px;
    min-width: 150px;
    height: 64px;
}
/* Бренд со ссылкой из ACF — тот же элемент, только кликабельный */
a.brands-carousel__item {
    text-decoration: none;
    color: inherit;
}
.brands-carousel__logo {
    max-height: 46px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.72;
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.brands-carousel__item:hover .brands-carousel__logo {
    filter: none;
    opacity: 1;
}
.brands-carousel__text {
    font-family: var(--font-exo2, "Exo 2", sans-serif);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    transition: color 0.3s ease;
}
.brands-carousel__item:hover .brands-carousel__text { color: #fff; }
@keyframes brands-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 767px) {
    .brands-carousel { padding: 16px 0; }
    .brands-carousel__item { padding: 0 28px; min-width: 110px; height: 48px; }
    .brands-carousel__text { font-size: 20px; }
    .brands-carousel__logo { max-height: 34px; max-width: 110px; }
}

/* ===================== Футер — стиль новой темы Motors (чёрный фон) ===================== */
.footer {
    background-color: #0e1315 !important;
    border-top: none;
    color: #9aa1a6;
}
.footer-products {
    background-color: #0a0e10 !important;
}

/* Левая колонка: логотип + описание + соцсети — шире */
@media (min-width: 1024px) {
    .footer-logo-social { grid-column: span 4; }
    .footer-menu { grid-column: span 6; }
}

/* Текстовый блок слева */
.footer-about { margin-top: 22px; }
.footer-about__title {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}
.footer-about__title span { color: var(--color-brand); }
.footer-about__text {
    font-size: 14px;
    line-height: 1.7;
    color: #9aa1a6;
    max-width: 340px;
}

/* Заголовки разделов */
.footer-menu-title {
    color: #fff !important;
    font-family: var(--font-exo2) !important;
    font-style: normal !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Ссылки-разделы с chevron-буллитом (Motors) */
.footer-menu-list a {
    color: #9aa1a6 !important;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    transition: color 0.25s ease;
}
.footer-menu-list a::before {
    content: "";
    width: 6px;
    height: 10px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.footer-menu-list a:hover {
    color: var(--color-brand) !important;
}

/* Убираем затемнение/градиент в нижней части главного экрана (hero) */
.front-page__main-container__box-shadow { display: none !important; }
@media screen and (max-width: 767px) {
    .video-bg::before { display: none !important; }
}

/* Соцсети в футере — тёмные квадраты с рамкой */
.footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.14);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}
.footer .social-links a:hover {
    border-color: var(--color-brand);
    background-color: rgba(222,30,38,0.12);
}

/* ======================================================================
   Страница «Сервис и гарантия» (page-servis-i-garantiya.php) — тёмная тема
   в стиле Motors, по образцу страницы «О бренде» (.about-page).
   Hero с фоновым фото убран, H1 выводится в первом блоке страницы.
   Все правила скоуплены в .service-page — общие классы .text-page__*
   на других страницах не затрагиваются.
   ====================================================================== */

.service-page {
    /* Локальные токены тёмной темы страницы */
    --service-bg: #0e1315;
    --service-surface: #171d1f;
    --service-line: rgba(255, 255, 255, 0.12);
    --service-muted: #a7b0b3;

    background-color: var(--service-bg);
    color: var(--color-white);
    /* Шапка сайта — position: fixed. Раньше её высоту компенсировал hero,
       теперь (hero убран) отступ задаёт сама страница. */
    padding-top: var(--header-height);
    padding-bottom: 72px;
}

/* Футер примыкает вплотную — белый зазор на тёмной странице читался бы полосой */
.service-page + .footer {
    margin-top: 0;
}

/* --- Ритм блоков страницы --- */
.service-page .text-page__text-image,
.service-page .text-page__banner,
.service-page .text-page__text-block,
.service-page .text-page__textovoe-pole,
.service-page .text-page__service-centers {
    margin: 56px 0;
}

@media (min-width: 768px) {
    .service-page .text-page__text-image,
    .service-page .text-page__banner,
    .service-page .text-page__text-block,
    .service-page .text-page__textovoe-pole,
    .service-page .text-page__service-centers {
        margin: 80px 0;
    }
}

@media (min-width: 1024px) {
    .service-page .text-page__text-image,
    .service-page .text-page__banner,
    .service-page .text-page__text-block,
    .service-page .text-page__textovoe-pole,
    .service-page .text-page__service-centers {
        margin: 104px 0;
    }
}

/* Воздух между шапкой и первым блоком */
.service-page .text-page__container > *:first-child {
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .service-page .text-page__container > *:first-child {
        margin-top: 56px;
    }
}

.service-page .text-page__container > *:last-child {
    margin-bottom: 0;
}

/* --- Заголовок страницы (H1, перенесён из hero в первый блок) --- */
.service-page__title {
    position: relative;
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--service-line);
    margin: 0 0 24px;
}

@media (min-width: 640px) {
    .service-page__title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .service-page__title {
        font-size: 46px;
        padding-bottom: 24px;
        margin-bottom: 28px;
    }
}

/* Красный сегмент на hairline — фирменный акцент */
.service-page__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

.service-page__title span {
    color: var(--color-brand);
}

/* --- Общий паттерн заголовка блока: uppercase + hairline + красный сегмент --- */
.service-page .text-page__text-block-title,
.service-page .text-page__textovoe-pole-content h2,
.service-page .service-centers__title {
    position: relative;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--service-line);
}

@media (min-width: 1024px) {
    .service-page .text-page__text-block-title,
    .service-page .text-page__textovoe-pole-content h2,
    .service-page .service-centers__title {
        font-size: 28px;
        padding-bottom: 18px;
    }
}

.service-page .text-page__text-block-title::after,
.service-page .text-page__textovoe-pole-content h2::after,
.service-page .service-centers__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background-color: var(--color-brand);
}

.service-page .text-page__text-block-title span,
.service-page .text-page__textovoe-pole-content h2 span,
.service-page .service-centers__title span {
    color: var(--color-brand);
}

/* --- Общая типографика контента (Open Sans, приглушённый текст) --- */
.service-page .text-page__text-image_text,
.service-page .text-page__banner-content,
.service-page .text-page__text-block-content,
.service-page .text-page__text-block__right-content,
.service-page .text-page__textovoe-pole-content {
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: normal;
    color: var(--service-muted);
}

.service-page .text-page__text-image_text p + p,
.service-page .text-page__banner-content p:not(:first-child),
.service-page .text-page__text-block-content p:not(:first-child),
.service-page .text-page__text-block__right-content p:not(:first-child),
.service-page .text-page__textovoe-pole-content p:not(:first-child) {
    margin-top: 14px;
    line-height: 1.65;
    letter-spacing: normal;
}

/* Выделенный абзац — лид: белый, чуть крупнее, без курсива (был TikTok Sans italic) */
.service-page .text-page__text-image_text strong,
.service-page .text-page__banner-content strong,
.service-page .text-page__text-block-content strong,
.service-page .text-page__text-block__right-content strong,
.service-page .text-page__textovoe-pole-content strong {
    font-family: var(--font-manrope);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: normal;
    color: var(--color-white);
    font-optical-sizing: auto;
    font-variation-settings: normal;
}

@media (min-width: 640px) {
    .service-page .text-page__text-image_text strong,
    .service-page .text-page__banner-content strong,
    .service-page .text-page__textovoe-pole-content strong {
        font-size: 17px;
    }
}

.service-page .text-page__textovoe-pole-content em,
.service-page .text-page__text-image_text em {
    font-style: italic;
}

/* Списки внутри контента */
.service-page .text-page__textovoe-pole-content ul li,
.service-page .text-page__text-block-content ul li,
.service-page .text-page__banner-content ul li {
    margin-bottom: 10px;
}

/* --- Блок 1: текст + фото --- */
.service-page .text-page__text-image {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

@media (min-width: 1024px) {
    .service-page .text-page__text-image {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: 56px;
    }
}

.service-page .text-page__text-image_text {
    width: auto;
    max-width: 68ch;
}

.service-page .text-page__text-image_image {
    position: relative;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    /* Красная линия под фото — тот же приём, что в блоках «О бренде» */
    border-bottom: 3px solid var(--color-brand);
}

.service-page .text-page__text-image_image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Блок 2: баннер-плашка (аналог карточки миссии на «О бренде») --- */
.service-page .text-page__banner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    background: var(--service-surface);
    border-left: 3px solid var(--color-brand);
    padding: 30px 24px;
    overflow: hidden;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .service-page .text-page__banner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 48px;
        padding: 44px 48px;
    }
}

.service-page .text-page__banner-title {
    width: auto;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .service-page .text-page__banner-title {
        font-size: 28px;
    }
}

.service-page .text-page__banner-content {
    width: auto;
    max-width: 74ch;
}

/* Водяной знак «711» — декор в свободном углу плашки, на мобильных скрыт */
.service-page .text-page__banner-svg {
    position: absolute;
    left: 48px;
    right: auto;
    top: auto;
    bottom: -14px;
    width: 220px;
    height: auto;
    pointer-events: none;
}

@media (max-width: 1023px) {
    .service-page .text-page__banner-svg {
        display: none;
    }
}

/* --- Блок 3: текст слева + плашка справа --- */
.service-page .text-page__text-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
}

@media (min-width: 1024px) {
    .service-page .text-page__text-block {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
    }
}

.service-page .text-page__text-block__left,
.service-page .text-page__text-block__right {
    width: auto;
    display: block;
}

.service-page .text-page__text-block__left {
    padding-right: 0;
}

.service-page .text-page__text-block-content {
    margin-top: 20px;
    max-width: 62ch;
}

.service-page .text-page__text-block__right {
    position: relative;
    background: var(--service-surface);
    border-top: 3px solid var(--color-brand);
    padding: 28px 24px;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .service-page .text-page__text-block__right {
        padding: 36px;
    }
}

/* Контент плашки — над водяным знаком */
.service-page .text-page__text-block__right-title,
.service-page .text-page__text-block__right-content {
    position: relative;
    z-index: 1;
}

.service-page .text-page__text-block__right-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .service-page .text-page__text-block__right-title {
        font-size: 24px;
    }
}

.service-page .text-page__text-block__right-content {
    width: auto;
    max-width: 48ch;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--service-line);
}

/* Иллюстрация в плашке — контурная графика на тёмном фоне читается только
   как водяной знак: инвертируем в белый и приглушаем. */
.service-page .text-page__text-block__right-image {
    position: absolute;
    right: 10px;
    top: auto;
    bottom: -12px;
    left: auto;
    z-index: 0;
    opacity: 0.14;
    filter: invert(1);
    pointer-events: none;
}

.service-page .text-page__text-block__right-image img {
    width: 190px;
    height: 190px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .service-page .text-page__text-block__right-image img {
        width: 140px;
        height: 140px;
    }
}

/* --- Блок 4: текстовое поле — на всю ширину контейнера --- */
.service-page .text-page__textovoe-pole-content {
    max-width: none;
}

.service-page .text-page__textovoe-pole-content h2 {
    margin-bottom: 22px;
}

.service-page .text-page__textovoe-pole-content h3,
.service-page .text-page__textovoe-pole-content h4,
.service-page .text-page__textovoe-pole-content h5 {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 26px 0 12px;
}

/* Ссылки в контенте — красные, подчёркнутые (как на «О бренде») */
.service-page .text-page__text-image_text a,
.service-page .text-page__banner-content a,
.service-page .text-page__text-block-content a,
.service-page .text-page__text-block__right-content a,
.service-page .text-page__textovoe-pole-content a {
    color: var(--color-brand);
    text-decoration: underline;
}

.service-page .text-page__text-image_text a:hover,
.service-page .text-page__banner-content a:hover,
.service-page .text-page__text-block-content a:hover,
.service-page .text-page__text-block__right-content a:hover,
.service-page .text-page__textovoe-pole-content a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* --- Блок «Сервисные центры»: карточки с режимом работы и контактами --- */
.service-page .service-centers__title {
    margin: 0;
}

.service-page .service-centers__lead {
    margin-top: 18px;
    max-width: 68ch;
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.65;
    color: var(--service-muted);
}

.service-page .service-centers__lead p {
    margin: 0;
}

.service-page .service-centers__lead p + p {
    margin-top: 14px;
}

.service-page .service-centers__grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .service-page .service-centers__grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 20px;
    }
}

.service-page .service-centers__card {
    padding: 24px 22px;
    background: var(--service-surface);
    /* Красная грань слева — тот же приём, что у баннера страницы */
    border-left: 3px solid var(--color-brand);
}

@media (min-width: 1024px) {
    .service-page .service-centers__card {
        padding: 30px 32px;
    }
}

.service-page .service-centers__card-name {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .service-page .service-centers__card-name {
        font-size: 20px;
    }
}

.service-page .service-centers__card-row {
    display: flex;
    /* Без переноса флекс-линий: длинный текст переносится внутри себя,
       а не срывается со строки, оставляя иконку одну (видно на узких экранах). */
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.5;
    color: var(--service-muted);
}

/* Режим работы отделён от названия волосяной линией */
.service-page .service-centers__card-row_hours {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--service-line);
}

.service-page .service-centers__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    /* Подгонка под первую строку текста рядом */
    margin-top: 3px;
    color: var(--color-brand);
}

.service-page .service-centers__card-link {
    font-weight: 600;
    overflow-wrap: anywhere;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-page .service-centers__card-link:hover {
    color: var(--color-brand);
}

/* Подпись рядом с номером — например имя менеджера */
.service-page .service-centers__card-note {
    flex-shrink: 0;
    padding: 2px 8px;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--service-muted);
    border: 1px solid var(--service-line);
}

/* ======================================================================
   Страницы «Точки продаж» — карта (page-spisok-dillerov-map.php) и список
   (page-spisok-dilerov-list.php) — тёмная тема в стиле Motors, по образцу
   страниц «О бренде» и «Сервис». Hero с фото убран, H1 и переключатель
   «Карта / Список» стоят над контентом.
   Все правила скоуплены в .dealers-page: компоненты dealers-map / dealers-list
   используются ещё и на главной, где блок остаётся светлым.
   ====================================================================== */

.dealers-page {
    /* Локальные токены тёмной темы страницы */
    --dealers-bg: #0e1315;
    --dealers-surface: #171d1f;
    --dealers-line: rgba(255, 255, 255, 0.12);
    --dealers-muted: #a7b0b3;
    --dealers-icon: #7f8a90;

    background-color: var(--dealers-bg);
    color: var(--color-white);
    /* Шапка сайта — position: fixed. Раньше её высоту компенсировал hero. */
    padding-top: var(--header-height);
    padding-bottom: 72px;
}

.dealers-page + .footer {
    margin-top: 0;
}

/* --- Шапка страницы: H1 + переключатель «Карта / Список» --- */
.dealers-page__head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--dealers-line);
}

@media (min-width: 1024px) {
    .dealers-page__head {
        padding-top: 56px;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }
}

/* Красный сегмент на hairline — фирменный акцент */
.dealers-page__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

.dealers-page__title {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

@media (min-width: 640px) {
    .dealers-page__title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .dealers-page__title {
        font-size: 46px;
    }
}

/* Переключатель «Карта / Список» — прямые табы вместо белой пилюли */
.dealers-page .hero-category {
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    width: max-content;
    max-width: 100%;
}

.dealers-page .hero-category__list-items {
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.dealers-page .hero-category a.category-item {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
    background-color: transparent;
    padding: 13px 28px;
}

.dealers-page .hero-category a.category-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.dealers-page .hero-category a.category-item.active {
    background-color: var(--color-brand);
    color: var(--color-white);
}

/* Контейнер контента: раньше подтягивался под hero — теперь отступ задаёт шапка */
.dealers-page .dealers-list-page {
    margin-top: 0;
    margin-bottom: 0;
}

/* Тот же тёмный вид — у блока «Розничная сеть» на главной (компонент общий) */
body.home .retail-network {
    --dealers-surface: #171d1f;
    --dealers-line: rgba(255, 255, 255, 0.12);
    --dealers-muted: #a7b0b3;
    --dealers-icon: #7f8a90;
}

/* --- Поиск --- */
:is(.dealers-page, body.home .retail-network) .dealers-list__search {
    margin-bottom: 20px;
}

:is(.dealers-page, body.home .retail-network) .dealers-list__search-input {
    width: 100%;
    padding: 14px 20px 14px 52px;
    background-color: var(--dealers-surface);
    border: 1px solid var(--dealers-line);
    color: var(--color-white);
    font-family: var(--font-manrope);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__search-input::placeholder {
    color: var(--dealers-icon);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__search-input:focus {
    outline: none;
    border-color: var(--color-brand);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__search-icon svg path {
    stroke: var(--dealers-icon);
}

/* --- Карточка точки продаж --- */
:is(.dealers-page, body.home .retail-network) .dealers-list__item {
    background-color: var(--dealers-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

:is(.dealers-page, body.home .retail-network) .dealers-list__item:hover {
    border-color: var(--color-brand);
    background-color: #1c2325;
}

:is(.dealers-page, body.home .retail-network) .dealers-list__item-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--color-white);
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* :not(...) — иначе это правило перебивает белый цвет заголовка карточки выше */
:is(.dealers-page, body.home .retail-network) .dealers-list__item > *:not(.dealers-list__item-title) {
    font-size: 14px;
    line-height: 1.45;
    color: var(--dealers-muted);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__item > a:hover {
    color: var(--color-white);
    text-decoration: none;
}

/* Контурные иконки нарисованы под светлый фон — перекрашиваем в приглушённый серый */
:is(.dealers-page, body.home .retail-network) .dealers-list__item-phone svg path,
:is(.dealers-page, body.home .retail-network) .dealers-list__item-email svg path,
:is(.dealers-page, body.home .retail-network) .dealers-list__item-address svg path {
    stroke: var(--dealers-icon);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__item-site {
    color: var(--color-brand);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__item-site:hover {
    color: var(--color-white);
}

:is(.dealers-page, body.home .retail-network) .dealers-list__empty {
    color: var(--dealers-muted);
}

/* --- Список по городам (страница «Список») --- */
.dealers-page .dealers-list__city-toggle {
    padding: 16px 0;
    border-bottom: 1px solid var(--dealers-line);
    transition: border-color 0.3s ease;
}

.dealers-page .dealers-list__city:not(.is-collapsed) .dealers-list__city-toggle {
    border-bottom-color: var(--color-brand);
}

.dealers-page .dealers-list__city-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
    transition: color 0.3s ease;
}

.dealers-page .dealers-list__city-toggle:hover .dealers-list__city-title {
    color: var(--color-brand);
}

.dealers-page .dealers-list__city-toggle-icon svg path {
    fill: var(--dealers-icon);
}

.dealers-page .dealers-list__items {
    margin-top: 16px;
    padding-bottom: 8px;
}

/* --- Карта --- */
:is(.dealers-page, body.home .retail-network) .dealers-map__map {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid var(--color-brand);
}

/* Скроллбар сайдбара был тёмным на тёмном фоне */
:is(.dealers-page, body.home .retail-network) .dealers-map__sidebar .dealers-list {
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

:is(.dealers-page, body.home .retail-network) .dealers-map__sidebar .dealers-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
}

:is(.dealers-page, body.home .retail-network) .dealers-map__sidebar .dealers-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
    .dealers-page__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .dealers-page .hero-category a.category-item {
        padding: 12px 22px;
    }
}

/* ======================================================================
   Главная: два последних светлых блока («Популярные модели» и «Розничная
   сеть») переведены на тёмную подложку — страница стала цельной.
   Карточка товара: фото всегда на белой подложке, остальное тёмное.
   Скоуп body.home — в каталоге карточки остаются светлыми.
   ====================================================================== */

body.home .front-page__section-white,
.product-card-list__catalog-page {
    --home-panel: #171d1f;
    --home-line: rgba(255, 255, 255, 0.12);
    --home-muted: #9aa4a9;
}

body.home .front-page__section-white {
    background-color: #0e1315;
}

@media screen and (max-width: 1023px) {
    body.home .front-page__section-white {
        background-color: #0e1315;
    }
}

/* Заголовки блоков на тёмном */
body.home .front-page__popular-motorcycles-title,
body.home .retail-network__title {
    color: var(--color-white);
}

/* --- Карточка товара: одна панель, а не набор отдельных плашек --- */
/* Карточка — цельный блок: белое фото сверху во всю ширину, под ним контентная
   зона с общими отступами; элементы внутри разделены hairline'ами, а не
   собственными подложками. */
body.home .front-page__popular-motorcycles .splide__slide {
    height: auto;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card,
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card.product-card__hover-effect,
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .splide__list .product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: var(--home-panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card:hover,
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .splide__list .product-card:hover {
    background: #1c2325;
    border-color: rgba(255, 255, 255, 0.18);
}

/* Фото — всегда на белой подложке, во всю ширину панели, без внешних отступов */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .product-card__image-container {
    margin: 0;
    padding: 18px 18px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #e7ebec 100%);
    /* Оранжевая линия не нужна: границу задаёт сама белая зона */
    border-bottom: none;
}

/* Ценник прижат к углу фото, без выноса за пределы карточки */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .product-card__image-container .popular-motorcycle-card__price {
    right: 0;
    bottom: 0;
}

/* Полоски-переключатели фото — внутри белой зоны слева снизу (ценник справа) */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .product-card-pagination {
    top: auto;
    bottom: 10px;
    left: 18px;
    right: auto;
    height: auto;
    width: auto;
    max-width: 50%;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .product-card-pagination > div {
    width: 26px;
    height: 4px;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .product-card-pagination > div::before {
    bottom: 0;
}

/* Свотчи цветов — по левому краю контентной зоны, в одном ритме с текстом */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .product-card-color-dots {
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 14px 18px 0;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .popular-motorcycle-card__content {
    padding: 12px 18px 18px;
    gap: 0;
    flex: 1;
}

/* Название — по левому краю, в один столбец с остальным содержимым */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .popular-motorcycle-card__title {
    text-align: left;
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.25;
    margin-top: 0;
    color: var(--color-white);
    transition: color 0.3s ease;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card .popular-motorcycle-card__title:hover {
    color: var(--color-brand);
}

/* Характеристики — строка с разделителями вместо трёх отдельных плашек */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__characteristics {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 0;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__characteristics-item {
    background: transparent;
    padding: 0 12px;
    text-align: left;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    /* подпись сверху, значение прижато к низу — значения стоят на одной линии,
       даже если подпись занимает две строки */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__characteristics-item:first-child {
    padding-left: 0;
    border-left: none;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__characteristics-item:last-child {
    padding-right: 0;
}

@media screen and (min-width: 1024px) {
    :is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card:hover .product-card__characteristics-item {
        background: transparent;
    }
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__characteristics-item-title {
    font-family: var(--font-manrope);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--home-muted);
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__characteristics-item-value {
    justify-content: flex-start;
    margin-top: 5px;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-white);
}

/* Кнопки всегда видны и прижаты к низу — карточки одной высоты, ничего не «прыгает».
   Основное действие слева на всю ширину, сравнение — квадратной иконкой справа. */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btns {
    margin-top: auto;
    padding-top: 16px;
    opacity: 1;
    align-items: stretch;
}

/* «В корзину» — контурная: красной заливки на странице и так много (ценники,
   бейджи), поэтому цвет появляется только при наведении */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__add-to-cart {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--color-white);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__add-to-cart svg path {
    fill: currentColor;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__add-to-cart:hover,
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__add-to-cart:focus-visible {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-white);
}

/* Контролы количества (товар уже в корзине) занимают место кнопки «В корзину» */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__cart-controls {
    flex: 1;
    width: auto;
}

/* Сравнение — вторичная кнопка-иконка (глобально она скрыта на всех карточках).
   order: 1 — в разметке кнопка идёт первой, но в списке всегда стоит справа,
   и после добавления товара в корзину не перескакивает налево. */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btns .product-card__btn-wishlist {
    display: flex !important;
    order: 1;
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Иконка нарисована тёмной под светлый фон */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist svg path {
    stroke: var(--color-white);
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist:hover,
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist:focus-visible {
    border-color: var(--color-brand);
    background: rgba(222, 30, 38, 0.14);
}

/* Товар уже в сравнении */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

/* Счётчик показывает общее число товаров в сравнении — на каждой карточке
   одна и та же цифра выглядит ошибкой, поэтому здесь он не нужен */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist .compare-inline-count {
    display: none !important;
}

/* Подсказка над кнопкой; текст берём из data-tooltip — его же обновляет JS
   при добавлении/удалении из сравнения */
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    padding: 6px 10px;
    background: #0b1012;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-family: var(--font-manrope);
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 6;
}

:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist:hover::after,
:is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist:focus-visible::after {
    opacity: 1;
}

/* На тач-устройствах подсказка не нужна */
@media (hover: none) {
    :is(body.home .front-page__popular-motorcycles, .product-card-list__catalog-page) .product-card__btn-wishlist::after {
        display: none;
    }
}

/* Контролы количества и свотчи — общие для главной и каталога */
:is(body.home, body.post-type-archive-product, body.tax-product_cat) .product-card__cart-controls {
    background: var(--color-brand);
}

:is(body.home, body.post-type-archive-product, body.tax-product_cat) .product-card__cart-btn {
    background: transparent;
    width: 40px;
    height: 40px;
}

:is(body.home, body.post-type-archive-product, body.tax-product_cat) .product-card__cart-btn svg path {
    fill: #fff;
}

:is(body.home, body.post-type-archive-product, body.tax-product_cat) .product-card__cart-quantity {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0;
}

/* Свотчи цветов: обводка активного была чёрной */
:is(body.home, body.post-type-archive-product, body.tax-product_cat) .product-card-color-dot.active {
    border-color: rgba(255, 255, 255, 0.85);
}

:is(body.home, body.post-type-archive-product, body.tax-product_cat) .product-card-color-dot span {
    border-color: rgba(255, 255, 255, 0.28);
}

/* Стрелки слайдера — как в блоке «Другие модели» на карточке товара:
   белый круг без рамки. Единственное исключение из глобального «без скруглений». */
body.home .front-page__popular-motorcycles-arrows .splide__arrow {
    border-color: transparent;
    border-radius: 50% !important;
}

/* Splide держит на своих стрелках opacity .7 — активная кнопка должна быть плотно белой */
body.home .front-page__popular-motorcycles-arrows .splide__arrow:not([disabled]) {
    opacity: 1;
}

body.home .front-page__popular-motorcycles-arrows .splide__arrow:disabled,
body.home .front-page__popular-motorcycles-arrows .splide__arrow[disabled] {
    opacity: 0.35;
}

/* Точки пагинации слайдера */
body.home .front-page__popular-motorcycles-slider .splide__pagination__page {
    background: rgba(255, 255, 255, 0.28) !important;
}

body.home .front-page__popular-motorcycles-slider .splide__pagination__page.is-active {
    background: var(--color-brand) !important;
}

/* ======================================================================
   Каталог и страницы категорий — тёмная подложка, карточки те же, что на
   главной (правила карточки выше скоуплены по .product-card-list__catalog-page).
   ====================================================================== */

body:is(.post-type-archive-product, .tax-product_cat) {
    background-color: #0e1315;
    color: var(--color-white);
}

/* Сетка карточек лежала на белой плашке.
   minmax(0, 1fr) — иначе колонки не сжимаются до ширины экрана и сетка
   вылезает вбок на узких вьюпортах.
   margin-top: раньше сетка «наезжала» на баннер (-24px) — на тёмном фоне
   белой плашки больше нет, поэтому вместо наезда даём отступ. */
body:is(.post-type-archive-product, .tax-product_cat) .product-card-list {
    background: transparent;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 32px;
}

@media screen and (max-width: 1279px) {
    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1023px) {
    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 24px;
    }
}

@media screen and (max-width: 767px) {
    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list {
        margin-top: 20px;
    }
}

@media screen and (max-width: 459px) {
    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Узкие карточки: меньше внутренние отступы, характеристики — в столбик
   со строчными разделителями (в три колонки на такой ширине не читается).
   Префикс body:is(...) нужен, чтобы перебить общие правила карточки выше. */
@media screen and (max-width: 767px) {
    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card .product-card__image-container {
        padding: 12px 12px 10px;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card .product-card-color-dots {
        padding: 10px 12px 0;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .popular-motorcycle-card__content {
        padding: 10px 12px 12px;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card .popular-motorcycle-card__title {
        text-align: left;
        font-size: 16px;
        line-height: 1.2;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card__characteristics {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 12px;
        padding-top: 0;
        border-top: none;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card__characteristics .product-card__characteristics-item,
    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card__characteristics .product-card__characteristics-item:nth-child(2) {
        order: 0;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card__characteristics .product-card__characteristics-item:first-child {
        border-top: none;
        padding-top: 0;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card__characteristics-item-value {
        margin-top: 0;
        text-align: right;
    }

    body:is(.post-type-archive-product, .tax-product_cat) .product-card-list__catalog-page .product-card__btns {
        padding-top: 12px;
    }
}

/* Пагинация: цифры были тёмными на белом */
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .page-numbers {
    color: var(--color-white);
}

body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .page-numbers:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .page-numbers.current {
    background-color: var(--color-brand);
    color: var(--color-white);
}

body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .prev.page-numbers,
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .next.page-numbers {
    border-color: rgba(255, 255, 255, 0.18);
}

/* Стрелки «назад/вперёд» нарисованы тёмным (#101820) — на тёмном фоне их не видно */
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .prev.page-numbers svg path,
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul.page-numbers .next.page-numbers svg path {
    fill: currentColor;
    stroke: currentColor;
}

/* SEO-описание каталога / категории */
body:is(.post-type-archive-product, .tax-product_cat) .catalog-description,
body:is(.post-type-archive-product, .tax-product_cat) .term-description,
body:is(.post-type-archive-product, .tax-product_cat) .page-description {
    color: #a7b0b3;
}

body:is(.post-type-archive-product, .tax-product_cat) .catalog-description :is(h1, h2, h3, h4, h5, strong) {
    color: var(--color-white);
}

/* Футер примыкает вплотную — иначе между описанием и футером светлая полоса */
body:is(.post-type-archive-product, .tax-product_cat) .footer {
    margin-top: 48px;
}

/* --- Заглушка: в категории нет товаров / поиск ничего не нашёл --- */
.catalog-empty {
    margin-top: 56px;
    margin-bottom: 56px;
}

.catalog-empty__box {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 28px;
    text-align: center;
}

@media (min-width: 768px) {
    .catalog-empty__box {
        padding: 48px 40px;
    }
}

.catalog-empty__icon {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 18px;
}

.catalog-empty__title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .catalog-empty__title {
        font-size: 26px;
    }
}

.catalog-empty__text {
    margin-top: 12px;
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.6;
    color: #a7b0b3;
}

/* .btn — блочный flex с max-width: max-content, поэтому прижимается влево:
   центрируем авто-отступами по горизонтали */
.catalog-empty__btn {
    margin: 24px auto 0;
}

/* --- Планшет/мобильный: полоса категорий у нижней кромки баннера --- */
@media (max-width: 1023px) {
    /* Белая «волна» под баннером — на каталоге это просто светлый блок между
       фото и карточками, полоса категорий занимает её место */
    .hero-section--catalog .hero-bottom {
        display: none;
    }

    .hero-section--catalog .hero-container {
        position: relative;
        padding-bottom: 0;
    }

    .hero-section--catalog .dropdown-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        /* выше ценников на карточках (z-index: 5) — иначе они перекрывают
           раскрытый список категорий */
        z-index: 20;
        padding: 0 24px;
    }

    .hero-section--catalog .hero-category {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        background: none;
    }

    /* Вкладок может быть больше, чем помещается — прокручиваем по горизонтали */
    .hero-section--catalog .hero-category__list-items {
        display: flex;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hero-section--catalog .hero-category__list-items::-webkit-scrollbar {
        display: none;
    }

    .hero-section--catalog .hero-category a.category-item {
        flex: 0 0 auto;
        background-color: #243138;
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    .hero-section--catalog .dropdown-wrapper {
        padding: 0 12px;
    }
}

/* ======================================================================
   Карточка товара: стрелки на большом фото и блок «Оплата и доставка»
   ====================================================================== */

/* Стрелки листания фото. Появляются только когда кадров больше одного —
   класс вешает JS галереи (список пересобирается при смене цвета). */
.variation-image-main__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(16, 24, 32, 0.14);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #101820;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.variation-image-main--has-arrows .variation-image-main__arrow {
    display: flex;
}

.variation-image-main__arrow--prev {
    left: 12px;
}

.variation-image-main__arrow--next {
    right: 12px;
}

.variation-image-main__arrow:hover,
.variation-image-main__arrow:focus-visible {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-white);
}

@media screen and (max-width: 767px) {
    .variation-image-main__arrow {
        width: 36px;
        height: 36px;
    }

    .variation-image-main__arrow--prev {
        left: 8px;
    }

    .variation-image-main__arrow--next {
        right: 8px;
    }

    .variation-image-main__arrow svg {
        width: 20px;
        height: 20px;
    }
}

/* --- Оплата и доставка: полоса на всю ширину под первым экраном ---
   Отдельная ячейка сетки .product-main-container__flex во всю ширину: не удлиняет
   панель покупки и не оставляет пустот ни под фото, ни под панелью.
   Без заливки (только контур) — иначе сливается с панелью покупки рядом. */
.product-payment-delivery {
    grid-column: 1 / -1;
    /* Обнуляем глобальный section { margin: 120px 0 } — иначе до блока описания
       остаётся лишний провал; отступ снизу даёт padding самого описания. */
    margin: 8px 0 0;
    padding: 20px 24px 22px;
    background: transparent;
    border: 1px solid var(--pp-line);
}

.product-payment-delivery__title {
    position: relative;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pp-line);
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

/* Красный сегмент под заголовком — как в заголовках разделов Motors */
.product-payment-delivery__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: var(--color-brand);
}

.product-payment-delivery__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px 32px;
    align-items: start;
}

/* Вторая группа отделена вертикальным hairline, как колонки в панелях Motors */
.product-payment-delivery__group + .product-payment-delivery__group {
    padding-left: 32px;
    border-left: 1px solid var(--pp-line);
}

.product-payment-delivery__group-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pp-text-muted);
}

.product-payment-delivery__list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.product-payment-delivery__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.product-payment-delivery__item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: var(--color-brand);
}

.product-payment-delivery__item-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.product-payment-delivery__item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.product-payment-delivery__item-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-white);
}

.product-payment-delivery__item-note {
    font-size: 12px;
    line-height: 1.35;
    color: var(--pp-text-muted);
}

/* Примечание относится к доставке, поэтому стоит внутри её колонки */
.product-payment-delivery__note {
    margin: 16px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--color-brand);
    font-size: 12px;
    line-height: 1.4;
    color: var(--pp-text-muted);
}

/* Узкие экраны: колонки не помещаются рядом — группы и пункты в столбик */
@media screen and (max-width: 767px) {
    .product-payment-delivery {
        padding: 18px 16px;
    }

    .product-payment-delivery__title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .product-payment-delivery__cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .product-payment-delivery__group + .product-payment-delivery__group {
        padding-left: 0;
        padding-top: 18px;
        border-left: none;
        border-top: 1px solid var(--pp-line);
    }

    .product-payment-delivery__list {
        flex-direction: column;
        gap: 14px;
    }
}

/* ======================================================================
   Страница «Контакты» (page-contacts.php) — тёмная тема Motors, по образцу
   страниц «О бренде», «Сервис» и «Точки продаж». Hero с фото убран,
   H1 и лид стоят над контентом.
   Все правила скоуплены в .contacts-page: классы .page-conacts__* и общие
   стили Fluent Forms используются и на других страницах.
   ====================================================================== */

.contacts-page {
    /* Локальные токены тёмной темы страницы */
    --contacts-bg: #0e1315;
    --contacts-surface: #171d1f;
    --contacts-field: #101820;
    --contacts-line: rgba(255, 255, 255, 0.12);
    --contacts-line-strong: rgba(255, 255, 255, 0.18);
    --contacts-muted: #a7b0b3;

    background-color: var(--contacts-bg);
    color: var(--color-white);
    /* Шапка сайта — position: fixed, раньше её высоту компенсировал hero */
    padding-top: var(--header-height);
    padding-bottom: 72px;
}

/* Футер примыкает вплотную — светлый зазор читался бы полосой */
.contacts-page + .footer {
    margin-top: 0;
}

/* --- Шапка страницы: H1 + лид --- */
.contacts-page__head {
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--contacts-line);
}

@media (min-width: 1024px) {
    .contacts-page__head {
        padding-top: 56px;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }
}

/* Красный сегмент на hairline — фирменный акцент */
.contacts-page__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

.contacts-page__title {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

@media (min-width: 640px) {
    .contacts-page__title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .contacts-page__title {
        font-size: 46px;
    }
}

.contacts-page__lead {
    margin: 14px 0 0;
    max-width: 62ch;
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.55;
    color: var(--contacts-muted);
}

@media (min-width: 1024px) {
    .contacts-page__lead {
        font-size: 16px;
    }
}

/* --- Раскладка: контакты слева, форма справа --- */
/* Отрицательный отступ подтягивал секцию под hero — hero больше нет */
.contacts-page .page-conacts__section {
    margin-top: 0;
}

.contacts-page .page-conacts__container {
    align-items: flex-start;
}

/* --- Заголовки блоков страницы. Без линии: сверху уже есть H1 с hairline,
   три линии подряд перегружали верх --- */
.contacts-page__section-title,
.contacts-page__social-title {
    margin: 0;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .contacts-page__section-title,
    .contacts-page__social-title {
        font-size: 26px;
    }
}

/* --- Контакты: карточки вместо строк с разделителями --- */
.contacts-page__cards {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.contacts-page__card {
    padding: 20px;
    background-color: var(--contacts-surface);
    border: 1px solid var(--contacts-line);
}

.contacts-page__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-brand);
}

.contacts-page__card-label {
    margin-top: 14px;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--contacts-muted);
}

.contacts-page__card-value {
    margin-top: 8px;
    font-family: var(--font-manrope);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-white);
}

.contacts-page__card-value p {
    margin: 0;
}

.contacts-page__card-value p + p {
    margin-top: 6px;
}

.contacts-page__card-value a {
    color: var(--color-brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(222, 30, 38, 0.5);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contacts-page__card-value a:hover {
    color: var(--color-white);
    border-color: var(--color-white);
}

/* --- Соцсети: короткий заголовок + подпись, кнопки одним списком --- */
.contacts-page__social {
    margin-top: 44px;
}

.contacts-page__social-text {
    margin: 8px 0 0;
    max-width: 52ch;
    font-family: var(--font-manrope);
    font-size: 14px;
    line-height: 1.5;
    color: var(--contacts-muted);
}

.contacts-page .page-conacts__social-links {
    margin-top: 20px;
}

/* У .btn стоит white-space: nowrap — длинная подпись подписки распирала
   двухколоночную сетку на узких экранах, поэтому там колонка одна */
@media screen and (max-width: 559px) {
    .contacts-page .page-conacts__social-links {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Подписка стоит в общей сетке — отличаем её красной рамкой */
.contacts-page .page-conacts__social-link_popup {
    border-color: rgba(222, 30, 38, 0.55);
}

.contacts-page .page-conacts__social-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    color: var(--color-brand);
    transition: color 0.2s ease;
}

.contacts-page .page-conacts__social-link_popup:hover .page-conacts__social-link-icon {
    color: var(--color-white);
}

.contacts-page .page-conacts__social-links > a.btn-secondary,
.contacts-page .page-conacts__social-link {
    background-color: transparent;
    border: 1px solid var(--contacts-line-strong);
    color: var(--color-white);
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 0 20px;
    gap: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contacts-page .page-conacts__social-link:hover {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-white);
}

/* Иконки соцсетей приходят картинками — на тёмном они белые */
.contacts-page .page-conacts__social-link img,
.contacts-page .page-conacts__social-link:hover img {
    filter: brightness(0) saturate(100%) invert(1);
}

/* --- Форма обратной связи: панель с красной кромкой --- */
.contacts-page .page-conacts__form {
    background: var(--contacts-surface);
    border-top: 3px solid var(--color-brand);
    padding: 28px;
}

@media screen and (max-width: 767px) {
    .contacts-page .page-conacts__form {
        padding: 20px 16px 24px;
    }
}

.contacts-page .page-conacts__form-title {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .contacts-page .page-conacts__form-title {
        font-size: 24px;
    }
}

.contacts-page .page-conacts__form-fields {
    margin-top: 20px;
}

/* Вступительный текст формы (задан в самой форме) */
.contacts-page .page-conacts__form .fluentform p,
.contacts-page .page-conacts__form-description {
    color: var(--contacts-muted);
}

/* Подписи полей */
.contacts-page .fluentform .ff-el-input--label,
.contacts-page .fluentform .ff-el-input--label label {
    color: var(--contacts-muted) !important;
}

/* Поля ввода */
.contacts-page .fluentform .ff-el-form-control,
.contacts-page .ff-default .ff-el-form-control {
    background-color: var(--contacts-field) !important;
    border: 1px solid var(--contacts-line) !important;
    border-radius: 0 !important;
    color: var(--color-white) !important;
    font-family: var(--font-manrope);
    padding: 12px 16px !important;
}

.contacts-page .ff-default textarea.ff-el-form-control,
.contacts-page .ff-el-input--content textarea {
    border-radius: 0 !important;
    padding: 14px 16px !important;
}

.contacts-page .fluentform .ff-el-form-control::placeholder {
    color: #6f7a80 !important;
}

.contacts-page .fluentform .ff-el-form-control:focus {
    border-color: var(--color-brand) !important;
    box-shadow: none !important;
}

/* Кастомный селект «Тип вопроса» */
.contacts-page .ff-custom-select-current {
    background: var(--contacts-field);
    border: 1px solid var(--contacts-line);
    border-radius: 0;
    color: #6f7a80;
    padding: 13px 16px;
}

.contacts-page .ff-has-value ~ .ff-custom-select-wrapper .ff-custom-select-current {
    color: var(--color-white);
}

.contacts-page .ff-custom-select-wrapper.is-open .ff-custom-select-current {
    border-color: var(--color-brand);
}

.contacts-page .ff-custom-select-list {
    background: var(--contacts-surface);
    border: 1px solid var(--contacts-line);
    border-radius: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

.contacts-page .ff-custom-select-item {
    color: var(--color-white);
    border-radius: 0;
}

.contacts-page .ff-custom-select-item:hover,
.contacts-page .ff-custom-select-item.is-active {
    background: rgba(255, 255, 255, 0.08);
}

/* Чекбокс согласия */
.contacts-page .fluentform .ff-el-form-check-input {
    background-color: var(--contacts-field) !important;
    border: 1px solid var(--contacts-line-strong) !important;
    border-radius: 0 !important;
}

.contacts-page .fluentform .ff-el-form-check-input:hover {
    border-color: var(--color-brand) !important;
}

.contacts-page .fluentform .ff-el-form-check-input:checked {
    background-color: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
}

.contacts-page .fluentform .ff-el-form-check-label,
.contacts-page .fluentform .ff-el-group.page-conacts__form-description-privacy,
.contacts-page .fluentform .ff-el-group.page-conacts__form-description-subscribe {
    color: var(--contacts-muted);
}

/* Кнопка отправки — плашка Motors */
.contacts-page .fluentform .ff-btn-submit {
    border-radius: 0 !important;
    font-family: var(--font-exo2);
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contacts-page .fluentform .ff-btn-submit:disabled {
    background-color: rgba(222, 30, 38, 0.45) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ======================================================================
   Страница сравнения (page-compare.php) — тёмная тема Motors, по образцу
   «Сервиса», «Точек продаж» и «Контактов». Hero-плашка убрана, H1 стоит
   над контентом. Разметку матрицы рендерит JS (main.js), поэтому правила
   скоуплены в .compare-screen и опираются на его классы.
   ====================================================================== */

.compare-screen {
    /* Локальные токены тёмной темы страницы */
    --compare-bg: #0e1315;
    --compare-surface: #171d1f;
    --compare-line: rgba(255, 255, 255, 0.12);
    --compare-line-strong: rgba(255, 255, 255, 0.18);
    --compare-muted: #a7b0b3;

    background-color: var(--compare-bg);
    color: var(--color-white);
    /* Шапка сайта — position: fixed, раньше её высоту компенсировал hero */
    padding-top: var(--header-height);
    padding-bottom: 72px;
}

.compare-screen + .footer {
    margin-top: 0;
}

/* --- Шапка страницы --- */
.compare-screen__head {
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--compare-line);
}

@media (min-width: 1024px) {
    .compare-screen__head {
        padding-top: 56px;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }
}

.compare-screen__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

.compare-screen__title {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

@media (min-width: 640px) {
    .compare-screen__title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .compare-screen__title {
        font-size: 46px;
    }
}

/* Белая скруглённая обёртка подтягивалась под hero — теперь просто контейнер */
.compare-screen .compare-table-wrapper {
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    align-items: stretch;
}

@media screen and (max-width: 767px) {
    .compare-screen .compare-table-wrapper {
        padding: 0;
    }
}

/* --- Фильтры: табы категорий, переключатель, очистка --- */
.compare-screen .compare-page__categories {
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 0;
}

.compare-screen .compare-page__categories-list {
    gap: 0;
    border: 1px solid var(--compare-line-strong);
}

.compare-screen .compare-page__category-btn {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
    background: transparent;
    border-radius: 0;
    padding: 13px 22px;
}

.compare-screen .compare-page__category-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.compare-screen .compare-page__category-btn.is-active {
    background: var(--color-brand);
    color: var(--color-white);
}

.compare-screen .compare-category-count {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
}

.compare-screen .compare-page__category-btn.is-active .compare-category-count {
    background: rgba(0, 0, 0, 0.28);
}

/* Выпадающий список категорий (узкие экраны) */
.compare-screen .compare-page__categories--dropdown-only,
.compare-screen .hero-category__trigger {
    background: var(--compare-surface);
    border: 1px solid var(--compare-line);
    border-radius: 0 !important;
    color: var(--color-white);
}

.compare-screen .hero-category__trigger-text {
    color: var(--color-white);
}

.compare-screen .hero-category__dropdown-list,
.compare-screen .compare-page__categories-dropdown-list {
    background: var(--compare-surface);
    border: 1px solid var(--compare-line);
    border-radius: 0;
}

.compare-screen .compare-page__categories-dropdown-list .compare-page__category-btn {
    color: var(--color-white);
    border-radius: 0;
}

.compare-screen .compare-page__categories-dropdown-list .compare-page__category-btn.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-brand);
}

/* «Только отличия» — фильтр-кнопка рядом с табами категорий: тумблер-пилюля
   ломался о глобальный border-radius: 0, поэтому здесь квадратный чекбокс */
.compare-screen .compare-page__only-diff {
    gap: 10px;
    padding: 0 18px;
    /* вровень с полосой табов категорий */
    min-height: 48px;
    border: 1px solid var(--compare-line-strong);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.compare-screen .compare-page__only-diff:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.compare-screen .compare-page__only-diff:has(input:checked) {
    border-color: var(--color-brand);
    background-color: rgba(222, 30, 38, 0.14);
}

.compare-screen .compare-page__only-diff-text {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
}

.compare-screen .compare-page__switch {
    width: 18px;
    height: 18px;
}

.compare-screen .compare-page__switch-slider {
    background: transparent;
    border: 1px solid var(--compare-line-strong);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Галочка вместо бегунка */
.compare-screen .compare-page__switch-slider::before {
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
    background: none;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.compare-screen .compare-page__switch input:checked + .compare-page__switch-slider {
    background: var(--color-brand);
    border-color: var(--color-brand);
}

.compare-screen .compare-page__switch input:checked + .compare-page__switch-slider::before {
    transform: rotate(45deg);
    opacity: 1;
}

.compare-screen .compare-page__clear-btn {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--compare-muted);
    transition: color 0.2s ease;
}

.compare-screen .compare-page__clear-btn:hover {
    color: var(--color-brand);
    text-decoration: none;
}

/* --- Мобильные фильтры: табы строкой сверху, ниже «Только отличия» и «Очистить»
   в одну линию. Раньше кнопка очистки позиционировалась абсолютно и повисала
   в правом нижнем углу блока фильтров отдельной иконкой без подписи. --- */
@media screen and (max-width: 767px) {
    .compare-screen .compare-page__filters {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    /* Дети группы становятся ячейками общей сетки */
    .compare-screen .compare-page__filters-left {
        display: contents;
    }

    .compare-screen .compare-page__categories,
    .compare-screen .compare-page__categories-dropdown-host {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* Полоса табов прокручивается вбок, а не переносится в несколько рядов */
    .compare-screen .compare-page__categories-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .compare-screen .compare-page__categories-list::-webkit-scrollbar {
        display: none;
    }

    .compare-screen .compare-page__category-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .compare-screen .compare-page__only-diff {
        grid-column: 1;
        padding: 0 14px;
    }

    .compare-screen .compare-page__actions {
        grid-column: 2;
        margin-bottom: 0;
    }

    /* Возвращаем кнопку в поток и делаем такой же контурной, как фильтр рядом */
    .compare-screen .compare-page__clear-btn {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 16px;
        border: 1px solid var(--compare-line-strong);
        color: var(--color-white);
    }

    .compare-screen .compare-page__clear-btn:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    .compare-screen .compare-page__clear-btn-text {
        display: inline;
    }
}

/* На совсем узких экранах подпись у кнопки очистки не помещается рядом с фильтром */
@media screen and (max-width: 419px) {
    .compare-screen .compare-page__clear-btn {
        padding: 0 14px;
    }

    .compare-screen .compare-page__clear-btn-text {
        display: none;
    }
}

/* Список лежит внутри .container, а его собственный боковой паддинг (для
   edge-to-edge скролла) складывался с паддингом контейнера — карточки стояли
   с отступом от левой границы. Скролл теперь идёт по ширине контейнера. */
.compare-screen .compare-page__list {
    padding-left: 0;
}

/* Хвост-распорка нужна была для того же edge-to-edge скролла */
.compare-screen .compare-page__list .compare-matrix__head::after,
.compare-screen .compare-page__list .compare-matrix__row-values::after {
    flex-basis: 0;
    width: 0;
    min-width: 0;
}

/* --- Карточка товара в шапке матрицы --- */
.compare-screen .compare-matrix__head-cell {
    background: var(--compare-surface);
    border: 1px solid var(--compare-line);
    padding-bottom: 16px;
}

/* Техника приходит прозрачным PNG — фото всегда на светлой подложке */
.compare-screen .compare-card__image {
    margin-bottom: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #e7ebec 100%);
}

.compare-screen .compare-card__image img {
    border-radius: 0;
    object-fit: contain;
    padding: 14px;
}

.compare-screen .compare-card__title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-white);
    padding: 0 16px;
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

.compare-screen .compare-card__title:hover {
    color: var(--color-brand);
}

.compare-screen .compare-card__price {
    padding: 0 16px;
}

.compare-screen .compare-card__price-current,
.compare-screen .compare-card__price .price ins {
    font-family: var(--font-exo2);
    font-weight: 800;
    color: var(--color-white);
}

.compare-screen .compare-card__price-old,
.compare-screen .compare-card__price .price del {
    color: var(--compare-muted);
}

.compare-screen .compare-card__remove {
    border-radius: 0;
    width: 30px;
    height: 30px;
    right: 0;
    top: 0;
}

/* --- Матрица характеристик --- */
.compare-screen .compare-matrix__row {
    border-top: 1px solid var(--compare-line);
}

/* Плашка названия характеристики стоит поверх линии-разделителя: фон должен
   быть непрозрачным (цвет страницы), иначе линия перечёркивает текст */
.compare-screen .compare-matrix__label-toggle {
    background: var(--compare-bg);
    border: 1px solid var(--compare-line);
    border-radius: 0;
    color: var(--color-white);
    padding: 0 14px;
}

.compare-screen .compare-matrix__label-text {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--compare-muted);
}

.compare-screen .compare-matrix__label-icon {
    color: var(--color-brand);
}

.compare-screen .compare-matrix__value-text {
    font-family: var(--font-manrope);
    color: var(--color-white);
}

.compare-screen .compare-matrix__empty {
    background: var(--compare-surface);
    border: 1px solid var(--compare-line);
    border-radius: 0;
    color: var(--compare-muted);
}

/* Аккордеоны характеристик внутри карточки */
.compare-screen .compare-settings-item {
    background: var(--compare-surface);
    border: 1px solid var(--compare-line);
    border-radius: 0;
}

.compare-screen .compare-settings-item__label .product-main__settings-label-text {
    color: var(--color-white);
}

/* --- Лоадер --- */
.compare-screen .compare-page__list-loader {
    background: rgba(14, 19, 21, 0.94);
}

.compare-screen .compare-page__list-loader-spinner {
    border-color: rgba(255, 255, 255, 0.14);
    border-top-color: var(--color-brand);
}

.compare-screen .compare-page__list-loader-text {
    color: var(--compare-muted);
}

/* --- Пустое состояние: та же панель, что заглушка каталога --- */
.compare-screen .compare-page__empty {
    width: 100%;
    padding: 8px 0 0;
    margin: 0;
}

.compare-page__empty-box {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 28px;
    text-align: center;
    background: var(--compare-surface);
    border: 1px solid var(--compare-line);
    border-top: 3px solid var(--color-brand);
}

@media (min-width: 768px) {
    .compare-page__empty-box {
        padding: 48px 40px;
    }
}

.compare-page__empty-icon {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 18px;
}

.compare-page__empty-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .compare-page__empty-title {
        font-size: 26px;
    }
}

.compare-page__empty-text {
    margin: 12px 0 0;
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.6;
    color: var(--compare-muted);
}

.compare-page__empty-btn {
    margin: 24px auto 0;
}

/* ======================================================================
   Корзина (page-cart.php + woocommerce/cart/cart.php) — тёмная тема Motors,
   по образцу «Сервиса», «Точек продаж», «Контактов» и сравнения.
   Скоуп — body.gmotor-cart (класс вешает gmotor_body_classes: WooCommerce
   помечает эту страницу как woocommerce-checkout из-за формы заказа).
   ====================================================================== */

body.gmotor-cart {
    /* Локальные токены тёмной темы страницы */
    --cart-bg: #0e1315;
    --cart-surface: #171d1f;
    --cart-field: #101820;
    --cart-line: rgba(255, 255, 255, 0.12);
    --cart-line-strong: rgba(255, 255, 255, 0.18);
    --cart-muted: #a7b0b3;

    background-color: var(--cart-bg);
    color: var(--color-white);
    padding-top: 0;
}

body.gmotor-cart .site-main,
body.gmotor-cart .woocommerce {
    padding-top: var(--header-height);
    padding-bottom: 72px;
}

body.gmotor-cart .footer {
    margin-top: 0;
}

/* --- Шапка страницы: H1 + счётчик товаров --- */
body.gmotor-cart .cart-header {
    position: relative;
    align-items: flex-end;
    gap: 14px;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--cart-line);
}

@media (min-width: 1024px) {
    body.gmotor-cart .cart-header {
        padding-top: 56px;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }
}

body.gmotor-cart .cart-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

body.gmotor-cart .cart-title {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

@media (min-width: 640px) {
    body.gmotor-cart .cart-title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    body.gmotor-cart .cart-title {
        font-size: 46px;
    }
}

/* Счётчик был белым кругом — теперь красная плашка Motors */
body.gmotor-cart .cart-items-count {
    width: auto;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    margin-bottom: 6px;
    background: var(--color-brand);
    border-radius: 0;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    color: var(--color-white);
}

/* Белая скруглённая плашка со списком товаров — просто контейнер */
body.gmotor-cart .cart-table-wrapper {
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

@media screen and (max-width: 767px) {
    body.gmotor-cart .cart-table-wrapper {
        padding: 0;
    }
}

/* --- Строка товара --- */
body.gmotor-cart .woocommerce-cart-form__cart-item {
    gap: 0;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--cart-surface);
    border: 1px solid var(--cart-line);
    border-bottom: 1px solid var(--cart-line);
}

/* Техника — прозрачный PNG, на тёмном она бы «висела»: фото на светлой подложке */
body.gmotor-cart .cart-product-thumbnail {
    margin-right: 20px;
}

body.gmotor-cart .cart-product-thumbnail-wrapper {
    background: linear-gradient(180deg, #ffffff 0%, #e7ebec 100%);
    padding: 8px;
}

body.gmotor-cart .cart-product-thumbnail-wrapper img {
    width: 120px;
    height: 96px;
}

@media screen and (max-width: 767px) {
    body.gmotor-cart .cart-product-thumbnail-wrapper img {
        width: 88px;
        height: 72px;
    }
}

body.gmotor-cart .cart-product-name {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-white);
    margin-top: 10px;
    transition: color 0.2s ease;
}

body.gmotor-cart .cart-product-name:hover {
    color: var(--color-brand);
}

/* Бейджи категории и цвета */
body.gmotor-cart .cart-product-name__header > div {
    border: 1px solid var(--cart-line-strong);
    border-radius: 0;
    height: 24px;
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cart-muted);
}

body.gmotor-cart .cart-product-name__color-dot,
body.gmotor-cart .cart-product-name__color-image {
    border-radius: 0;
}

/* Цена */
body.gmotor-cart .product-price__cart,
body.gmotor-cart .product-price-new {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 18px;
    color: var(--color-white);
}

body.gmotor-cart .product-price-old {
    color: var(--cart-muted);
}

/* На узком экране цена делит строку с контролами количества */
@media screen and (max-width: 767px) {
    body.gmotor-cart .product-price__cart,
    body.gmotor-cart .product-price-new {
        font-size: 16px;
        white-space: nowrap;
    }

    body.gmotor-cart .woocommerce-cart-form__cart-item {
        padding: 14px;
    }

    body.gmotor-cart .cart-product-info {
        padding-bottom: 0;
    }
}

/* Контролы количества — красная плашка, как на карточке товара */
body.gmotor-cart .cart-item-quantity-controls {
    background: var(--color-brand);
    border-radius: 0;
    height: 44px;
    padding: 0 6px;
}

body.gmotor-cart .cart-item-quantity-controls .product-card__cart-btn {
    background: transparent;
    border-radius: 0;
}

body.gmotor-cart .cart-item-quantity-controls .product-card__cart-btn svg path {
    fill: #fff;
}

body.gmotor-cart .cart-item-quantity-controls .product-card__cart-quantity {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 18px;
    color: var(--color-white);
}

/* --- Итого --- */
body.gmotor-cart .cart-total-row {
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--cart-line);
}

body.gmotor-cart .cart-total-label {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cart-muted);
}

body.gmotor-cart .cart-total-amount,
body.gmotor-cart .cart-total-price-new {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    color: var(--color-white);
}

/* Сумма прижата к правому краю строки: у базового правила фиксированная
   ширина 240px, из-за которой цена «висела» слева от края блока. */
body.gmotor-cart .cart-total-amount {
    width: auto;
    text-align: right;
    white-space: nowrap;
}

body.gmotor-cart .cart-total-price-wrapper {
    align-items: flex-end;
}

body.gmotor-cart .cart-total-price-old {
    font-family: var(--font-manrope);
    font-weight: 400;
    font-size: 14px;
    color: var(--cart-muted);
}

/* --- Промокод --- */
body.gmotor-cart .cart-coupon-item {
    background: var(--cart-surface);
    border: 1px solid var(--cart-line);
}

body.gmotor-cart .cart-coupon-item .product-main__settings-label-text {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
}

body.gmotor-cart .cart-coupon-input {
    background: var(--cart-field);
    border: 1px solid var(--cart-line);
    border-radius: 0;
    color: var(--color-white);
}

body.gmotor-cart .cart-coupon-input::placeholder {
    color: #6f7a80;
}

body.gmotor-cart .cart-coupon-input:focus {
    border-color: var(--color-brand);
    box-shadow: none;
}

body.gmotor-cart .cart-coupon-btn {
    border-radius: 0;
}

body.gmotor-cart .cart-applied-coupon-item {
    background: var(--cart-field);
    border: 1px solid var(--cart-line);
    color: var(--color-white);
}

/* --- Форма заказа: панель с красной кромкой --- */
/* Обёртка была светло-серой плашкой вокруг формы — панель теперь сама форма */
body.gmotor-cart .cart-checkout-form-wrapper {
    background: transparent;
    padding: 0;
}

body.gmotor-cart .gmotor-checkout-form {
    background: var(--cart-surface);
    border-top: 3px solid var(--color-brand);
    border-radius: 0;
    padding: 28px;
}

@media screen and (max-width: 767px) {
    body.gmotor-cart .gmotor-checkout-form {
        padding: 20px 16px 24px;
    }
}

body.gmotor-cart .gmotor-checkout-form__title {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {
    body.gmotor-cart .gmotor-checkout-form__title {
        font-size: 24px;
    }
}

body.gmotor-cart .gmotor-checkout-form__description,
body.gmotor-cart .gmotor-checkout-form__privacy-policy-text,
body.gmotor-cart .gmotor-checkout-form__field--privacy label {
    color: var(--cart-muted);
}

body.gmotor-cart .gmotor-checkout-form__label {
    color: var(--cart-muted) !important;
}

body.gmotor-cart .gmotor-checkout-form__label .required {
    color: var(--color-brand);
}

body.gmotor-cart .gmotor-checkout-form__input:not([type="checkbox"]) {
    background-color: var(--cart-field);
    border: 1px solid var(--cart-line) !important;
    border-radius: 0 !important;
    color: var(--color-white) !important;
    height: 48px !important;
    padding: 12px 16px;
}

body.gmotor-cart .gmotor-checkout-form__input::placeholder {
    color: #6f7a80 !important;
}

body.gmotor-cart .gmotor-checkout-form__input:not([type="checkbox"]):focus {
    outline: none;
    border-color: var(--color-brand) !important;
    box-shadow: none;
}

body.gmotor-cart .gmotor-checkout-form__input.input-checkbox {
    background-color: var(--cart-field);
    border: 1px solid var(--cart-line-strong) !important;
    border-radius: 0 !important;
}

body.gmotor-cart .gmotor-checkout-form__submit button {
    border-radius: 0;
    font-family: var(--font-exo2);
    letter-spacing: 0.04em;
}

/* --- Пустая корзина: та же панель, что заглушки каталога и сравнения --- */
.cart-empty-box {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 28px;
    text-align: center;
    background: var(--cart-surface, #171d1f);
    border: 1px solid var(--cart-line, rgba(255, 255, 255, 0.12));
    border-top: 3px solid var(--color-brand);
}

@media (min-width: 768px) {
    .cart-empty-box {
        padding: 48px 40px;
    }
}

.cart-empty-icon {
    display: inline-flex;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 18px;
}

.cart-empty-title {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .cart-empty-title {
        font-size: 26px;
    }
}

.cart-empty-description {
    margin: 12px 0 0;
    font-family: var(--font-manrope);
    font-size: 15px;
    line-height: 1.6;
    color: var(--cart-muted, #a7b0b3);
}

.cart-empty-btn {
    margin: 24px auto 0;
}


/* ==========================================================================
   Поиск в шапке (десктопная панель) — стиль Motors
   Мобильный поиск живёт в выезжающем меню (#menuItems .mobile-search-*)
   и оформлен отдельно выше — правила ниже скоуплены на .header-search__panel,
   чтобы его не задеть.
   ========================================================================== */

.header-search__panel {
    --hsearch-surface: #171d1f;
    --hsearch-line: rgba(255, 255, 255, 0.12);
    --hsearch-muted: #a7b0b3;
}

.header-search__backdrop {
    background: rgba(8, 11, 12, 0.72);
}

.header-search__panel .header-search__header {
    background: var(--hsearch-surface);
    border: 1px solid var(--hsearch-line);
    border-top: 3px solid var(--color-brand);
    border-radius: 0;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.header-search__panel .header-search__inner {
    gap: 14px;
    padding: 8px 20px;
}

.header-search__panel .header-search__icon {
    flex-shrink: 0;
    color: var(--hsearch-muted);
}

.header-search__panel .header-search__input {
    padding: 16px 0;
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-manrope);
    font-size: 16px;
}

.header-search__panel .header-search__input::placeholder {
    color: var(--hsearch-muted);
    opacity: 1;
}

.header-search__panel .header-search__close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--hsearch-line);
    border-radius: 0;
    background: transparent;
    color: var(--color-white);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-search__panel .header-search__close:hover {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

/* --- Список результатов --- */
.header-search__panel .header-search__results {
    margin: 0 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 1px solid var(--hsearch-line);
}

.header-search__panel .header-search__results .mobile-search-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-search__panel .header-search__results .mobile-search-item:last-child {
    border-bottom: none;
}

.header-search__panel .header-search__results .mobile-search-item a {
    gap: 16px;
    padding: 10px 6px !important;
    border-radius: 0;
    font-family: var(--font-exo2);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-white) !important;
}

.header-search__panel .header-search__results .mobile-search-item a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-brand) !important;
}

/* Техника приходит прозрачным PNG — на тёмном фоне нужна светлая подложка */
.header-search__panel .header-search__results .mobile-search-item img {
    padding: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #e7ebec 100%);
    border-radius: 0;
}

/* --- Служебные состояния --- */
.header-search__panel .mobile-search-hint {
    font-family: var(--font-manrope);
    color: var(--hsearch-muted);
}

.header-search__panel .mobile-search-hint--error {
    color: var(--color-brand);
}

.header-search__panel .header-search__loading {
    font-family: var(--font-manrope);
    color: var(--hsearch-muted);
}

.header-search__panel .header-search__loader-spinner {
    border-color: rgba(255, 255, 255, 0.16);
    border-top-color: var(--color-brand);
}

.header-search__panel .header-search__footer {
    padding: 0 20px 20px;
}

/* Результаты в мобильном меню — та же типографика и подложка под фото,
   что и в десктопной панели (цвета текста заданы выше, в блоке #menuItems). */
#menuItems .mobile-search-item a {
    font-family: var(--font-exo2);
    font-weight: 600;
    font-size: 15px;
}

#menuItems .mobile-search-item img {
    padding: 2px;
    background: linear-gradient(180deg, #ffffff 0%, #e7ebec 100%);
    border-radius: 0;
}

/* ============================================================
   Модалка выбора региона
   ============================================================ */

.gm-region-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 16px;
	/* Прокрутка теперь на оверлее, а не на окне: полоса стоит у края экрана,
	   как обычная браузерная, а не второй полосой внутри тёмной плашки. */
	overflow-y: auto;
	/* Список докручен до конца — дальнейший скролл не должен утекать на
	   страницу под модалкой. */
	overscroll-behavior: contain;
}

.gm-region-modal[hidden] {
	display: none;
}

.gm-region-modal__overlay {
	/* .gm-region-modal теперь прокручивается: будь подложка position: absolute
	   (от него же), она уехала бы вверх вместе с содержимым и низ страницы
	   под модалкой остался бы незатемнённым. От вьюпорта она всегда во всю
	   высоту экрана. */
	position: fixed;
	inset: 0;
	background: rgba(14, 19, 21, 0.82);
}

.gm-region-modal__window {
	position: relative;
	width: 100%;
	max-width: 980px;
	/* margin: auto вместо align-items: center на родителе: возвращает
	   вертикальное центрирование, когда содержимое короче экрана (например,
	   один найденный город), а высокий список при этом не обрезается сверху. */
	margin: auto;
	padding: 32px;
	background: #101820;
	color: #fff;
	font-family: var(--font-manrope);
}

/* Подпись поля поиска нужна только скринридеру: в теме нет общего правила
   для .screen-reader-text, поэтому прячем её здесь. */
.gm-region-modal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gm-region-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.gm-region-modal__close:hover {
	color: var(--color-brand);
}

.gm-region-modal__title {
	/* Отступ справа освобождает место под крестик: на узком экране заголовок
	   иначе заезжает под кнопку закрытия. */
	margin: 0 0 20px;
	padding-right: 48px;
	font-family: var(--font-exo2);
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
}

.gm-region-modal__subtitle {
	margin: -8px 0 20px;
	font-size: 15px;
	opacity: 0.7;
}

.gm-region-modal__note {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 3px solid var(--color-brand);
	background: rgba(222, 30, 38, 0.12);
	font-size: 14px;
}

.gm-region-modal__search {
	display: block;
	margin-bottom: 20px;
}

.gm-region-modal__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	font-family: var(--font-manrope);
	font-size: 16px;
}

.gm-region-modal__input:focus {
	border-color: var(--color-brand);
	outline: none;
}

.gm-region-modal__results {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

/* Города идут одним потоком, разбитым на колонки: буквы текут сверху вниз
   и переходят в следующую колонку, как в бумажном справочнике. */
.gm-region-cities {
	column-count: 4;
	column-gap: 24px;
}

.gm-region-letter {
	/* Буква не должна отрываться от своих городов на границе колонки. */
	break-inside: avoid;
	margin-bottom: 16px;
}

.gm-region-letter__title {
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--font-exo2);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-brand);
}

.gm-region-letter__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-region-city {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 5px 8px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--font-manrope);
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

/* Результаты поиска показывают город и его субъект в две строки: там нужна
   вертикальная раскладка, иначе название и субъект склеиваются в строку. */
.gm-region-modal__results .gm-region-city {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.gm-region-city:hover {
	background: var(--color-brand);
	color: #fff;
}

.gm-region-city.is-current {
	color: var(--color-brand);
	font-weight: 700;
}

.gm-region-city.is-current:hover {
	color: #fff;
}

.gm-region-city__region {
	font-size: 12px;
	opacity: 0.6;
}

/* Пометка «есть магазин»: скошенная плашка в стиле Motors. */
.gm-region-city__shop {
	flex: 0 0 auto;
	min-width: 18px;
	padding: 1px 5px;
	background: var(--color-brand);
	color: #fff;
	font-family: var(--font-exo2);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	transform: skewX(-12deg);
}

body.gm-region-modal-open {
	overflow: hidden;
}

@media (max-width: 1200px) {
	.gm-region-cities {
		column-count: 3;
	}
}

@media (max-width: 900px) {
	.gm-region-cities {
		column-count: 2;
	}
}

@media (max-width: 767px) {
	.gm-region-modal__window {
		padding: 24px 16px;
	}

	.gm-region-modal__title {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.gm-region-cities {
		column-count: 1;
	}
}

/* ============================================================
   Селектор региона в шапке
   ============================================================ */

.gm-region-switcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	/* Топбар тёмный (#101820), а наследуемый от body цвет текста — почти
	   чёрный: селектор с color: inherit на нём не читался бы. */
	color: var(--color-white);
	font-family: var(--font-manrope);
	line-height: 1;
	cursor: pointer;
	/* Подпись бывает длинной: без выбранного города показывается название
	   субъекта («Ханты-Мансийский автономный округ — Югра»). Без ограничения
	   ширины оно переносится на четыре строки и сжимает логотип вдвое, поэтому
	   лишнее обрезается многоточием. В мобильном топбаре свободного места
	   между логотипом и кнопкой поиска почти нет — там подпись мельче и уже. */
	font-size: 12px;
	max-width: 64px;
}

@media (min-width: 640px) {
	.gm-region-switcher {
		font-size: 14px;
		max-width: 200px;
	}
}

.gm-region-switcher:hover .gm-region-switcher__city {
	color: var(--color-brand);
}

.gm-region-switcher__icon {
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
	flex-shrink: 0;
}

.gm-region-switcher__icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: 5px;
	background: currentColor;
	transform: translateX(-50%);
}

.gm-region-switcher__city {
	border-bottom: 1px dashed currentColor;
	transition: color 0.2s;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* overflow: hidden обрезает выносные элементы букв при line-height: 1 */
	line-height: 1.3;
}

/* ============================================================
   Подтверждение пересчёта корзины
   ============================================================ */

.gm-region-confirm {
	/* Окно больше не ограничено высотой экрана и растягивается на весь
	   список городов: position: absolute (от окна) растянуло бы подтверждение
	   на всю эту высоту и его видимая часть оказалась бы где попало. От
	   вьюпорта оно всегда по центру экрана. */
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 32px;
	background: #101820;
	text-align: center;
}

.gm-region-confirm[hidden] {
	display: none;
}

/* Подтверждение позиционируется от вьюпорта и не зависит от прокрутки, но
   список городов за ним по-прежнему на месте: без запрета прокрутки
   посетитель может увести его за пределы видимой части, пока отвечает на
   вопрос. Прокручивается теперь оверлей, поэтому запрет ставится на нём. */
.gm-region-modal--confirming {
	overflow: hidden;
}

.gm-region-confirm__text {
	margin: 0;
	max-width: 42ch;
	font-family: var(--font-manrope);
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
}

.gm-region-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.gm-region-confirm__ok,
.gm-region-confirm__cancel {
	padding: 14px 28px;
	border: 0;
	font-family: var(--font-exo2);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.gm-region-confirm__ok {
	background: var(--color-brand);
	color: #fff;
}

.gm-region-confirm__cancel {
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================================
   Корзина без цены на часть позиций
   ============================================================ */

/* Ячейка итога в корзине запрещает перенос (.cart-total-amount), чтобы не
   разрывать сумму. Пометке перенос необходим: на узком экране она иначе
   распирает страницу по горизонтали. Саму сумму это не рвёт — в ней
   неразрывные пробелы (wc_price()). */
.gm-cart-total-partial {
	white-space: normal;
}

.gm-cart-total-partial__note {
	font-weight: 400;
}

/* В шапке итог живёт внутри узкой кнопки-пилюли: в строку пометка растянула
   бы её на половину топбара, поэтому там она уходит под сумму и мельчает.
   Кнопка задаёт себе ширину по содержимому, переносить пометку внутри неё
   незачем. */
.header-cart-total .gm-cart-total-partial {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.15;
}

.header-cart-total .gm-cart-total-partial__note {
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0;
	white-space: nowrap;
	opacity: 0.65;
}

.gm-cart-notice {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-left: 4px solid var(--color-brand);
	background: rgba(222, 30, 38, 0.08);
	font-family: var(--font-manrope);
	font-size: 15px;
	line-height: 1.5;
	color: #101820;
}

/* --- Подтверждение e-mail кодом в форме заказа --- */

.gmotor-evc__row {
    position: relative;
}

.gmotor-evc__row .gmotor-checkout-form__input {
    /* место под кнопку внутри поля */
    padding-right: 140px;
}

.gmotor-evc__action {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-exo2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-brand);
    cursor: pointer;
}

.gmotor-evc__action:disabled {
    color: #6f7a80;
    cursor: default;
}

/* Правое смещение задаётся только в состоянии verified — в остальных
   состояниях отметка не видна вовсе (см. блок состояний ниже). */
.gmotor-evc__status {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-exo2);
    font-size: 13px;
    font-weight: 600;
    color: #2fae5e;
    pointer-events: none;
}

.gmotor-evc__hint,
.gmotor-evc__error {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.35;
}

.gmotor-evc__hint {
    color: #6f7a80;
}

.gmotor-evc__error {
    color: var(--color-brand);
}

.gmotor-evc__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-brand);
    text-decoration: underline;
    cursor: pointer;
}

.gmotor-evc__row--code {
    margin-top: 10px;
}

.gmotor-evc__gate {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-brand);
}

/* Состояния строки */

.gmotor-checkout-form__field--email[data-evc-state="idle"] .gmotor-evc__status,
.gmotor-checkout-form__field--email[data-evc-state="idle"] [data-evc-change],
.gmotor-checkout-form__field--email[data-evc-state="idle"] .gmotor-evc__row--code,
.gmotor-checkout-form__field--email[data-evc-state="sending"] .gmotor-evc__status,
.gmotor-checkout-form__field--email[data-evc-state="sending"] [data-evc-change],
.gmotor-checkout-form__field--email[data-evc-state="sending"] .gmotor-evc__row--code,
.gmotor-checkout-form__field--email[data-evc-state="sent"] .gmotor-evc__status,
.gmotor-checkout-form__field--email[data-evc-state="sent"] [data-evc-send],
.gmotor-checkout-form__field--email[data-evc-state="verified"] [data-evc-send],
.gmotor-checkout-form__field--email[data-evc-state="verified"] .gmotor-evc__row--code {
    display: none;
}

.gmotor-checkout-form__field--email[data-evc-state="verified"] .gmotor-evc__hint {
    display: none;
}

.gmotor-checkout-form__field--email[data-evc-state="verified"] .gmotor-evc__email {
    border-color: rgba(47, 174, 94, 0.6) !important;
    /* Реалистичный адрес (~30 символов) не всегда помещается по ширине поля —
       на переполнении показываем многоточие вместо немого обрезания символа. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* В verified внутри поля остаётся только компактная отметка «Подтверждён» —
   кнопка «Изменить» ниже выходит из потока под поле отдельной строкой,
   поэтому запаса под одну кнопку (общее правило, 140px) достаточно, и
   отметка встаёт на её обычное место кнопки — right: 12px. */
.gmotor-checkout-form__field--email[data-evc-state="verified"] .gmotor-evc__status {
    right: 12px;
}

/* Кнопка «Изменить» уходит под поле, но остаётся вне потока: иначе она
   растит высоту строки, и отметка «Подтверждён», центрированная по строке,
   съезжает вниз относительно поля. Место под кнопку даёт padding-bottom
   контейнера — см. правило ниже. */
.gmotor-checkout-form__field--email[data-evc-state="verified"] [data-evc-change] {
    top: 100%;
    right: auto;
    left: 0;
    transform: none;
    margin-top: 8px;
}

.gmotor-checkout-form__field--email[data-evc-state="verified"] {
    padding-bottom: 30px;
}

.gmotor-evc__error:empty {
    display: none;
}

/* Неверный код: краснеет и само поле, а не только текст под строкой.
   Класс снимает JS при следующем вводе. !important — потому что общее
   правило поля формы задаёт рамку тоже через !important. */
.gmotor-evc__code--error {
    border-color: var(--color-brand) !important;
}

/* Тёмная корзина: то же поле, что у остальных полей формы */

/* body.gmotor-cart .gmotor-checkout-form__input:not([type="checkbox"]) задаёт
   padding шорткодом и по специфичности перебивает общее правило выше —
   переустанавливаем отступ под кнопку внутри поля отдельно для тёмной темы. */
body.gmotor-cart .gmotor-evc__row .gmotor-checkout-form__input {
    padding-right: 140px;
}

body.gmotor-cart .gmotor-evc__row--code .gmotor-checkout-form__input {
    padding-right: 130px;
}

/* Аналогично: body.gmotor-cart .gmotor-checkout-form__input:not([type="checkbox"])
   красит рамку через !important, а по специфичности (наличие body) перебивает
   даже !important-правило зеленоватой рамки выше — переустанавливаем и его. */
body.gmotor-cart .gmotor-checkout-form__field--email[data-evc-state="verified"] .gmotor-evc__email {
    border-color: rgba(47, 174, 94, 0.6) !important;
}

body.gmotor-cart .gmotor-evc__hint {
    color: var(--cart-muted);
}

/* Та же история, что с зелёной рамкой выше: body.gmotor-cart
   .gmotor-checkout-form__input:not([type="checkbox"]) перебивает правило
   без body по специфичности даже с !important — повторяем для тёмной корзины.
   Селектор специально длинный: он должен перебить и общее правило поля
   (0,3,1), и правило :focus (0,4,1) — иначе рамка краснела бы только пока
   поле в фокусе, то есть ошибка пропадала бы при первом же клике мимо. */
body.gmotor-cart .gmotor-evc__row--code .gmotor-checkout-form__input.gmotor-evc__code--error {
    border-color: var(--color-brand) !important;
}

@media screen and (max-width: 480px) {
    .gmotor-evc__row .gmotor-checkout-form__input {
        padding-right: 120px;
    }

    .gmotor-evc__action,
    .gmotor-evc__status {
        font-size: 12px;
    }
}

/* --- Подтверждение отправленной заявки на странице корзины --- */

.gmotor-order-received {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 20px;
    background: rgba(47, 174, 94, 0.12);
    border-left: 3px solid #2fae5e;
    font-family: var(--font-exo2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #2fae5e;
}

.gmotor-order-received__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .gmotor-order-received {
        padding: 14px 16px;
        font-size: 14px;
    }
}

/* ======================================================================
   Форма заказа: способ получения, адрес доставки, оплата (задача 10).
   Блоки печатают template-parts/woocommerce/checkout/{delivery,address,
   payment}.php и всегда лежат внутри тёмной карточки корзины
   (body.gmotor-cart .gmotor-checkout-form) — цвета берём из тех же токенов
   --cart-*, что и остальная форма и блок подтверждения почты .gmotor-evc__*
   выше, чтобы новые блоки не выбивались из общего вида.
   ====================================================================== */

/* --- Радиокнопки: способ получения и способ оплаты ---
   Общий вид у .gmotor-delivery__rate и .gmotor-payment__gateway: строка-
   карточка с рамкой. Индикатор — квадрат вместо системного круга (в теме
   скруглений нет, appearance: none снимает системный вид совсем), при
   отметке рамка строки и заливка индикатора становятся цветом бренда. */

.gmotor-delivery__rates,
.gmotor-payment__gateways {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.gmotor-delivery__rate,
.gmotor-payment__gateway {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--cart-line, rgba(255, 255, 255, 0.12));
    background: var(--cart-field, #101820);
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.gmotor-delivery__rate:hover,
.gmotor-payment__gateway:hover {
    border-color: var(--color-brand);
}

.gmotor-delivery__rate:has(.gmotor-delivery__rate-input:checked),
.gmotor-payment__gateway:has(.gmotor-payment__gateway-input:checked) {
    border-color: var(--color-brand);
    background: rgba(222, 30, 38, 0.1);
}

.gmotor-delivery__rate-input,
.gmotor-payment__gateway-input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    border: 1px solid var(--cart-line-strong, rgba(255, 255, 255, 0.18));
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.gmotor-delivery__rate-input:checked,
.gmotor-payment__gateway-input:checked {
    border-color: var(--color-brand);
}

.gmotor-delivery__rate-input:checked::after,
.gmotor-payment__gateway-input:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--color-brand);
}

.gmotor-delivery__rate-input:focus-visible,
.gmotor-payment__gateway-input:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.gmotor-delivery__rate-label,
.gmotor-payment__gateway-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-manrope);
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-white);
}

.gmotor-delivery__rate-cost {
    margin-left: auto;
    font-family: var(--font-exo2);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-white);
    white-space: nowrap;
}

/* Описание способа оплаты — отдельной строкой под заголовком, с отступом
   под ширину индикатора (18px) + рамку (2 × 1px) + промежуток (10px). */
.gmotor-payment__gateway-description {
    flex-basis: 100%;
    margin-left: 30px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cart-muted, #a7b0b3);
}

/* --- ИНН плательщика (появляется при безналичном расчёте) --- */

/* Отступ как у списка точек самовывоза: оба поля — продолжение выбора
   в блоке выше, а не самостоятельные разделы формы. */
.gmotor-payment__inn {
    margin-top: 12px;
}

.gmotor-payment__inn-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cart-muted, #a7b0b3);
}

/* --- Точка самовывоза (список точек продаж) --- */

.gmotor-delivery__point {
    margin-top: 12px;
}

.gmotor-delivery__note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--cart-muted, #a7b0b3);
}

/* --- Адрес доставки: поле с подсказками Яндекс.Геосаджеста --- */

.gmotor-address__row {
    position: relative;
}

/* Список подсказок — оверлей поверх формы, а не блок в потоке документа:
   иначе раскрытие списка раздвигало бы соседние поля вниз. */
.gmotor-address__suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--cart-field, #101820);
    border: 1px solid var(--cart-line-strong, rgba(255, 255, 255, 0.18));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

/* Собственная прокрутка списка: скрипт подсветки двигает активную строку
   стрелками и зовёт scrollIntoView({block:'nearest'}) — без overflow здесь
   прокрутилась бы вся страница под покупателем, а не список. Высота — под
   4–5 строк, при семи вариантах остальные доступны прокруткой. */
.gmotor-address__suggest-list {
    list-style: none;
    max-height: 266px;
    overflow-y: auto;
    padding: 4px 0;
}

.gmotor-address__suggest-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cart-line, rgba(255, 255, 255, 0.12));
    cursor: pointer;
}

.gmotor-address__suggest-item:last-child {
    border-bottom: none;
}

.gmotor-address__suggest-title {
    display: block;
    font-family: var(--font-manrope);
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-white);
}

.gmotor-address__suggest-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--cart-muted, #a7b0b3);
}

/* Подсветка активной строки — клавиатурная навигация стрелками (класс от
   скрипта формы) и наведение мышью дают один и тот же вид. */
.gmotor-address__suggest-item--active,
.gmotor-address__suggest-item:hover {
    background: rgba(222, 30, 38, 0.12);
}

.gmotor-address__suggest-item--active .gmotor-address__suggest-title {
    color: var(--color-brand);
}

/* Подсказка без дома — по клику скрипт покажет ошибку «укажите номер дома»
   и выбор не завершит; приглушаем строку заранее, чтобы это было видно
   ещё до клика. */
.gmotor-address__suggest-item--nohouse {
    opacity: 0.65;
}

.gmotor-address__suggest-item--nohouse .gmotor-address__suggest-title {
    font-style: italic;
}

.gmotor-address__hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--cart-muted, #a7b0b3);
}

/* Строка распознанного адреса — мелкий приглушённый текст под полем, тот
   же приём, что .gmotor-evc__hint/.gmotor-evc__error выше; состояние
   ошибки красит её цветом бренда. */
.gmotor-address__recognized {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--cart-muted, #a7b0b3);
}

.gmotor-address__recognized--error {
    color: var(--color-brand);
}

/* Страховка: элементы прячутся атрибутом hidden — PHP при первой отрисовке
   (delivery.php/address.php) и скрипт формы при переключении способа
   получения (checkout.js, syncDeliveryView()/closeSuggest()/showAddressStatus()).
   Глобальной страховки [hidden]{display:none!important} в теме нет, а
   правила display выше в этом блоке способны его перебить — фиксируем
   точечно для всех узлов, которые скрипт и шаблон скрывают этим атрибутом. */
.gmotor-checkout-form__field--address[hidden],
.gmotor-checkout-form__field--flat[hidden],
.gmotor-delivery__point[hidden],
.gmotor-address__suggest[hidden],
.gmotor-address__recognized[hidden],
.gmotor-payment__gateway[hidden],
.gmotor-payment__inn[hidden] {
    display: none !important;
}

/* --- Общая ошибка/успех формы (пересчёт доставки, отправка заявки) в тёмной корзине ---
   Базовые .gmotor-checkout-form__error/__success (выше в файле) — светлые
   плашки для прежнего светлого фона формы; в тёмной карточке корзины нужен
   тот же тёмный тон, что у остальных блоков формы. */

body.gmotor-cart .gmotor-checkout-form__error {
    background: rgba(222, 30, 38, 0.12);
    border: 1px solid var(--color-brand);
    color: var(--color-white);
}

body.gmotor-cart .gmotor-checkout-form__success {
    background: rgba(47, 174, 94, 0.12);
    border: 1px solid #2fae5e;
    color: var(--color-white);
}

@media screen and (max-width: 480px) {
    .gmotor-address__suggest-list {
        max-height: 220px;
    }
}

/* ==========================================================================
   Раздел «Новости» — тёмная тема Motors
   Базовая вёрстка новостей осталась от прежнего дизайна (светлый фон, скругления,
   курсив). Здесь она приводится к текущей теме: тёмный фон, Exo 2, прямые углы,
   красный акцент. Правила ниже перекрывают старые за счёт префикса .news-page.
   ========================================================================== */
.news-page {
    /* Локальные токены тёмной темы раздела — те же, что на «О бренде» */
    --news-bg: #0e1315;
    --news-surface: #171d1f;
    --news-line: rgba(255, 255, 255, 0.12);
    --news-muted: #a7b0b3;

    background-color: var(--news-bg);
    color: var(--color-white);
}

.news-page .container > .news-list:first-child {
    margin-top: 40px;
}

.news-page .news-list {
    padding: 40px 0 56px;
}

.news-page .news-list + .news-list {
    padding-top: 0;
}

/* --- Карточка новости --- */
.news-page .news-card__link {
    background-color: var(--news-surface);
    border: 1px solid var(--news-line);
    border-radius: 0;
    color: var(--color-white);
    padding: 8px 8px 20px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.news-page .news-card__link:hover {
    border-color: var(--color-brand);
    background-color: #1c2426;
}

.news-page .news-card__image {
    border-radius: 0;
}

.news-page .news-card__title {
    font-family: var(--font-exo2);
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

.news-page .news-card__excerpt,
.news-page .news-card__date {
    color: var(--news-muted);
}

/* Бейдж категории — скошенная красная плашка вместо серой «таблетки» */
.news-page .news-card__category {
    background: var(--color-brand);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-exo2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0 18px 0 12px;
    height: 26px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* --- Блок подписки --- */
.news-page .news-insert-block {
    border-radius: 0;
    background-color: var(--news-surface);
    border: 1px solid var(--news-line);
}

.news-page .news-insert-block__title {
    font-family: var(--font-exo2);
    text-transform: uppercase;
}

.news-page .news-insert-block__form input[type="email"] {
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--news-line);
    color: var(--color-white);
}

.news-page .news-insert-block__form button,
.news-page .news-insert-block__form .ff-btn-submit {
    border-radius: 0;
    background-color: var(--color-brand);
    border: none;
    color: var(--color-white);
    font-family: var(--font-exo2);
    font-weight: 700;
    text-transform: uppercase;
    opacity: 1;
}

.news-page .news-insert-block__form button:hover,
.news-page .news-insert-block__form .ff-btn-submit:hover {
    background-color: var(--color-brand-dark);
}

/* --- Одиночная новость --- */
.news-page--single .single-news__image img,
.news-page--single .single-news__content-block img,
.news-page--single .single-news__gallery-item img {
    border-radius: 0;
}

/* Белая «шторка» под фото превращается в тёмную панель без скруглений */
.news-page--single .single-news__description {
    background-color: var(--news-bg);
    border-radius: 0;
}

.news-page--single .single-news__content-title {
    font-family: var(--font-exo2);
    font-style: normal;
    color: var(--color-white);
}

.news-page--single .single-news__content-text,
.news-page--single .single-news__content-block {
    color: var(--news-muted);
    font-size: 15px;
    line-height: 1.65;
}

.news-page--single .single-news__content-block strong,
.news-page--single .single-news__content-block h2,
.news-page--single .single-news__content-block h3,
.news-page--single .single-news__content-block h4 {
    color: var(--color-white);
}

.news-page--single .single-news__content-block a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}

.news-page--single .single-news__content-block a:hover {
    color: var(--color-brand);
    text-decoration-color: var(--color-brand);
}

/* Иконки внутри разметки приходят с чёрной заливкой в атрибуте — перекрашиваем через CSS */
.news-page--single .single-news__back-up,
.news-page--single .single-news__copy-link,
.news-page--single .single-news__footer {
    color: var(--color-white);
}

.news-page--single .single-news__back-up svg path,
.news-page--single .single-news__copy-link svg path,
.news-page--single .single-news__gallery-arrows .splide__arrow svg path {
    fill: currentColor;
    stroke: currentColor;
}

.news-page--single .single-news__footer {
    background-color: var(--news-surface);
    border: 1px solid var(--news-line);
    border-radius: 0;
}

.news-page--single .single-news__gallery-arrows button {
    border-radius: 0;
    background-color: var(--news-surface);
    border: 1px solid var(--news-line);
    color: var(--color-white);
}

.news-page--single .single-news__gallery-arrows button:hover {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
}

/* Светло-серая заливка ховера тонула в тёмной теме: белая плашка с белой иконкой.
   Берём тот же ховер, что у стрелок галереи, и видимую на тёмном рамку */
.news-page--single .single-news__back-up {
    border-color: var(--news-line);
}

.news-page--single .single-news__back-up:hover {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-white);
}

.news-page--single .breadcrumbs,
.news-page--single .breadcrumbs a,
.news-page--single .woocommerce-breadcrumb,
.news-page--single .woocommerce-breadcrumb a {
    color: var(--news-muted);
}

/* Тёмный фон всей страницы новостей: main не покрывает зазор до футера,
   а под hero старая тема рисует белую «шторку» .hero-bottom */
body.page-template-page-news,
body.tax-news_category,
body.single-news {
    background-color: #0e1315;
}

.news-page .hero-bottom {
    background-color: var(--news-bg);
}

/* Кнопка подписки неактивна, пока не отмечено согласие — приглушённый бренд вместо розового */
/* Общее правило для неактивной кнопки FluentForms стоит с !important, поэтому перебиваем тем же */
.news-page .news-insert-block__form .ff-btn-submit:disabled,
.news-page .news-insert-block__form button:disabled {
    background-color: rgba(222, 30, 38, 0.45) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1 !important;
}

/* Шапка новости — это узкий блок с крошками; общий main{min-height:65vh}
   раздувал его на пол-экрана пустоты перед фото */
.news-page--single main#primary {
    min-height: 0;
}

/* --- Шапка раздела: hero с фото и фильтром убран, заголовок как на «Магазинах» --- */
.news-page {
    /* Шапка сайта — position: fixed, раньше её высоту компенсировал hero */
    padding-top: var(--header-height);
    padding-bottom: 72px;
}

/* У страницы новости отступ под фикс-шапку уже задан .single-product-container */
.news-page--single {
    padding-bottom: 0;
}

.news-page__head {
    position: relative;
    padding-top: 40px;
    padding-bottom: 20px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--news-line);
}

@media (min-width: 1024px) {
    .news-page__head {
        padding-top: 56px;
        padding-bottom: 24px;
        margin-bottom: 32px;
    }
}

/* Красный сегмент на hairline — фирменный акцент */
.news-page__head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background-color: var(--color-brand);
}

.news-page__title {
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
}

@media (min-width: 640px) {
    .news-page__title {
        font-size: 38px;
    }
}

@media (min-width: 1024px) {
    .news-page__title {
        font-size: 46px;
    }
}

/* Отступ сверху даёт шапка раздела */
.news-page .news-list {
    padding: 0 0 8px;
}

.news-page + .footer {
    margin-top: 0;
}

/* --- Текст новости: колонка шире и кегль крупнее --- */
.news-page--single .single-news__content {
    width: 992px;
    max-width: 100%;
}

.news-page--single .single-news__content-text,
.news-page--single .single-news__content-block {
    font-size: 17px;
    line-height: 1.6;
}

/* ==========================================================================
   Экран оплаты заказа — /checkout/order-pay/{id}/?key=…
   Разметку даёт woocommerce/checkout/order-receipt.php (переопределение
   шаблона WooCommerce). Родной шаблон обёртки не имеет, а страница
   оформления идёт через page.php → content-page.php, где контейнера тоже
   нет: сводка заказа и форма шлюза ложились в левый верхний угол окна и
   наполовину уезжали под фиксированную шапку.
   Оформление — то же, что у корзины: экран оплаты продолжает оформление
   заявки, и выглядеть он должен так же, а не как обычная страница.
   ========================================================================== */

body.gmotor-order-pay,
body.gmotor-thanks {
    /* Те же локальные токены, что у body.gmotor-cart. */
    --cart-bg: #0e1315;
    --cart-surface: #171d1f;
    --cart-line: rgba(255, 255, 255, 0.12);
    --cart-muted: #a7b0b3;

    background-color: var(--cart-bg);
    color: var(--color-white);
    padding-top: 0;
}

/* Шапка фиксированная, поэтому отступ сверху обязателен, и берётся он только
   из токена: прибитые пиксели разъедутся при следующей смене шапки. */
body.gmotor-order-pay .site-main,
body.gmotor-thanks .site-main {
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 72px;
}

body.gmotor-order-pay .footer,
body.gmotor-thanks .footer {
    margin-top: 0;
}

/* Заголовок страницы оформления («Оформить заказ») к экрану оплаты не
   относится и стоит вне контейнера — h1 печатает шаблон карточки. */
body.gmotor-order-pay .entry-header,
body.gmotor-thanks .entry-header {
    display: none;
}

.gmotor-order-pay__title,
.gmotor-thanks__title {
    margin: 0 0 24px;
    font-family: var(--font-exo2);
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 115%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-white);
}

@media (min-width: 1024px) {

    .gmotor-order-pay__title,
    .gmotor-thanks__title {
        font-size: 44px;
    }
}

/* Экран оплаты целиком — по центру страницы. Карточка вчетверо уже
   контейнера, и прижатая к его левому краю она читается как сбой вёрстки.
   Центрируем обёртку, а не карточку: иначе заголовок над ней остался бы
   у левого края.
   Селектор с body обязателен: класс gmotor-order-pay висит и на <body>
   (им тема красит страницу, см. gmotor_body_classes()), и на обёртке —
   правило без body ужало бы до 620px саму страницу. */
body.gmotor-order-pay .gmotor-order-pay {
    max-width: 620px;
    margin: 0 auto;
}

/* Карточка уже контейнера: на экране только сводка заказа и одна кнопка,
   на всю ширину 1440px эти четыре строки растянулись бы в пустую полосу. */
.gmotor-order-pay__card,
.gmotor-thanks__card {
    max-width: 620px;
    padding: 24px;
    background: var(--cart-surface);
    /* Motors: без скруглений, акцент — красная линия сверху (как у формы заказа). */
    border-top: 3px solid var(--color-brand);
}

@media (min-width: 768px) {

    .gmotor-order-pay__card,
    .gmotor-thanks__card {
        padding: 28px;
    }
}

/* Уведомление «Заказ принят» на экране оплаты: разметку даёт
   template-parts/woocommerce/order-accepted.php. Цвет и раскладка — как
   у зелёной плашки подтверждения заявки на корзине (.gmotor-order-received),
   но фон здесь тёмный, поэтому непрозрачность подложки чуть выше. */
.gmotor-order-accepted {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px 20px;
    background: rgba(47, 174, 94, 0.14);
    border-left: 3px solid #2fae5e;
    font-family: var(--font-exo2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #2fae5e;
}

.gmotor-order-accepted__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .gmotor-order-accepted {
        padding: 14px 16px;
        font-size: 14px;
    }
}

.gmotor-order-pay__details,
.gmotor-thanks__details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gmotor-order-pay__details li,
.gmotor-thanks__details li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cart-line);
}

.gmotor-order-pay__details li:first-child,
.gmotor-thanks__details li:first-child {
    padding-top: 0;
}

.gmotor-order-pay__label,
.gmotor-thanks__label {
    font-size: 14px;
    color: var(--cart-muted);
}

.gmotor-order-pay__value,
.gmotor-thanks__value {
    font-family: var(--font-exo2);
    font-weight: 700;
    font-size: 15px;
    color: var(--color-white);
    text-align: right;
}

.gmotor-order-pay__value--total,
.gmotor-thanks__value--total {
    font-size: 20px;
    color: var(--color-brand);
}

.gmotor-order-pay__gateway {
    margin-top: 24px;
}

/* Текст шлюза («Вы будете перенаправлены на страницу банка» / «Нажмите
   кнопку Оплатить…») печатает плагин своим <h3> — по умолчанию это
   чёрный жирный заголовок посреди тёмной карточки. */
.gmotor-order-pay__gateway h3 {
    margin: 0 0 16px;
    font-family: var(--font-manrope);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.45;
    text-transform: none;
    color: var(--cart-muted);
}

.gmotor-order-pay__gateway form {
    margin: 0;
}

/* Кнопку оплаты плагин отдаёт как input.btn.btn-default: базовый .btn темы
   к ней применяется, а цвета у btn-default нет — оставалась серая системная
   кнопка. Красим как основную кнопку сайта и растягиваем по карточке:
   на этом экране она единственное действие. */
.gmotor-order-pay__gateway .btn-default {
    width: 100%;
    max-width: none;
    background-color: var(--color-brand);
    color: var(--color-white);
    /* Кнопка — input, у неё нет наследования от .btn для appearance в Safari. */
    -webkit-appearance: none;
    appearance: none;
}

.gmotor-order-pay__gateway .btn-default:hover {
    background-color: var(--color-brand-dark);
}

/* ==========================================================================
   Подтверждение почты: причина блокировки кнопки и ошибки кода — плашкой
   Текст 12px цветом --color-brand терялся: он стоит вплотную к красной
   кнопке «Отправить заявку», и на тёмном фоне читается как её тень.
   Плашка повторяет приём общей ошибки формы (.gmotor-checkout-form__error):
   красная рамка, красный фон в 8–12%, знак «!». Сплошной красный фон здесь
   не годится — плашка стоит впритык к красной кнопке и слилась бы с ней
   в один прямоугольник.
   ========================================================================== */

.gmotor-evc__gate,
.gmotor-evc__error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: rgba(222, 30, 38, 0.08);
    border: 1px solid var(--color-brand);
    font-family: var(--font-exo2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-brand-dark);
    text-align: left;
}

/* Знак «!» разметкой, а не иконкой: содержимое плашки печатают PHP и JS,
   и вставить туда картинку было бы правкой в трёх местах. */
.gmotor-evc__gate::before,
.gmotor-evc__error::before {
    content: "!";
    flex: 0 0 18px;
    height: 18px;
    background: var(--color-brand);
    color: var(--color-white);
    font-size: 13px;
    line-height: 18px;
    text-align: center;
}

/* Кнопку «Отправить заявку» JS разблокирует вместе со скрытием плашки —
   без этого правила display:flex выше перебивает скрытие атрибутом. */
.gmotor-evc__gate[hidden] {
    display: none;
}

/* Тёмная корзина: тот же тон, что у .gmotor-checkout-form__error. */
body.gmotor-cart .gmotor-evc__gate,
body.gmotor-cart .gmotor-evc__error {
    background: rgba(222, 30, 38, 0.12);
    color: var(--color-white);
}

/* ==========================================================================
   Экран «Заказ получен» — /checkout/order-received/{id}/?key=…
   Общее с экраном оплаты (контейнер, отступ под шапку, карточка, строки
   сводки) описано выше — здесь только своё: ожидание подтверждения платежа
   и таблицы состава заказа и адресов, которые печатает WooCommerce хуком
   woocommerce_thankyou.
   ========================================================================== */

body.gmotor-thanks .gmotor-thanks__card .woocommerce-thankyou-order-received,
body.gmotor-thanks .gmotor-thanks__card .woocommerce-notice--success {
    margin: 0 0 20px;
    font-family: var(--font-exo2);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
}

/* Онлайн-оплата подтверждается не в браузере, а запросом от платёжной
   системы — он может прийти позже, чем покупатель вернётся на сайт.
   Пока подтверждения нет, показываем ожидание, а не «не оплачено»:
   статус экран обновит сам (assets/js/order-status.js). */
.gmotor-thanks__awaiting {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--cart-line);
    font-family: var(--font-exo2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white);
}

/* Индикатор — мигающий квадрат и бегущая полоса, а не крутящееся кольцо:
   скругления по сайту сняты общим правилом с !important (Motors-стиль),
   и кольцо из border-radius всё равно вышло бы вертящимся квадратом. */
.gmotor-thanks__spinner {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    background: var(--color-brand);
    animation: gmotor-thanks-pulse 1.2s ease-in-out infinite;
}

.gmotor-thanks__awaiting::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30%;
    height: 2px;
    background: var(--color-brand);
    animation: gmotor-thanks-progress 1.4s ease-in-out infinite;
}

@keyframes gmotor-thanks-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@keyframes gmotor-thanks-progress {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(430%);
    }
}

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

    .gmotor-thanks__spinner,
    .gmotor-thanks__awaiting::after {
        animation: none;
    }
}

/* Подтверждения так и не дождались: продолжать показывать движение — врать. */
.gmotor-thanks__awaiting--late {
    background: rgba(222, 30, 38, 0.12);
    border-color: var(--color-brand);
}

.gmotor-thanks__awaiting--late .gmotor-thanks__spinner,
.gmotor-thanks__awaiting--late::after {
    animation: none;
}

.gmotor-thanks__awaiting--late::after {
    display: none;
}

.gmotor-thanks__failed {
    margin: 0 0 20px;
    color: var(--color-white);
}

.gmotor-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

/* --- Состав заказа и адреса: печатает WooCommerce на woocommerce_thankyou --- */

body.gmotor-thanks .woocommerce-order-details,
body.gmotor-thanks .woocommerce-customer-details {
    max-width: 620px;
    margin-top: 32px;
}

/* На широком экране состав заказа уходит во вторую колонку: сводка узкая,
   и справа от неё оставался пустой экран, а таблица товаров жалась в те же
   620px, хотя строка доставки с адресом точки выдачи занимает две строки.
   Раскладка стилями, а не разметкой: секции печатает хук woocommerce_thankyou,
   и разложить их по колонкам в шаблоне можно было бы только вызвав его части
   по отдельности — тогда всё, что дописывают плагины, потерялось бы.

   Порог 1280, а не 1024: до него контейнер сайта ещё резиновый, и вторая
   колонка выходила по ~350px — таблице с адресом точки выдачи там тесно. */
@media (min-width: 1280px) {
    .gmotor-thanks__body {
        display: grid;
        grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    /* Всё, чего мы не знаем в лицо (вывод плагинов на том же хуке), —
       во всю ширину под колонками, а не в случайную ячейку. */
    .gmotor-thanks__body > * {
        grid-column: 1 / -1;
    }

    .gmotor-thanks__card {
        grid-column: 1;
        grid-row: 1;
    }

    body.gmotor-thanks .woocommerce-order-details {
        grid-column: 2;
        grid-row: 1 / span 2;
        max-width: none;
        margin-top: 0;
    }

    body.gmotor-thanks .woocommerce-customer-details {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0;
    }
}

body.gmotor-thanks .woocommerce-order-details__title,
body.gmotor-thanks .woocommerce-column__title,
body.gmotor-thanks .woocommerce-customer-details h2 {
    margin: 0 0 16px;
    font-family: var(--font-exo2);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}

body.gmotor-thanks .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    background: var(--cart-surface);
}

body.gmotor-thanks .woocommerce-table--order-details th,
body.gmotor-thanks .woocommerce-table--order-details td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cart-line);
    text-align: left;
    vertical-align: top;
    font-size: 14px;
    color: var(--color-white);
}

body.gmotor-thanks .woocommerce-table--order-details thead th {
    font-family: var(--font-exo2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cart-muted);
}

body.gmotor-thanks .woocommerce-table--order-details tfoot th {
    font-weight: 400;
    color: var(--cart-muted);
}

body.gmotor-thanks .woocommerce-table--order-details tfoot td,
body.gmotor-thanks .woocommerce-table--order-details .product-total {
    font-family: var(--font-exo2);
    font-weight: 700;
    text-align: right;
}

/* Неразрывной остаётся только цена. В строке «Доставка» лежит полный адрес
   точки выдачи — от nowrap таблица переставала помещаться в колонку и
   тянула горизонтальную прокрутку на всю страницу. */
body.gmotor-thanks .woocommerce-table--order-details .product-total {
    white-space: nowrap;
}

body.gmotor-thanks .woocommerce-table--order-details tfoot td {
    overflow-wrap: anywhere;
}

body.gmotor-thanks .woocommerce-table--order-details thead .product-total {
    text-align: right;
}

body.gmotor-thanks .woocommerce-table--order-details a {
    color: var(--color-white);
    text-decoration: none;
}

body.gmotor-thanks .woocommerce-table--order-details a:hover {
    color: var(--color-brand);
}

/* Ссылки-действия по заказу («Оплатить», «Повторить») WooCommerce выводит
   классом .button — приводим к кнопке сайта. */
body.gmotor-thanks .woocommerce-button,
body.gmotor-thanks .order-actions-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    background: var(--color-brand);
    color: var(--color-white) !important;
    font-family: var(--font-exo2);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
}

body.gmotor-thanks .woocommerce-button:hover,
body.gmotor-thanks .order-actions-button:hover {
    background: var(--color-brand-dark);
}

body.gmotor-thanks .woocommerce-customer-details address {
    padding: 16px;
    background: var(--cart-surface);
    border: 1px solid var(--cart-line);
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-white);
}

body.gmotor-thanks .woocommerce-customer-details--phone,
body.gmotor-thanks .woocommerce-customer-details--email {
    margin: 6px 0 0;
    color: var(--cart-muted);
}

/* Две колонки адресов: у самовывоза второй нет, поэтому не grid с пустотой. */
body.gmotor-thanks .woocommerce-columns--addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

body.gmotor-thanks .woocommerce-columns--addresses .woocommerce-column {
    flex: 1 1 260px;
    min-width: 0;
}

/* Запрос подтверждения почты на экране «Заказ получен»: WooCommerce показывает
   его вместо благодарности, когда гость вернулся по ссылке позже отсрочки
   проверки. Формы входа здесь больше нет — кабинет выключен (inc/no-account.php).
   Разметка формы — своя (woocommerce/checkout/form-verify-email.php), карточка
   та же, что у сводки заказа. Сообщение «Ваш заказ принят» WooCommerce печатает
   до формы, отдельным абзацем вне карточки, — оно и работает заголовком экрана. */
body.gmotor-thanks .woocommerce-thankyou-order-received {
    margin: 0;
    font-family: var(--font-exo2);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
}

body.gmotor-thanks .gmotor-verify {
    max-width: 620px;
    margin: 24px 0 0;
    padding: 24px;
    background: var(--cart-surface);
    border-top: 3px solid var(--color-brand);
}

body.gmotor-thanks .gmotor-verify label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--cart-muted);
}

body.gmotor-thanks .gmotor-verify input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--cart-field);
    border: 1px solid var(--cart-line);
    border-radius: 0;
    color: var(--color-white);
    font-family: var(--font-manrope);
    font-size: 15px;
}

body.gmotor-thanks .woocommerce-form-row,
body.gmotor-thanks .form-row {
    margin: 0 0 16px;
}

body.gmotor-thanks .gmotor-verify button {
    height: 48px;
    padding: 0 28px;
    background: var(--color-brand);
    border: none;
    border-radius: 0;
    color: var(--color-white);
    font-family: var(--font-exo2);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

body.gmotor-thanks .gmotor-verify button:hover {
    background: var(--color-brand-dark);
}

body.gmotor-thanks .gmotor-verify__text {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--cart-muted);
}

body.gmotor-thanks .gmotor-verify__actions {
    margin: 0;
}

/* Уведомления WooCommerce на тёмном фоне: родные стили плагина отключены
   (woocommerce_enqueue_styles → пустой массив в inc/woocommerce.php),
   поэтому плашки приезжают вовсе без оформления. */
body.gmotor-order-pay .woocommerce-info,
body.gmotor-order-pay .woocommerce-error,
body.gmotor-order-pay .woocommerce-message,
body.gmotor-thanks .woocommerce-info,
body.gmotor-thanks .woocommerce-error,
body.gmotor-thanks .woocommerce-message {
    max-width: 620px;
    margin: 0 0 20px;
    padding: 12px 14px;
    list-style: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--cart-line);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-white);
}

body.gmotor-order-pay .woocommerce-error,
body.gmotor-thanks .woocommerce-error {
    background: rgba(222, 30, 38, 0.12);
    border-color: var(--color-brand);
}