/* CSS Variables */
/* TikTok Sans (variable) — self-hosted */
@font-face {
    font-family: "TikTok Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    font-stretch: 75% 150%;
    src: url("../fonts/tiktok-sans-vf/latin-standard-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "TikTok Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    font-stretch: 75% 150%;
    src: url("../fonts/tiktok-sans-vf/cyrillic-standard-normal.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "TikTok Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    font-stretch: 75% 150%;
    src: url("../fonts/tiktok-sans-vf/cyrillic-ext-standard-normal.woff2") format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
    --color-brand: #D8282F;
    --color-brand-dark: #AE191F;
    --color-brand-light: #F7969D;
    --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;

    --font-manrope: "Manrope", sans-serif;
    --font-tiktok-sans: "TikTok Sans", sans-serif;
}


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

html {
    scroll-behavior: smooth;
    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 {
    font-family: var(--font-manrope);
}

/* 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-tiktok-sans);
}

.condensed-slanted-text {
    font-family: var(--font-tiktok-sans);
    font-variation-settings: "wdth" 150, "wght" 500, "slnt" -6;
  }

/* Container */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

@media (min-width: 768px) {
    .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1280px) {
    .container {
        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 24px;
    max-width: max-content;
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

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

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

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

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

.btn-secondary {
    background-color: transparent;
    /* color: var(--color-white); */
    color: var(--color-black);
    border: 1px solid var(--color-brand);
}

.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%;
}

@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: 24px;
    overflow: hidden;
    cursor: pointer;
}

.product-main__description-video-element {
    display: block;
    width: 100%;
    height: auto;
}

@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: var(--color-gray);
}

/* Тень от верха экрана под оба меню (хедер + прилипающая навигация товара) */
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;
    background: linear-gradient(to bottom, rgba(15, 20, 30, 0.95), rgba(15, 20, 30, 0));
    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-fon-contrast);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    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: 143px;
    height: 32px;
}

@media (max-width: 350px) {
    .logo-img {
        width: 113px;
        height: auto;
        margin-top: 4px;
    }
}

/* 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. ОСНОВНЫЕ СТИЛИ ПОДМЕНЮ --- */
.sub-menu {
    position: absolute;
    background: var(--color-white);
    color: var(--color-black);
    padding: 24px;
    border-radius: 24px;
    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);
    width: calc(100% - 16px);
    /* width: 100%; */
    max-width: 1416px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 24px 40px 0px #00000014;
}

@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;
    /* Скрываем полосу прокрутки */
    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: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 16px;

    /* Скрываем и отключаем взаимодействие */
    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-й блок */

            /* Скрываем полосу прокрутки */
            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;
}

/* Защита: скрываем товары, если мышь ушла с блока подкатегорий.
   Важно: не скрываем товары, пока пользователь наводит на сам список товаров. */
.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. СТИЛИ ЭЛЕМЕНТОВ --- */
.cat-title,
.subcat-title,
.mega-menu-dropdown__products a {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 16px 0 20px;
    border-radius: 16px;
    height: 80px;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
}

.mega-menu-dropdown__products a {
    height: 44px;
    border-radius: 12px;
    transition: all 0.2s ease-in-out !important;
}

.cat-name {
    flex: 1;
}

/* --- 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: var(--color-gray);
    color: var(--color-brand);
    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: #D8282F0A !important;
    color: var(--color-brand) !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;
    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-tiktok-sans);
    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;
    }
}

/* About Section */
.about-section {
    margin-top: 0;
    position: relative;
}

@media (min-width: 1024px) {
    .about-section {
        margin-top: 2px;
    }
}

.about-container {
    display: flex;
    gap: 48px;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .about-container {
        flex-direction: row;
        gap: 40px;
    }
}

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

@media (min-width: 1024px) {
    .about-content {
        width: 675px;
    }
}

.about-content a {
    position: absolute;
    bottom: 100px;
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    border: 8px solid #fff;
    box-sizing: content-box;
}

@media screen and (min-width: 640px) {
    .about-content a {
        position: static;
        border: none;
        margin: 0;
    }
}

.about-intro {
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    text-transform: uppercase;
    font-family: var(--font-tiktok-sans);
}

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

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

.about-description {
    font-family: var(--font-tiktok-sans);
    font-size: 16px;
    font-style: italic;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (min-width: 640px) {
    .about-description {
        font-size: 20px;
        line-height: 1.2;
    }
}

.about-image {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .about-image {
        top: -96px;
        margin-left: auto;
        margin-right: 0;
    }
}

@media (min-width: 1024px) {
    .about-image {
        top: 0;
        margin-left: 0;
        padding-right: 56px;
    }
}

.about-image img {
    width: 336px;
}

@media (min-width: 640px) {
    .about-image img {
        width: 470px;
    }
}

/* @media (min-width: 1024px) {
    .about-image img {
        width: 100%;
    }
} */

/* Mission Section */
.mission-section {
    margin-top: 168px;
}

@media (min-width: 640px) {
    .mission-section {
        margin-top: 98px;
    }
}

.mission-container {
    margin-top: -93px;
}

@media (min-width: 1024px) {
    .mission-container {
        margin-top: 0;
    }
}

.mission-card {
    position: relative;
    max-width: 902px;
    background: url('../images/bg-section-1.svg');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: var(--color-fon-contrast);
    margin: 0 auto;
    color: var(--color-white);
    padding: 62px 37px;
    border-radius: 40px;
}

@media (min-width: 768px) {
    .mission-card {
        background-position: right;
        padding: 62px 44px;
    }
}

@media (min-width: 1024px) {
    .mission-card {
        padding: 64px;
    }
}

.mission-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;
}

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

@media (min-width: 640px) {
    .mission-title {
        font-size: 28px;
    }
}

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

.mission-text {
    font-size: 14px;
    font-family: var(--font-tiktok-sans);
    text-align: center;
    color: var(--color-disable);
    margin-top: 16px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .mission-text {
        font-size: 20px;
        line-height: 1.2;
        color: var(--color-white);
    }
}

/* Features Section */
.features-section {
    display: flex;
    flex-direction: column;
    /* gap: 49px; */
    gap: 32px;
}

@media (min-width: 640px) {
    .features-section {
        gap: 42px;
    }
}

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

.feature-card {
    display: flex;
    gap: 22px;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

@media (min-width: 768px) {
    .feature-card {
        gap: 32px;
    }
}

@media (min-width: 1024px) {
    .feature-card {
        flex-direction: row;
        gap: 40px;
    }

    .features-section .feature-card:nth-child(2n) {
        flex-direction: row-reverse;
    }
}

.feature-image {
    width: 100%;
}

@media (min-width: 1024px) {
    .feature-image {
        width: 557px;
    }
}

.rounded-image {
    border-radius: 16px;
    width: 100%;
    height: auto;
}

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

.feature-content {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
    width: 100%;
}

.feature-content span {
    color: var(--color-brand);
}

@media (min-width: 1024px) {
    .feature-content {
        width: 671px;
        gap: 24px;
    }
}

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

@media (min-width: 1024px) {
    .feature-title {
        line-height: 1.4;
    }
}

.feature-description {
    line-height: 1.3;
}

.feature-description p + p {
    margin-top: 16px;
}

@media (min-width: 640px) {
    .feature-description p + p {
        margin-top: 14px;
    }
}

/* Numbers Section */
.numbers-section {
    position: relative;
    margin-top: 3px;
}

@media (min-width: 640px) {
    .numbers-section {
        margin-top: -50px;
    }
}

@media (min-width: 1024px) {
    .numbers-section {
        margin-top: -5px;
    }
}

.numbers-title {
    font-size: 28px;
    font-family: var(--font-tiktok-sans);
    text-transform: uppercase;
    font-weight: bold;
    /* position: absolute;
    left: 0;
    right: 0;
    top: 0; */
    margin: auto;
    width: max-content;
    z-index: 10;
}

@media (min-width: 1280px) {
    .numbers-title {
        position: absolute;
        font-size: 32px;
        margin: auto;
        left: 0;
        right: 0;
    }
}

.numbers-grid-container {
    width: 100%;
    margin-top: 45px;
}

@media (min-width: 640px) {
    .numbers-grid-container {
        margin-top: 35px;
    }
}

@media (min-width: 1024px) {
    .numbers-grid-container {
        width: 90%;
        margin-top: 135px;
        position: absolute;
        top: 134px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 10;
    }
}

@media (min-width: 1280px) {
    .numbers-grid-container {
        width: 1200px;
    }
}

@media (min-width: 1536px) {
    .numbers-grid-container {
        width: 1440px;
        margin-top: 180px;
    }
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 8px;
    grid-auto-rows: min-content;
}

@media (min-width: 768px) {
    .numbers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 16px;
    }
}

@media (min-width: 1024px) {
    .numbers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 37px 40px;
        position: relative;
    }
}

@media (min-width: 1280px) {
    .numbers-grid {
        left: 33px;
    }
}

@media (min-width: 1536px) {
    .numbers-grid {
        gap: 64px 40px;
    }
}

.number-item {
    text-align: center;
}

@media (min-width: 1024px) {
    .numbers-grid .number-item:nth-child(2n + 1) {
        justify-self: start;
        text-align: left;
    }
    
    .numbers-grid .number-item:nth-child(2n){
        justify-self: end;
        text-align: left;
        min-width: 217px;
    }
}

.number-value {
    font-family: var(--font-tiktok-sans);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 44px;
    color: var(--color-brand);
    font-style: italic;
}

@media (min-width: 768px) {
    .number-value {
        font-size: 52px;
    }
}

.plus {
    font-size: 36px;
    position: absolute;
    margin-left: 8px;
}

.number-label {
    max-width: 217px;
    margin: 0 auto;
    font-size: 14px;
}

@media (min-width: 1280px) {
    .number-label {
        margin: 0;
        padding-right: 50px;
    }
}

.numbers-bg {
    margin-top: 35px;
}

@media (min-width: 768px) {
    .numbers-bg {
        margin-top: 35px;
    }
}

@media (min-width: 1024px) {
    .numbers-bg {
        margin-top: 0;
    }
}

.numbers-bg img {
    margin: auto;
    width: 100%;
    height: 450px;
    position: relative;
    object-fit: cover;
    object-position: 48%;
    border-radius: 0 0 44px 44px;
}

@media (min-width: 768px) {
    .numbers-bg img {
        height: auto;
        border-radius: 0 0 56px 56px;
    }
}

/* Categories Section */
.categories-section {
    margin-top: -220px;
}

@media (min-width: 640px) {
    .categories-section {
        margin-top: -151px;
    }
}

@media (min-width: 1024px) {
    .categories-section {
        margin-top: -284px;
    }
}

.categories-wrapper {
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .categories-wrapper {
        border-radius: 56px;
    }
}

@media (min-width: 1024px) {
    .categories-wrapper {
        flex-direction: row;
    }
}

.category-card {
    position: relative;
    flex: 1;
    background-color: var(--color-fon-contrast);
    padding: 32px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s ease;
}

.category-card:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .category-card {
        padding: 44px 57px;
    }
}

@media (min-width: 1024px) {
    .category-card {
        padding: 97px 55px 100px;
    }
}

.category-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: all 0.7s ease;
    opacity: 0;
    transform: scale(1.1);
}

.category-card:hover .category-bg {
    opacity: 1;
    transform: scale(1);
}

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent, transparent);
    opacity: 0;
    transition: all 0.7s ease;
}

.category-card:hover::before {
    opacity: 1;
}

.category-content {
    position: relative;
    z-index: 10;
    transition: all 0.5s ease;
}

.category-icon {
    position: relative;
    display: inline-block;
}

@media (min-width: 768px) {
    .category-icon {
        position: absolute;
        right: 0;
    }
}

@media (min-width: 1024px) {
    .category-icon {
        position: relative;
    }
}

.category-icon svg {
    transition: all 0.5s ease;
}

.category-card:hover .category-icon svg {
    transform: scale(1.1) rotate(3deg);
}

.category-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.5s ease;
    filter: blur(9px);
}

.category-card:hover .category-icon::after {
    transform: scale(1);
}

.category-name {
    font-family: var(--font-tiktok-sans);
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-white);
    transition: all 0.5s ease;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .category-name {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .category-name {
        margin-top: 43px;
    }
}

.category-card:hover .category-name {
    transform: translateY(-5px);
}

.category-brand {
    font-family: var(--font-tiktok-sans);
    font-size: 20px;
    color: var(--color-brand);
    font-weight: 900;
    font-style: italic;
    transform: scaleX(1.3);
    transform-origin: left;
    line-height: 1;
    transition: all 0.5s ease;
}

.category-card:hover .category-brand {
    color: rgba(255, 255, 255, 0.9);
    transform: scaleX(1);
}

.category-description {
    font-size: 14px;
    color: var(--color-white);
    margin-top: 16px;
    line-height: 1.33;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media (min-width: 640px) {
    .category-description {
        margin-top: 23px;
        line-height: 1.3;
        width: 500px;
    }
}

@media (min-width: 1024px) {
    .category-description {
        margin-top: 23px;
        line-height: 1.3;
        width: 100%;
    }
}

.category-description p {
    transition: all 0.5s ease;
}

.category-card:hover .category-description {
    color: rgba(255, 255, 255, 0.8);
}

.category-card:hover .category-description p {
    transform: translateX(8px);
}

/* Distributor Section */
.distributor-section {
    margin-top: -48px;
}

@media (min-width: 640px) {
    .distributor-section {
        margin-top: -31px;
    }
}

@media (min-width: 1024px) {
    .distributor-section {
        margin-top: -55px;
    }
}

.distributor-container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .distributor-container {
        flex-direction: row;
    }
}

.distributor-content {
    flex: 1;
    margin-top: 20px;
}

@media (min-width: 640px) {
    .distributor-content {
        margin-top: 0;
        padding-right: 40px;
    }
}

@media (min-width: 1280px) {
    .distributor-content {
        padding-right: 115px;
        width: 50%;
        flex: 1;
    }
}

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

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

@media (min-width: 768px) {
    .distributor-title {
        font-size: 28px;
    }
}

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

.distributor-intro {
    font-family: var(--font-tiktok-sans);
    font-size: 16px;
    margin-top: 28px;
    line-height: 1.35;
}

@media (min-width: 640px) {
    .distributor-intro {
        font-size: 20px;
        line-height: 1.4;
    }
}

.distributor-description {
    line-height: 1.36;
    margin-top: 12px;
}

@media (min-width: 640px) {
    .distributor-description {
        line-height: 1.35;
    }
}

.distributor-description p + p {
    margin-top: 12px;
}

.distributor-images {
    display: flex;
    gap: 8px;
    order: -1;
    margin-top: 45px;
}

@media (min-width: 640px) {
    .distributor-images {
        width: 33.333%;
        flex-direction: column;
        order: 1;
        margin-top: 0;
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .distributor-images {
        flex-direction: row;
        width: 50%;
    }
}

.distributor-image-main {
    margin-top: 45px;
}

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

@media (min-width: 1024px) {
    .distributor-image-main {
        margin-top: 120px;
    }
}

/* CTA Section */
.cta-section {
    margin-top: -33px;
}

/* @media (min-width: 640px) {
    .cta-section {
        margin-top: -33px;
    }
} */

@media (min-width: 1024px) {
    .cta-section {
        margin-top: -43px;
    }
}

.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-fon-contrast);
    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-contrast-lite);
    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;
    top: 15px;
    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: #efefef;
    box-shadow: 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 */
.menu-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    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;
}

/* Стили для планшетов - меню выезжает справа */
@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;
    }

    .menu-items {
        inset: 0 0 0 auto;
        width: 362px;
        left: auto;
        right: -362px;
        background-color: var(--color-white);
        transform: translateX(0);
        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.15);
        overflow-y: auto;
        border-radius: 28px 0 0 28px;
    }

    .menu-items.active {
        right: 0;
        transform: translateX(0);
        /* opacity: 1;
        visibility: visible; */
    }

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

    /* Адаптация контента меню для планшетов */
    .mobile-drilldown-menu {
        padding: 0 16px;
    }

    /* .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-fon-contrast);
    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;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 16px;
    padding-bottom: 24px;
    padding-left: 32px;
    background: var(--color-white);
}

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

.bottom-mobile-nav__left > * {
    border: 1px solid var(--color-gray) !important;
    transition: background-color 0.3s ease !important;
    
    
    padding: 8px !important;
    background: transparent !important;
    border-radius: 50%;
    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 {
    transition: fill 0.3s ease;
}

.bottom-mobile-nav__left > * svg.icon-button__stoke path {
    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-fon-contrast);
    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-fon-contrast);
    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.4'%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='%23101820'/%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: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    border-radius: 0 !important
}

#menu-mobilnoe-menyu .sub-menu-open .sub-menu a {
    border-radius: 12px !important;
    transition: all 0.2s ease-in-out;
}

.menu-mobilnoe-menyu-container {
    width: 100%;
    border-top: 1px solid var(--color-gray);
    padding-top: 12px;
    margin-top: 12px;
}

/* --- ВЫПАДАЮЩИЕ ПОДКАТЕГОРИИ В КАТАЛОГЕ МОБ. МЕНЮ --- */
.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: 12px;
    transition: all 0.2s ease-in-out;
}

.mobile-nav-list a:hover,
.mobile-cat-list .mobile-sub-list a:hover
{
    color: var(--color-brand) !important;
    background: #D8282F0A !important;
    font-weight: 700 !important;
}

.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.4'%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='%23101820'/%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%;
    height: 100%;
    overflow: hidden; /* Чтобы слои не вылезали за пределы меню */
    min-height: 400px; /* Высота под ваше меню */
    overflow-y: auto;
    padding-bottom: 90px;
}

.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: #fff;
    /* margin-bottom: 20px; */
    /* border-bottom: 1px solid #f0f0f0; */
}

/* Полноэкранная панель результатов: на всю ширину выезжающего меню, до нижней навигации; список категорий и пункты меню скрыты */
.mobile-search-container.is-panel-open {
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    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 #e0e0e0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-height: 0;
    margin-bottom: 4px;
}

#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;
}

.mobile-search-input {
    width: 100%;
    padding: 12px 44px 12px 40px;
    border: 1px solid #e0e0e0;
    border-radius: 40px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s ease;
    background: #fff;
}

.mobile-search-input:focus {
    border-color: var(--color-brand);
}

.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: 50%;
    background: rgba(16, 24, 32, 0.06);
    color: #393c40;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-search-clear:hover {
    background: rgba(16, 24, 32, 0.1);
    color: var(--color-brand);
}

.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;
}

/* Оформление списка */
.mobile-cat-list { 
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-cat-list li {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    /* border-bottom: 1px solid #f0f0f0; */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#layer-main .mobile-cat-list > li:hover,
#layer-sub .mobile-cat-list > li > span:hover{
    color: var(--color-brand) !important;
    background: #D8282F0A !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
}

.mobile-cat-list li img { width: 56px; height: 56px; margin-right: 15px; object-fit: contain; }

/* Хедер внутри слоя */
.layer-header {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    background: #f9f9f9;
    font-weight: bold;

    margin-top: 35px;
}
.layer-header img { width: 50px; height: 50px; margin-right: 15px; }

.layer-nav {
    margin-top: 20px;
}

.mobile-drilldown-menu {
    padding: 0 16px;
}

.js-back-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: none;
    border: none;
    color: var(--color-brand);
    cursor: pointer;
    font-size: 16px;
}

.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;
}

#layer-main {
    margin-top: 70px;
}

#layer-sub .layer-header {
    padding: 11px 15px;
    margin-top: 12px;
    border-radius: 16px;
    background: var(--color-white);
}

.mobile-cat-list {
    margin-top: 16px;
}

#layer-sub .js-open-layer {
    font-size: 16px;
    /* padding: 16px; */
    font-weight: 700;
}

#layer-sub .js-open-layer > span {
    padding: 16px;
    border-radius: 16px;
}

#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-brand);
    background: var(--color-gray);
}

#layer-sub .mobile-sub-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 0 !important;
    margin-top: 4px;
}

#layer-sub .mobile-sub-list a {
    font-weight: 400;
    border-radius: 12px;
}

#layer-sub .mobile-cat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 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 var(--color-gray);
    border-radius: 24px;
    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: 100px;
    padding: 6px 12px;
    background: var(--color-white);
}

.witget-promotion__slider__promotion {
    display: inline-block;
    background: var(--color-brand);
    border-radius: 100px;
    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: cover;
}

.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;
}

.menu-promotion-preview img {
    width: 316px;
    height: 282px;
    object-fit: cover;
}

#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;
    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: -apple-system, "system-ui", Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    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;
}

.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;
    height: 100vh;
    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%;
    height: 100%;
    z-index: 1;
    height: max-content;
}

.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 {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}

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

.front-page__hero .hero-content__buttons {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

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

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

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

.front-page__hero h1 {
    font-size: 52px;
    font-weight: 700;
    font-family: var(--font-tiktok-sans);
    text-transform: uppercase;
    color: white;
    letter-spacing: -0.02em;
    line-height: 115%;
    font-style: italic;
    
}

@media screen and (max-width: 1023px) {
    .front-page__hero h1 {
        font-size: 44px;
        line-height: 127%;
    }
}

@media screen and (max-width: 767px) {
    .front-page__hero h1 {
        font-size: 32px;
        line-height: 138%;
    }
}

.front-page__hero h1 span {
    color: var(--color-brand);
    transform: scaleX(1.5);
    transform-origin: left;
    word-break: break-word;
    display: inline-block;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.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;
}

@media screen and (max-width: 767px) {
    .front-page__hero .hero-content {
        margin-top: auto;
        top: auto;
        bottom: 40px;
    }
}

.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;
    }
}

.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;
    background: var(--color-fon-contrast);
    /* margin-top: -20vh; */
    /* padding-top: 20vh; */
    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-contrast-lite);
    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: "Inter", sans-serif;
    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: var(--color-black);
}

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

.front-page__popular-motorcycles-title-button::after,
.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: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;
    }
}

.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: 359px) {
    .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: var(--color-fon-contrast);
    padding-top: 111px;
}

@media screen and (max-width: 1023px) {
    .single-product-container {
        padding-top: 103px;
    }
}

@media screen and (max-width: 767px) {
    .single-product-container {
        padding-top: 85px;
    }
}

.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 14px;
    color: var(--color-disable);
}

.product-main-container {
    /* display: flex; */
    border-radius: 44px;
    padding: 40px;
    background: var(--color-gray);
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .product-main-container {
        margin-top: 15px;
        border-radius: 28px;
        padding-top: 24px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 8px;
    }
}

.product-main-container__flex {
    display: flex;
    gap: 30px;
}

@media screen and (max-width: 1199px) {
    .product-main-container__flex {
        flex-direction: column;
        gap: 0px;
    }
}

.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: 30px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__images {
        flex-flow: column-reverse;
        gap: 30px;
    }
}

.variation-image-main {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Фон из категории (ACF bekgraund_dlya_knopok_na_glavnoj) — слой под фото */
.variation-image-main__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* background-size: contain; */
    /* background-position-x: calc(100% + 30px); */
    /* background-repeat: no-repeat; */

    background-color: rgba(16, 24, 32, 0.1);
    /* Настройки отображения */
    -webkit-mask-size: 115%;
    mask-size: 115%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: calc(115% + 30px);
    mask-position: calc(115% + 30px);
}

.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: 767px) {
    .variation-image-main__img {
        height: 266px;
    }
}

.variation-images-list {
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
    gap: 11px;
    max-height: 455px;
    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;
        margin-right: -40px;

        /* Убираем полосу прокрутки для красоты */
        scrollbar-width: none; 
        -webkit-overflow-scrolling: touch;
    }
}

@media screen and (max-width: 767px) {
    .variation-images-list {
        margin-right: -8px;
    }
}

.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: 50%;
    border: 1px solid rgba(15, 20, 30, 0.1);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
    background: var(--color-white);

    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(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0.7) 50%, #efefef 100%);
}

.variation-images-arrow-wrapper--down::before {
    background: linear-gradient(180deg, rgba(239, 239, 239, 0) 0%, rgba(239, 239, 239, 0.7) 50%, #efefef 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: 64px;
    min-height: 64px;
    border: 1px solid #cfd0d2;
    border-radius: 12px;
    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: cover;
    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: cover;
}

.product-main-container__content {
    width: 416px;
    border-radius: 24px;
    padding: 20px 24px;
    background: var(--color-white);

}

@media screen and (max-width: 1199px) {
    .product-main-container__content {
        width: 100%;
    }
}

@media screen and (max-width: 1023px) {
    .product-main-container__content {
        margin-top: 30px;
    }
}

@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;
}

.product-main-container__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-main-container__meta-label {
    font-size: 14px;
    color: #666;
}

.product-main-container__meta-value {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.product-main-container__meta-category {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    border-radius: 24px;
    padding: 4px 12px;
    width: max-content;
    height: 24px;
    background: var(--color-gray);
}

.product-main-container__meta-sku-copy {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-secondary);
}

.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: #000;
}

.product-main-container__content-title {
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    font-family: var(--font-tiktok-sans);
    margin-top: 8px;
}

@media screen and (max-width: 767px) {
    .product-main-container__content-title {
        font-size: 28px;
        line-height: 114%;
    }
}

.product-main-container__content-price {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-right: 13px;
    border-top: 1px solid var(--color-gray);
    padding-top: 20px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__content-price {
        margin-top: 30px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__content-price {
        margin-right: 0;
    }
}

.product-main-container__content-price-label,
.product-main-container__color-selector-label {
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
}

.product-main-container__color-selector-label {
    align-items: flex-start;
}

.product-main-container__content-price-value {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 133%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: right;
    text-decoration: none;
}

.product-main-container__content-price ins {
    font-family: var(--font-tiktok-sans);
    text-align: right;
    color: var(--color-brand);
    text-decoration: none;
    padding-left: 10px;
}

.product-main-container__content-price del {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-secondary);
}

.product-main-container__color-selector {
    display: flex;
    margin-top: 12px;
    justify-content: space-between;
    margin-right: 13px;
}

.product-main-container__color-selector-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.product-main-container__color-active-name {
    font-size: 14px;
    line-height: 1.2;
    color: #101820;
    min-height: 14px;
}

@media screen and (max-width: 767px) {
    .product-main-container__color-selector {
        margin-right: 0;
    }
}

.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;
}

.product-main-container__content-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
}

.product-main-container__content-buttons > .btn-secondary:hover svg path {
    fill: #fff;
}

.product-main-container__content-buttons > *:not(:first-child) {
    display: inline-flex;
    flex: 1;
    max-width: calc(50% - 8px);
}

@media screen and (max-width: 767px) {
    .product-main-container__content-buttons > *:not(:first-child) {
        max-width: 100%;
    }

    .product-main-container__content-buttons > *:last-child {
        font-size: 0;
        flex: 0;
        display: block;
        padding: 0 15px;
    }
}

.product-main-container__content-buttons > *:first-child {
    max-width: 100%;
    width: 100%;
}

@media screen and (max-width: 1023px) {
    .product-main-container__content-buttons > *:first-child {
        width: auto;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__content-buttons > *:first-child {
        width: 100%;
    }
}

.product-main-container__content-disclaimer {
    margin-top: 24px;
    font-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-secondary);
    display: flex;
    gap: 8px;
}

.product-main-container__content-info {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

@media screen and (max-width: 767px) {
    .product-main-container__content-info {
        flex-direction: column;
        gap: 8px;
    }
}

.product-main-container__content-info img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.product-main-container__content-info > div {
    border: 1px solid #cfd0d2;
    border-radius: 24px;
    padding: 16px 16px 16px 32px;
    flex: 1;
    display: flex;
    gap: 16px;
    align-items: center;
}

@media screen and (max-width: 1023px) {
    .product-main-container__content-info > div {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        padding: 12px 16px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__content-info > div {
        justify-content: flex-start;
        flex-direction: row;
        align-items: center;
    }
}

.product-main-container__content-info-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-secondary);
}

.product-main-container__content-info-value {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    margin-top: 4px;
}

.product-main-container__content-info-value span {
    font-size: 14px;
    line-height: 129%;
}

.product-main-container__description {
    background-color: var(--color-white);
    border-radius: 56px 56px 0 0;
    padding: 135px 0px 64px;
    margin-top: -87px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__description {
        margin-top: -510px;
        padding: 560px 0px 64px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__description {
        margin-top: -720px;
        padding: 764px 0px 64px;
    }
}

.product-main-container__description-nav {
    display: flex;
    border: 1px solid #cfd0d2;
    border-radius: 50px;
    padding: 4px;
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

@media screen and (max-width: 767px) {
    .product-main-container__description-nav-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .product-main-container__description-nav {
        min-width: max-content;
        
    }
}

/* Sticky nav под основным хедером: отступ сверху = высота хедера */
.product-main-container__description-nav.is-sticky {
    position: fixed;
    top: 80px; /* ниже основного меню (header) */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 16px);
    max-width: 1416px;
    background: #fff;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
    display: flex;
    justify-content: center;
}

/* Прокрутка для sticky навигации на мобильных */
@media screen and (max-width: 767px) {
    .product-main-container__description-nav-wrapper {
        position: relative;
    }
    
    .product-main-container__description-nav-wrapper.has-sticky {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        z-index: 100;
        /* background: #fff; */
        padding: 0 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .product-main-container__description-nav-wrapper.has-sticky::-webkit-scrollbar {
        display: none;
    }
    
    .product-main-container__description-nav.is-sticky {
        position: relative;
        top: 0;
        left: 0;
        width: auto;
        min-width: max-content;
        margin: 0 auto;
        display: flex;
        animation: none;
    }
}

/* плавное появление навбара при отлипании (когда возвращается в поток) */
.product-main-container__description-nav.is-sticky-removing {
    animation: descriptionNavFadeIn 0.3s ease;
}

@keyframes descriptionNavFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* .product-main-container__description-nav.is-sticky {
    padding-left: max(16px, calc((100% - 1200px) / 2));
    padding-right: max(16px, calc((100% - 1200px) / 2));
} */

/* Placeholder под навбар при sticky — контент не прыгает */
.product-main-container__description-nav-spacer {
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: none;
    visibility: hidden;
}

@media screen and (max-width: 767px) {
    .product-main-container__description-nav-spacer {
        /* На мобильных spacer должен быть точно такой же высоты как навигация */
        visibility: hidden;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(calc(-100% - 72px));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(calc(-100% - 72px));
        opacity: 0;
    }
}

.product-main-container__description-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border-radius: 100px;
    padding: 0 24px;
    height: 40px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 12px;
    line-height: 133%;
    letter-spacing: -0.01em;
    transition: background 0.2s ease, color 0.2s ease;
}

@media screen and (max-width: 1023px) {
    .product-main-container__description-nav-link {
        font-size: 12px;
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__description-nav-link {
        padding: 0 24px;
        white-space: nowrap;
    }
}

.product-main-container__description-nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.product-main-container__description-nav-link.active {
    background: var(--color-brand);
    color: var(--color-white);
}

/* совместимость со старыми div */
.product-main-container__description-nav > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border-radius: 100px;
    padding: 0 24px;
    height: 40px;
    cursor: pointer;
}

.product-main-container__description-nav > div.active {
    background: var(--color-brand);
    color: var(--color-white);
}

.product-main__description {
    margin-top: 48px;
    display: flex;
}

@media screen and (max-width: 1023px) {
    .product-main__description {
        flex-direction: column;
        gap: 32px;
        margin-top: 40px;
    }
}

.product-main__description-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) {
    .product-main__description-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    .product-main__description-title {
        font-size: 24px;
        line-height: 117%;
    }
}

.product-main__description-description {
    margin-top: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
    padding-right: 132px;
}

@media screen and (max-width: 1023px) {
    .product-main__description-description {
        margin-top: 16px;
        padding-right: 0;
        margin-top: 10px;
    }
}

@media screen and (max-width: 767px) {
    .product-main__description-description {
        font-size: 14px;
        line-height: 129%;
    }
}

.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;
    margin-top: 48px;
    padding-bottom: 64px;
}

@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-right {
    width: 50%;
    padding-top: 60px;
}

@media screen and (max-width: 1023px) {
    .product-main__settings-right {
        width: 100%;
        padding-top: 44px;
    }
}

.product-main__settings-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) {
    .product-main__settings-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    .product-main__settings-title {
        font-size: 24px;
        line-height: 117%;
        margin-bottom: 16px;
    }
}

/* Аккордеон для каждого элемента характеристик */
.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: 8px;
}

.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%;
}


.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 #cfd0d2;
    border-radius: 20px;
    padding: 20px 24px;
    font-weight: 700;
    font-size: 14px;
    line-height: 129%;
    color: var(--color-black);
}

@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-weight: 400;
    font-size: 12px;
    line-height: 133%;
    color: var(--color-secondary);
    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: #fff;
    position: relative;
    overflow: hidden;
}

.product-main-container__photo-text {
    background: var(--color-fon-contrast);
    border-radius: 56px 56px 0 0;
    padding-top: 120px;
    padding-bottom: 120px;
}

@media screen and (max-width: 1023px) {
    .product-main-container__photo-text {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__photo-text {
        border-radius: 32px 32px 0 0;
        padding-top: 24px;
    }
}

.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-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

.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: 28px;
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__photo-text_item-content-title {
        font-size: 24px;
        line-height: 117%;
    }

    .product-main-container__photo-text_item-content-title-mobile {
        font-size: 24px;
    }
}

.product-main-container__photo-text_item-content-description {
    margin-top: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 138%;
    letter-spacing: -0.01em;
}

@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: 12px;
    cursor: pointer;
    position: relative;
}

.product-main-container__photo-text_item-image img {
    border-radius: 12px;
    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: #fff;
    border-radius: 56px 56px 0 0;
    padding-top: 48px;
    padding-bottom: 48px;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1023px) {
    .product-main-container__gallery_container {
        padding-top: 62px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery_container {
        border-radius: 32px;
        padding-top: 24px;
        padding-bottom: 12px;
    }
}

.product-main-container__gallery_container::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: var(--color-gray);
    z-index: 0;
}
.product-main-container__gallery_container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: #fff;
    border-radius: 0 0 56px 56px;
    z-index: 0;
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery_container::after {
        border-radius: 0 0 32px 32px;
    }
}

.product-main-container__gallery-item {
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
}

.product-main-container__gallery-item img {
    height: 220px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px;
    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-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 119%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .product-main-container__gallery_container-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    .product-main-container__gallery_container-title {
        font-size: 24px;
        line-height: 117%;
    }
}

.single-product-container .dealer-network-cta-container {
    z-index: 1;
    position: relative;
    margin-top: 96px;
}

@media screen and (max-width: 1023px) {
    .single-product-container .dealer-network-cta-container {
        margin-top: 92px;
    }
}

@media screen and (max-width: 767px) {
    .single-product-container .dealer-network-cta-container {
        margin-top: 102px;
    }
}

.single-product__slider {
    background: var(--color-gray);
    padding-top: 70px;
}

@media screen and (max-width: 767px) {
    .single-product__slider {
        padding-top: 48px;
    }
}

@media screen and (max-width: 1023px) {
    .dealer-network-cta-container__product {
        padding: 0 24px;
        padding-top: 64px;
    }
}

@media screen and (max-width: 767px) {
    .dealer-network-cta-container__product {
        padding: 0 12px;
        padding-top: 0;
    }
}

.dealer-network-cta-container__product .cta-card {
    margin: 0;
}

.dealer-network-cta-container__product .cta-card {
    width: auto;
}

.dealer-network-cta-container__product .cta-card .cta-content {
    background-position-y: 7px;
}
@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;
    }

    .single-product-container .dealer-network-cta-container .cta-buttons .btn {
        width: 100%;
    }

    .single-product-container .dealer-network-cta-container .cta-card {
        padding-bottom: 26px;
    }

    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: -apple-system, "system-ui", Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    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 {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

@media (min-width: 768px) {
    .cart-empty-wrapper {
        min-height: calc(100vh - 250px);
        padding: 60px 0;
    }
}

.cart-empty-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .cart-empty-content {
        padding: 60px 40px;
    }
}

.cart-empty-icon {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-empty-icon svg path{
    width: 120px;
    height: 120px;
    fill: white;
    opacity: 0.3;
}

@media (min-width: 768px) {
    .cart-empty-icon svg {
        width: 160px;
        height: 160px;
    }
}

.cart-empty-title {
    font-family: var(--font-tiktok-sans);
    font-weight: 700;
    font-size: 32px;
    line-height: 115%;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: white;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .cart-empty-title {
        font-size: 48px;
        margin-bottom: 24px;
    }
}

@media (min-width: 1024px) {
    .cart-empty-title {
        font-size: 52px;
    }
}

.cart-empty-description {
    font-size: 16px;
    line-height: 150%;
    color: var(--color-secondary);
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .cart-empty-description {
        font-size: 18px;
        margin-bottom: 40px;
    }
}

.cart-empty-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-empty-actions .btn {
    min-width: 200px;
}

@media (min-width: 768px) {
    .cart-empty-actions .btn {
        min-width: 240px;
    }
}

/* 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-family);
    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); }

.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;
}

/* Балон при клике на маркер карты дилеров (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(100%) contrast(1.05);
}

.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;
    }
  }

  .single-news__share-link[data-network="max"]::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 1000 1000'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%234ccfff'/%3E%3Cstop offset='66%25' stop-color='%23532eee'/%3E%3Cstop offset='100%25' stop-color='%23933ddd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1000' height='1000' fill='url(%23g1)' rx='250'/%3E%3Cpath fill='white' d='M508.2 878.3c-75 0-109.9-11-170.5-54.8-38.3 49.3-159.7 87.8-165 21.9 0-49.5-11-91.2-23.4-136.9-14.8-56.2-31.6-118.8-31.6-209.5 0-216.6 177.8-379.6 388.4-379.6 210.8 0 375.9 171 375.9 381.6.7 207.3-166.6 376.1-373.9 377.2m3.1-571.6c-102.6-5.3-182.5 65.7-200.2 177-14.6 92.2 11.3 204.4 33.4 210.2 10.6 2.6 37.2-19 53.8-35.6a189.8 189.8 0 0 0 92.7 33c106.3 5.1 197.1-75.8 204.2-182 4.2-106.4-77.7-196.5-183.9-202.6z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 24px;
    height: 24px;
}

.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(--second-family);
    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%;
    }
}


.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;
}