/* ===== CSS VARIABLES ===== */
:root {
    /* Colors */
    --white: #F8FAF9;
    --black: #1B1B1B;
    --gray-darker: #232323;
    --gray-dark: #4F5052;
    --gray-medium: #ACACAC;
    --gray-light: #bdc3c7;
    --gray-text: #898A8A;
    --blue-dark: #28303F;
    --yellow-medium: #E0DC5A;
    --green: #5AE0AE;
    --status-success: #5AE0AE;
    --status-warning: #FFB347;
    --status-error: #E53935;
    --status-info: #64B5F6;

    /* Typography */
    --font-primary: 'Benzin', 'Roboto', 'Arial', sans-serif;

    --font-size-default: 16px;

    /* Font sizes based on Figma */
    --text-xs: 0.625rem; /* 10px */
    --text-sm: 0.75rem; /* 12px */
    --text-base: 0.875rem; /* 14px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 2rem; /* 32px */

    /* Line heights from Figma */
    --leading-tight: 1;
    --leading-normal: 1.5;
    --leading-relaxed: 1.25;

    /* Spacing */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-9: 2.25rem; /* 36px */

    /* Border radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-2xl: 1rem; /* 16px */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ===== RESET & BASE STYLES ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    height: 100%;
}

svg {
    flex-shrink: 0;
}

body {
    font-family: var(--font-primary), 'Segoe UI', Arial, sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    background-image: url('../img/BG-example.png');
    background-size: 100% auto;
    background-position: top;
    background-repeat: repeat-y;
    color: var(--white);
    background-color: var(--black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 100px var(--black) inset !important;
    -webkit-text-fill-color: var(--white) !important;
    caret-color: var(--white) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: var(--white) !important;
    caret-color: var(--white) !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.text-heading {
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: var(--leading-relaxed);
    color: var(--white);
}

.text-subheading {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--white);
    margin-bottom: 1.25rem;
}

.text-body {
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-tight);
    margin-bottom: 1.25rem;
    opacity: .75;
}

.text-body-large {
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);
}

.text-caption {
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-normal);
    margin-bottom: 1.5rem;
    opacity: .75;
    width: 50%;
}

.text-caption-small {
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: var(--leading-normal);
}
.status-success {
    color: var(--status-success) !important;

}

.status-warning {
    color: var(--status-warning) !important;

}

.status-error {
    color: var(--status-error) !important;

}

.status-info {
    color: var(--status-info) !important;

}

.text-gray {
    color: var(--gray-text);
}

.text-center {
    text-align: center;
}

/* ===== LAYOUT ===== */
.container {
    width: 100%;
    max-width: 1856px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.second-container {
    width: 100%;
    max-width: 1266px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.third-container {
    width: 100%;
    max-width: 1544px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.container-fluid {
    max-width: none;
}

.main-min-height {
    min-height: 755px;
}


/* ===== BUTTON COMPONENT ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);

    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--leading-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    cursor: pointer;

    transition: all 0.3s ease;
    user-select: none;
    position: relative;
    overflow: hidden; /* Добавлено для анимации свечения */
}

/* Добавляем эффект свечения при наведении */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.btn:not(.btn--disabled):hover::before {
    left: 100%;
}

/* Улучшаем анимацию при наведении */
.btn:not(.btn--disabled):hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Анимация для иконок внутри кнопок */
.btn__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* 1. Анимация движения вправо при наведении на кнопку */
.btn:hover .btn__icon--move-right {
    transform: translateX(4px);
}

/* 2. Анимация увеличения при наведении на кнопку */
.btn:hover .btn__icon--scale {
    transform: scale(1.2);
}

/* 3. Статическое вращение (применяется всегда) */
.btn__icon--rotate {
    transform: rotate(180deg);
}

/* Комбинированная анимация: вращение + движение вправо при наведении на кнопку */
.btn:hover .btn__icon--rotate.btn__icon--move-right {
    transform: rotate(180deg) translateX(4px);
}

/* Комбинированная анимация: вращение + увеличение при наведении на кнопку */
.btn:hover .btn__icon--rotate.btn__icon--scale {
    transform: rotate(180deg) scale(1.2);
}

/* 4. Анимация вращения на 360 градусов при наведении на кнопку */
.btn:hover .btn__icon--rotate-360 {
    transform: rotate(360deg);
}


/* Для кнопок с outline эффект свечения должен быть менее заметным */
.btn--outline::before,
.btn--outline-gray::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Для вторичных кнопок (черных) делаем свечение более контрастным */
.btn--secondary::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

/* Для серых кнопок */
.btn--gray::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Для кнопок с иконкой, которая должна вращаться (аналогично auth-form__btn-icon--rotate) */
.btn__icon--rotate {
    transform: rotate(180deg);
}

.btn:hover .btn__icon--rotate {
    transform: rotate(180deg) translateX(4px);
}

/* Button sizes */
.btn--xxl {
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-9);
}

.btn--large {
    min-height: 3.375rem;
    padding: var(--space-3) var(--space-9);
}

.btn--medium {
    min-height: 3rem;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xl);
}

.btn--small {
    min-height: 2.5rem;
    padding: 0 var(--space-8);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
}

.btn--xs {
    min-height: 2rem;
    padding: 0 var(--space-8);
    border-radius: 0.625rem;
    font-size: var(--text-sm);
}

/* Button variants */
.btn--primary {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--white);
}

.btn--secondary {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.btn--secondary-gray {
    background-color: var(--black);
    color: var(--gray-text);
    border-color: var(--black);
}
.btn--secondary-gray-icon{
    background-color: var(--gray-dark);
    color: var(--white);
    border-color: var(--gray-dark);

    .btn__icon{
        opacity: .45;
    }
}
.btn--secondary-gray-icon:hover{
    .btn__icon{
        opacity: 1;
    }
}

.btn--outline {
    background-color: transparent;
    color: var(--white);
    fill: var(--white);
    border-color: var(--white);
}

.btn--outline-gray {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
    fill: var(--white);
    opacity: .5;
}

.btn--outline-gray .btn__icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: var(--white);
    color: var(--white);
}

.btn--gray {
    background-color: var(--gray-dark);
    color: var(--white);
    border-color: var(--gray-dark);
}

/* Button states */
.btn:not(.btn--disabled):active {
    transform: translateY(0);
}

.btn:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
    outline: none;
}

.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    color: var(--black);
}

/* Убираем анимации для отключенных кнопок */
.btn--disabled::before {
    display: none;
}

.btn--disabled:hover .btn__icon {
    transform: none;
}
.btn--status-selected {
    background-color: transparent;
    color: var(--status-success);
    border-color: var(--status-success);
}

.btn--status-selected .btn__icon {
    color: var(--status-success);
}


.btn--status-selected::before {
    display: none;
}

/* Статусная кнопка "В наличии" - зеленая с белым текстом */
.btn--status-available {
    background-color: var(--status-success);
    color: var(--black);
    border-color: var(--status-success);
    cursor: default;
}

.btn--status-available .btn__icon {
    color: var(--black);
}

/* Отключаем все интерактивные эффекты для статусной кнопки */
.btn--status-available:hover,
.btn--status-available:focus,
.btn--status-available:active {
    transform: none !important;
    box-shadow: none !important;
    cursor: default !important;
}

.btn--status-available::before {
    display: none;
}

/* Специальные стили для маленьких статусных кнопок */
.btn--small.btn--status-selected,
.btn--small.btn--status-available {
    min-height: 2.5rem;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
}
@media (max-width: 768px) {
    .btn{
        font: var(--text-sm);
        gap: var(--space-2);
    }
    .btn__icon{
        width: 1.25rem;
        height: 1.25rem;
    }
}
@media (max-width: 480px) {
    .btn{
        font: var(--text-xs);
    }
    .btn__icon{
        width: 1rem;
        height: 1rem;
    }
}
/* ===== FORM ELEMENTS ===== */
.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 500;
    color: var(--white);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);

    border: 1px solid var(--gray-light);
    border-radius: var(--radius-lg);
    background-color: var(--white);
    transition: all 0.3s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--black);
    box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .second-container {
        padding: 0 20px;
    }

    .text-heading {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) {
    html {
        font-size: calc(var(--font-size-default) * 0.7);
    }

}

@media (min-width: 1024px) {
    html {
        font-size: calc(var(--font-size-default) * 0.9); /* 80% от 16px */
    }
}

@media (min-width: 1280px) {
    html {
        font-size: calc(var(--font-size-default) * 0.9); /* 90% от 16px */
    }
}

@media (min-width: 1536px) {
    html {
        font-size: var(--font-size-default);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1B1B1BBF;
    backdrop-filter: blur(4px)
}

.modal__content {
    position: relative;
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    max-width: 37.875rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
    transform: translateY(20px);
    transition: transform 0.3s;
}

.modal.active .modal__content {
    transform: translateY(0);
}

.modal__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    background-color: transparent;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.modal__close:hover .icon {
    transform: scale(1.2);
}

.modal__close .icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--white);
    color: var(--white);
    transition: all .2s;
}

.modal__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    line-height: 100%;
    margin-bottom: var(--space-6);
    text-align: center;
    width: 65%;
}

.modal__title-wrapper {
    display: inline-flex;
    justify-content: center;
}


.modal__text {
    color: var(--gray-text);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-6);
}

.modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.modal__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.modal__label {
    font-size: var(--text-base);
    color: var(--white);
    font-weight: 500;
}

.modal__select-wrapper {
    position: relative;
}

.modal__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-right: calc(var(--space-4) * 2 + 1rem);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    color: var(--white);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    appearance: none;
    cursor: pointer;
    transition: border-color 0.3s;
    height: 3rem;
}

.modal__select:focus {
    outline: none;
    border-color: var(--white);
}

.modal__select-icon {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    fill: var(--white);
    pointer-events: none;
}

.modal__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
}

.modal__search {
    margin-bottom: var(--space-6);
}

/* Стили для блоков местоположения */
.modal__locations {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.modal__location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    cursor: pointer;
    transition: background-color 0.3s;
}

.modal__location-title {
    font-weight: 400;
    font-size: var(--text-base);
    color: var(--gray-text);
}

.modal__location-value {
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--white);
}

.modal__separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0;
}

.header {
    position: relative;
    z-index: 1000;
}

.header__top {

    font-size: var(--text-sm);
    color: var(--gray-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.75rem var(--space-4);
    background-color: var(--gray-darker);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.header__top .container {
    margin: 0 auto;

}

.header__city {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    justify-content: center;
    color: var(--white);
    transition: color .2s;
}

.header__city svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--white);
    opacity: 0.5;
    fill: var(--white);
    transition: opacity .2s;
}

.header__city:hover svg {
    opacity: 1;

}


.header__address {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.header__address {
    color: var(--white);
    text-decoration: none;
}

.header__address svg {
    fill: var(--white);
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity .2s;
}

.header__address:hover {
    svg {
        opacity: 1;
    }
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.header__nav a {
    color: var(--white);
    text-decoration: none;
    transition: color .2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.header__nav a svg {
    color: var(--white);
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
    transition: all .2s;
}

.header__nav a:hover {
    svg {
        opacity: 1;
    }
}

.social-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.social-link:hover svg {
    transform: scale(1.1);
}

.social-link svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--white);
    transition: all .2s;
}

.social-icon {
    color: var(--white);
    fill: var(--white);
}

.header__main .container {
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
    position: relative;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 500;
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: 1.375rem 2.688rem;
}

.header__logo svg,
.header__logo .header__logo-img {
    height: 2.25rem;
    width: 12.938rem;
}

/* logo.svg — отдельный файл, подключён через <img>; держим пропорции. */
.header__logo .header__logo-img {
    width: auto;
    display: block;
    object-fit: contain;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.688rem);
    background-color: var(--gray-darker);
    padding: clamp(0.5rem, 1vw, 0.813rem);
    border-radius: var(--radius-2xl);
    min-width: 0;
}

.search-form {
    flex: 1;
    min-width: min(100%, 260px);
}

.search-box {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: min(100%, 260px);
    border-radius: var(--radius-xl);
    background: var(--black);
    height: clamp(2.5rem, 4vw, 3.375rem);
}

.search-box__input {
    flex: 1;
    padding: clamp(0.5rem, 1vw, 0.875rem) clamp(0.75rem, 1.5vw, 1rem);
    border: none;
    background: transparent;
    color: var(--white);
    font-size: clamp(var(--text-sm), 1.5vw, var(--text-base));
    outline: none;
    line-height: 150%;
    height: 100%;
    min-width: 0;
}

.search-box__input::placeholder {
    color: var(--gray-text);
    line-height: 150%;
}

/* Страница каталога Laximo подключает свой guayaquil.css с глобальным правилом
   input[type="text"] { border: 1px solid #ddd; height: 26px; padding: 3px ...; }.
   Селектор с атрибутом имеет специфичность (0,1,1) — выше, чем у
   .search-box__input (0,1,0), поэтому он перебивает оформление инпута поиска
   в шапке (светлая обводка, сбитая высота/паддинги). Возвращаем нужные стили
   селектором (0,2,1) — он выигрывает и над базовым, и над :focus-правилом Laximo. */
.search-box input.search-box__input {
    border: none;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    padding: clamp(0.5rem, 1vw, 0.875rem) clamp(0.75rem, 1.5vw, 1rem);
}

.search-box__button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: clamp(0.5rem, 1vw, 0.75rem);
    opacity: 0.5;
    transition: opacity 0.2s ease;
    height: 100%;
    flex-shrink: 0;
}

.search-box__button:hover {
    opacity: 1;
}

.search-box__button--select {
    padding-left: 1rem;
}

.search-box__button--search {
    padding-right: 1rem;
}

.search-box__divider {
    width: 1px;
    height: 1rem;
    opacity: 0.1;
}

/* Пассивный индикатор автоопределённого типа поиска (VIN / Артикул / Наименование).
   Не интерактивен — заменил собой ручной выпадающий список выбора типа. */
.search-box__type {
    flex-shrink: 0;
    padding-left: clamp(0.75rem, 1.5vw, 1rem);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--yellow-medium);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.search-box__icon {
    width: clamp(1.25rem, 2vw, 1.5rem);
    height: clamp(1.25rem, 2vw, 1.5rem);
    fill: var(--white);
    color: var(--white);
    pointer-events: none;
    flex-shrink: 0;
}

/* Правая часть */
.header__info {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.688rem);
    font-size: var(--text-xs);
    line-height: 1.2;
    flex-shrink: 0;
}

.header__actions-divider {
    width: 1px;
    height: 2rem;
    background: var(--white);
    opacity: 0.1;
    flex-shrink: 0;
}

.header__worktime {
    display: flex;
    flex-direction: column;
    gap: 0.438rem;
}

.header__worktime-time {
    font-weight: 500;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.header__worktime-description {
    color: var(--gray-text);
    font-size: var(--text-xs);
}

.header__phone {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.5vw, 0.438rem);
    white-space: nowrap;
}

.header__phone-caption {
    color: var(--gray-text);
    font-size: inherit;
}

.header__phone-number {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(var(--text-xs), 1.5vw, 0.75rem);
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.header__phone-number:hover {
    opacity: 0.7;
}

.header__info .btn--large {
    font-size: clamp(var(--text-sm), 1.5vw, var(--text-base));
    padding: clamp(0.5rem, 1vw, var(--space-3)) clamp(1rem, 2vw, var(--space-9));
    min-height: clamp(2.5rem, 4vw, 3.375rem);
    border-radius: var(--radius-xl);
    white-space: nowrap;
}

.header__info .btn__icon {
    width: 1.125rem;
    height: 1.125rem;
}


.main-content {
    min-height: 60vh;
}

.catalog-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 1856px;
    background-color: var(--gray-darker);
    display: none;
    z-index: 1000;
    padding: 1.25rem;
    margin: 1.25rem var(--space-4);
    box-sizing: border-box;
    border-radius: var(--radius-2xl);
    box-shadow: 0px 4px 12px 0px #00000040;
}

.catalog-dropdown__columns {
    display: flex;
    gap: var(--space-8);
}

.catalog-dropdown__column {

    width: 100%;
}

.catalog-dropdown__column--categories {
    max-width: 18.375rem;
    width: 100%;
    background-color: transparent;
}

.catalog-dropdown__column--subcategories {
    background-color: var(--black);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

.catalog-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;

}

.catalog-dropdown__item {
    margin-bottom: var(--space-3);
}

.catalog-dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 1.375rem;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    height: 3.375rem;
    text-decoration: none;
    transition: color 0.2s;
    text-align: left;
    border: none;
    border-radius: var(--radius-xl);
    width: 100%;
    background-color: var(--black);
}

.catalog-dropdown__link:not([aria-expanded]) .catalog__dropdown-icon {
    display: none;
}

.catalog__dropdown-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.catalog-dropdown__link[aria-expanded="true"] .catalog__dropdown-icon {
    transform: rotate(-90deg);
}

.catalog-dropdown__link:hover,
.catalog-dropdown__link:focus {
    color: var(--gray-light);
}

.catalog-dropdown__subcategories {
    display: none;
}

.catalog-dropdown__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.catalog-dropdown__subitem {
    margin-bottom: var(--space-2);
}

.catalog-dropdown__sublink {
    display: block;
    color: var(--gray-light);
    text-decoration: none;
    transition: color 0.2s;
}

.catalog-dropdown__sublink:hover {
    color: var(--white);
}

/* Меню «Искать в каталоге»: каталоги подбора (ucats) — сеткой на всю ширину */
.catalog-dropdown__column--ucats {
    width: 100%;
    max-width: none;
}
.catalog-dropdown__list--ucats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3, 0.75rem);
}
.catalog-dropdown__list--ucats .catalog-dropdown__item {
    margin-bottom: 0;
}

/* Активная категория */
.catalog-dropdown__link[aria-expanded="true"] {
    outline: 1px solid var(--white);
    color: var(--white);
}

.dropdown {
    position: relative;
    display: inline-block;
}

/* Триггер дропдауна */
.dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Выбранное значение в триггере */
.dropdown__selected {
    font-size: var(--text-sm);
    color: var(--white);
    opacity: 0.9;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.dropdown__trigger:hover .dropdown__selected {
    opacity: 1;
}

/* Иконка стрелки в триггере */
.dropdown__icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}


.dropdown__trigger[aria-expanded="true"] .dropdown__icon {
    transform: rotate(180deg);
}

/* Выпадающее меню */
.dropdown__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 240px;
    background: var(--black);
    border-radius: var(--radius-xl);
    padding: 0.25rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0px 4px 12px 0px #00000040;
    overflow: hidden;

}

.dropdown__menu--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Список опций */
.dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown__item {
    margin: 0;
}

.dropdown__separator {
    display: block;
    height: 1px;
    background-color: var(--gray-darker);
    position: relative;
    overflow: hidden;
}


.dropdown__separator--limited {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    width: calc(100% - 1.25rem - 1.25rem);
}

/* Опции меню */
.dropdown__option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 1;
}

.dropdown__option:hover,
.dropdown__option:focus {
    background: rgba(255, 255, 255, 0.05);
    opacity: 1;
    outline: none;
}

.dropdown__option[aria-selected="true"] {
    background: var(--gray-darker);
    opacity: 1;

}

@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.dropdown__selected--bounce {
    animation: bounce 0.3s ease;
}

/* Small */

.dropdown--sm .dropdown__menu {
    min-width: 200px;
}

/* Medium (default) */


.dropdown--md .dropdown__menu {
    min-width: 240px;
}

/* Large */


.dropdown--lg .dropdown__menu {
    min-width: 280px;
}

/* Extra Large */

.dropdown--xl .dropdown__menu {
    min-width: 20rem;
}

.footer {
    margin-top: auto;
    padding-top: 7.5rem;
}

.footer__bottom {
    font-size: var(--text-sm);
    color: var(--gray-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.75rem var(--space-4);
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
}

.footer__top .container {
    margin: 0 auto;

}

.footer__city {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    justify-content: center;
    color: var(--white);
    transition: color .2s;
}

.footer__city svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--white);
    opacity: 0.5;
    fill: var(--white);
    transition: opacity .2s;
}

.footer__city:hover svg {
    opacity: 1;

}

.footer__actions {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.688rem);
    background-color: var(--gray-darker);
    padding: clamp(0.5rem, 1vw, 0.813rem);
    border-radius: var(--radius-2xl);
    min-width: 0;
}

.footer__address {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.footer__address {
    color: var(--white);
    text-decoration: none;
}

.footer__address svg {
    fill: var(--white);
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity .2s;
}

.footer__address:hover {
    svg {
        opacity: 1;
    }
}

.footer__nav {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.footer__nav a {
    color: var(--white);
    text-decoration: none;
    transition: color .2s;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.footer__nav a svg {
    color: var(--white);
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
    transition: all .2s;
}

.footer__nav a:hover {
    svg {
        opacity: 1;
    }
}

.footer__auth {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.footer__auth svg {
    color: var(--white);
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.5;
    transition: opacity .2s;
    fill: var(--white);
}

.footer__auth:hover {
    svg {
        opacity: 1;
    }
}

.footer__main {
    padding: 1.25rem 0;
}

.footer__main .catalog-dropdown--footer {
    bottom: -22.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
    height: fit-content;
    top: auto;
}

.footer__info {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.688rem);
    font-size: var(--text-xs);
    line-height: 1.2;
    flex-shrink: 0;
}

.footer__actions-divider {
    width: 1px;
    height: 2rem;
    background: var(--white);
    opacity: 0.1;
    flex-shrink: 0;
}

.footer__worktime {
    display: flex;
    flex-direction: column;
    gap: 0.438rem;
}

.footer__worktime-time {
    font-size: var(--text-sm);
    white-space: nowrap;
}

.footer__worktime-description {
    color: var(--gray-text);
    font-size: var(--text-xs);
}

.footer__phone {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.5vw, 0.438rem);
    white-space: nowrap;
}

.footer__phone-caption {
    color: var(--gray-text);
    font-size: inherit;
}

.footer__phone-number {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(var(--text-xs), 1.5vw, 0.75rem);
    line-height: 1.2;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.footer__phone-number:hover {
    opacity: 0.7;
}

.footer__info .btn--large {
    font-size: clamp(var(--text-sm), 1.5vw, var(--text-base));
    padding: clamp(0.5rem, 1vw, var(--space-3)) clamp(1rem, 2vw, var(--space-9));
    min-height: clamp(2.5rem, 4vw, 3.375rem);
    border-radius: var(--radius-xl);
    white-space: nowrap;
}

.footer__info .btn__icon {
    width: 1.125rem;
    height: 1.125rem;
}

.footer__main {
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 500;
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: 1.375rem 2.688rem;
}

.footer__logo svg {
    height: 2.25rem;
    width: 12.938rem;
}

.footer__column {
    padding: 2.5rem 2.5rem 8.875rem 2.5rem;
    background-color: var(--gray-darker);
    margin-top: 1.25rem;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.footer-info {
    display: flex;

    gap: 9.375rem;
    padding: 2.5rem 0;
    border-top: 1px solid #F8FAF91A;

}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.footer-nav__section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-nav__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin: 0;
    cursor: default;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.footer-nav__list a {
    color: var(--gray-text);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color 0.2s ease;
    line-height: 150%;
    font-weight: 400;
}

.footer-nav__list a:hover {
    color: var(--white);
}

.footer-nav__icon-container {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
}

.footer-nav__icon {
    width: 100%;
    height: 100%;
    fill: var(--white);
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid #F8FAF91A;
}


.footer-legal {
    color: var(--gray-text);
    font-size: var(--text-xs);
    line-height: 1.4;
    text-align: center;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-contacts__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-contacts__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    position: relative;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.footer-contacts__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.footer-contacts__item:hover::before {
    left: 100%;
}

.footer-contacts__item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.footer-contacts__item svg {
    color: var(--white);
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--white);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
}

.footer-contacts__item:hover svg {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}

.footer-contacts__item div {
    color: var(--white);
    font-weight: 500;
    font-size: var(--text-base);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.footer-contacts__item:hover div {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Эффект подсветки для разных типов контактов */
.footer-contacts__item[href^="tel"]:hover {
    background: var(--black);
}

.footer-contacts__item[href^="mailto"]:hover {
    background: var(--black);
}

.footer-contacts__item[href*="yandex"]:hover {
    background: var(--black);
}

/* Анимация подчеркивания */
.footer-contacts__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.footer-contacts__item:hover::after {
    width: 80%;
}

/* Дополнительный эффект свечения */
.link-hover-effect {
    position: absolute;
    top: 50%;
    left: -20px;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.4s ease;
    filter: blur(2px);
}

.footer-contacts__item:hover .link-hover-effect {
    opacity: 1;
    left: 12px;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-50%) scale(1.3);
        opacity: 1;
    }
}

/* Анимация при клике */
.footer-contacts__item:active {
    transform: translateX(8px) scale(0.98);
    transition: all 0.1s ease;
}

.footer-contacts__social {
    display: flex;
    gap: 0.563rem;
}

.footer-contacts__block {
    background-color: #474747;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.438rem;
    height: 2.438rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    border: 1px solid transparent;
}

.footer-contacts__block::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.footer-contacts__block:hover::before {
    left: 100%;
}

.footer-contacts__block:hover {
    background-color: #5a5a5a;
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 255, 255, 0.1),
    inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.footer-contacts__block svg {
    color: #fff;
    fill: #fff;
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 2;
}

.footer-contacts__block:hover svg {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* Индивидуальные цвета при наведении для каждой иконки */
.footer-contacts__block:nth-child(1):hover {
    background-color: #4C75A3;
}


.footer-contacts__block:nth-child(2):hover {
    background-color: #0088cc;
}


.footer-contacts__block:nth-child(3):hover {
    background-color: #FF0000;
}


.footer-contacts__block:nth-child(4):hover {
    background-color: #34A853;
}


.footer-contacts__block:nth-child(5):hover {
    background-color: #25D366;
}


.footer-contacts__block:nth-child(6):hover {
    background-color: #000;
}


/* Эффект свечения */
.social-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    z-index: 1;
}

.footer-contacts__block:hover .social-glow {
    width: 80px;
    height: 80px;
    opacity: 1;
    animation: pulse-glow 1.5s ease-in-out infinite alternate;
}

.footer__auth[aria-expanded="true"] .dropdown__icon {
    transform: rotateX(180deg);
}

@keyframes pulse-glow {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.footer-contacts__vk,
.footer-contacts__telegram,
.footer-contacts__youtube,
.footer-contacts__phone {
    width: 2rem;
    height: 2rem;
}

.footer-contacts__whatsapp,
.footer-contacts__dzen {
    width: 2.438rem;
    height: 2.438rem;
}

/* Дополнительная анимация при клике */
.footer-contacts__block:active {
    transform: translateY(-1px) scale(0.95);
    transition: all 0.1s ease;
}

.footer-contacts__logo {
    background-color: var(--black);
    border-radius: var(--radius-2xl);
    width: fit-content;
    padding: 1.188rem 2.5rem;
    transition: background-color .6s;
}

.footer-contacts__logo svg,
.footer-contacts__logo .footer-contacts__logo-img {
    width: 9.625rem;
    height: 1.625rem;
}

/* logo.svg — отдельный файл через <img>; держим пропорции. */
.footer-contacts__logo .footer-contacts__logo-img {
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-contacts__logo:hover {
    background-color: var(--gray-dark);
}


.dropdown--auth {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dropdown__menu--auth {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    min-width: 320px;
    background: var(--black);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-top: 0.5rem;
    z-index: 1100;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.dropdown__title {
    font-weight: 500;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-align: center;
    color: var(--white);
    margin-bottom: var(--space-6);
}

/* Переключатель методов */

.dropdown__tabs {
    display: flex;
    width: 100%;
    gap: 1.188rem;
    margin-bottom: var(--space-4);
}

.dropdown__tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--gray-light);
    font-size: var(--text-base);
    padding-bottom: var(--space-2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-align: center;
    outline: none;
}

/* Линия под кнопкой (серая фоновая) */
.dropdown__tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gray-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
}

/* Активная линия (белая, анимированная) */
.dropdown__tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    border-radius: 1px;
}

/* Ховер эффект */
.dropdown__tab:hover {
    color: var(--white);
}

.dropdown__tab:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* Активная вкладка */
.dropdown__tab--active {
    color: var(--white);
}

.dropdown__tab--active::before {
    transform: scaleX(1);
}

/* Убираем стандартные стили кнопки в Firefox */
.dropdown__tab::-moz-focus-inner {
    border: 0;
}

/* Фокус состояние для доступности */
.dropdown__tab:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.header__auth .icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.3s ease;
    fill: currentColor;
    opacity: .5;
}

.header__auth {
    color: var(--white);
    text-decoration: none;
}

.header__auth:hover .icon {
    opacity: 1;
}

.header__auth[aria-expanded="true"] .icon {
    opacity: 1;
}

.header__auth[aria-expanded="true"] .dropdown__icon {
    transform: rotateX(180deg);
}

/* Формы внутри дропдауна */
.dropdown__form {
    display: none;
    flex-direction: column;
    gap: 1rem;
}


.dropdown__form.active {
    display: flex;
}

/* Кнопка отправки */
.dropdown__submit {
    width: 100%;
}

/* Футер с ссылками */
.dropdown__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-dark);
}

.dropdown__footer-link {
    color: var(--gray-text);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dropdown__footer-link:hover {
    color: var(--white);
}

/* Стили для полей ввода внутри дропдауна */
.dropdown__menu--auth .ui-input {
    margin-bottom: 0;
}


.dropdown__menu--auth .ui-input__field {
    background: var(--gray-darker);
    color: var(--white);
}

.dropdown__menu--auth .ui-input__field:focus {

    background: var(--gray-darker);
}

/* Анимация переключения форм */
.dropdown__form {
    animation: dropdown-fade-in 0.3s ease;
}

.header__main {
    padding: 1.25rem 0;
    z-index: 1002;
}


/* Страница документа */
.document-page {

    gap: 3rem;
    align-items: start;

}

.document-page__header {
    padding-bottom: 3rem;
}

.document-page__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: var(--leading-relaxed);
    color: var(--white);
    text-align: center;
}

.document-page__meta {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

/* Навигация по документу */


.document-nav__title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.document-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.document-nav__link {
    display: block;
    padding: 0.5rem 0;
    color: var(--gray-text);
    text-decoration: none;
    font-size: var(--text-sm);
    line-height: 1.4;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
}

.document-nav__link:hover,
.document-nav__link:focus {
    color: var(--white);
    border-left-color: var(--white);
}

.page-content :where(h1, h2, h3, h4):not([class]) {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: var(--leading-relaxed);
    color: var(--white);
    margin: 0 0 2rem 0;
}

.page-content h1:not([class]) { font-size: 1.5rem; }
.page-content h2:not([class]) { font-size: 1.25rem; }  /* или 1.25rem, если хотите одинаково */
.page-content h3:not([class]) { font-size: 1.25rem; }
.page-content h4:not([class]) { font-size: 1.125rem; }


.page-content p:not([class]),
.page-content li:not([class]),
.page-content td:not([class]),
.page-content dd:not([class]),
.page-content figcaption:not([class]) {
    font-size: var(--text-base);
    line-height: 150%;
    font-weight: 400;
    color: var(--gray-text);
    margin: 0 0 1.5rem 0;
}
/* Разделитель <hr> — тонкая белая линия 10% непрозрачности */
.page-content hr:not([class]) {
    border: 0;
    height: 1px;
    background: rgba(248, 250, 249, 0.1);
    margin: 2rem 0;
}
/* Списки — вровень с абзацами: маркеры у левого края текста, минимум под буллет */
.page-content ul:not([class]),
.page-content ol:not([class]) {
    margin: 0 0 1.5rem 0;
    list-style-position: inside;
}
.page-content ul:not([class]) { list-style-type: disc; }
.page-content ol:not([class]) { list-style-type: decimal; }
/* Гиперссылки — белые */
.page-content a:not([class]) {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.page-content a:not([class]):hover { opacity: 0.8; }
.page-content > *:last-child,
.page-content p:last-child,
.page-content li:last-child,
.page-content .news-article__text > *:last-child,
.page-content section > *:last-child {
    margin-bottom: 0;
}

.page-content img:not([class]),
.page-content picture img:not([class]) {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 0 1.5rem 0;
}


.page-content .news-article__image,
.page-content figure,
.page-content picture,
.page-content img:only-child,
.page-content picture:only-child,
.page-content section > img,
.page-content section > picture {
    text-align: center;
}

/*.page-content img:last-child,*/
/*.page-content picture:last-of-type,*/
/*.page-content .news-article__image:last-child,*/
/*.page-content section > .news-article__image:last-child,*/
/*.page-content section > img:last-child,*/
/*.page-content section > picture:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/*.page-content :where(*/
/*    button,*/
/*    input,*/
/*    select,*/
/*    textarea,*/
/*    .btn,*/
/*    .ui-input,*/
/*    .custom-select,*/
/*    .auth-form__btn,*/
/*    .registration-section,*/
/*    .registration-group*/
/*) {*/
/*    all: unset;*/
/*}*/

/* Контент документа */
.document-content {
    display: flex;
    flex-direction: column;
}
.document-content h1,
.document-content h2,
.document-content h3,
.document-content h4 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: var(--leading-relaxed);
    color: var(--white);
    margin: 0 0 2rem 0;          /* аналог padding-bottom */
    /* если хочешь разные размеры для h1/h2/h3 — добавь ниже */
}
.document-content h1 { font-size: 1.5rem; }
.document-content h2 { font-size: 1.25rem; }
.document-content h3 { font-size: 1.25rem; }

.document-content p,
.document-content li,
.document-content td,
.document-content div:not(.document-section__content):not(.document-content) {
    font-size: var(--text-base);
    line-height: 150%;
    font-weight: 400;
    color: var(--gray-text);
    margin: 0 0 1.5rem 0;         /* вместо gap в .document-section__content */
}

.document-content section > div,
.document-content section > p,
.document-content section > ul,
.document-content section > ol {
    margin-bottom: 1.5rem;
}

.document-section {
    scroll-margin-top: 2rem;
}

/*.document-section__title {*/
/*    font-size: 1.25rem;*/
/*    font-weight: 500;*/
/*    line-height: var(--leading-relaxed);*/
/*    color: var(--white);*/
/*    padding-bottom: 2rem;*/
/*}*/

/*.document-section__content {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1.5rem;*/
/*}*/

/*.document-text {*/
/*    font-size: var(--text-base);*/
/*    line-height: 150%;*/
/*    font-weight: 400;*/
/*    color: var(--gray-text);*/
/*}*/


.news-section__title {
    font-size: var(--text-xl);
    margin-bottom: 3rem;
    text-align: center;
    color: var(--white);
    font-weight: 500;
    margin-top: 1.75rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(37rem, 1fr));
    gap: 1.25rem;
}

/* Карточка новости */
.news-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 18.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 35.58%,
    #000000 120%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.news-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.news-card:hover::before {
    opacity: 1;
}

.news-card__header {
    padding: 20px 20px 0;
    position: relative;
    z-index: 2;
}

.news-card__title {
    font-size: 1.25rem;
    margin-bottom: 0.938rem;
    color: var(--white);
    line-height: 150%;
    font-weight: 500;
}

.news-card__body {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.news-card__description {
    color: var(--gray-medium);
    line-height: 125%;
    font-size: var(--text-base);
    font-weight: 400;
    width: 55%;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.news-card__date {
    color: var(--gray-medium);
    line-height: 125%;
    font-size: var(--text-base);
    white-space: nowrap;
}

.news-card__link {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    z-index: 3;
    opacity: 0.5;
    transform: translateX(0) rotate(0);
    overflow: hidden;
}

.news-card__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
}

.news-card__link svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    fill: #000;
    position: relative;
    z-index: 1;
}

.news-card:hover .news-card__link {
    opacity: 1;
    background: #1a252f;

    box-shadow: 0 0 20px rgba(26, 37, 47, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.news-card:hover .news-card__link::before {
    left: 100%;
}

.news-card:hover .news-card__link svg {
    fill: white;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* Специальная анимация только для стрелочки */
@keyframes arrowMagic {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes arrowPulse {
    0%, 100% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.15);
    }
}

@keyframes sparkle {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }
    100% {
        transform: translateX(200%) skewX(-15deg);
    }
}

.news-card:hover .news-card__link {
    animation: arrowMagic 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.news-card:hover .news-card__link svg {
    animation: arrowPulse 2s infinite .01s;
}

/* Дополнительный эффект свечения */
.news-card__link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
    opacity: 0;
}

.news-card:hover .news-card__link::after {
    width: 60px;
    height: 60px;
    opacity: 1;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;

}

.pagination__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--gray-darker);
    width: fit-content;
    padding: 0.75rem;
    border-radius: 0.875rem;
}

.pagination__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.5rem;
    padding: 0 0.5rem;

    border-radius: var(--radius-lg);
    background: var(--black);
    color: var(--white);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination__link:hover {
    background: var(--white);
    color: var(--black);

    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pagination__link--active {
    background: var(--white);
    color: var(--black);

}

.pagination__link--text {
    min-width: auto;
    padding: 0 2rem;
}

.pagination__link--arrow {
    min-width: 2.5rem;
    padding: 0;
}

.pagination__link--arrow svg {
    transition: transform 0.3s ease;
}

.pagination__link--arrow:hover:not(.pagination__link--disabled) svg {
    transform: scale(1.2);
}

.pagination__link--disabled {

    cursor: not-allowed;
}

.pagination__link--disabled:hover {
    background: var(--black);
    color: var(--white);
    transform: none;
    box-shadow: none;
}

.pagination__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    color: var(--gray-medium);
    font-size: var(--text-base);
}


.news-article__header {
    text-align: center;
    margin-top: 1.75rem;
}

.news-article__title {
    font-size: var(--text-xl);
    margin-bottom: 3rem;
    color: var(--white);
    line-height: 125%;
    font-weight: 500;
}

.news-article__content {
    font-size: var(--text-base);
    color: var(--gray-text);
    line-height: 150%;
    font-weight: 400;
}

.news-article__content section,
.news-article__content > div > section,           /* на случай лишней обёртки */
.news-article__content > section {
    margin-bottom: 2rem;
}

.news-article__content section:last-child {
    margin-bottom: 0;
}

.news-article__image:last-child {
    margin-bottom: 0;
}

.news-article__text:last-child {
    margin-bottom: 0;
}

.news-article__content h2,
.news-article__content h3,
.news-article__content .news-article__section-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 125%;
    color: var(--white);
    margin: 0 0 2rem 0;
}

.news-article__content h1 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--white);
    font-weight: 600;
}

.news-article__content p,
.news-article__content .news-article__text p,
.news-article__content .news-article__text {
    margin-bottom: 1.5rem;
    color: var(--gray-text);
    font-weight: 400;
    line-height: 150%;
}
.news-article__content p:last-child,
.news-article__content .news-article__text > *:last-child {
    margin-bottom: 0;
}

.news-article__content img,
.news-article__content .news-article__image img,
.news-article__content picture img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

.news-article__content .news-article__image,
.news-article__content figure,
.news-article__content img:only-child,
.news-article__content picture:only-child {
    margin: 1.5rem 0;
    text-align: center;
}


.news-article__content .news-article__image:last-child,
.news-article__content img:last-child,
.news-article__content picture:last-of-type,
.news-article__content section > .news-article__image:last-child {
    margin-bottom: 0;
}

.news-article__content section > img,
.news-article__content section > picture {
    margin: 1.5rem 0;
    max-width: 100%;
}

.catalog-section__title {
    font-size: var(--text-xl);
    margin-bottom: 3rem;
    text-align: center;
    color: var(--white);
    font-weight: 500;
    margin-top: 1.75rem;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap: 1.25rem;

}


.catalog-card {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 18.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.catalog-card__picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.catalog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catalog-card__gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 35.58%,
    #000000 100%);
    z-index: 1;
    pointer-events: none;
}
.catalog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 35.58%,
    #000000 120%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}
.catalog-card:hover::before {
    opacity: 1;
}

.catalog-card__header,
.catalog-card__body,
.catalog-card__link {
    position: relative;
    z-index: 3;
}
.catalog-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.catalog-card:hover::before {
    opacity: 1;
}

.catalog-card__header {
    padding: 1.25rem 1.25rem 0;
    position: relative;
    z-index: 2;
}

.catalog-card__title {
    font-size: 1.25rem;

    color: var(--white);
    line-height: 150%;
    font-weight: 500;
}

.catalog-card__body {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
}

.catalog-card__count {
    color: var(--gray-medium);
    line-height: 150%;
    font-size: var(--text-base);
}

.catalog-card__date {
    color: var(--gray-medium);
    line-height: 125%;
    font-size: var(--text-base);
    white-space: nowrap;
}

.catalog-card__link {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 3rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    z-index: 3;
    opacity: 0.5;
    transform: translateX(0) rotate(0);
    overflow: hidden;
}

.catalog-card__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s ease;
}

.catalog-card__link svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    fill: #000;
    position: relative;
    z-index: 1;
}

.catalog-card:hover .catalog-card__link {
    opacity: 1;
    background: #1a252f;

    box-shadow: 0 0 20px rgba(26, 37, 47, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.catalog-card:hover .catalog-card__link::before {
    left: 100%;
}

.catalog-card:hover .catalog-card__link svg {
    fill: white;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.catalog-card:hover .catalog-card__link {
    animation: arrowMagic 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.catalog-card:hover .catalog-card__link svg {
    animation: arrowPulse 2s infinite .01s;
}

/* Дополнительный эффект свечения */
.catalog-card__link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
    opacity: 0;
}

.catalog-card:hover .catalog-card__link::after {
    width: 60px;
    height: 60px;
    opacity: 1;
}

.bottom-nav {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 37.875rem;
    /* Эффект супер жидкого стекла */
    background: rgba(248, 250, 249, 0.18);
    backdrop-filter: blur(25px) saturate(180%) contrast(1.1);
    -webkit-backdrop-filter: blur(25px) saturate(180%) contrast(1.1);
    border-radius: 1.375rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Многослойные тени для эффекта стекла */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(255, 255, 255, 0.1);
    padding: 0.688rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Эффект при наведении на весь навбар */
.bottom-nav:hover {
    background: rgba(248, 250, 249, 0.22);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15),
    0 6px 20px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.07),
    inset 1px 0 0 rgba(255, 255, 255, 0.15),
    inset -1px 0 0 rgba(255, 255, 255, 0.15);
}

.bottom-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.188rem;
    height: 3.375rem;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);

}

/* Эффект жидкого стекла при наведении на элемент */
.bottom-nav__item:hover {
    background: rgba(27, 27, 27, 0.08);
    transform: translateY(-2px);
}

.bottom-nav__item--active {
    background: #1B1B1B;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

}

/* Эффект жидкого стекла для активного элемента */
.bottom-nav__item--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 0.875rem;
    z-index: 1;
}

.bottom-nav__icon {
    width: 2rem;
    height: 2rem;
    fill: var(--white);
    color: var(--white);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
    position: relative;
}

.bottom-nav__item--active .bottom-nav__icon {
    color: #F8FAF9;
    fill: #F8FAF9;
    transform: scale(1.08);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.bottom-nav__item:hover .bottom-nav__icon {
    transform: scale(1.05);
}

.bottom-nav__label {
    position: absolute;
    bottom: -26px;
    font-size: 0.7rem;
    opacity: 0;
    transition: all 0.3s ease;
    background: #1B1B1B;
    color: #F8FAF9;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    font-weight: 500;
    z-index: 1010;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bottom-nav__item:hover .bottom-nav__label {
    opacity: 1;
    transform: translateY(-2px);
}

/* Бейдж-счётчик у иконки корзины */
.bottom-nav__badge {
    position: absolute;
    top: 0.125rem;
    right: 0.5rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: 0.5625rem;
    background: #ED3C38;
    color: var(--white);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(27, 27, 27, 0.55);
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-nav__badge--visible {
    opacity: 1;
    transform: scale(1);
}


.order-search {
    text-align: center;
    margin: var(--space-8) auto;
    width: 100%
}

.order-search__title {
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: var(--leading-relaxed);
    color: var(--white);
    margin-bottom: 3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.order-search-form {
    display: block;
    width: 100%;
}

.order-search-form__group {
    display: flex;
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    gap: var(--space-3);
    width: 100%;
}

.order-search-form__input {
    background: var(--black);
    border: none;
    color: var(--white);
    flex: 1;
    min-width: 0;
    border-radius: var(--radius-xl);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    outline: none;
    min-height: 3.5rem;
    transition: all 0.3s ease;
}

.order-search-form__input::placeholder {
    color: var(--gray-medium);
    opacity: 0.8;
}

.order-search-form__input:focus {
    background: var(--black);
}

.order-search-form__btn {
    background: var(--white);
    color: var(--black);
    border: none;
    border-radius: var(--radius-xl);
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 3.5rem;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.order-search-form__btn:not(:disabled):hover {
    background: var(--gray-medium);
    transform: translateY(-1px);
}

/* Активное состояние при нажатии */
.order-search-form__btn:not(:disabled):active {
    transform: translateY(0);
}

/* Состояние фокуса только для активной кнопки */
.order-search-form__btn:not(:disabled):focus-visible {
}

/* ===== НЕАКТИВНОЕ СОСТОЯНИЕ КНОПКИ ===== */
.order-search-form__btn:disabled {
    cursor: not-allowed;
    transform: none !important;
    opacity: 0.5;
    box-shadow: none;
}

/* Убираем эффекты наведения для неактивной кнопки */
.order-search-form__btn:disabled:hover,
.order-search-form__btn:disabled:active {
    transform: none;
    cursor: not-allowed;
}

.order-search-form__btn-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.order-search-form__btn:disabled .order-search-form__btn-icon {
    opacity: 0.6;
    transform: none !important;
}


.auth-form {
    text-align: center;
    margin: 5.563rem auto 0 auto;
    max-width: 1000px;
    width: 100%;
    min-height: 32.438rem;

    overflow: hidden;
    position: relative;
    display: flex;
    border-radius: var(--radius-xl);
    background: var(--gray-darker);
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.auth-form__content {
    display: flex;
    width: 100%;
    position: relative;
    gap: 2.5rem;
    z-index: 2;
}

.auth-form__divider {
    height: 100%;
    width: 1px;
    background: var(--white);
    opacity: 0.1;
    margin: auto 0;
    align-self: center;
}

.auth-form__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.auth-form__title {
    font-size: var(--text-xl);
    margin-top: 1.75rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 3rem;
    text-align: center;
}

.main-title {
    font-size: var(--text-xl);
    margin-top: 1.75rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 3rem;
    text-align: center;
}
/* На мобиле — компактнее: 24px шрифт и 32px отступы сверху/снизу */
@media (max-width: 768px) {
    .main-title {
        font-size: 1.5rem; /* 24px */
        margin-top: var(--space-8); /* 32px */
        margin-bottom: var(--space-8); /* 32px */
    }
}

/* Табы */
.auth-form__tabs {
    display: flex;
    width: 100%;
    gap: 1.188rem;
    margin-bottom: var(--space-8);
}

.auth-form__tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--gray-light);
    font-size: var(--text-base);
    padding-bottom: var(--space-2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.auth-form__tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gray-dark);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-form__tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.auth-form__tab:hover {
    color: var(--white);
}

.auth-form__tab:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.auth-form__tab--active {
    color: var(--white);
}

.auth-form__tab--active::before {
    transform: scaleX(1);
}

/* Описания */
.auth-form__description {
    width: 100%;
    color: var(--gray-text);
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: var(--leading-normal);
    text-align: center;
    margin-bottom: var(--space-8);
}

.auth-form__description--white {
    color: #868686;


}

.auth-form__email {
    color: var(--white);
    font-weight: 500;
    text-decoration: underline;
}

/* Основная форма */
.auth-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}

.auth-form__field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-form__field {
    position: relative;
    background: var(--black);
    border-radius: var(--radius-lg);
    height: 3.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.auth-form__field:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.auth-form__input {
    width: 100%;
    height: 3.5rem;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    outline: none;
    padding: 0 var(--space-4) 0 3.125rem;
    border-radius: var(--radius-lg);
}

.auth-form__input::placeholder {
    color: transparent;
}

.auth-form__placeholder {
    position: absolute;
    top: 50%;
    left: 3.125rem;
    transform: translateY(-50%);
    color: var(--gray-text);
    font-size: var(--text-base);
    pointer-events: none;
    transition: all 0.3s ease;
}

.auth-form__input:focus ~ .auth-form__placeholder,
.auth-form__input:not(:placeholder-shown) ~ .auth-form__placeholder {
    opacity: 0;
    visibility: hidden;
}

.auth-form__asterisk {
    color: var(--white);
}

.auth-form__field-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gray-text);
    transition: all 0.3s ease;
}

.auth-form__field:focus-within .auth-form__field-icon {
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
}

/* Кнопки */
.auth-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-8);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 100%;
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.auth-form__btn-offer{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-4);
    gap: var(--space-3);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-8);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 100%;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.auth-form__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.auth-form__btn:hover::before {
    left: 100%;
}

.auth-form__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.auth-form__btn-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-form__btn:hover .auth-form__btn-icon {
    transform: translateX(4px);
}

.auth-form__btn-icon--rotate {
    transform: rotate(180deg);
}

.auth-form__back-btn svg {
    fill: var(--white);
}

.auth-form__back-btn:hover .auth-form__btn-icon--rotate {
    transform: rotate(180deg) translateX(4px);
}

.auth-form__link--small::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-form__link--small:hover {
    color: var(--gray-light);
}

.auth-form__link--small:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Группы действий */
.auth-form__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Ссылки */
.auth-form__link {
    color: var(--gray-light);
    text-decoration: underline;
    font-size: var(--text-sm);
    line-height: 2.75rem;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    display: inline-block;
}

.auth-form__link:hover {
    color: var(--white);
}

.auth-form__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.auth-form__link--center {
    text-align: center;
}

.auth-form__link--small {
    color: var(--white);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.auth-form__link--small:hover {
    color: var(--gray-light);
}

/* Переключение пароля */
.auth-form__password-toggle {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gray-medium);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.auth-form__password-toggle:hover {
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
}

.auth-form__password-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Боковая панель */
.auth-form__side {
    width: 100%;
    text-align: left;
}

.auth-form__side-name {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    opacity: 0.1;
    margin-bottom: var(--space-6);
    letter-spacing: 2px;
}

.auth-form__side-title {
    font-size: 1.5rem;
    color: var(--gray-text);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    font-weight: 500;
}

.auth-form__side-title span {
    color: var(--white);
    background: linear-gradient(135deg, var(--white) 0%, var(--gray-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-form__side-link {
    color: var(--white);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.auth-form__side-link:hover {
    color: var(--gray-light);
}

.auth-form__side-link-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    fill: var(--white);
}

.auth-form__side-link:hover .auth-form__side-link-icon {
    transform: translateX(4px);
}

/* Система шагов и табов */
.auth-form__step {
    display: none;
    width: 100%;
}
.auth-form__step--active {
    display: block;
}
.auth-form__tab-content {
    display: none;
    width: 100%;
}



.auth-form__tab-content--active {
    display: block;
}

.auth-form__step,
.auth-form__tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Декоративные элементы */
.auth-form__side-image {
    position: absolute;
    bottom: 0;
    right: max(-1.5rem, -5%);
    width: min(31.063rem, 45%);
    height: auto;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.auth-form__bg-lines {
    position: absolute;
    top: 0;
    right: max(-10.25rem, -15%);
    width: min(42.938rem, 60%);
    height: 31.25rem;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

.ui-input {
    position: relative;
    background: var(--black);
    border-radius: var(--radius-xl);
    height: 3.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.ui-input:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}

.ui-input--error {
    border-color: var(--status-error);
}

.ui-input--error:focus-within {
    border-color: var(--status-error);
    box-shadow: 0 8px 20px rgba(244, 67, 54, 0.1);
}

.ui-input--success {
}

.ui-input--success:focus-within {
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.1);
}

.ui-input__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.ui-input__field {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    outline: none;
    padding: 0 var(--space-4) 0 3.125rem;
    border-radius: var(--radius-xl);
    font-family: inherit;
}

.ui-input__field::placeholder {
    color: transparent;
}

.ui-input--no-icon .ui-input__field {
    padding-left: var(--space-4);
}

.ui-input__label {
    position: absolute;
    top: 50%;
    left: 3.125rem;
    transform: translateY(-50%);
    color: var(--gray-text);
    font-size: var(--text-base);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: 150%;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 3.5rem);
}

.ui-input--no-icon .ui-input__label {
    left: var(--space-4);
    max-width: calc(100% - 2rem);
}

/* ИСПРАВЛЕНО: Лейбл просто исчезает при фокусе или заполнении */
.ui-input__field:focus ~ .ui-input__label,
.ui-input__field:not(:placeholder-shown) ~ .ui-input__label {
    opacity: 0;
    visibility: hidden;
}

.ui-input__field:disabled ~ .ui-input__label {
    color: var(--gray-dark);
}

.ui-input__asterisk {
    color: var(--white);
    margin-left: 2px;
}

.ui-input__icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--gray-text);
    transition: all 0.3s ease;
    pointer-events: none;
}

.ui-input:focus-within .ui-input__icon {
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
}
.ui-input__field:not(:placeholder-shown) ~ .ui-input__icon {
    color: var(--white);
    transform: translateY(-50%) scale(1.1);
}

.ui-input__field:-webkit-autofill,
.ui-input__field:-webkit-autofill:hover,
.ui-input__field:-webkit-autofill:focus,
.ui-input__field:-webkit-autofill:active {
    -webkit-text-fill-color: var(--white) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--black) inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
    border: none !important;
}

@keyframes onAutoFillStart {
    from {
    }
    to {
    }
}

@keyframes onAutoFillCancel {
    from {
    }
    to {
    }
}

.ui-input__field:-webkit-autofill {
    animation-name: onAutoFillStart;
}

.ui-input__field:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}

/* ИСПРАВЛЕНО: Лейбл также исчезает при автозаполнении */
.ui-input__field:not(:placeholder-shown) ~ .ui-input__label,
.ui-input__field:-webkit-autofill ~ .ui-input__label {
    opacity: 0;
    visibility: hidden;
}

.ui-input__field:-moz-autofill,
.ui-input__field:-moz-autofill-preview {
    filter: none;
    background-color: var(--black) !important;
    color: var(--white) !important;
}

.ui-input__toggle {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--gray-text);
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-input__toggle:hover {
    color: var(--white);
}

.ui-input__toggle-icon {
    width: 100%;
    height: 100%;
}

/* Сообщение об ошибке/подсказка */
.ui-input__message {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    height: 0;
    overflow: hidden;
}

.ui-input__message--error {
    color: var(--status-error);
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.ui-input__message--success {
    color: var(--status-success);
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.ui-input__message--hint {
    color: var(--gray-text);
    opacity: 1;
    transform: translateY(0);
    height: auto;
}

.ui-input__message-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Модификаторы размеров */
.ui-input--sm {
    height: 3rem;
}

.ui-input--sm .ui-input__field {
    height: 3rem;
    font-size: var(--text-sm);
    padding-left: 2.75rem;
}

.ui-input--sm.ui-input--no-icon .ui-input__field {
    padding-left: var(--space-4);
}

.ui-input--sm .ui-input__label {
    left: 2.75rem;
    font-size: var(--text-sm);
}

.ui-input--sm.ui-input--no-icon .ui-input__label {
    left: var(--space-4);
}

.ui-input--md {
    height: 3.375rem;
}

.ui-input--md .ui-input__field {
    height: 3.375rem;
    font-size: var(--text-base);
    padding-left: 3.5rem;
}

.ui-input--md.ui-input--no-icon .ui-input__field {
    padding-left: var(--space-4);
}

.ui-input--md .ui-input__label {
    left: 3.5rem;
    font-size: var(--text-base);
}

.ui-input--md.ui-input--no-icon .ui-input__label {
    left: var(--space-4);
}

.ui-input--ml {
    height: 3.5rem;
}

.ui-input--ml .ui-input__field {
    height: 3.5rem;
    font-size: var(--text-base);
    padding-left: 3.5rem;
}

.ui-input--ml.ui-input--no-icon .ui-input__field {
    padding-left: var(--space-4);
}

.ui-input--ml .ui-input__label {
    left: 3.5rem;
    font-size: var(--text-base);
}

.ui-input--ml.ui-input--no-icon .ui-input__label {
    left: var(--space-4);
}

.ui-input--lg {
    height: 4rem;
}

.ui-input--lg .ui-input__field {
    height: 4rem;
    font-size: var(--text-lg);
    padding-left: 3.5rem;
}

.ui-input--lg.ui-input--no-icon .ui-input__field {
    padding-left: var(--space-4);
}

.ui-input--lg .ui-input__label {
    left: 3.5rem;
    font-size: var(--text-base);
}

.ui-input--lg.ui-input--no-icon .ui-input__label {
    left: var(--space-4);
}


/* Модификатор для текстовой области */
.ui-input--textarea {
    height: auto;
    min-height: 7rem;
}

.ui-input--textarea .ui-input__field {
    height: auto;
    min-height: 8rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    resize: vertical;
}

.ui-input--textarea .ui-input__label {
    top: 1.5rem;
    transform: none;
}

/* ИСПРАВЛЕНО: Для textarea лейбл также просто исчезает */
.ui-input--textarea .ui-input__field:focus ~ .ui-input__label,
.ui-input--textarea .ui-input__field:not(:placeholder-shown) ~ .ui-input__label {
    opacity: 0;
    visibility: hidden;
}

.ui-input__clear {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.ui-input__clear.active {
    opacity: 0.5;
    visibility: visible;
}

.ui-input__clear:hover {
    opacity: 1;
}

.ui-input__clear .icon {
    width: 1.125rem;
    height: 1.125rem;
    fill: var(--white);
    color: var(--white);
}

.ui-input__wrapper.has-clear .ui-input__field {
    padding-right: 2.75rem;
}

.ui-input__wrapper.has-clear .ui-input__icon {
    right: auto;
    left: var(--space-4);
}

.custom-select {
    position: relative;
    background: var(--black);
    border-radius: var(--radius-xl);
    height: 3.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 50;
    width: 100%;
}

.custom-select--open {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--space-4);
    color: var(--white);
    font-size: var(--text-base);
}

.custom-select__arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--gray-text);
    transition: transform 0.3s ease;
    margin-left: auto;
}

.custom-select--open .custom-select__arrow {
    transform: rotate(180deg);
    color: var(--white);
}

.custom-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1002;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.custom-select--open .custom-select__dropdown {
    display: block;
}

.custom-select__option {
    padding: var(--space-3) var(--space-4);
    color: var(--white);
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: var(--text-base);
}

.custom-select__option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.custom-select__selected {
    flex: 1;
    min-width: 0;
    line-height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;

}


/* Multi-select вариант (используется в фильтрах ucats-каталогов).
   Состав опции: <label class="checkbox custom-select__multi-option"> с input + custom + label. */
.custom-select--multi .custom-select__dropdown {
    padding: var(--space-2) 0;
    max-height: 320px;
}

/* Открытый multi-select должен накрывать следующие за ним .filter-category /
   .custom-select братья. У base .custom-select z-index: 50, и одинаковые
   z-index'ы у соседей дают порядок отрисовки по DOM (более поздний — сверху),
   из-за чего открытый dropdown первого селекта прикрывался заголовком
   следующего фильтра. Поднимаем открытый поверх соседних стек-контекстов. */
.custom-select--multi.custom-select--open {
    z-index: 1003;
}

.custom-select__multi-option {
    padding: var(--space-2) var(--space-4);
    margin: 0;
    border-radius: 0;
    width: 100%;
}

.custom-select__multi-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.custom-select__dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-select__dropdown::-webkit-scrollbar-thumb {
    background-color: var(--gray-dark);
    border-radius: 3px;
}

.custom-select__dropdown::-webkit-scrollbar-track {
    background-color: var(--black);
}

.ui-input--agreement {
    background: var(--black);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: var(--space-4);
}

.ui-input--agreement:focus-within {

    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ui-input__eye-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.ui-input__toggle-icon .eye-closed {
    display: none;
}

.ui-input__toggle.active .eye-open {
    display: none;
}

.ui-input__toggle.active .eye-closed {
    display: block;
}

.agreement-link {
    color: var(--white);
    transition: color 0.3s ease, text-decoration 0.3s ease;
    text-decoration: underline;
    position: relative;
}

.agreement-link:hover {
    color: var(--white);

}

.agreement-link:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Кастомный круглый чекбокс */
.agreement-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.agreement-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.agreement-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    color: var(--white);
    font-size: var(--text-base);
    line-height: 1.5;
    width: 100%;
    position: relative;
    padding-left: 2.5rem;
    min-height: 1.5rem;
}

/* Внешний круг */
.agreement-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--gray-text);
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Внутренний круг при выборе */
.agreement-label::after {
    content: '';
    position: absolute;
    left: 0.51rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Состояние при наведении */
.agreement-label:hover::before {
    border-color: var(--white);
}

/* Состояние выбранного чекбокса */
.agreement-input:checked + .agreement-label::before {
    border-color: var(--white);
    background-color: var(--white);
}

.agreement-input:checked + .agreement-label::after {
    transform: translateY(-50%) scale(1);
}

/* Состояние фокуса */
.agreement-input:focus + .agreement-label::before {

}

/* Состояние ошибки */
.ui-input--agreement.ui-input--error {
    border-color: var(--status-error);
}

.ui-input--agreement.ui-input--error .agreement-label::before {
    border-color: var(--status-error);
}

/* Текст соглашения */
.agreement-text {
    display: block;
    padding-top: 0.125rem;
}

.agreement-input:checked + .agreement-label {
    color: var(--black);
}

/* Изменение фона контейнера при выбранном чекбоксе */
.agreement-input:checked ~ .agreement-label .ui-input--agreement,
.ui-input--agreement:has(.agreement-input:checked) {
    background: var(--white);
    color: var(--black);
}

/* Стили для активного состояния - для поддержки современных браузеров */
.ui-input--agreement:has(.agreement-input:checked) {
    background: var(--white);
    color: var(--black);
}

.ui-input--agreement:has(.agreement-input:checked) .agreement-label {
    color: var(--black);
}

.ui-input--agreement:has(.agreement-input:checked) .agreement-label::before {
    border-color: var(--black);
    background-color: var(--white);
}

.ui-input--agreement:has(.agreement-input:checked) .agreement-label::after {
    background-color: var(--black);
}

.ui-input--agreement:has(.agreement-input:checked) .agreement-text,
.ui-input--agreement:has(.agreement-input:checked) .agreement-link {
    color: var(--black);
}

.ui-input--agreement:has(.agreement-input:checked) .agreement-link:hover {
    color: var(--black);
    text-decoration: underline;
}

/* Для браузеров без поддержки :has() - JavaScript добавит этот класс */
.ui-input--agreement.agreement-active {
    background: var(--white);
    color: var(--black);
}

.ui-input--agreement.agreement-active .agreement-label {
    color: var(--black);
}

.ui-input--agreement.agreement-active .agreement-label::before {
    border-color: var(--black);
    background-color: var(--black);
}

.ui-input--agreement.agreement-active .agreement-label::after {
    background-color: var(--white);
}

.ui-input--agreement.agreement-active .agreement-text,
.ui-input--agreement.agreement-active .agreement-link {
    color: var(--black);
}

.ui-input--agreement.agreement-active .agreement-link:hover {
    color: var(--black);
}

.registration-group {
    width: 100%;
    margin-bottom: var(--space-6);
}

.registration-section {
    margin-bottom: var(--space-6);
    padding: var(--space-8);
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    width: 100%;
}

.registration-section:last-child {
    margin-bottom: 0;
}

.registration-section__title {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-6);
}

.registration-section__grid {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.captcha-block {
    margin-bottom: var(--space-4);
}

.captcha-label {
    font-size: var(--text-base);
    color: var(--white);
    margin-bottom: var(--space-3);
    display: block;
}

.captcha-wrapper {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.captcha-image {
    position: relative;
    background: var(--black);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;

}

.captcha-placeholder {
    position: relative;
    z-index: 1;
}

.burger-menu,
.hamburger,
.burger-menu--footer {
    display: none;
}

.captcha-text {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 2px;
    font-family: monospace;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    user-select: none;
}
.captcha-img{
    background-image: url("/img/captcha-bg.webp");
    width: 9.375rem;
    height: 2.5rem;
}

.captcha-noise {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px);
    pointer-events: none;
}

.captcha-refresh {
    background: var(--gray-darker);
    border: none;
    border-radius: var(--radius-lg);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--gray-text);
    z-index: 2;
}

.captcha-refresh:hover {
    transform: scale(1.1);
    .captcha-refresh-icon {

        color: var(--white);
        transform: rotate(360deg);
    }
}

.captcha-refresh-icon {
    fill: var(--white);
    width: 1rem;
    height: 1rem;
    transition: all 0.5s ease;
}

.info-stab__text {
    font-weight: 400;
    font-size: var(--text-base);

    color: var(--gray-text);
}

.header__profile-button {
    display: none;
}

.hamburger {
    display: none;
}

.filters-sidebar {
    width: 22.188rem;
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
    /* Высота — по контенту. Раньше стояло max-height: 944px + overflow-y: auto,
       но это обрезало раскрытый dropdown последнего фильтра. Теперь сайдбар
       растёт вместе с количеством фильтров; внутри-сайдбарного скролла нет —
       страничный скролл (если действительно нужен) справляется естественно. */
}

&::-webkit-scrollbar {
    display: none;
}

.filters-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.filters-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filters-sidebar__reset {
    width: 100%;
}

.filters-sidebar__title {
    font-size: var(--text-lg);
    font-weight: 500;
}

/* Search field */
.filters-search {
    position: relative;
    margin-bottom: var(--space-4);
}

.filters-search__input {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 1.5rem);
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border: 1px solid var(--gray-light);
    border-radius: var(--radius-lg);
    background-color: var(--gray-dark);
    color: var(--white);
    transition: all 0.3s ease;
}

.filters-search__input:focus {
    outline: none;
    border-color: var(--white);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.filters-search__icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    fill: var(--gray-light);
}

/* Reset button */
.filters-sidebar__reset {

}

.filters-sidebar__reset:hover {

}

.filters-sidebar__reset svg {

}

.filter-category {
    border-bottom: 1px solid var(--gray-dark);
    padding-bottom: var(--space-4);
}

.filter-category:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-category__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.filter-category__title {
    font-size: var(--text-base);
    font-weight: 500;
}

.filter-category__toggle {
    background: none;
    border: none;
    color: var(--gray-light);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: color 0.2s;
}

.filter-category__toggle:hover {
    color: var(--white);
}

.filter-category__toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.search-box--filters .search-box__input::placeholder {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

.search-box--filters .search-box__icon {
    width: var(--space-4);
    height: var(--space-4);
}

.filter-category.is-expanded .filter-category__toggle-icon {
    transform: rotate(180deg);
}

.filter-category__options {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 144px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.filter-category.is-full .filter-category__options {
    max-height: 2000px;
    overflow-y: auto;
    padding-right: 8px;
}

.filter-category__options::-webkit-scrollbar {
    width: 6px;
}

.filter-category__options::-webkit-scrollbar-track {
    background: var(--gray-dark);
    border-radius: var(--radius-sm);
}
.filter-category__options .checkbox.extra {
    display: none !important;
}
.filter-category__options::-webkit-scrollbar-thumb {
    background: var(--gray-medium);
    border-radius: var(--radius-sm);
}

/* Price filter */
.price-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.price-filter__values {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--white);
}

.price-filter__value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--black);
    border-radius: var(--radius-xl);
    height: 3rem;
    padding: var(--space-2) var(--space-3);
    min-width: 9.063rem;
    position: relative;
}

.price-filter__value-label {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--gray-light);
}

.price-filter__input {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: var(--text-sm);
    text-align: center;
    font-weight: 500;
    width: 100%;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
}

.price-filter__input:focus {
    cursor: text;
}

/* Скрываем псевдоэлемент CSS, так как знак рубля будет через JS */
/* .price-filter__value::after {
    display: none;
} */

.price-filter__slider {
    position: relative;
    height: 8px;
    background: var(--gray-dark);
    border-radius: 4px;
    margin: var(--space-3) 0;
}

.price-filter__track {
    position: absolute;
    height: 8px;
    background: var(--gray-medium);
    border-radius: 4px;
    left: 0;
    right: 0;
    top: 0;
}

.price-filter__range {
    position: absolute;
    height: 8px;
    background: var(--white);
    border-radius: 4px;
    top: 0;
    left: 20%;
    right: 30%;
    opacity: 0.5;
}

.price-filter__thumb {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--white);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s;
}

.price-filter__thumb:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Checkbox styles */
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
}

.checkbox__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox__custom {
    width: 1rem;
    height: 1rem;
    background-color: var(--white);
    opacity: .5;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    transition: all 0.2s ease;
}

.checkbox__input:checked + .checkbox__custom {
    background-color: var(--white);
    opacity: 1;
    border-color: var(--white);
}

.checkbox__input:checked + .checkbox__custom::after {
    content: '';
    display: block;
    width: 0.625rem;
    height: 0.375rem;
    border: 2px solid var(--black);
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.checkbox__label {
    font-size: var(--text-base);
    color: var(--white);
    opacity: .5;
    line-height: var(--leading-tight);
    transition: all 0.2s ease;
}

.checkbox__input:checked + .checkbox__label {
    opacity: 1;
}

.checkbox__count {
    color: var(--gray-light);
    margin-left: var(--space-2);
}

/* "More options" button */
.filter-more {
    display: block;
    width: 100%;
    text-align: center;
    padding-top: var(--space-2);
    background: none;
    border: none;
    color: var(--gray-light);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color 0.2s;

}

.filter-more:hover {
    color: var(--white);
}

/* Скроллбар для всего меню */
.filters-sidebar::-webkit-scrollbar {
    width: 8px;
}

.filters-sidebar::-webkit-scrollbar-track {
    background: var(--gray-dark);
    border-radius: var(--radius-lg);
}

.filters-sidebar::-webkit-scrollbar-thumb {
    background: var(--gray-medium);
    border-radius: var(--radius-lg);
}

.filters-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--gray-light);
}

.dropdown--mobile {
    display: none;
}

.product-card {
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: 1.5rem 1.5rem 1.125rem 1.5rem;
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow .2s;
    height: 100%;
    min-height: 26.25rem;
}

.product-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.product-card__top {

}

.product-card__image-wrapper {
    width: 100%;
    min-height: 11.875rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.product-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* Кликабельная обёртка фото → переход на страницу товара.
   Анкор должен полностью занять image-wrapper, чтобы кликом ловить всю плашку. */
.product-card__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.product-card__image-link:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.product-card__image-link:focus-visible {
    outline: 2px solid var(--yellow-medium);
    outline-offset: 4px;
    border-radius: var(--radius-lg, 12px);
}

/* В list-режиме враппер маленький (140×140 с padding 0.75rem) — картинку нужно
   вписать в content-box, иначе она режется снизу через overflow:hidden.
   В плитке/default НЕ переопределяем — там html-атрибуты width/height у <img>
   дают всем карточкам единый «натуральный» размер. */
.products-grid--list .product-card__image-wrapper img,
#products_area.products-grid--list .product-card__image-wrapper img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Ucats-каталоги (kolpaki/disky/akb/...) генерируют карточку через JS:
   <img class="product-card__image" src="..."> — без HTML-атрибутов width/height,
   которые в основном каталоге задают img'у фиксированный «эталонный» размер.
   В результате правило выше .product-card__image { width:100%; height:100% }
   срастается с большой исходной картинкой и распирает плашку. Здесь
   фиксируем высоту img до ~140px (как в основном каталоге) и держим
   пропорции через width:auto + max-width:100%. Селектор `img.product-card__image`
   намеренно матчит только ucats — у каталога <picture class="product-card__image">,
   а внутренний <img> там с классом `image`. */
img.product-card__image {
    display: block;
    width: auto;
    height: 8.75rem;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
}
.product-card__top-badges {
    position: absolute;
    top: 3rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}

.product-card__top-badge {
    position: static;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: var(--text-xs);
    color: var(--black);
    font-weight: 500;
    line-height: 100%;
    white-space: nowrap;
}

.product-card__top-badge.badge--superprice{
    background-color: #E7FF2F;
}
.product-card__top-badge.badge--recommend{
    background-color: var(--green);
}
.product-card__top-badge.badge--bestseller{
    background-color: #FF2FAC;
}

.product-card__top-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Контейнер «рейтинг + кнопки действий» в верхней части тела карточки */
.product-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 13px;
}
.product-card__meta-row .product-card__rating {
    margin-bottom: 0;
}

.product-card__action {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--white);
    opacity: .25;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-card__action:hover {
    opacity: 1;
    transform: translateY(-1px);
    border: none;
    background-color: var(--white);

}
.product-card__action:hover .icon {
    fill: var(--black);
    color: var(--black);
}

.product-card__action .icon {
    width: 12px;
    height: 12px;
    fill: var(--white);
    color: var(--white);
    transition: fill 0.2s ease;
}

.product-card__action--active {
    background-color: var(--white);
}

.product-card__action--active .icon {
    color: var(--black);
    fill: var(--black);
}

/* RATING */
.product-card__rating {
    display: flex;
    gap: 4px;
    margin-bottom: 13px;
    cursor: default;
}

.product-card__rating .star {
    width: 12px;
    height: 12px;
    color: var(--yellow-medium);
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.5px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Активное состояние - полностью закрашенная звезда */
.product-card__rating .star.active {
    fill: currentColor;
}

/* Для частичного заполнения */
.product-card__rating .star.partial {
    fill: none;
}

.product-card__rating .star.partial::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") center/contain no-repeat;
    clip-path: inset(0 var(--clip-right, 50%) 0 0);
}

/* Body — растягиваем на оставшуюся высоту карточки и делаем flex column,
   чтобы можно было прижать нижний блок (наличие + цена) к низу через margin-top: auto.
   Это гарантирует одинаковое выравнивание карточек в строке независимо от длины описания
   или наличия блока "exist_info". */
.product-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* В обычном режиме body-right — реальный блок, прижимаем его к низу.
   В каталоге (#products_area body-left/right имеют display: contents) роль прямого ребёнка
   у body берёт на себя .product-card__price — для него margin-top: auto ниже. */
.product-card__body-right {
    margin-top: auto;
}

#products_area .product-card__price {
    margin-top: auto;
}

/* Title */
.product-card__title {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 100%;
    margin-bottom: 0.75rem;
}

.product-card__desc {
    font-size: var(--text-xs);
    color: var(--white);
    opacity: .5;
    margin-bottom: 10px;
    line-height: 120%;
    /* Резервируем место ровно под 2 строки: 2 × line-height (120%) = 2.4em.
       Так короткие описания не "поднимают" блок с ценой выше, а длинные обрезаются клампом. */
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__stock {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0.25rem 0.75rem;
    justify-content: space-between;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    background-color: var(--black);
}

.product-card__stock-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-card__stock-dot--success {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--status-success);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    animation: pulse 3s infinite ease-in-out;
}

.product-card__stock-dot--info {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--status-info);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    animation: pulse 3s infinite ease-in-out;
}

.product-card__stock-dot--warning {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--status-warning);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    animation: pulse 3s infinite ease-in-out;
}

.product-card__stock-dot--error {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--status-error);
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    animation: pulse 3s infinite ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.4);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

.product-card__stock--success {
    color: var(--status-success);
    font-weight: 500;
    font-size: var(--text-xs);
}

.product-card__stock--warning {
    color: var(--status-warning);
    font-weight: 500;
    font-size: var(--text-xs);
}

.product-card__stock--error {
    color: var(--status-error);
    font-weight: 500;
    font-size: var(--text-xs);
}

.product-card__stock--info {
    color: var(--status-info);
    font-weight: 500;
    font-size: var(--text-xs);
}

.product-card__stock-count--success {
    color: var(--status-success);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--leading-relaxed);
}

.product-card__stock-count--warning {
    color: var(--status-warning);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--leading-relaxed);
}

.product-card__stock-count--error {
    color: var(--status-error);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--leading-relaxed);
}

.product-card__stock-count--info {
    color: var(--status-info);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: var(--leading-relaxed);
}

/* PRICE */
.product-card__price {
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.product-card__price-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.product-card__price-all {
    display: inline-flex;
    align-items: center;
    gap: 0.188rem;
    font-size: var(--text-sm);
    color: var(--white);
    opacity: .5;
    text-decoration: underline;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-card__price-all .icon {
    width: 1rem;
    height: 1rem;
    fill: var(--white);
    transition: transform 0.2s ease;
}

.product-card__price-all:hover {
    opacity: 1;
}

.product-card__price-all:hover .icon {
    transform: scale(1.1);
}

.product-card__price-current {
    font-size: var(--font-size-default);
    font-weight: 500;
    line-height: 80%;
    color: var(--white);
}

.product-card__price-old {
    position: relative;
    color: var(--gray-medium);
    line-height: 85%;

    font-size: var(--text-xs);
}

.product-card__price-old::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--white);
    transform-origin: left top;
}

/* ACTIONS */
.product-card__actions {
    margin-top: auto;
    display: flex;
    position: relative;
    gap: 10px;
    align-items: center;
}

/* Counter */
.product-card__cart-btn {
    display: flex;
    align-items: center;

    justify-content: space-between;
    padding: 0 var(--space-2);
    width: 100%;
    position: relative;
}

/* Counter inside button */
.cart-btn__counter {
    display: flex;
    border-radius: 10px;
    position: absolute;
    width: 7rem;
    left: 4px;
    z-index: 2;
    overflow: hidden;
    transition: all 0.3s ease;
    background: var(--black);
    padding: 4px;
}

.cart-btn__counter-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    font-size: var(--text-base);
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, opacity 0.2s ease;
    user-select: none;
    background-color: var(--gray-darker);
}

.cart-btn__counter-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.cart-btn__counter-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.cart-btn__counter-input {
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    /* Убираем стрелки в Firefox */
}

/* Убираем стрелки у number input в Chrome, Safari, Edge, Opera */
.cart-btn__counter-input::-webkit-outer-spin-button,
.cart-btn__counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Фокус состояния */
.cart-btn__counter-input:focus {
    background: rgba(255, 255, 255, 0.1);

}
.product-card__actions:hover .cart-btn__counter {
    transform: translateY(-3px);
}
.product-card__actions:hover .product-card__cart-btn {
    transform: translateY(-3px);
}

.product-card__actions.in-cart .cart-btn__counter {
    opacity: 1;
    width: auto;
    background-color: var(--gray-darker);
}
.product-card__actions.in-cart .cart-btn__counter-btn {
    background-color: var(--black);
}

.product-card__cart-btn.in-cart{
    background-color: var(--black);
    color: var(--white);
    border: var(--black);
}

.product-card__cart-btn.in-cart .cart-btn__counter-btn{
    background-color: var(--black);
}

.cart-btn__text {
    margin-left: 6.625rem;
    width: 100%;
    text-align: center;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

/* Состояние когда в корзине больше 1 товара */


.product-card__cart-btn.has-items .cart-btn__quantity-indicator {
    opacity: 1;
}

.catalog-toolbar__view {
    margin-left: auto; /* кнопки справа */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-left: .75rem;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
    gap: 1.25rem;
    justify-content: flex-start;
}

.products-grid--list {
    grid-template-columns: 1fr;
    gap: 16px;
}

.products-grid--list .product-card {
    flex-direction: row;
    padding: 1.5rem;
    gap: 24px;
    height: auto;

    min-height: 14.875rem;
}

.products-grid--list .product-card__top {
    width: 190px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.products-grid--list .product-card__image-wrapper {
    aspect-ratio: 1 / 1;
    height: 170px;
}

.products-grid--list .product-card__body {
    padding-top: 0.75rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.products-grid--list .product-card__stock{
    margin-bottom: 0;
    max-width: 17rem;
    width: 100%;
}
.products-grid--list .product-card__rating {
    position: absolute;
    right: 6.375rem;
    top: 1.875rem;
}

.products-grid--list .product-card__desc {
    -webkit-line-clamp: 2;
    max-width: 30.063rem;
}

.products-grid--list .product-card__price-all {
    display: none;
}
.products-grid--grid .product-card__price-all--list{
    display: none;
}
.products-grid--list .product-card__price-all--list{
    display: flex;
}
.products-grid--list .product-card__list-actions{
    display: flex;
    align-items: center;
    gap: 2rem;
}

.products-grid--list .cart-btn__text{
    margin-left: 8.625rem;
    margin-right: 1.75rem;
}
.products-grid--list .product-card__bottom{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
}
.products-grid--list .product-card__price-wrp{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.products-grid--compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.products-grid--compact .product-card {
    flex-direction: row;

    gap: 0;
    height: auto;
    border-radius: 10px;
    min-height: auto;
}
/* В compact-режиме кнопки идут инлайном внутри flex-строки тела, не в абсолюте,
   чтобы не наезжать на название товара */
.products-grid--compact .product-card__top-actions{
    flex-direction: row;
    flex-shrink: 0;
}
.products-grid--compact .product-card__meta-row {
    margin-bottom: 0;
    flex-shrink: 0;
}

.products-grid--compact .product-card__top {
    width: 0;
}

.products-grid--compact .product-card__image-wrapper {
    height: 110px;
    aspect-ratio: 1 / 1;
}

.products-grid--compact .product-card__body {
    flex: 1;
    padding-left: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.products-grid--compact .product-card__desc{
    max-width: 25.625rem;
    margin-bottom: 0;
}
.products-grid--compact .product-card__price{
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
}

.products-grid--compact .product-card__bottom{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
}
.products-grid--compact .product-card__price-wrp{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.products-grid--compact .product-card__stock{
    margin-bottom: 0;
    height: 100%;
    border-radius: 0.75rem;
    padding: 19px;
}
.products-grid--compact .product-card__price-all--list{
    display: none;
}
.products-grid--compact .cart-btn__text{
    margin-left: 8.938rem;
    margin-right: 1.75rem;
}
.products-grid--compact .product-card__rating,
.products-grid--compact .product-card__top-badge,
.products-grid--compact .product-card__image-wrapper {
    display: none;
}

.products-grid--compact .product-card__title {
    font-size: 14.5px;
    margin-bottom: 0.75rem;
}
.products-grid--compact .product-card__price-current{
    white-space: nowrap;
}
.products-grid--compact .product-card__price-old{
    white-space: nowrap;
}
.products-grid--compact .product-card__stock-count{
    white-space: nowrap;
}
.products-grid--compact .product-card__stock--green{
    white-space: nowrap;
}
.view-btn {
    width: 5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-text);
    fill: var(--gray-text);
    transition: all .18s ease;
}

.view-btn svg {
    width: 2rem;
    height: 1rem;
    fill: var(--white);
    opacity: .25;
    transition: all .2s ease;
}

.view-btn:hover {
    background: rgba(255, 255, 255, 0.02);
    color: var(--white);
    fill: var(--white);

}

.view-btn:hover svg {
    opacity: .15;
}

.view-btn--active {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.view-btn--active svg {
    fill: var(--black);
    opacity: 1;
}

.view-btn--active:hover {
    background: var(--white);
    color: var(--black);
}

.view-btn--active:hover svg {
    fill: var(--black);
    opacity: 1;
}

.catalog-toolbar {
    margin-bottom: 1.25rem;
}

.catalog-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--gray-darker);
    padding: 0.75rem;
    border-radius: var(--radius-2xl);


}

.catalog-toolbar .custom-select {
    max-width: 28.688rem;
    width: fit-content;
    height: 2.5rem;
}

.catalog-toolbar .custom-select__trigger {
    padding: 0 .9rem;
    font-size: .95rem;
    gap: 1.5rem;
}

.catalog-toolbar .custom-select__selected {
    font-size: var(--text-sm);
}

.catalog-toolbar .
.custom-select__label-wrap {
    display: flex;
    align-items: center;

}

.custom-select__label {
    color: var(--gray-text);
    margin-right: 0.5rem;
    font-size: var(--text-sm);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.catalog-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.catalog-content {
    flex: 1;
    min-width: 0;
}



.load-more {
    display: flex;
    justify-content: center;

}

.load-more__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: none;
    padding: 1rem 2rem;
    background-color: var(--gray-darker);
    border-radius: 0.875rem;
    min-height: 4rem;
    cursor: pointer;
    width: 100%;
    min-width: 37.875rem;
    transition: all 0.3s ease;
    outline: none;
    text-decoration: none;
}

.load-more__button:hover {
    background-color: var(--gray-dark);
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

.load-more__text {
    color: var(--white);
    opacity: .5;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--leading-relaxed);
    transition: all 0.3s ease 0.1s;
}

.load-more__button:hover .load-more__text {
    opacity: 1;

}

.pagination-section {
    display: flex;
    justify-content: center;
}

.pagination__wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: fit-content;
}

.refunds__table {
    width: 100%;


    padding: var(--space-6) 0;
}

.refunds__table-head,
.refunds__tr {
    display: grid;
    grid-template-columns: 7.313rem 15.5rem 17.875rem auto;
    column-gap: 1.25rem;
    padding: var(--space-3) 0;
}

.refunds__table-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.refunds__th {
    font-size: var(--text-base);
    color: var(--white);
    line-height: var(--leading-relaxed);
    font-weight: 500;
}

.refunds__tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.refunds__td {
    font-size: var(--text-base);
    color: var(--white);
    opacity: .75;
    line-height: var(--leading-relaxed);
    padding: var(--space-2) 0;
}

.refunds__wrap {
    background-color: var(--gray-darker);
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: var(--radius-xl);
    min-height: 39.375rem;
    max-height: 39.375rem;
}

.refunds__pagination {
    margin-top: auto;
}

.refunds__pagination .pagination__nav {
    background-color: var(--black);
}

.refunds__pagination .pagination__link {
    background-color: var(--gray-darker);
    color: var(--white);
}

.refunds__pagination .pagination__link:hover {
    background-color: var(--gray-dark);
    color: var(--white);
}

.refunds__pagination .pagination__link--disabled:hover {
    background-color: var(--gray-darker);
    color: var(--white);
    transform: none;
    box-shadow: none;
}

.refunds__pagination .pagination__link--active {
    background-color: var(--white);
    color: var(--black);
}

.refunds__empty {
    width: 100%;
    height: 100%;
    padding: 7.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: var(--white);
    text-align: center;

    opacity: .5;
}

/* Заголовок */
.refunds__empty-title {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--white);
    opacity: .25;
    margin-bottom: var(--space-6);
}

/* Подзаголовок */
.refunds__empty-subtitle {
    font-size: var(--text-base);
    font-weight: 500;
    opacity: .75;
}

.brands-alpha-grid {
    margin: 0 9.75rem;
    display: grid;
    /* на десктопе — узкие колонки, много в ряд */
    grid-template-columns: repeat(7, minmax(9.5rem, 1fr));
    gap: 2.5rem; /* расстояние между колонками */
    align-items: start;
    width: 100%;
}

.brands-alpha-column {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 1.25rem;
}
.brands-alpha-column li{
    display: flex;
    align-items: center;

    gap: 1.25rem;
}

.brands-alpha-group {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Круг-литера слева */
.brands-alpha-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 125%;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.brands-alpha-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.brands-alpha-item {
    font-size: var(--text-base);
    text-transform: uppercase;
    color: var(--white);
    opacity: .5;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}

.brands-alpha-item:hover {
    opacity: 1;
}

.brands-alpha-link {
    display: inline-block;
    color: var(--white);
    text-transform: uppercase;
    opacity: .5;
    text-decoration: none;
    transition: opacity .2s ease;
    white-space: nowrap;
}

.brands-alpha-link:hover {
    opacity: 1;
}

.profile-data-title {
    text-align: center;
    margin-bottom: var(--space-8);
}

.profile-data-container {
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-top: var(--space-8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.profile-data-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
}

/* Left column styles */
.profile-data-left {
    display: flex;
    flex-direction: column;
}

.profile-data-row {
    display: grid;
    grid-template-columns: minmax(200px, auto) 1fr;
    min-height: 3.125rem;
    gap: 12.875rem;
    padding: 1.063rem 0;
    border-bottom: 1px solid rgba(248, 250, 249, 0.1);
}

.profile-data-row:nth-child(2) {
    padding: 0.906rem 0;
}

.profile-data-row:first-child {
    border-top: 1px solid rgba(248, 250, 249, 0.1);
}


.profile-data-label {
    font-weight: 500;
    color: var(--white);
    opacity: .75;
    text-align: left;
    display: inline-flex;
    align-items: center;
}

.profile-data-value {
    font-weight: 500;
    text-align: left;
    font-size: var(--text-base);
    line-height: 100%;
    display: flex;
    color: var(--white);
    align-items: center;
    gap: var(--space-2);
}

.profile-data-email {
    color: var(--white);
}

.profile-data-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    fill: currentColor;
}

/* Right column styles */
@keyframes blockReveal {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateX(15deg) translateY(50px) scale(0.95);
        filter: blur(10px) brightness(1.2);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0) scale(1);
        filter: blur(0) brightness(1);
    }
}

/* Анимация градиентной обводки */
@keyframes borderGlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Анимация текста */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
        transform: translateX(-20px);
    }
    100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

/* Анимация кнопки */
@keyframes buttonPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 20px rgba(0, 100, 255, 0.3);
    }
    50% {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 30px rgba(0, 100, 255, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }
}

/* Анимация иконки стрелки */
@keyframes arrowMove {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* Анимация автомобиля */
@keyframes carFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
    }
    33% {
        transform: translateY(-5px) translateX(2px) scale(1.01);
    }
    66% {
        transform: translateY(3px) translateX(-2px) scale(0.99);
    }
}

/* Анимация свечения */
@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* Парящие частицы */
@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.1;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.15;
    }
}

/* Обновленные стили блока */
.profile-data-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg,
    var(--gray-darker) 0%,
    var(--black) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;

    /* Анимация появления */
    animation: blockReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;

    /* Градиентная обводка */
    border: 1px solid transparent;
    background-clip: padding-box;

    /* Эффект глубины */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.profile-data-right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
            90deg,
            transparent,
            var(--blue-dark),
            transparent
    );
    animation: borderGlow 3s ease-in-out infinite;
}

/* Свечение фона */
.profile-data-right::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
            circle at 30% 30%,
            rgba(0, 100, 255, 0.1) 0%,
            transparent 50%
    );
    animation: glowPulse 4s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

/* Парящие частицы */
.profile-data-right .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--blue-dark);
    border-radius: 50%;
    animation: floatParticle 8s ease-in-out infinite;
    z-index: 1;
}

.profile-data-right .particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.profile-data-right .particle:nth-child(2) {
    top: 60%;
    left: 80%;
    animation-delay: 1s;
    background: var(--white);
}

.profile-data-right .particle:nth-child(3) {
    top: 40%;
    left: 50%;
    animation-delay: 2s;
    background: var(--blue-dark);
}

.profile-data-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: textReveal 0.8s ease-out 0.3s both;
}

.profile-data-heading {
    margin-bottom: var(--space-4);
    color: var(--white);
    font-weight: 500;
    font-size: var(--font-size-default);
    line-height: 120%;
    width: 75%;

    /* Анимация текста */
    animation: textReveal 1s ease-out 0.5s both;

    /* Свечение текста */
    text-shadow: 0 0 20px rgba(0, 100, 255, 0.3),
    0 0 40px rgba(0, 100, 255, 0.1);
}

.profile-data-description {
    color: var(--white);
    line-height: 140%;
    opacity: .5;
    font-size: var(--text-sm);
    font-weight: 400;
    margin-bottom: var(--space-6);
    width: 85%;

    /* Анимация текста */
    animation: textReveal 1s ease-out 0.7s both;
}

.profile-data-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: auto;

    /* Анимация кнопки */

    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Эффект свечения кнопки при наведении */
.profile-data-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
    );
    transition: left 0.5s ease;
    z-index: 1;
}

.profile-data-btn:hover::before {
    left: 100%;
}

.profile-data-btn:hover {
    animation: none;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 100, 255, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}


.profile-data-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;

    /* Анимация автомобиля */
    animation: carFloat 8s ease-in-out infinite;
}

.profile-data-decoration img {
    transition: all 0.5s ease;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)) brightness(1.1);
}

.profile-data-right:hover .profile-data-decoration img {
    filter: drop-shadow(0 15px 30px rgba(0, 100, 255, 0.4)) brightness(1.3);
    transform: scale(1.05) rotate(-1deg);
}

/* Эффект наведения на весь блок */
.profile-data-right:hover {
    transform: translateY(-5px) perspective(1000px) rotateX(2deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 100, 255, 0.2) inset,
    0 0 50px rgba(0, 100, 255, 0.1);
    transition: all 0.3s ease;
}


@media (prefers-reduced-motion: reduce) {
    .profile-data-right,
    .profile-data-heading,
    .profile-data-description,
    .profile-data-btn,
    .profile-data-decoration {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== Адаптивность страницы профиля (из обновлённого макета my-data) ===== */
@media (max-width: 768px) {
    .profile-data-container {
        padding: 24px;
        border-radius: 16px;
    }
    .profile-data-grid {
        display: flex;
        flex-direction: column;
    }
    .profile-data-row {
        display: flex;
        flex-direction: column;
        min-height: auto;
        gap: 12px;
    }
    .profile-data-row:first-child {
        border-top: none;
        padding-top: 0;
    }
    .profile-data-label {
        font-size: 10px;
    }
    .profile-data-value {
        font-size: 16px;
    }
    .profile-data-email {
        max-width: 270px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-flex;
    }
    .profile-data-heading {
        font-size: 12px;
    }
    .profile-data-description {
        font-size: 10px;
    }
    .profile-data-right {
        padding: 18px;
    }
    .profile-data-right .btn {
        min-height: 32px;
        font-size: 10px;
    }
    .profile-edit-section {
        padding: 24px;
        margin-bottom: 16px;
        border-radius: 16px;
    }
    .profile-edit-title {
        font-size: 10px;
        margin-bottom: 16px;
    }
}

.profile-edit-form {

}

.profile-edit-section {
    margin-bottom: var(--space-8);
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 2rem;
}

.profile-edit-title {
    font-size: var(--font-size-default);
    font-weight: 500;
    margin-bottom: var(--space-6);
    color: var(--gray-medium);
}

.profile-edit-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-4);
}

.profile-edit-hint {
    font-size: var(--text-sm);
    color: var(--white);
    opacity: .5;
    margin-top: var(--space-6);
    font-weight: 400;
    text-align: center;
}

/* Custom select styling */
.custom-select {
    position: relative;
    background: var(--black);
    border-radius: var(--radius-xl);
    height: 3.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 50;
    width: 100%;
}

.custom-select--open {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--space-4);
    color: var(--white);
    font-size: var(--text-base);
}

.custom-select__arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--gray-text);
    transition: transform 0.3s ease;
}

.custom-select--open .custom-select__arrow {
    transform: rotate(180deg);
    color: var(--white);
}

.custom-select__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--black);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1002;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.custom-select--open .custom-select__dropdown {
    display: block;
}

.custom-select__option {
    padding: var(--space-3) var(--space-4);
    color: var(--white);
    transition: background-color 0.2s ease;
    cursor: pointer;
    font-size: var(--text-base);
}

.custom-select__option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.custom-select__option--selected {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.main-slider-section {
    display: flex;
    gap: 1.25rem;
    margin-top: var(--space-8);
}

/* Изолируем стили только для главного слайдера */
.main-slider {
    position: relative;
    flex: 1;
    min-height: 30rem;
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

/* Фон слайда */
.main-slider .swiper-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Содержимое слайда */
.main-slider .slide-content {
    position: relative;
    z-index: 5;
    color: var(--white);
    padding: 2rem;
    padding-top: 6.063rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-slider .slide-header {
    margin-bottom: 1.5rem;
}

.main-slider .slide-small-text {
    font-size: var(--text-xs);
    opacity: 0.5;
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 150%;
}

.main-slider .slide-title {
    font-size: 2.25rem;
    line-height: 125%;
    font-weight: 500;
    width: 80%;
    margin: 0;
}

/* Кнопка в слайдере */
.main-slider .slide-btn {
    background-color: var(--white);
    color: var(--black);
    border-color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-lg);
    align-self: flex-start;
}

/* Прогресс-бар сверху */
.main-slider .swiper-progressbar {
    position: absolute;
    top: 2rem;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;

    z-index: 10;
    border-radius: 2px;
}

.main-slider .swiper-progressbar-fill {
    height: 100%;
    background: var(--white);
    width: 0;
    transition: width 5000ms linear;
    border-radius: 2px;
    display: block;
    background: rgba(255, 255, 255, 0.2);
}

/* Стрелки навигации */
.main-slider .swiper-button-next,
.main-slider .swiper-button-prev {
    position: absolute;
    bottom: 2rem;
    top: auto;
    width: 3rem;
    height: 1.875rem;
    background: var(--white);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.main-slider .swiper-button-next {
    right: 1.5rem;
}

.main-slider .swiper-button-prev {
    right: 5rem;
    left: auto;
}

.main-slider .swiper-button-next:hover,
.main-slider .swiper-button-prev:hover {
    opacity: 1;
    transform: scale(1.1);
}

.main-slider .swiper-button-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--black);
}

.main-slider .swiper-button-prev .swiper-button-icon {
    transform: rotate(180deg);
}

.main-slider .swiper-button-prev:after, .main-slider .swiper-button-next:after {
    content: none;
}

/* Булеты внизу по центру */
.main-slider .swiper-pagination {
    position: absolute;
    bottom: 2rem !important;
    left: 50% !important;
    display: flex;
    width: fit-content !important;
    gap: 0.375rem;
    z-index: 10;
}

.main-slider .swiper-pagination-bullet {
    width: 0.625rem;
    height: 0.625rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.main-slider .swiper-pagination-bullet-active {
    background: var(--white);
    transform: scale(1.2);
    opacity: 1;
}

/* Блоки справа */
.main-slider-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 37.813rem;
}

.main-slider-aside .news-card__title {
    font-size: 1.5rem;
    width: 78%;
}

.main-slider-aside .news-card__description {
    font-size: var(--font-size-default);
    width: 78%;
    font-weight: 400;
}

.main-slider-aside .news-card__link {
    width: 4.5rem;
    height: 3rem;
}

/* Баннеры справа от слайдера — это чистые картинки без текста.
   Убираем градиент-затемнение (в т.ч. при наведении), но оставляем
   лёгкое увеличение из общего правила .news-card:hover. */
.main-slider-aside .news-card::before {
    display: none;
}

.trust-section {
    padding: 3.75rem 0;
}

.trust-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4rem;
}

.trust-card {
    display: flex;
    align-items: center;
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}


.trust-card__icon {
    width: 4.375rem;
    height: 4.375rem;
    border-radius: var(--radius-lg);
    background-color: var(--gray-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.trust-card__icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--white);
}

.trust-card__content {
    flex: 1;
}

.trust-card__title {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.5rem;
    line-height: 150%;
}

.trust-card__text {
    font-size: var(--text-sm);
    color: var(--gray-medium);
    line-height: 1.4;
    font-weight: 400;
}

.catalog-section--mini .catalog-section__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.catalog-grid--mini {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Небольшие изменения для карточек в мини-каталоге */
.catalog-section--mini .catalog-card {
    min-height: 15.625rem;
}

.catalog-section--mini .catalog-card__title {
    font-size: 1.125rem;
}

.catalog-section--mini .catalog-card__count {
    font-size: var(--text-sm);
}

.catalog-section--mini .catalog-card__header {
    padding: 2rem 2rem 0;
}

.catalog-section--mini .catalog-card__body {
    padding: 0 2rem 2rem;
}

.manufacturers-catalog {
    margin-top: 7.5rem;
    margin-right: 11.75rem;
    margin-left: 11.75rem;
}

.manufacturers-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    gap: 2rem;
}

.manufacturers-tab {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 0.875rem;
    opacity: .25;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

}

.manufacturers-tab::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    opacity: .1;
    width: 100%;
    height: 2px;
    background: var(--white);
}

.manufacturers-tab:hover {
    opacity: .75;

    .manufacturers-tab::after {
        opacity: .75;
    }

}

.manufacturers-tab--active:hover {
    opacity: 1;

    .manufacturers-tab--active::after {
        opacity: 1;
    }
}

.manufacturers-tab--active {
    color: var(--white);
    font-weight: 500;
    opacity: 1;
}

.manufacturers-tab--active::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    opacity: 1;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
}

.manufacturers-filters {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
}

.manufacturers-filters__row {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.manufacturers-filter {

    border: none;
    color: var(--white);
    font-size: 0.75rem;
    opacity: .5;
    padding: 1.313rem 1.063rem;
    background: none;
    cursor: pointer;
    flex-grow: 1;
    font-weight: 400;
    transition: all 0.3s ease;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.manufacturers-filter:first-child {
    border-left: none;
}

.manufacturers-filter:hover {
    background: rgba(255, 255, 255, 0.1);
}

.manufacturers-filter--active {
    background: var(--gray-darker);
    opacity: 1;
    font-weight: 500;
}

.manufacturers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.manufacturers-item {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    color: var(--white);
    font-size: var(--text-base);
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.manufacturers-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.consultation-section {
    position: relative;
    min-height: 12.5rem;
    display: flex;
    align-items: center;
    color: var(--white);
    text-align: center;
    overflow: hidden;
    margin: 7.5rem 0;
}

.consultation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000BF;
    backdrop-filter: blur(4px);
    z-index: 1;
}

.consultation-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/consultation-bg.webp') center/cover no-repeat;
    opacity: 0.75;
    z-index: 0;
}

.consultation-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

.consultation-subtitle {
    font-size: var(--text-sm);
    opacity: 0.5;
    margin-bottom: 1rem;
    font-weight: 400;
}

.consultation-title {
    font-size: 1.5rem;
    line-height: 125%;
    margin-bottom: 1rem;
    font-weight: 400;
    width: 70%;
    text-align: center;
}

.consultation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 300px;
    margin: 0 auto;
}

.parts-catalog {
    margin: 0 11.75rem;
}

.parts-catalog__tabs {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.parts-catalog__tab {
    position: relative;
    padding: 0.5rem 1rem;
    color: var(--white);
    text-decoration: none;
    font-weight: 400;
    opacity: .25;
    transition: all 0.3s ease;
    font-size: var(--text-base);
}

.parts-catalog__tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--white);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.parts-catalog__tab:hover {
    opacity: 1;
}

.parts-catalog__tab:hover::after {
    transform: scaleX(1);
}

.parts-catalog__tab--active {
    opacity: 1;
}

.parts-catalog__tab--active::after {
    transform: scaleX(1);
}

.parts-catalog__header {
    text-align: center;
    margin-bottom: 3rem;
}

.parts-catalog__description {
    color: var(--gray-text);
    font-size: var(--text-base);
    margin: 0 auto;
    font-weight: 400;
}

.parts-catalog .brands-alpha-grid {

    grid-template-columns: repeat(7, minmax(5.5rem, 1fr));
    margin: 0;
}

.products-catalog {
    margin: 7.5rem 0;
}

.products-catalog .catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
}

.news-slider-section {
    padding: 3rem 0;
    position: relative;

}

.news-slider .swiper {
    margin-right: 0;
}

.news-slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-left: 11.75rem;
    margin-right: 11.75rem;
}

.news-slider-header__label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.news-slider-header__title {
    font-size: 2.25rem;
    color: var(--white);
}

.news-slider-header__btn {
    white-space: nowrap;
}

.news-slider {
    margin-left: 11.75rem;
    width: calc(100% - 11.75rem);
    margin-right: 0 !important;
    overflow: hidden;
    padding: 3rem 0 !important;
}

.news-slider .swiper-wrapper {

}

.news-slider .swiper {
    padding: 1.5rem 0;
}

.news-card {
    position: relative;
    border-radius: var(--radius-xl);
}

.garage-container {
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-top: var(--space-8);
    min-height: 39.375rem;
}

.garage-header {
    display: flex;
    gap: var(--space-4);
    margin-bottom: 0.75rem;
}

.garage-search {
    flex: 1;
}

.garage-actions {
    display: flex;
    gap: var(--space-4);
}

.garage-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 6.75rem;
    text-align: center;
    color: var(--gray-text);
}

.garage-text-caption {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--white);
    opacity: .25;
    margin-bottom: 1.5rem;
}

.garage-text-body {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    opacity: .75;
}

.garage-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.garage-car-card {
    background-color: var(--black);
    border-radius: var(--radius-xl);
    padding: var(--space-8);

}

.garage-car-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.garage-car-title {
    max-width: 70%;
}

.garage-car-name {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-2);
}

.garage-car-vin {
    font-size: var(--text-base);
    color: var(--gray-text);
}

.garage-car-actions {
    display: flex;
    gap: var(--space-2);
}

.garage-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray-dark);
    color: var(--white);
    fill: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-width: 2.625rem;
    height: 2.625rem;
    padding: 0;
}

.garage-action-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.garage-action-button:hover::before {
    left: 100%;
}

.garage-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.garage-action-button:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.garage-action-button:active {
    transform: translateY(0);
}

.garage-action-icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: #C5C6C8;
    color: #C5C6C8;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.garage-action-button:hover .garage-action-icon {
    transform: scale(1.1);
}

/* Специальный класс для проверенной кнопки */
.garage-action-button--verified {
    background-color: var(--white);
    color: var(--black);
    fill: var(--black);
}

.garage-action-button--verified .garage-action-icon {
    fill: var(--black);
}

.garage-action-button--verified:hover::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.garage-action-button--verified:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.garage-car-body {
    display: flex;
    gap:0.75rem;
    margin-bottom: 1.25rem;
}

.garage-car-info {
    flex: 1;
}

.garage-car-info-columns {
    display: flex;
}

.garage-car-info-column {
    width: 100%;
}

.garage-car-info-row {
    display: flex;
    gap: 6px;
    min-height: 3.063rem;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.garage-car-info-row:first-child{
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.garage-info-label {
    font-size: var(--text-sm);
    color: var(--white);
    opacity: .5;
    white-space: nowrap;
}

.garage-info-value {
    font-size: var(--text-sm);
    color: var(--white);
    opacity: .5;
    text-align: right;
}

.garage-car-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
    width: 27.063rem;
    height: 12.563rem;
    margin-bottom: 0.75rem;
}

.garage-car-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.garage-car-stats {
    display: flex;
    justify-content: flex-end;
}

.garage-car-stat-row {
    display: flex;
    flex-direction: column;
    width: 100%;

}

.garage-car-stat {
    display: flex;
    gap: 6px;
    width: 100%;
    min-height: 3.063rem;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.garage-car-stat:first-child{
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.garage-stat-label {
    color: var(--white);
    opacity: .5;
    font-size: var(--text-sm);

}

.garage-stat-value {
    color: var(--white);
    font-weight: 400;
    font-size: var(--text-sm);
    opacity: .5;
}

.garage-car-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.garage-car-buttons .btn {
    flex: 1 ;
    font-size: var(--text-sm);

}

.add-car-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-text);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    margin-top: 3.063rem;
    margin-bottom: 2.938rem;
    transition: all 0.25s ease;
}

.add-car-back-btn:hover {
    color: var(--white);
    transform: translateX(-4px);
}

.add-car-back-btn__icon {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
    transform: rotate(90deg);
}

.add-car-back-btn:hover .add-car-back-btn__icon {

}


@media (max-width: 768px) {
    .add-car-back-btn {
        font-size: var(--text-sm);
        margin-bottom: 1rem;
    }
}

.add-car-container {

    margin-top: var(--space-8);
}

.add-car-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.add-car-section {
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.add-car-section-title {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--white);
    margin-bottom: var(--space-6);
}

.add-car-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: 1rem;
}

.add-car-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.add-car-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}


.car-image-upload {
    position: relative;
    width: 100%;

    min-height: 200px;
    background-color: var(--black);
    border-radius: var(--radius-xl);
    display: flex;
    padding: 2rem 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.car-image-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.car-image-upload__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-text);
}

.car-image-upload__title{
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.car-image-upload__image {
    width: 2.875rem;
    height: 2.25rem;
    object-fit: contain;
    display: block;
}
.car-image-default{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.063rem 2rem;
    border-radius: 0.625rem;
    background-color: var(--gray-darker);
}

.car-image-upload__text {
    font-size: var(--text-sm);
}

.car-image-upload__input,
.car-image-upload__file {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Когда фото выбрано — показываем его в том же небольшом квадрате,
   где была надпись «Нет изображения» (вместо иконки-заглушки) */
.car-image-upload.has-image .car-image-upload__text {
    display: none;
}
.car-image-upload.has-image .car-image-default {
    padding: 0;
    background: none;
}
.car-image-upload.has-image .car-image-upload__image {
    width: 13rem;
    height: 13rem;
    object-fit: contain;
    border-radius: 0.625rem;
}

.car-image-previews {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    overflow-x: auto;
    gap: 1rem;
    justify-content: center;
    width: 100%;
}

/* Каждое маленькое превью — точно как .car-image-default по стилю и размеру */
.car-image-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.188rem 3.875rem;
    border-radius: 0.625rem;
    background-color: var(--gray-darker);
}

/* Изображение — точно такого же размера, как дефолтная иконка */
.car-image-preview img {
    width: 55px;
    height: 55px;
    object-fit: fill;
    display: block;
    border-radius: 0.625rem;
}

/* Кнопка удаления для каждого превью */
.car-image-upload__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.car-image-upload__remove:hover {
    background-color: #e74c3c;
    transform: scale(1.1);
}

/* Title всегда остаётся видимым */
.car-image-upload__title {
    display: block; /* на всякий случай */
}

.car-image-upload__error {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 16px;
    background-color: rgba(231, 76, 60, 0.15);
    border: 1px solid #e74c3c;
    border-radius: 8px;
    color: #e74c3c;
    font-size: var(--text-sm);
    font-weight: 500;
    width: 100%;
    max-width: 320px;
}

.car-image-upload__error.show {
    display: flex;
    animation: errorPop 0.3s ease;
}

.car-image-upload__error svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes errorPop {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}


.add-car-actions {
    display: flex;

    margin-top: var(--space-4);
}


.notebook {
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    min-height: 39.375rem;
}



/* Форма */
.notebook__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.notebook__row {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.notebook__field {
    flex: 1 1 200px;
    min-width: 0;
}

.notebook__field--full {
    flex: 1 1 100%;
}



.notebook__submit {
    align-self: flex-start;
    width: auto;
}

/* Таблица */
.notebook__table-wrapper {

}
.notebook__table {
    width: 100%;
    min-width: max-content; /* Ключевое для скролла */
    border-collapse: collapse;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.notebook__table thead th {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.notebook__table tbody td {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.notebook__col {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*.notebook__col--brand { flex: 0 0 12%; }*/
/*.notebook__col--article { flex: 0 0 17%; }*/
/*.notebook__col--name { flex: 0 0 17%; }*/
/*.notebook__col--comment { flex: 0 0 17%; }*/
/*.notebook__col--quantity { flex: 0 0 12%;  }*/
/*.notebook__col--price { flex: 0 0 12%;  }*/

/* Пустое состояние */
.notebook__empty-state {
    text-align: center;
    padding: var(--space-9) 0;

}

.notebook__empty-text {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
}

.notebook__empty-subtext {
    font-size: var(--text-base);
    color: var(--gray-text);
}


.notebook__article-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--white);
    text-decoration: none;
    opacity: 1;
    transition: all 0.3s ease;
}

.notebook__article-link:hover {
    color: var(--yellow-medium);
    transform: translateX(2px);
}

.notebook__search-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor; /* Наследует цвет от родителя */
    transition: transform 0.3s ease;
}

.notebook__article-link:hover .notebook__search-icon {
    transform: scale(1.1) rotate(15deg);
}

.notebook__col--brand,
.notebook__cell.notebook__col--brand { flex: 0 0 12%; width: 12%; }
.notebook__col--article,
.notebook__cell.notebook__col--article { flex: 0 0 17%; width: 17%; }
.notebook__col--name,
.notebook__cell.notebook__col--name { flex: 0 0 17%; width: 17%; }
.notebook__col--comment,
.notebook__cell.notebook__col--comment { flex: 0 0 17%; width: 17%; }
.notebook__col--quantity,
.notebook__cell.notebook__col--quantity { flex: 0 0 12%; width: 12%; }
.notebook__col--price,
.notebook__cell.notebook__col--price { flex: 0 0 12%; width: 12%;}

.notebook__cell.notebook__col--brand,
.notebook__cell.notebook__col--name,
.notebook__cell.notebook__col--comment,
.notebook__cell.notebook__col--quantity,
.notebook__cell.notebook__col--price {
    opacity: 0.75;
}

.notebook__cell {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--white);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notebook__table-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
}

.notebook__action-btn {
    min-width: 13.188rem; /* Чтобы кнопки были одинаковой ширины */
}

.notebook__action-btn .btn__icon {
    width: 1.125rem;
    height: 1.125rem;
    fill: var(--white);
}

.balance-top-up,
.balance-history {
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.balance-section-title {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--white);
    margin-bottom: var(--space-4);
}

/* Форма пополнения */
.balance-top-up-form {
    display: flex;
    gap: var(--space-3);
    align-items: center;

}

.balance-input {

}

.balance-submit-btn {
    min-width: 15rem;
    align-self: stretch;
}

/* Фильтры */
.balance-filters {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);


    .filter-item:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;
    }

    .filter-item:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .filter-item:nth-child(3) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .filter-item:nth-child(4) {
        grid-area: 1 / 4 / 2 / 5;
    }

    .filter-item:nth-child(5) {
        grid-area: 2 / 1 / 3 / 3;
    }

    .filter-item:nth-child(6) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .filter-item:nth-child(7) {
        grid-area: 2 / 4 / 3 / 5;
    }


}



.balance-filters .btn {
    height: 100%;
    width: 100%;
}
.balance-table-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-6);
}

.balance-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.balance-col {
    font-size: var(--text-sm);
    color: var(--gray-text);
    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
    transition: color 0.2s ease;
}
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    align-items: center;
    color: var(--white);
    opacity: 1;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.sortable:hover {
    opacity: .5;
}

.sortable .sort-icon {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 1;
    transition: opacity 0.25s ease, transform 0.2s ease;
    color: var(--white);
    flex-shrink: 0;
    vertical-align: middle;
}
.sortable:hover .sort-icon {
    opacity: 0.5;
}

.sortable.asc .sort-icon,
.sortable.desc .sort-icon {
    opacity: 1;
}
.sortable.asc .sort-icon {
    transform: rotate(0deg);
}

.sortable.desc .sort-icon {
    transform: rotate(180deg);
}

.sortable:hover.asc .sort-icon,
.sortable:hover.desc .sort-icon {
    transform: scale(1.15);
}
.sortable:hover.asc .sort-icon{
    transform: scale(1.15) rotate(0deg);
}
.sortable:hover.desc .sort-icon{
    transform: scale(1.15) rotate(180deg);
}



.balance-col--id,
.balance-table__cell.balance-col--id {
    flex: 0 0 5%;
    width: 5%;
}

.balance-col--date,
.balance-table__cell.balance-col--date {
    flex: 0 0 15%;
    width: 15%;
}

.balance-col--sum,
.balance-table__cell.balance-col--sum {
    flex: 0 0 15%;
    width: 15%;
}

.balance-col--order,
.balance-table__cell.balance-col--order {
    flex: 0 0 15%;
    width: 15%;
}

.balance-col--name,
.balance-table__cell.balance-col--name {
    flex: 1;
    width: auto;
}


/* Пустое состояние */
.balance-empty-state {
    text-align: center;
    padding: var(--space-9) 0;
    color: var(--white);
}

.balance-empty-text {
    font-size: var(--text-lg);
    margin-bottom: 1.5rem;
    opacity: .25;
}

.balance-empty-subtext {
    font-size: var(--text-base);
}

.balance-table {
    width: 100%;
    border-collapse: collapse;

    overflow: hidden;
}

.balance-table thead {

}

.balance-table th {
    padding: 1.25rem 0;
    text-align: left;
    font-weight: 500;
    color: var(--white);
    font-size: var(--text-base);
}

.balance-table td, .balance-table th  {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);

}
.balance-table td{
    opacity: .75;
}

.balance-table-empty td {
    text-align: center;
    padding: 2rem 1rem;
    border: none;

}



.balance-table::-webkit-scrollbar {
    height: 6px;
    background-color: var(--gray-darker);
    border: none;
}

.balance-table::-webkit-scrollbar-track {
    background-color: var(--gray-darker);
}

.balance-table::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border-radius: 3px;
}

.balance-table::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-light);
}

.balance-table::-webkit-scrollbar-button {
    display: none;
}

/* Стили для Firefox */
@supports (-moz-appearance: none) {
    .balance-table {
        scrollbar-width: thin;
        scrollbar-color: var(--white) var(--gray-darker);
    }
}

/* Стили для IE/Edge (устаревшие браузеры) */
@supports (-ms-overflow-style: scrollbar) {
    .balance-table {
        -ms-overflow-style: scrollbar;
    }
}

.orders-container {
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

/* Сетка фильтров */
.orders-filters {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.filter-item button{
    height: 100%;
    width: 100%;
}
.orders-filters{
    /* Позиционирование элементов в сетке */
    .filter-item:nth-child(1) {
        grid-area: 1 / 1 / 2 / 2;
    }

    .filter-item:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .filter-item:nth-child(3) {
        grid-area: 1 / 3 / 2 / 4;
    }

    .filter-item:nth-child(4) {
        grid-area: 1 / 4 / 2 / 5;
    }

    .filter-item:nth-child(5) {
        grid-area: 2 / 1 / 3 / 2;
    }

    .filter-item:nth-child(6) {
        grid-area: 2 / 2 / 3 / 3;
    }

    .filter-item:nth-child(7) {
        grid-area: 2 / 3 / 3 / 4;
    }

    .filter-item:nth-child(8) {
        grid-area: 2 / 4 / 3 / 5;
    }
}
/* Обертка для таблицы с горизонтальным скроллом */
.orders-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    margin-top: var(--space-8);
}

/* Стилизация таблицы (ширина больше, чем контейнер) */
.orders-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1300px; /* Минимальная ширина для горизонтального скролла */
}

.orders-table thead {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.orders-table th {
    padding: 1.25rem 0;
    text-align: left;
    font-weight: 500;
    color: var(--white);
    font-size: var(--text-base);
}

.orders-table td {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.orders-table__cell{
    color: #F8FAF9BF;
}
.orders-table__cell a {
    color: var(--white);
}
.orders-table__cell small {
    color: var(--gray-medium);
}
.orders-table-empty {
    min-height: 200px;
}

.orders-table-empty td {
    text-align: center;
    padding: 2rem 1rem;
    border: none;
}

.orders-empty-state {
    text-align: center;
    padding: var(--space-9) 0;
    color: var(--white);
}

.orders-empty-text {
    font-size: var(--text-lg);
    margin-bottom: 1.5rem;
    opacity: .25;
}

.orders-empty-subtext {
    font-size: var(--text-base);
}

/* Ширина колонок таблицы */
.orders-col--id,
.orders-table__cell.orders-col--id { flex: 0 0 5%; width: 5%; }
.orders-col--date,
.orders-table__cell.orders-col--date { flex: 0 0 15%; width: 15%; }
.orders-col--sum,
.orders-table__cell.orders-col--sum { flex: 0 0 15%; width: 15%; }
.orders-col--payment,
.orders-table__cell.orders-col--payment { flex: 0 0 15%; width: 15%; }
.orders-col--payment-method,
.orders-table__cell.orders-col--payment-method { flex: 0 0 15%; width: 15%; }
.orders-col--status,
.orders-table__cell.orders-col--status { flex: 0 0 15%; width: 15%; }
.orders-col--delivery,
.orders-table__cell.orders-col--delivery { flex: 1; width: auto; }









.orders-table-wrapper::-webkit-scrollbar {
    height: 6px;
    background-color: var(--gray-darker);
    border: none;
}

.orders-table-wrapper::-webkit-scrollbar-track {
    background-color: var(--gray-darker);
}

.orders-table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border-radius: 3px;
}

.orders-table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-light);
}

.orders-table-wrapper::-webkit-scrollbar-button {
    display: none;
}

/* Стили для Firefox */
@supports (-moz-appearance: none) {
    .orders-table-wrapper {
        scrollbar-width: thin;
        scrollbar-color: var(--white) var(--gray-darker);
    }
}

/* Стили для IE/Edge (устаревшие браузеры) */
@supports (-ms-overflow-style: scrollbar) {
    .orders-table-wrapper {
        -ms-overflow-style: scrollbar;
    }
}

.orders-info {
    display: flex;
    align-items: center;
    background: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-6);
    margin-bottom: var(--space-6);
    gap: var(--space-3);
}

.orders-info__icon svg{
    width: 1.5rem;
    height: 1.5rem;
    color: var(--white);
    fill: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.orders-info__text {
    font-size: var(--text-base);
    color: var(--gray-text);
}

.orders-info__link {
    color: var(--white);
    text-decoration: underline;
}

/* Когда плашка-инфо стоит над формой авторизации (например, на /shop/orders у гостя):
   1. Ужимаем плашку до той же max-width, что у .auth-form (1000px), и центрируем.
   2. Убираем большой 5.563rem отступ сверху у формы, чтобы плашка не "отрывалась". */
.orders-info:has(+ .auth-form) {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-3);
}
.orders-info + .auth-form {
    margin-top: 0;
}
.delivery-methods-section {
    background: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.delivery-methods-header {
    margin-bottom: var(--space-6);
}

.delivery-methods-options {
    display: flex;
    gap: var(--space-4);
}
.delivery-address-container,
.delivery-sdek-section {
}
.delivery-address-container.active,
.delivery-sdek-section.active {
    display: block;
}

.delivery-method-option {
    background: var(--black);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
    position: relative;
    height: 3.5rem;
    min-height: 3.5rem;
}

.delivery-method-option:focus-within {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.delivery-method-option:not(.delivery-method-option--active):hover {
    background-color: var(--gray-dark);
}


.delivery-method-option--active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    z-index: 0;
}

.delivery-method-option--active .delivery-radio-label {
    position: relative;
    z-index: 1;
    color: var(--black);
}

/* Стили для радиокнопок */
.delivery-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.delivery-radio-label {
    padding: var(--space-3) 0;
    position: relative;
    padding-left: 2.5rem;
    font-size: var(--text-base);
    cursor: pointer;
    display: block;
    width: 100%;
    color: var(--white);
}

.delivery-radio-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--gray-text);
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.delivery-radio-label::after {
    content: '';
    position: absolute;
    left: 0.51rem;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.delivery-radio-label:hover::before {
    border-color: var(--white);
}

.delivery-radio:checked + .delivery-radio-label::before {
    border-color: var(--black);
    background-color: var(--white);
}

.delivery-radio:checked + .delivery-radio-label::after {
    transform: translateY(-50%) scale(1);
}

.delivery-method-option--active {
    background: var(--white);
}

.delivery-method-option--active .delivery-radio-label {
    color: var(--black);
}

.delivery-method-option--active .delivery-radio-label::before {
    border-color: var(--black);
    background-color: var(--black);
}

.delivery-method-option--active .delivery-radio-label::after {
    background: var(--black);
}

/* Секция оформления заказа */
.checkout-section {
    background: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-6);
}


.delivery-details-section .active,
.delivery-sdek-section.active {
    opacity: 1;
    transform: translateY(0);
    display: block !important;
}
.delivery-sdek-section {
    display: none;
}
.delivery-details-section {
    display: none;
}

/* Показываем секцию адреса по умолчанию */
.delivery-details-section {
    display: block;
}

.delivery-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.delivery-sdek-section {


}

.delivery-sdek-map {
    margin: var(--space-6) 0;
    position: relative;
}

#yandex-map {
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.pickup-points-section,
.delivery-sdek-section,
.delivery-address-container {
    display: none;
}

.pickup-points-section.active,
.delivery-sdek-section.active,
.delivery-address-container.active {
    display: block;
}

/* ====================== АКТИВНАЯ КАРТОЧКА САМОВЫВОЗА ====================== */
.pickup-point-card--active {
    background: var(--white);
    border: 3px solid var(--primary);           /* или var(--accent) — какой у тебя акцент */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pickup-points-section {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pickup-points-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.pickup-points-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

.pickup-point-card {
    background: var(--black);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}



.pickup-point-info {
    display: flex;
    flex-direction: column;
}

.pickup-point-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pickup-point-contact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--white);
}
.pickup-point-contact svg{
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--white);
    color: var(--white);
    opacity: .75;
}

.pickup-point-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: auto;
}

.pickup-point-map {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.map-iframe-container {
    height: 280px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.map-address {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.order-verification-section {
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
}

.order-verification-header {
    margin-bottom: 1.25rem;
}
.order-details{
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}
.order-table {
    width: 100%;
    min-width: 1100px;

    border-collapse: collapse;
    margin-top: var(--space-4);
}

.order-table th {
    text-align: left;
    padding: 1.094rem 0.75rem;
    font-weight: 500;
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);

}
.order-table th:nth-child(3), .order-table td:nth-child(3), .order-table th:nth-child(2){
    text-align: right;
}

.order-table th:nth-child(1), .order-table td:nth-child(1){
    padding-left: 0;
}
.order-table td:nth-child(4){
    text-align: center;
}
.order-table th:nth-child(5),.order-table td:nth-child(5){
    text-align: right;
    padding-right: 0;
}


.order-table td {
    padding: 1.094rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    opacity: .75;
}

.order-table tfoot td {
    border-top: 1px solid var(--gray-darker);
    border-bottom: none;
    font-weight: bold;

}
.order-total {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-8);

    align-items: center;
    border-top: 1px solid var(--gray-darker);
    font-weight: 500;
}

.order-total-label {
    margin-right: var(--space-4);
    font-weight: normal;
    font-size: var(--text-base);
    opacity: .5;
}
.order-total-amount{
    font-size: var(--text-lg);
}
/* Стили для секции способа получения */
.delivery-method-section {
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-top: var(--space-6);
}

.delivery-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.delivery-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.delivery-info-item span.text-caption {
    color: var(--gray-text);
}

/* Стили для секции комментария */
.order-comment-section {
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-top: var(--space-6);
}


.order-verification__text-subheading{
    font-size: var(--text-lg);
    margin-bottom: 1.25rem;
}
.order-verification__text-body{
    font-size: var(--text-base);
    opacity: .75;
}
.delivery-table {
    width: 100%;
    margin-top: var(--space-4);
    border-collapse: collapse;
}

.delivery-table-header {
    padding: 1.094rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-weight: 500;
}

.delivery-table-label,
.delivery-table-value {
    padding: 1.094rem 0;
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--gray-darker);
    opacity: .50;
}

.delivery-table-label {
    border-right: none;
    width: 50%;
}

.delivery-table-value {
    border-left: none;
    width: 50%;
}
.address-text{
    display: inline-flex;
    align-items: center;
}
.delivery-table-map{
    padding: 1.094rem 0;
    color: var(--white);
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--gray-darker);
    opacity: 1;
}

.map-icon {
    display: inline-flex;
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.8;
    vertical-align: middle;
}
.map-icon:hover {
    transform: scale(1.1);
    opacity: 1;
}
.map-icon svg{
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--green);
}

.map-inline {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    margin 0.3s ease;
    opacity: 0;
    margin-top: 0;
}

.map-inline.open {
    max-height: 400px;   /* чуть больше, чем высота карты + отступ */
    opacity: 1;
    margin-top: 12px;
}

.address-text-content{
    opacity: .5;
}

.order-confirmation-section {
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-top: var(--space-6);
}

.order-confirmation-section > *:not(:last-child) {
    margin-bottom: 1.25rem;
}

.proceed-section {
    margin-top: var(--space-4);
}
.order-details::-webkit-scrollbar, .delivery-info::-webkit-scrollbar {
    height: 8px;
    background-color: var(--gray-darker);
}

.order-details::-webkit-scrollbar-track, .delivery-info::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
}

.order-details::-webkit-scrollbar-thumb , .delivery-info::-webkit-scrollbar-thumb {
    background: var(--white);
    border-radius: var(--radius-sm);
}

.order-details::-webkit-scrollbar-thumb:hover , .delivery-info::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.order-details::-webkit-scrollbar-button , .delivery-info::-webkit-scrollbar-button {
    display: none;
}

/* Стили для Firefox */
@supports (-moz-appearance: none) {
    .order-details, .delivery-info {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.3) var(--gray-darker);
    }
}

/* Стили для IE/Edge (устаревшие браузеры) */
@supports (-ms-overflow-style: scrollbar) {
    .order-details, .delivery-info {
        -ms-overflow-style: scrollbar;
    }
}

.requests-container {
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-top: var(--space-6);
    min-height: 39.375rem;
}

.requests-header {
    margin-bottom: var(--space-4);
}

.requests-actions {
    display: flex;
    gap: var(--space-4);
}
.requests-actions button{
    width: 100%;
}

.requests-table-container {
    margin-top: var(--space-4);
}

.requests-table {
    width: 100%;
    border-collapse: collapse;
}

.requests-table th {
    text-align: left;
    padding: var(--space-3);
    font-weight: 500;
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0;
}
.requests-empty-state {
    text-align: center;
    padding-top: 7.5rem !important;
    border-bottom: none !important;
    opacity: 1 !important;

}
.requests-table td {
    padding: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    opacity: .75;
    padding-left: 0;
}

.requests-table td a {
    padding: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    opacity: .75;
    padding-left: 0;
    text-decoration: none;
}



.requests-empty-state-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.requests-empty-text-subheading{
    font-size: var(--text-lg);
    color: var(--white);
    opacity: .25;
    margin-bottom: 1.5rem;
}
.requests-empty-text-body{
    font-size: var(--text-base);
    color: var(--white);
    opacity: .75;
}


.new-request-form {


}

.request-form-container {
    background: var(--gray-darker);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.request-form-header {
    margin-bottom: var(--space-6);
}

.request-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.request-form-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.captcha-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: end;
}

.captcha-image {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.photo-upload-text-subheading{
    font-weight: 400;
    font-size: var(--text-base);
    color: #898A8A;
    margin-bottom: 1rem;
}
.photo-upload-text-caption{
    font-size: 0.625rem;
    color: #898A8A;
    font-weight: 400;
    line-height: 125%;
}




.photo-upload-container {
    background: var(--black);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    height: 12.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.photo-upload-content {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.photo-upload-actions {
    display: flex;
    justify-content: center;
}

.photo-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.photo-upload-container {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px dashed transparent;
}

.photo-upload-container.drag-over {
    border-color: var(--status-info, #4a6cf7);
    background: rgba(74, 108, 247, 0.08);
}

.photo-upload-container.uploaded {
    border-color: var(--status-success, #10b981);
    background: rgba(16, 185, 129, 0.08);
}

.drag-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.photo-upload-container.drag-over .drag-indicator {
    opacity: 1;
    visibility: visible;
}

.photo-upload-container.drag-over .photo-upload-text-subheading,
.photo-upload-container.drag-over .photo-upload-text-caption,
.photo-upload-container.drag-over .photo-upload-actions{
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}


.drag-icon {
    width: 2rem;
    height: 2rem;
    fill: var(--status-info, #4a6cf7);
    margin-bottom: 0.5rem;
}

.photo-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}



.request-info-section {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-6);
    padding: 2.5rem;
    background: var(--gray-darker);
    border-radius: var(--radius-2xl);
}

.request-info-icon {
    width: 3.375rem;
    height: 3.375rem;


    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.request-info-icon svg{
    width: 3.375rem;
    height: 3.375rem;
    color: var(--white);
    fill: var(--white);
}


.request-info-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.request-info-text-body{
    font-size: var(--text-base);
    color: var(--white);
    opacity: .5;
}
.auth-block--logged-out {
    display: none !important;
}

.header__user-menu {
    display: flex;
    align-items: center;
    color: var(--white);
    text-decoration: none;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    justify-content: space-between;
}

/* Иконка пользователя */
.header__user-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--gray-dark);
}

/* Имя пользователя */
.header__user-name {
    font-weight: 400;
    white-space: nowrap;
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Стрелка */
.dropdown__icon {
    transition: transform 0.3s ease;
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--gray-dark);
    transform: rotate3d(0, 0, 0, 0);
}

/* Поворот стрелки при наведении */
.header__user-menu:hover .dropdown__icon {
    transform: rotate(180deg);
}

/* Дропдаун авторизации открывается ТОЛЬКО по клику — JS-обработчик
   Auth.initAuthDropdowns (main.js) переключает класс .dropdown__menu--visible.
   Hover-открытие отключено намеренно: на тач-устройствах оно ломает UX
   (первый тап «открывает» псевдо-ховером, кликом уже не закрыть). */

/* Блок с балансом */
.header__balance {
    display: flex;
    align-items: center;
    gap: 0.688rem;
    color: var(--white);
    text-align: right;
    font-weight: 500;
}

/* Символ рубля */
.balance-currency {
    font-size: var(--text-sm);
    line-height: 1;
    font-weight: 400;
}

/* Сумма баланса */
.balance-amount {
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1;
}

/* Стили для дропдауна личного кабинета */
.dropdown__menu--user {
    min-width: 201px;
    top: calc(100%);
    right: 0;
    left: auto;
    padding: 0.5rem 0;
    background: var(--black);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dropdown--auth::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: 100%;
    height: 0.45rem;
    pointer-events: none;
    background: transparent;
}

/* Включаем pointer-events для псевдоэлемента при наведении */
.dropdown--auth:hover::after {
    pointer-events: auto;
}

.dropdown__menu--user .dropdown__option-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-right: 0.75rem;
    fill: var(--white);
    opacity: 0.7;
    transition: all 0.2s ease;
}
.dropdown__option:hover .dropdown__option-icon {
    opacity: 1;
    transform: scale(1.1);
}

.dropdown__menu--user .user-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.625rem;
    position: relative;
}
.dropdown__option:hover {
    background: rgba(255, 255, 255, 0.05);

}

.dropdown__option--logout {
    color: var(--status-error);
}

.dropdown__option--logout:hover {
    color: var(--status-error);
    background: rgba(229, 57, 53, 0.1);
    .dropdown__option-icon{
        fill: var(--status-error);
    }
}
/* Поворот стрелки только при открытом меню (открытие — по клику, не по ховеру). */
.dropdown--auth .dropdown__menu--visible .dropdown__icon {
    transform: rotate3d(1, 0, 0, 180deg);
}
.auth-block--logged-in {
    display: flex;
    align-items: center;
    gap: 3.25rem;
}
.order-search__tip-container{
    max-width: 96.5rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.order-search__tip {
    display: flex;

    align-items: center;


    gap: var(--space-4);
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}


.order-search__tip-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    fill: var(--white);
}

.order-search__tip-text {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: 500;
    color: var(--white);
}

.quick-order-details-wrapper{
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    margin-bottom: var(--space-8);
}
.quick-order-details {
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
    white-space: nowrap;


}
.quick-order-details::-webkit-scrollbar {
    height: 6px;
    background-color: var(--gray-darker);
    border: none;
}

.quick-order-details::-webkit-scrollbar-track {
    background-color: var(--gray-darker);
}

.quick-order-details::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border-radius: 3px;
}

.quick-order-details::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-light);
}

.quick-order-details::-webkit-scrollbar-button {
    display: none;
}

/* Стили для Firefox */
@supports (-moz-appearance: none) {
    .quick-order-details {
        scrollbar-width: thin;
        scrollbar-color: var(--white) var(--gray-darker);
    }
}

/* Стили для IE/Edge (устаревшие браузеры) */
@supports (-ms-overflow-style: scrollbar) {
    .quick-order-details {
        -ms-overflow-style: scrollbar;
    }
}
.quick-order-details thead,
.quick-order-details tbody,
.quick-order-details tr,
.quick-order-details td {
    display: block;
}
.quick-order-details tr {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F8FAF91A;
    padding: 1.25rem 0;
}
.quick-order-details td {
    flex: 1;
    white-space: nowrap;
}
.quick-order-detail__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-base);
    border-bottom: 1px solid #F8FAF91A;
    padding: 1.25rem 0;
    white-space: nowrap;
    line-height: var(--leading-tight);
}
.quick-order-detail__row:first-child{
    border-top: 1px solid #F8FAF91A;
}


.quick-order-detail__label {
    color: var(--white);
    font-size: var(--text-base);
    opacity: 75%;
    flex: 1;
    text-align: start;
    line-height: var(--leading-relaxed);
}

.quick-order-detail__value {
    color: var(--white);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    opacity: 75%;
    flex: 1 ;
    font-weight: 500;
    text-align: start;
}
.payment-block{
    background-color: var(--gray-darker);
    padding: 2rem;
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-8);
}
.payment-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow-x: auto;
    margin-bottom: var(--space-8);

    white-space: nowrap;
}

.payment-table th,
.payment-table td {
    padding:  1.25rem 0;
    text-align: left;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.payment-table th {
    color: var(--white);
    font-weight: 500;
}

.payment-table td {
    color: #F8FAF9BF;
    border-top: 1px solid #F8FAF91A;
}
.payment-table tbody tr:last-child td{
    border-bottom: 1px solid #F8FAF91A;
}

.payment-table__cell {
    /* Additional cell styles if needed */
}
.payment-table::-webkit-scrollbar {
    height: 6px;
    background-color: var(--gray-darker);
    border: none;
}

.payment-table::-webkit-scrollbar-track {
    background-color: var(--gray-darker);
}

.payment-table::-webkit-scrollbar-thumb {
    background-color: var(--white);
    border-radius: 3px;
}

.payment-table::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-light);
}

.payment-table::-webkit-scrollbar-button {
    display: none;
}

/* Стили для Firefox */
@supports (-moz-appearance: none) {
    .payment-table {
        scrollbar-width: thin;
        scrollbar-color: var(--white) var(--gray-darker);
    }
}

/* Стили для IE/Edge (устаревшие браузеры) */
@supports (-ms-overflow-style: scrollbar) {
    .payment-table {
        -ms-overflow-style: scrollbar;
    }
}

.payment-col--status {
    width: 25%;
}

.payment-col--sum,
.payment-col--paid,
.payment-col--remaining {
    width: 20%;
    text-align: right;
}

.payment-table tbody tr .payment-col--status.status-error {
    color: #FF0A0EBF;
}
.order-actions {
    display: flex;
    gap: var(--space-4);
}

/* =============================================
   Страница "Мой заказ" (авторизованный покупатель)
   ============================================= */
.my-order-top {
    display: flex;
    gap: var(--space-8);
    align-items: flex-start;
    margin-bottom: var(--space-8);
}
.my-order-top .quick-order-details-wrapper {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.my-order-garage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
}
.my-order-garage__title {
    margin: 0 0 var(--space-4);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 500;
    opacity: .75;
}
.my-order-garage__scroll {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-right: var(--space-2);
}
.garage-car {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background-color: var(--black);
    border: 1px solid #F8FAF91A;
    border-radius: var(--radius-xl);
}
.garage-car__toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--gray-dark);
    background: transparent;
    color: var(--gray-medium);
    cursor: pointer;
    transition: all .2s ease;
}
.garage-car__toggle i {
    margin: 0;
}
.garage-car__toggle:hover {
    border-color: var(--green);
    color: var(--green);
}
.garage-car__toggle--active {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--gray-darker);
}
.garage-car__toggle--active:hover {
    color: var(--gray-darker);
}
.garage-car__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.garage-car__name {
    color: var(--white);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.garage-car__vin {
    color: var(--gray-medium);
    font-size: var(--text-sm);
}
.garage-car__actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-2);
}
.garage-car__actions a {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-medium);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.garage-car__actions a i {
    margin: 0;
}
.garage-car__actions a:hover {
    color: var(--white);
    background-color: #F8FAF91A;
}
.garage-car-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--gray-medium);
    font-size: var(--text-base);
}

/* Кнопка отмены заказа в строке "Номер заказа" */
.quick-order-detail__row:first-child .quick-order-detail__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    opacity: 1;
}
.my-order__cancel.btn--outline {
    min-height: 36px;
    height: 36px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    white-space: nowrap;
}

/* Подзаголовки секций */
.my-order__subtitle {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 600;
    margin: var(--space-8) 0 var(--space-4);
}

/* Таблица товарных позиций */
.order-items-wrapper {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-2) var(--space-8);
    margin-bottom: var(--space-8);
    overflow-x: auto;
}
.order-items-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--white);
    font-size: var(--text-base);
    white-space: nowrap;
}
.order-items-table th,
.order-items-table td {
    padding: 1rem var(--space-3);
    text-align: left;
    border-bottom: 1px solid #F8FAF91A;
    vertical-align: middle;
}
.order-items-table th {
    font-weight: 500;
    color: var(--white);
    opacity: .75;
}
.order-items-table__name {
    white-space: normal;
    min-width: 200px;
    max-width: 520px;
    word-wrap: break-word;
}
.order-items-table__center {
    text-align: center;
}
.order-items-table__total td {
    font-weight: 700;
    border-bottom: none;
}

/* Блок добавления оплаты */
.order-actions__option,
.order-actions__pay {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.order-actions__option label {
    color: var(--white);
    font-size: var(--text-base);
}
.order-actions__label,
.order-actions__hint {
    color: var(--white);
    font-size: var(--text-base);
    margin: 0;
}
.order-actions__input-group {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
}
.order-actions__input {
    flex: 1;
    min-width: 0;
    height: 54px;
    padding: 0 var(--space-4);
    background-color: var(--black);
    border: 1px solid var(--gray-dark);
    border-radius: var(--radius-xl);
    color: var(--white);
    font-size: var(--text-base);
}

/* Кнопки действий по позициям и печать документов */
.my-order__items-actions,
.my-order__print-docs-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}
.my-order__print-docs {
    margin-top: var(--space-8);
}

/* Вторичные кнопки-действия (без размерного модификатора .btn--*):
   задаём аккуратную высоту, отступы и расстояние до иконки */
.my-order__items-actions .btn,
.my-order__print-docs-buttons .btn,
.garage-car-empty .btn,
.my-order__chat .btn {
    min-height: 2.75rem;
    padding: 0 var(--space-6);
    gap: var(--space-2);
    font-size: var(--text-base);
    border-radius: var(--radius-xl);
}
.my-order__items-actions .btn .fa,
.my-order__print-docs-buttons .btn .fa,
.garage-car-empty .btn .fa {
    margin: 0;
    font-size: 1em;
    line-height: 1;
}

/* Переписка с продавцом */
.my-order__chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
}
.my-order__chat .chat_block {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.my-order__chat-label {
    color: var(--white);
    font-size: var(--text-base);
}
.my-order__chat-input {
    width: 100%;
    min-height: 96px;
    padding: var(--space-3) var(--space-4);
    background-color: var(--black);
    border: 1px solid var(--gray-dark);
    border-radius: var(--radius-xl);
    color: var(--white);
    resize: vertical;
}
.my-order__chat .btn {
    align-self: flex-start;
}
.my-order__chat .bubble,
.my-order__chat .bubble2 {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xl);
    font-size: var(--text-sm);
    max-width: 80%;
}
.my-order__chat .bubble {
    align-self: flex-end;
    background-color: var(--gray-dark);
    color: var(--white);
}
.my-order__chat .bubble2 {
    align-self: flex-start;
    background-color: var(--green);
    color: var(--gray-darker);
}

/* =============================================
   Кнопка "Наверх" (scroll-to-top)
   ============================================= */

.scroll-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 54px;
    height: 54px;
    background-color: var(--black);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    border: none;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.scroll-to-top:hover {
    background-color: var(--white);
    transform: translateY(-3px);
}

.scroll-to-top:hover .scroll-to-top__icon {
    color: var(--black);
}

.scroll-to-top__icon {
    color: var(--white);
    width: 2.5rem;
    height: 2.5rem;
    transform: rotate(180deg);
    transition: color 0.3s ease;
}

/* Активное состояние (показывается) */
.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* Адаптив */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
    }
}

/* ===== ALERT BANNER ===== */
.cart-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-6);
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
    color: var(--white);
    line-height: var(--leading-normal);
}

.cart-alert__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 2px;
    fill: var(--white);
}

.cart-alert__text {
    color: var(--gray-text);
    font-weight: 500;
    font-size: var(--text-base);
}

.cart-alert__highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: #E7FF2F;
    color: var(--black);
    font-size: var(--text-base);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

.cart-alert__refresh-btn {
    border: none;
    cursor: pointer;

    padding: 8px;
    margin-left: var(--space-2);
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    background-color: var(--black);
    transition: all 0.3s;
    vertical-align: middle;
}
.cart-alert__refresh-btn svg{
    width: 1rem;
    height: 1rem;
    transition: all 0.3s;
    color: var(--white);
}

.cart-alert__refresh-btn:hover{
    transform: scale(1.1);
}

.cart-alert__refresh-btn svg.rotating {
    transform: rotate(360deg);
}

/* ===== CART TABLE WRAPPER ===== */
.cart-wrapper {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-6);
    overflow: hidden;
    padding: 0 var(--space-8) var(--space-8) var(--space-8);
}

/* ===== CART ITEM ===== */
.cart-item {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: var(--space-8) var(--space-6) var(--space-8) 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
}
.cart-item__product{
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}



.cart-item--highlighted {
    /* No extra bg — yellow badge handles it */
}

/* Checkbox */
.cart-item__checkbox {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--yellow-medium);
    cursor: pointer;
}

/* Product image */
.cart-item__image {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin-left: 1.5rem;
    margin-right: 1rem;
}


.cart-item__picture,
.cart-item__image-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cart-item__image:has(.cart-item__image-img[src]) .cart-item__image-placeholder {
    display: none;
}


.cart-item__image.has-image .cart-item__image-placeholder {
    display: none;
}

.cart-item__image-placeholder {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;

    justify-content: center;
    color: var(--gray-text);
    font-size: 1.75rem;
}

/* Product info */
.cart-item__info {
    flex: 1;
    min-width: 0;
}

.cart-item__name {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;

}

.cart-item__name-badge {
    background-color: #E7FF2F;
    color: var(--black);
    font-size: var(--text-base);
    font-weight: 500;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
}

.car-item__description {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin-bottom: var(--space-4);
}

.car-item__dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: var(--white);
    opacity: .5;
}

.cart-item__brand {
    font-size: var(--text-sm);
    color: var(--white);
    opacity: .5;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Мобильные-только элементы корзины — на десктопе скрыты,
   показываются в @media (max-width: 768px) */
.cart-item__action-mobile,
.cart-item__line-mobile,
.cart-checkbox__mobile {
    display: none;
}

.cart-item__action-btn {
    background: var(--black);
    border: none;
    cursor: pointer;
    color: var(--white);
    padding: 8px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s;
    border-radius: 6px;
    margin-left: 0;
}


.cart-item__action-btn:hover { transform: scale(1.1); }

.cart-item__action-btn--refresh:hover { transform: rotate(180deg); }

.cart-item__action-btn svg {
    width: 1rem;
    height: 1rem;
    color: var(--white);
    fill: var(--white);
}

/* Availability badge */
.cart-item__availability {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem;
    border-radius: 10px;
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    background-color: var(--black);
    min-width: 8.125rem;
}

.cart-item__availability--instock {
    color: var(--status-success);
    fill: var(--status-success);
}

.cart-item__availability--days {
    fill: var(--white);
    color: var(--white);
}

.cart-item__availability svg {
    width: 1rem;
    height: 1rem;
}

/* Price block */
.cart-item__price-block {
    flex-shrink: 0;
    text-align: center;
    min-width: 7rem;
}

.cart-item__price-per {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 10px;
}

.cart-item__price-label {
    font-size: var(--text-xs);
    color: var(--white);
    opacity: .5;
    margin-top: 0.15rem;
}

/* Quantity controls */
.cart-item__counter {
    display: flex;
    align-items: center;
    background: var(--black);
    border-radius: 10px;
    overflow: hidden;
    padding: 4px;
    width: fit-content;
    flex-shrink: 0;
}

.cart-item__counter-btn {
    width: 2rem;
    height: 2rem;
    background: var(--gray-darker);
    border-radius: 8px;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 500;
    transition: background 0.2s ease;
    user-select: none;
}
.cart-item__counter-btn svg{
    width: 20px;
    height: 20px;
}

.cart-item__counter-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.15);
}

.cart-item__counter-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.cart-item__counter-input {
    width: 48px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    -moz-appearance: textfield;
}

/* Убираем стрелки у input number */
.cart-item__counter-input::-webkit-outer-spin-button,
.cart-item__counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Total price per item */
.cart-item__total {
    flex-shrink: 0;
    text-align: center;
    min-width: 8.25rem;

}

.cart-item__total-price {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
    margin-bottom: 10px;
}

.cart-item__total-label {
    font-size: var(--text-xs);
    color: var(--white);
    opacity: .5;
    margin-top: 0.15rem;
}

/* ===== CART FOOTER ===== */
.cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-8);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.cart-footer__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
}

.cart-footer__select-all {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--white);
    opacity: 0.65;
    user-select: none;
    transition: opacity 0.2s;
}

.cart-footer__select-all:hover { opacity: 1; }

.cart-footer__select-all input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--yellow-medium);
    cursor: pointer;
}

.cart-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-6);
}

.cart-footer__total-label {
    font-size: var(--text-base);
    color: var(--white);
    opacity: .5;
}

.cart-footer__total-price {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--white);
}

.filters-sidebar-wrapper {
    position: relative;
    display: inline-block;
    height: 100%;
}

/* ===== Мобильный drawer для сайдбара с фильтрами ===== */

/* Кнопка "Фильтры" над списком товаров — на десктопе спрятана. */
.filters-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--gray-darker);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filters-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
}

.filters-toggle__icon {
    color: var(--yellow-medium);
    flex-shrink: 0;
}

/* Крестик закрытия — на десктопе тоже спрятан. */
.filters-sidebar__close {
    display: none;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.15s ease;
}

.filters-sidebar__close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Затемнение под открытым drawer'ом — спрятано на десктопе. */
.filters-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.filters-backdrop--visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {
    /* Мобильный layout: сайдбар сверху, контент снизу — как в оригинале.
       До разворота сайдбар скрыт; в развёрнутом — встаёт в обычный поток
       над списком товаров. Никакого фиксированного drawer'а, бэкдропа и т.п. */
    .catalog-layout {
        flex-direction: column;
    }

    /* Кнопка "Фильтры" над списком товаров — теперь видна. */
    .filters-toggle {
        display: inline-flex;
        margin-bottom: var(--space-4);
    }

    /* Обёртка по умолчанию скрыта — фильтры появляются только после клика по кнопке. */
    .filters-sidebar-wrapper {
        display: none;
        width: 100%;
    }

    .filters-sidebar-wrapper--open {
        display: block;
    }

    /* Сам сайдбар внутри — на всю ширину, без ограничения высоты,
       чтобы все фильтры и раскрытые dropdown'ы помещались естественно
       (страничный скролл сам справится). */
    .filters-sidebar-wrapper .filters-sidebar {
        width: 100%;
        max-height: none;
    }

    /* Крестик закрытия и бэкдроп в inline-режиме не нужны — закрытие
       той же кнопкой "Фильтры", которая открывает. */
    .filters-sidebar__close {
        display: none;
    }

    .filters-backdrop,
    .filters-backdrop--visible {
        display: none;
    }
}

.filters-results {
    position: absolute;
    top: 180px;
    left: 100%;
    transform: translateX(16px);
    z-index: 20;
    display: none;
    align-items: center;
    padding: 8px 8px 8px 20px;
    border: 2px solid #333333;
    background: var(--black);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    gap: 1rem;
    animation: resultsFadeIn 0.3s ease forwards;
}
.filters-results--visible {
    display: flex;
}

.filters-results__tail {
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 22px;
    height: 36px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    box-shadow: -5px 3px 12px rgba(0, 0, 0, 0.08);
    z-index: 1;
    clip-path: polygon(0 0, 78% 38%, 96% 50%, 78% 62%, 0 100%);
}

.filters-results__tail::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    background: #333333;
    z-index: -2;
}

.filters-results__text strong {
}

.filters-results__button {
    border-radius: var(--radius-xl);
}

.filters-results {
    animation: resultsFadeIn 0.3s ease forwards;
}

@keyframes resultsFadeIn {
    from {
        opacity: 0;
        transform: translateX(20px) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(20px) translateY(0);
    }
}

.filters-results--hidden {
    display: none;
}

@media (max-width: 1586px) {
    .header__balance{
        display: none;
    }
}


/* Адаптивность */
@media (max-width: 1540px) {
    .footer__main .catalog-dropdown--footer {
        bottom: -14.8rem;

    }
}

@media (max-width: 1440px) {
    .header__actions {
        gap: 1rem;
    }

    .header__info {
        gap: 1rem;
    }

    .footer__actions {
        gap: 1rem;
    }

    .footer__info {
        gap: 1rem;
    }

    .footer {
        padding-top: 5rem;
    }

    .header__nav {
        gap: 1.5rem;
    }

    .footer__nav {
        gap: 1.5rem;
    }

    .footer__main .catalog-dropdown--footer {
        bottom: -13.3rem;
    }
}

@media (max-width: 1200px) {
    .header__main .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .header__logo {
        justify-content: center;
        width: fit-content;
        margin: 0 auto;
    }

    .header__actions {
        gap: 1.5rem;
    }

    .header__info {
        gap: 1.5rem;
    }


    .footer__main {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .footer__logo {
        justify-content: center;
        width: fit-content;
        margin: 0 auto;
    }

    .footer__actions {
        gap: 1.5rem;
    }

    .footer__info {
        gap: 1.5rem;
    }

    .footer-nav {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 1rem;
    }

    .footer-info {
        align-items: center;
    }

    .footer__column {
        padding-bottom: 5rem;
    }

    .header__address {
        display: none;
    }

    .footer__address {
        display: none;
    }

    .footer__main .catalog-dropdown--footer {
        bottom: -19.3rem;
    }

    .brands-alpha-grid {
        grid-template-columns: repeat(3, minmax(9rem, 1fr));
        gap: 1.5rem;
        row-gap: 2rem;
    }
    .products-grid--compact .product-card__bottom{
        flex-direction: column;
    }
}

@media (max-width: 1024px) {
    .header__actions {
        gap: 1.25rem;
    }

    .header__info {
        gap: 1.25rem;
    }

    .search-form {
        min-width: min(100%, 200px);
    }

    .search-box {
        min-width: min(100%, 200px);
    }

    .footer__actions {
        gap: 1.25rem;
    }

    .footer__info {
        gap: 1.25rem;
    }

    .footer {
        padding-top: 2.5rem;
    }

    .footer__column {
        padding-bottom: 2.5rem;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .auth-form__side-image {
        right: max(-1rem, -3%);
        width: min(25rem, 40%);
    }

    .auth-form__bg-lines {
        right: max(-8rem, -12%);
        width: min(35rem, 55%);
    }

    .footer__main .catalog-dropdown--footer {
        bottom: -3rem;
    }

    .manufacturers-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .header__user-menu{
        gap: 0.2rem;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .manufacturers-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .manufacturers-tabs {
        flex-wrap: wrap;
    }

    .main-slider-section {
        flex-direction: column;
    }

    .main-slider-aside {
        width: 100%;
    }

    .main-slider {
        width: 100%;
    }

    .trust-cards {
        display: flex;
        flex-direction: column;
    }

    .header__actions {
        gap: 1rem;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
        padding: 16px;
        box-shadow: 0px 4px 12px 1px #00000033;
        position: relative;
        z-index: 1001;
    }

    .dropdown__menu--auth .ui-input__field {
        background: var(--black);
        color: var(--white);
    }

    .dropdown__menu--auth .ui-input__field:focus {

        background: var(--gray-dark);
    }

    .footer-meta {
        border-top: 0;
        padding-top: 32px;
    }

    .footer-legal {
        text-align: left;
    }

    .footer-info {
        padding: 0;
    }

    .dropdown--mobile {
        position: static;
        display: inline-block;
    }

    .dropdown__menu--full-width {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
        top: 100%;
        bottom: auto;
        border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
        padding: 48px var(--space-4) 1.5rem var(--space-4);
        z-index: 999;
        background: var(--gray-darker);

        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(-20px);
        opacity: 0;

    }

    .dropdown__menu .header__city {
        margin-top: 24px;
    }

    .dropdown__menu--mobile {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        transform: translateX(-50%);
        border-radius: var(--radius-xl);
        box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.3);
        padding: 1.5rem;
        z-index: 1001;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--white);
        border-radius: 1px;
        transition: all 0.3s ease;
    }

    /* Активное состояние гамбургера */
    .hamburger--active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger--active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger--active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .header__top {
        display: none;
    }

    .header__mobile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--gray-darker);
        box-shadow: 0px 4px 12px 1px #00000033;
        padding: 1.5rem 1rem;
        z-index: 1002;
    }

    .header__logo {
        border-radius: 0;
        background-color: transparent;
        margin: 0;
        padding: 0;

    }

    .header__logo svg {
        width: 8.813rem;
        height: 1.5rem;
    }

    /* Скрываем разделитель между поиском и инфой на мобильных */
    .header__actions > .header__actions-divider {
        display: none;
    }

    .search-form {
    }

    .search-box {
        min-width: 100%;
        height: 3rem;
    }

    .footer__info {
        display: none;
    }

    .footer__actions .search-form {
        width: 100%;
    }

    .footer__bottom {
        display: none;
    }

    .footer__main {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0;
        padding-bottom: 0;
    }

    .footer .container {
        padding: 0;
    }

    .footer__column {
        margin-top: 0;
        border-radius: 0;
        padding: 32px 24px;
    }

    .footer__actions {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    }

    .header__info {
        order: 2;
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }

    /* Скрываем описания на мобильных */
    .header__worktime-description,
    .header__phone-caption {
        display: none;
    }

    /* Уменьшаем отступы */
    .header__worktime,
    .header__phone {
        gap: 0.25rem;
    }


    .footer__actions {
        flex-direction: column;
        gap: 1rem;
        padding: 16px;
    }

    /* Скрываем разделитель между поиском и инфой на мобильных */
    .footer__actions > .footer__actions-divider {
        display: none;
    }

    .header .container {
        padding: 0;
        gap: 0;
    }

    .header {
        position: relative;
    }

    .header__main {
        padding-top: 0;
        position: relative;
        z-index: 1002;
    }


    .footer__info {
        order: 2;
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }

    /* Скрываем описания на мобильных */
    .footer__worktime-description,
    .footer__phone-caption {
        display: none;
    }

    /* Уменьшаем отступы */
    .footer__worktime,
    .footer__phone {
        gap: 0.25rem;
    }

    .footer-info {
        flex-direction: column;
        gap: 32px;
        border-top: 0;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
    }

    .footer-contacts {

    }

    .pagination__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .pagination__link {
        min-width: 2.5rem;
        height: 2.5rem;
        font-size: var(--text-sm);
    }

    .pagination__link--text {
        padding: 0 1rem;
        font-size: var(--text-sm);
    }

    .bottom-nav__icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    .bottom-nav__item--active{
        background: #2E2E2E;
    }

    .bottom-nav__item:hover{
        background: #3c3c3c;
        transform: translateY(-2px);
    }

    .bottom-nav {
        bottom: 0;
        width: 100%;
        max-width: 100%;
        padding: 5px 12px 16px 5px;
        border-radius: 0;
        background: #232323;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        justify-content: space-between;
    }
    .bottom-nav:hover{
        opacity: 1;
        background: #232323;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }

    .bottom-nav__item {
        width: 5.625rem;
        height: 3.375rem;
        padding: 7px 0;
    }

    .bottom-nav__icon {
        width: 24px;
        height: 24px;

    }
    .bottom-nav__item--active .bottom-nav__icon,
    .bottom-nav__item:hover .bottom-nav__icon
    {
        margin-bottom: 9px;
    }

    .bottom-nav__item--active .bottom-nav__label{
        opacity: 1;
        display: block;
    }

    .bottom-nav__label {
        position: relative;
        font-size: 10px;
        background: none;
        display: none;
        bottom: 0;
        box-shadow: none;
        padding: 0;
        backdrop-filter: none;

    }
    .bottom-nav__item:hover{
        .bottom-nav__label{
            display: block;
        }
    }
    .bottom-nav__item[data-page="Заказы"],
    .bottom-nav__item[data-page="Гараж"] {
        display: none;
    }

    .order-search-form__group {
        flex-direction: column;
        align-items: stretch;
    }

    .order-search-form__btn {
        width: 100%;
        justify-content: center;
    }

    .order-search {
        margin: var(--space-6) auto;
    }

    .auth-form__content {
        flex-direction: column;
        gap: 2rem;
    }

    .auth-form__bg-lines {
        display: none;
    }

    .auth-form__side {
        margin-bottom: 12.5rem;
    }

    .auth-form {
        padding: 1rem;
        margin-top: 2rem;
    }

    .auth-form__tab {
        font-size: var(--text-xs);
    }

    .auth-form__description {
        font-size: var(--text-xs);
    }

    .auth-form__side-image {
        width: 260px;
        height: auto;
    }

    .auth-form__divider {
        display: none;
    }

    .registration-section__grid {
        flex-wrap: wrap;
    }

    .document-page {
        padding-top: 0;
    }

    .registration-section__title {
        font-size: var(--text-base);
        margin-bottom: var(--space-4);
    }

    .captcha-wrapper {
        flex-wrap: wrap;
    }

    .agreement-label {
        font-size: var(--text-sm);
    }

    .ui-input--agreement {
        height: auto;
    }


    .dropdown__menu--visible {
        transform: translateY(0);
    }

    .dropdown__option {
        padding: .75rem 1rem;
        font-size: var(--text-xs);
    }

    .dropdown__selected {
        font-size: var(--text-xs);
    }

    /* Small */
    .dropdown--sm .dropdown__menu {
        min-width: 8.75rem;
    }

    /* Medium (default) */
    .dropdown--md .dropdown__menu {
        min-width: 10rem;
    }

    /* Large */
    .dropdown--lg .dropdown__menu {
        min-width: 11.25rem;
    }

    /* Extra Large */
    .dropdown--xl .dropdown__menu {
        min-width: 12.5rem;
    }

    .modal__content {
        padding: var(--space-6);
    }

    .modal__buttons {
        flex-direction: column;
    }

    .modal__buttons .btn {
        width: 100%;
    }

    .modal__title {
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--white);
        margin-bottom: var(--space-6);
        text-align: left;
        line-height: 140%;
        width: 95%;
    }

    .modal__location-title {
        font-size: var(--text-xs);
    }

    .modal__location-value {

        font-size: var(--text-xs);

    }

    .modal {
        padding: 20px;
    }

    .header__profile-button {
        width: 3rem;
        height: 3rem;
        border-radius: var(--radius-lg);
        background-color: var(--black);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
    }

    .header__profile-button svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--white);
    }

    .header__actions-divider {
        display: none;

    }

    .header__info {
        display: none;
    }

    .footer__mobile-bottom {
        display: none;
        align-items: center;
        background-color: var(--gray-darker);
        justify-content: space-between;
        padding: 24px 16px;
        box-shadow: 0px 0px 12px 1px #00000033;

    }

    .footer__logo {
        padding: 0;
        margin: 0;
        background-color: transparent;

    }

    .footer__logo svg {
        width: 141px;
        height: 24px;
    }

    .footer-nav {
        display: block;
        width: 100%;
    }

    .footer-nav__section {
        margin-bottom: 24px;
        cursor: pointer;
        gap: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .footer-nav__item {
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        color: var(--gray-text);
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__item {
        opacity: 1;
        transform: translateX(0);
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__item:nth-child(1) {
        transition-delay: 0.15s;
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__item:nth-child(2) {
        transition-delay: 0.2s;
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__item:nth-child(3) {
        transition-delay: 0.25s;
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__item:nth-child(4) {
        transition-delay: 0.3s;
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__item:nth-child(5) {
        transition-delay: 0.35s;
    }


    /* Делаем заголовок кликабельным */
    .footer-nav__title {
        cursor: pointer;
        padding-bottom: 24px;
        justify-content: space-between;
        border-bottom: 1px solid var(--gray-dark);
        transition: all 0.4s ease;
        font-size: 14px;
    }
    .footer-contacts__item div{
        font-size: 14px;
    }

    /* Показываем иконку стрелки только на мобилке */
    .footer-nav__icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform-origin: center;
    }

    /* Скрываем список по умолчанию */
    .footer-nav__list {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        padding: 0;
        margin: 0;

        list-style: none;
        max-height: 0;
        overflow: hidden;
        gap: 24px;
    }

    /* Показываем список при раскрытии */
    .footer-nav__section[aria-expanded="true"] .footer-nav__list {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
        transition-delay: 0.1s;
        padding-top: 24px;
    }

    .footer-nav__section[aria-expanded="true"] .footer-nav__icon-container {
        transform: rotate(180deg) scale(1.1);
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    /* Поворот стрелки при раскрытии */
    .footer-nav__section[aria-expanded="true"] .footer-nav__icon {

    }

    /* Скрываем разделитель у последнего элемента */
    .footer-nav__section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .modal__title-wrapper {
        display: inline-flex;
        justify-content: flex-start;
    }

    .burger-menu {
        position: fixed;
        top: 120px; /* Начинается под хедером */
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gray-darker);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .burger-menu__item--open .burger-menu__submenu {
        margin-top: 0.5rem;
    }

    .burger-menu--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .burger-menu__content {
        padding: 3rem 24px 1.5rem 24px;
        flex: 1;
        overflow-y: auto;
    }

    .footer-contacts__item {
        padding: 8px 3px 8px 0;
    }

    /* Поиск в бургер-меню */
    .burger-menu__search {
        margin-bottom: 1.5rem;
    }

    .burger-menu__item:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .burger-menu__item:last-child {

    }

    .burger-menu__search .search-box {
        background: white;
        border-radius: var(--radius-xl);
    }

    /* Навигация */
    .burger-menu__nav {
        margin-bottom: 1.5rem;
    }

    .burger-menu__list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .burger-menu__item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .burger-menu__item--open {
        border-bottom: none;
    }


    .burger-menu__link {
        display: flex;
        align-items: center;
        padding: 17px 0;
        text-decoration: none;
        color: var(--white);
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        min-height: 58px;
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
        gap: 0.75rem;
    }

    .burger-menu__link:hover {
        color: var(--white);
    }

    .burger-menu__icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .burger-menu__arrow {
        width: 38px;
        height: 24px;
        margin-left: auto;
        transition: transform 0.3s ease;
    }

    .burger-menu__item--open .burger-menu__arrow {
        transform: rotate(180deg);
    }

    .burger-menu__badge {
        margin-left: auto;
        background-color: var(--yellow-medium);
        color: var(--black);
        border-radius: 12px;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        min-width: 1.25rem;
        text-align: center;
        line-height: 1;
    }

    /* Скрываем бэдж, пока в нём нет числа (AJAX-обновление сама ставит/убирает значение). */
    .burger-menu__badge:empty {
        display: none;
    }

    /* Подменю */
    .burger-menu__submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        border-radius: var(--radius-sm);
    }

    .burger-menu__item--open .burger-menu__submenu {
        max-height: 500px;
    }

    .burger-menu__subitem {

    }

    .burger-menu__subitem:first-child {

    }

    .burger-menu__sublink {
        display: block;
        padding: 0.75rem 1rem 0.75rem 0;
        text-decoration: none;
        color: #ACACAC;
        font-size: 12px;
    }

    .burger-menu__item--open .burger-menu__link--toggle {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .burger-menu__sublink:hover {
        background-color: rgba(255, 255, 255, 0.05);

    }

    .burger-menu__subitem.burger-menu__item--has-children {
        position: relative;
    }

    .burger-menu__subitem .burger-menu__sublink.burger-menu__link--toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        position: relative;
        cursor: pointer;
        color: #ACACAC;
        font-size: 12px;
    }

    .burger-menu__subitem .burger-menu__sublink.burger-menu__link--toggle:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--white);
    }

    /* Стрелка для вложенных подкатегорий */
    .burger-menu__subitem .burger-menu__arrow {
        width: 32px;
        height: 16px;
        margin-left: 0.5rem;
        transition: transform 0.3s ease;
    }
    .burger-menu__subitem .burger-menu__arrow{
        transform: rotate(0deg);
    }

    .burger-menu__subitem--open .burger-menu__arrow {
        transform: rotate(180deg);
    }

    /* Вложенное подменю (4-й уровень) */
    .burger-menu__subitem .burger-menu__submenu {
        margin-top: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .burger-menu__subitem--open .burger-menu__submenu,
    .burger-menu__subitem.burger-menu__item--open .burger-menu__submenu {
        max-height: 500px;
        margin-top: 6px;
    }

    /* Стили для ссылок во вложенном меню */
    .burger-menu__subitem .burger-menu__submenu .burger-menu__sublink {
        color: #888;
        font-size: 12px;
        padding: 0.75rem 1.5rem;

    }


    .burger-menu__submenu > .burger-menu__subitem--has-children .burger-menu__submenu{
        position: relative;
    }

    .burger-menu__submenu > .burger-menu__subitem--has-children .burger-menu__submenu::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        background-color: #ACACAC;
        pointer-events: none;
    }

    /* Убираем "висячую" линию сверху/снизу */
    .burger-menu__submenu > .burger-menu__subitem:not(.burger-menu__subitem--has-children):first-child::before {
        top: 50%;
    }

    .burger-menu__submenu > .burger-menu__subitem:not(.burger-menu__subitem--has-children):last-child::before {
        bottom: 50%;
    }

    /* Блок авторизации */
    .burger-menu__auth {
        padding: 1.5rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 1.5rem;
    }

    .burger-menu__auth-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
    }

    .burger-menu__auth-link:hover {

    }

    .burger-menu__auth-icon {
        width: 20px;
        height: 20px;
    }

    /* Контактная информация */
    .burger-menu__contacts {
        margin-bottom: 1.5rem;
    }

    .burger-menu__phone-link {
        display: block;
        font-size: 1.125rem;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 0.25rem;
    }

    .burger-menu__phone-link:hover {

    }

    .burger-menu__phone-caption {
        font-size: 0.875rem;

        margin-bottom: 1rem;
    }

    .burger-menu__worktime-time {
        font-size: 0.9375rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .burger-menu__worktime-description {
        font-size: 0.875rem;

    }

    /* Социальные сети */
    .burger-menu__social {
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .burger-menu__social .social-links {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
    }

    /* Стили для хедера */
    .header {
        position: relative;
        z-index: 1000;
    }

    .header__main {
        position: relative;
        z-index: 1000;
        padding-bottom: 32px;
    }

    .dropdown__menu--full-width .dropdown__title {
        display: none;
    }

    .hamburger {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 1001;
        width: 48px;
        height: 14px;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .hamburger span {
        display: block;
        width: 48px;
        height: 2px;
        background-color: var(--white);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: absolute;
        left: 0;
        transform-origin: center; /* Центр трансформации в середине линии */
    }

    .hamburger span:first-child {
        top: 0;
        transform: translateY(0) scaleX(1);
    }

    .hamburger span:last-child {
        bottom: 0;
        transform: translateY(0) scaleX(1);
    }

    /* Крестик с уменьшенной шириной */
    .hamburger--open span:first-child {
        transform: rotate(45deg) scaleX(0.5); /* Уменьшаем ширину в 2 раза */
        top: 50%;
        margin-top: -1px;
        left: 12px; /* Смещаем на (48-24)/2 = 12px чтобы центрировать */
    }

    .hamburger--open span:last-child {
        transform: rotate(-45deg) scaleX(0.5); /* Уменьшаем ширину в 2 раза */
        top: 50%;
        margin-top: -1px;
        left: 12px; /* Смещаем на (48-24)/2 = 12px чтобы центрировать */
    }

    .burger-menu--footer {
        position: fixed;
        top: 0; /* Начинаем от самого верха экрана */
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--gray-darker);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .burger-menu--footer.burger-menu--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .burger-menu--footer .burger-menu__content {
        padding: 1.5rem var(--space-4);
        flex: 1;
        overflow-y: auto;
        padding-top: 1rem;
    }

    /* Стили для кнопки бургера в футере */
    .hamburger--footer {
        /* Можете добавить специфичные стили для футера */
    }

    .hamburger--footer.hamburger--open span {
        background-color: var(--white); /* Или другой цвет для футера */
    }

    .load-more__button {
        min-width: 100%;
    }

    .refunds__wrap {
        padding: 1.5rem;
    }

    .refunds__table-head,
    .refunds__tr {
        grid-template-columns:  auto auto auto auto;

        column-gap: .75rem;
    }

    .refunds__empty {
        padding: var(--space-6) 0;
    }

    .refunds__empty-title {
        font-size: var(--text-lg);
    }

    .refunds__empty-subtitle {
        font-size: var(--text-sm);
    }

    .refunds__table-scroll {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Лёгкая маска справа, как на современных таблицах */
    .refunds__table-scroll::-webkit-scrollbar {
        height: 8px;
    }

    .refunds__table-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 4px;
    }

    .refunds__table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .refunds__table {
        min-width: 440px;
    }

    .brands-alpha-grid {
        grid-template-columns: repeat(2, minmax(8rem, 1fr));
        gap: 1rem;
    }

    .brands-alpha-grid {
        margin: 0;
        justify-items: center;
    }

    .document-page__title {
        font-size: 20px;
        text-align: left;
    }

    .document-page__header {
        padding-bottom: 32px;
    }

    .document-section__title {
        font-size: var(--text-base);

    }

    .document-text {
        font-size: 12px;
    }

    .document-section__content {
        gap: 20px;
    }

    .search-box__button--search {
        padding-right: 15px;
    }

    .ui-input--md .ui-input__label {
        left: 3.5rem;
        font-size: 14px;
    }
    .add-car-grid--3{
        grid-template-columns: 1fr;
    }
    .add-car-grid--2{
        grid-template-columns: 1fr;
    }
    .car-image-upload__title{
        text-align: center;
    }
    .add-car-actions .btn{
        width: 100%;
    }
    .garage-car-buttons{
        flex-direction: column;
    }
    .garage-car-info-columns{
        flex-direction: column;
    }
    .garage-car-body{
        flex-direction: column;
    }
    .garage-car-image{
        width: 100%;
    }
    .garage-car-stats{
        flex-direction: column;
    }
    .garage-car-header{
        flex-direction: column;
        gap: 1rem;
    }
    .garage-header{
        flex-direction: column;
        gap: 12px;
    }
    .garage-actions{
        flex-direction: column;
        gap: 12px;
    }
    /* --- гараж: компактнее и аккуратнее на мобиле --- */
    .garage-container{
        padding: 1rem;
        margin-top: 1rem;
    }
    .garage-car-card{
        padding: 1rem;
    }
    .garage-car-title{
        max-width: 100%;
    }
    .garage-car-header{
        margin-bottom: 1rem;
    }
    .garage-car-info-row,
    .garage-car-stat{
        min-height: 0;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    .garage-car-image{
        height: 11rem;
        margin-bottom: 1rem;
    }
    .main-slider .slide-title{
        font-size: 12px;
    }
    .main-slider .slide-content{
        padding-top: 2rem;
    }
    .main-slider .swiper-progressbar{
        top: 1rem;
    }
    .main-slider .swiper-button-next, .main-slider .swiper-button-prev{
        display: none;
    }
    .main-slider .slide-small-text{
        font-size: 6px;
    }
    .main-slider{
        min-height: 11.625rem;
    }
    /* В колоночном флексе высота .main-slider не «definite» (только min-height),
       из-за чего height:100% у слайдов и фона схлопывается в 0 и картинки слайдера
       не видны на мобиле. Задаём явную min-height слайдам и фону. */
    .main-slider .swiper-slide,
    .main-slider .swiper-slide-bg{
        min-height: 11.625rem;
    }
    .manufacturers-filters__row{
        flex-wrap: wrap;
    }
    .manufacturers-catalog{
        margin-left: 0;
        margin-right: 0;
    }
    .manufacturers-filter{
        padding: 6px;
    }
    .parts-catalog{
        margin: 16px;
    }
    .parts-catalog__tabs{
        flex-direction: column;
    }
    .parts-catalog .brands-alpha-grid{
        grid-template-columns: 1fr;
    }
    .products-catalog .catalog-card{
        min-height: 10rem;
    }
    .products-catalog .catalog-grid{
        grid-template-columns: 1fr;
    }
    .news-slider-header{
        margin-right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .news-slider-header__title {
        font-size: 18px;
    }
    .consultation-title{
        font-size: 16px;
    }
    .news-slider{
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .news-slider-section{
        margin-right: 16px;
        margin-left: 16px;
    }
    .notebook__table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }
    .notebook__col{
        overflow: visible;
    }
    .notebook__cell{
        overflow: visible;
    }
    .notebook__table-header, .notebook__table-row{

        gap: 16px;
        min-width: 100%;
    }
    .notebook__table-inner {
        min-width: max-content; /* Ключевое! */
        display: flex;
        flex-direction: column;
        padding-bottom: var(--space-4);
    }


    .notebook__col--brand { flex: 0 0 30%; }
    .notebook__col--article { flex: 0 0 42%; }
    .notebook__col--name { flex: 0 0 42%; }
    .notebook__col--comment { flex: 0 0 42%; }
    .notebook__col--quantity { flex: 0 0 30%;  }
    .notebook__col--price { flex: 0 0 30%;  }

    .notebook__cell.notebook__col--brand { flex: 0 0 30%;opacity: .75; }
    .notebook__cell.notebook__col--article { flex: 0 0 42%; }
    .notebook__cell.notebook__col--name { flex: 0 0 42%;opacity: .75; }
    .notebook__cell.notebook__col--comment { flex: 0 0 42%; opacity: .75;}
    .notebook__cell.notebook__col--quantity { flex: 0 0 30%; opacity: .75; }
    .notebook__cell.notebook__col--price { flex: 0 0 30%; opacity: .75; }
    .notebook__cell.notebook__col--article {
        position: relative;
    }

    .notebook__cell.notebook__col--article .notebook__article-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding-left: 0;
    }

    .notebook__table-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .notebook__action-btn {
        min-width: 10rem;
        width: 100%;
        max-width: 10rem;
    }
    .balance-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
    }
    .balance-table tr{
        display: flex;
    }
    .balance-filters {

        display: flex;
        flex-direction: column;
    }
    .balance-col--id,
    .balance-table__cell.balance-col--id {
        flex: 0 0 8%;
        width: 15%;
    }

    .balance-col--date,
    .balance-table__cell.balance-col--date {
        flex: 0 0 35%;
        width: 20%;
    }

    .balance-col--sum,
    .balance-table__cell.balance-col--sum {
        flex: 0 0 40%;
        width: 20%;
    }
    .balance-col--order,
    .balance-table__cell.balance-col--order {
        flex: 0 0 35%;
        width: 15%;
    }


    .balance-col--name,
    .balance-table__cell.balance-col--name {
        flex: 0 0 92%;
        width: 52%;
    }
    .custom-select--open {
        position: relative;
        z-index: 1003; /* Должно быть больше, чем у .custom-select__dropdown */
    }

    /* Дополнительное пространство между открытым селектом и следующими элементами */
    .custom-select--open + .filter-item,
    .custom-select--open + .custom-select + .filter-item {
        margin-top: 300px; /* Высота выпадающего списка + запас */
        transition: margin-top 0.3s ease;
    }

    /* Корректировка позиционирования выпадающего списка на мобильных */
    .custom-select__dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        z-index: 1005; /* Максимальный z-index для выпадающих списков */
    }




    /* Убираем перекрытие при скролле страницы */
    .custom-select__dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: auto;
    }

    .balance-filters {
        position: relative;
        z-index: 1;
    }
    .orders-filters{
        display: flex;
        flex-direction: column;
    }
    .delivery-methods-options{
        flex-direction: column;
    }
    .delivery-method-option{
        max-height: 56px;
        height: 56px;
        margin-bottom: 0;
        padding: 21px;
    }
    .delivery-radio-label{
        padding: 0 2.5rem;
    }
    .delivery-details-grid{
        display: flex;
        flex-direction: column;
    }
    .pickup-point-card{
        display: flex;
        flex-direction: column;
    }
    .pickup-point-actions{
        margin-top: 16px;
    }
    .text-caption{
        margin-bottom: 16px;
    }
    .order-details{
        width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .delivery-info{
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 16px;
    }
    .delivery-table{
        min-width: 900px;

    }
    .requests-actions{
        flex-direction: column;
    }
    .request-form-grid{
        grid-template-columns: 1fr;
    }
    .captcha-section{
        grid-template-columns: 1fr;
    }
    .request-info-text-body{
        font-size: 12px;
    }
    .request-info-icon svg{
        width: 32px;
        height: 32px;
    }
    .request-info-icon{
        width: 32px;
        height: 32px;
    }
    .payment-col--status {
        width: 25%;
        min-width: 250px;
    }

    .payment-col--sum,
    .payment-col--paid,
    .payment-col--remaining {
        width: 20%;
        min-width: 200px;
        text-align: right;
    }
    .payment-table {
        display: block;
        width: auto;
        min-width: 100%;
        padding-bottom: 16px;
    }
    .quick-order-details{
        width: auto;
        min-width: 100%;
        padding-bottom: 16px;
    }
    .quick-order-details tbody{
        width: fit-content;
    }
    .quick-order-detail__label{
        min-width: 250px;
    }
    .quick-order-detail__value{
        min-width: 250px;
    }
    .order-search__tip-text{
        font-size: var(--text-sm);
    }
    .order-actions{
        flex-direction: column;
    }
    .my-order-top{
        flex-direction: column;
    }
    .my-order-garage{
        width: 100%;
    }
    .order-actions__input-group{
        flex-direction: column;
    }
    /* ===== Мобильная корзина (из обновлённого макета cart) ===== */
    /* Контейнер корзины двойне западдингован (.second-container 20px + .third-container 16px),
       из-за чего контент узковат (~318px). Выводим #cart_area из отступа внешнего контейнера
       и задаём свои 16px — контент становится ~358px при экране 390px. */
    #cart_area {
        width: auto;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .cart-wrapper {
        padding: 0;
        margin-bottom: var(--space-4);
        border-radius: 0;
        background: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Каждый товар — карточка. Раскладка по макету (390px) через CSS grid:
       верх — товар (чекбокс+название), ниже разделитель, затем два ряда
       «счётчик | наличие» и «за шт | итого», а справа на оба нижних ряда —
       колонка действий (обновить/гараж/удалить). */
    .cart-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "product product product"
            "line    line    line"
            "counter avail   actions"
            "price   total   actions";
        align-items: start;
        column-gap: var(--space-3);
        row-gap: 12px;
        background-color: var(--gray-darker);
        border-radius: 16px;
        border-bottom: 0;
        padding: 16px;
        position: relative;
    }
    .cart-item__product {
        grid-area: product;
        width: 100%;
        gap: 0;
        align-items: center;
    }
    /* Отступ чекбокс → картинка */
    .cart-item__product > .checkbox {
        margin-right: var(--space-2);
    }
    /* Картинка/плейсхолдер: размер под карточку, отступ до текста справа — 12px */
    .cart-item__image,
    .cart-item__image-placeholder {
        width: 72px;
        height: 72px;
        margin-left: 0;
    }
    .cart-item__image {
        margin-right: 12px;
    }
    .cart-item__line-mobile {
        grid-area: line;
        display: block;
        width: 100%;
        height: 1px;
        background-color: #D9D9D9;
        opacity: 10%;
    }
    .cart-item__counter {
        grid-area: counter;
        justify-self: start;
    }
    .cart-item__availability {
        grid-area: avail;
        justify-self: start;
        min-width: 105px;
        width: 105px;
    }
    .cart-item__price-block {
        grid-area: price;
        justify-self: start;
    }
    .cart-item__total {
        grid-area: total;
        justify-self: start;
    }
    .cart-item__action-mobile {
        grid-area: actions;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        align-self: start;
        justify-self: end;
    }
    /* Десктопные действия (внутри инфо) на мобиле прячем — есть action-mobile */
    .cart-item__actions {
        display: none;
    }

    .cart-item__info {
        width: 100%;
    }
    .cart-item__name {
        font-size: 12px;
        margin-bottom: 0.25rem;
        white-space: normal;
        line-height: 1.3;
    }
    .car-item__description {
        margin-bottom: 0;
    }
    .cart-item__name-badge {
        white-space: normal;
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 3px;
        line-height: 1.3;
    }

    .cart-item__price-block,
    .cart-item__total {
        min-width: auto;
        text-align: left;
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }
    .cart-item__price-per,
    .cart-item__total-price {
        font-size: 12px;
        margin-bottom: 0;
    }

    /* Мобильный блок «Выбрать все / Очистить» над списком */
    .cart-checkbox__mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18px;
    }
    .cart-checkbox__mobile .checkbox__label {
        font-size: 12px;
    }
    .cart-checkbox__mobile .btn {
        min-height: 32px;
        width: 132px;
        font-size: 10px;
    }
    .cart-checkbox__mobile .btn .btn__icon {
        width: 12px;
        height: 12px;
    }

    /* Алерт устаревших цен */
    .cart-alert {
        padding: 20px;
    }
    .cart-alert__text {
        font-size: 10px;
    }
    .cart-alert__highlight {
        font-size: 10px;
        padding: 2px 6px;
    }
    .cart-alert__refresh-btn svg {
        width: 12px;
        height: 12px;
    }

    /* Футер — фиксируется снизу */
    .cart-footer {
        flex-direction: column;
        position: fixed;
        bottom: 70px;
        left: 0;
        background-color: var(--gray-darker);
        align-items: stretch;
        gap: var(--space-6);
        width: 100%;
        z-index: 999;
        padding: 16px;
    }
    .cart-footer__left {
        display: none;
    }
    .cart-footer__right {
        align-items: center;
        text-align: right;
        flex-direction: row;
        justify-content: center;
    }
    .cart-footer__right .btn {
        padding: 10px 16px;
        min-height: 40px;
    }
    .cart-footer__total {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .cart-footer__total-label {
        font-size: 10px;
    }
    .cart-footer__total-price {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .header__actions {
        gap: 16px;
    }

    .header__info {
        gap: 0.75rem;
    }

    .header__worktime,
    .header__phone {
        text-align: center;
        align-items: center;
    }

    .header__worktime-time,
    .header__phone-number {
        font-size: var(--text-xs);
    }

    .footer__actions {
        gap: 0.75rem;
    }

    .footer__info {
        gap: 0.75rem;
    }

    .footer__worktime,
    .footer__phone {
        text-align: center;
        align-items: center;
    }

    .footer__worktime-time,
    .footer__phone-number {
        font-size: var(--text-xs);
    }

    .footer-contacts {

    }

    .pagination__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.15rem;
        padding: 0.375rem;
    }

    .pagination__link {
        min-width: 1.8rem;
        height: 1.8rem;
        font-size: var(--text-xs);
        padding: 0;
    }

    .pagination__link--text {
        padding: 0 1rem;
        font-size: var(--text-xs);
    }

    .pagination__dots {
        min-width: 1.8rem;
    }
    .filter-item,
    .filter-item--wide,
    .filter-item:nth-child(2),
    .filter-item:nth-child(3),
    .filter-item:nth-child(4),
    .filter-item:nth-child(5),
    .filter-item:nth-child(6),
    .filter-item:nth-child(7) {
        grid-area: auto;
        width: 100%;
    }
    .balance-top-up-form{
        flex-wrap: wrap;
    }
    .balance-submit-btn{
        width: 100%;
        min-width: 100%;
    }
}

/* Маленькие мобильные */
@media (max-width: 480px) {
    .header__actions {
        padding: 16px;
        gap: 0.75rem;
    }

    .header__info {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .footer__info {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .footer__actions {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .header__worktime,
    .header__phone {
        flex: 1;
        min-width: 120px;
    }

    .footer__worktime,
    .footer__phone {
        flex: 1;
        min-width: 120px;
    }

    .search-box {
        height: 3rem;
    }

    .manufacturers-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .manufacturers-filters__row {
        flex-wrap: wrap;
    }

    .search-box__input {
        font-size: var(--text-sm);
        padding: 0.5rem 0.75rem;
    }

    .search-box__button {
        padding: 0.5rem;
    }

    .search-box__button--select {
        padding-left: 0.5rem;
    }

    .search-box__button--search {
        padding-right: 15px;
    }

    .footer-nav {
    }

    .footer-contacts {
        align-items: flex-start;
    }

    .pagination__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.1rem;
        padding: 0.375rem;
    }

    .pagination__link {
        min-width: 1.5rem;
        height: 1.5rem;
        font-size: var(--text-xs);
        padding: 0;
    }

    .pagination__link--text {
        padding: 0 0.5rem;
        font-size: var(--text-xs);
    }

    .pagination__dots {
        min-width: 1rem;
    }

    .bottom-nav {
        width: 100%;

        padding: 0.5rem;
        border-radius: 0;
        bottom: 0;
    }

    .bottom-nav__item {
        width: 5.625rem;
        height: 3.375rem;
        border-radius: 0.75rem;
    }

    .bottom-nav__item--active::before {
        border-radius: 0.75rem;

    }

    .bottom-nav__icon {
        width: 24px;
        height: 24px;
    }

    .bottom-nav__label {

    }

    /* Уменьшаем эффект размытия для производительности на мобильных */
    .bottom-nav {
        backdrop-filter: blur(15px) saturate(160%) contrast(1.1);
        -webkit-backdrop-filter: blur(15px) saturate(160%) contrast(1.1);
    }

    .agreement-label {
        font-size: var(--text-xs);
    }

    .ui-input__label {
        font-size: var(--text-xs);
    }

    .custom-select__selected {
        font-size: var(--text-xs);
    }

    .registration-section__title {
        font-size: var(--text-sm);
        margin-bottom: var(--space-4);
    }

    .brands-alpha-grid {
        grid-template-columns: 1fr;
    }
}

/* Очень маленькие мобильные */
@media (max-width: 360px) {
    .header__info {
        flex-direction: column;
        gap: 0.5rem;
    }

    .header__worktime,
    .header__phone {
        width: 100%;
    }

    /* Скрываем разделители внутри информации на очень маленьких экранах */
    .header__info .header__actions-divider {
        display: none;
    }

    .header__info .btn--large {
        width: 100%;
        justify-content: center;
        order: -1;
    }

    .bottom-nav {
        width: 100%;
        max-width: 100%;
        padding: 5px 12px;
    }

    .bottom-nav__item {
        width: 5.625rem;
        height: 3.375rem;
    }

    .bottom-nav__icon {
        width: 20px;
        height: 20px;
    }
    .bottom-nav__label {
        font-size: 8px;
    }
}

.RUB {

}

/* ===== PRODUCT DETAIL PAGE ===== */
.product-detail {
    margin-top: var(--space-6);
    margin-bottom: var(--space-8);
}

.product-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-8);
    align-items: flex-start;
}

/* Галерея */
.product-gallery {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.product-gallery__main {
    background-color: var(--white);
    border-radius: var(--radius-xl);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.product-gallery__main a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-gallery__main-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
}

.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--space-3);
}

.product-gallery__thumb {
    display: block;
    background-color: var(--white);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.product-gallery__thumb:hover {
    border-color: var(--yellow-medium);
    transform: translateY(-2px);
}

.product-gallery__hint {
    font-size: var(--text-xs);
    color: var(--gray-text);
    text-align: center;
    opacity: 0.75;
}

/* Информация о товаре (правая колонка) */
.product-info {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.product-info__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    color: var(--gray-text);
}

.product-info__brand {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-info__article {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

.product-info__article-label {
    opacity: 0.6;
    margin-right: 4px;
}

.product-info__article-value {
    color: var(--white);
    font-weight: 500;
}

.product-info__rating {
    min-height: 1.25rem;
}

/* Опциональный заголовок товара (используется в ucats-каталогах,
   у обычных товаров заголовок берётся из `<h1 class="main-title">` шаблона) */
.product-info__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Таблица характеристик в правом инфо-блоке (для ucats — шины, диски и т.п.,
   где нет блока offers с складами, а спеки нужно показать сразу) */
.product-info__specs {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-4);
}

.product-info__specs-table {
    width: 100%;
    border-collapse: collapse;
}

.product-info__specs-table td {
    padding: var(--space-2) 0;
    vertical-align: top;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.product-info__specs-table tr:last-child td {
    border-bottom: none;
}

.product-info__specs-table td:first-child {
    color: var(--gray-text);
    width: 45%;
    padding-right: var(--space-4);
}

.product-info__specs-table td:last-child {
    color: var(--white);
    font-weight: 500;
}

.product-info__rating-stars .fa {
    color: var(--yellow-medium);
    font-size: var(--text-base);
}

.product-info__rating-stars .fa-star-o {
    color: rgba(255, 255, 255, 0.2);
}

.product-info__price-block {
    margin-top: var(--space-2);
}

.product-info__price-label {
    font-size: var(--text-sm);
    color: var(--gray-text);
    margin-bottom: var(--space-3);
}

.product-info__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.product-info__price {
    font-size: 1.5rem; /* 24px — компактнее, чем --text-xl (32px) */
    font-weight: 600;
    color: var(--white);
    line-height: var(--leading-tight);
}

.product-info__price--ask {
    font-size: var(--text-base);
}

.product-info__price-old {
    font-size: var(--text-base);
    color: var(--gray-text);
    text-decoration: line-through;
    opacity: 0.65;
}

.product-info__office {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.product-info__office-label {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

.product-info__office-name {
    font-size: var(--text-base);
    color: var(--white);
    font-weight: 500;
}

.product-info__office-address {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

.product-info__stock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.product-info__stock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.04);
}

.product-info__stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
}

.product-info__stock-badge--success { color: var(--status-success); }
.product-info__stock-badge--warning { color: var(--status-warning); }
.product-info__stock-badge--info    { color: var(--status-info); }
.product-info__stock-badge--error   { color: var(--status-error); }

.product-info__stock-count {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

.product-info__actions {
    margin-top: var(--space-2);
}

.product-info__buy-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.product-info__buy-row .btn {
    flex: 1 1 auto;
}

/* Универсальный счётчик количества */
.product-counter {
    display: inline-flex;
    align-items: stretch;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.product-counter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    cursor: pointer;
    color: var(--white);
    transition: background-color 0.15s ease;
    user-select: none;
}

.product-counter__btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.product-counter__btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.product-counter__input {
    width: 3.25rem;
    background: transparent;
    border: none;
    text-align: center;
    color: var(--white);
    font-size: var(--text-base);
    font-weight: 500;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
}

.product-counter__input::-webkit-outer-spin-button,
.product-counter__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-info__article-row {
    margin-top: var(--space-2);
}

.product-info__article-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--yellow-medium);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: opacity 0.15s ease;
}

.product-info__article-link:hover {
    opacity: 0.8;
}

.product-info__article-link .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.product-info__extra-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.product-info__extra-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color 0.15s ease;
    cursor: pointer;
}

.product-info__extra-action:hover {
    color: var(--white);
}

.product-info__extra-action--active {
    color: var(--yellow-medium);
}

.product-info__extra-action .icon {
    width: 1rem;
    height: 1rem;
}

.product-info__admin {
    margin-top: var(--space-2);
}

.product-info__admin a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-text);
    text-decoration: none;
    font-size: var(--text-sm);
}

.product-info__admin a:hover {
    color: var(--white);
}

.product-info__admin .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.product-info__disclaimer {
    font-size: var(--text-xs);
    color: var(--gray-text);
    opacity: 0.6;
    line-height: var(--leading-normal);
    margin-top: var(--space-2);
}

/* ============================================================
   Привлекательная страница товара ucats — ШИНЫ.
   Всё скоуплено под .product-detail--tire, чтобы остальные
   ucats-каталоги (диски, АКБ, масла и т.д.) с теми же базовыми
   классами остались без изменений.
   ============================================================ */
/* колонки одинаковой высоты: левый блок (галерея) = правый (инфо).
   Картинка не меняет размер — белая плашка остаётся квадратной,
   при необходимости центрируется по вертикали в более высокой колонке. */
.product-detail--tire .product-detail__layout {
    align-items: stretch;
}
.product-detail--tire .product-gallery {
    position: relative;
    overflow: hidden;
    justify-content: center;
}
/* мягкое акцентное свечение за изображением */
.product-detail--tire .product-gallery::before {
    content: '';
    position: absolute;
    top: -25%;
    left: 50%;
    width: 130%;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(224, 220, 90, 0.12), transparent 62%);
    pointer-events: none;
    z-index: 0;
}
.product-gallery__stage {
    position: relative;
    z-index: 1;
}
.product-gallery__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: var(--yellow-medium);
    color: var(--black);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.product-detail--tire .product-gallery__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.product-detail--tire .product-gallery__hint .icon {
    width: 0.8125rem;
    height: 0.8125rem;
    fill: currentColor;
}

/* шапка инфо: бренд-чип + артикул, затем заголовок */
.product-info__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.product-detail--tire .product-info__brand {
    padding: 5px 14px;
    background: rgba(224, 220, 90, 0.12);
    color: var(--yellow-medium);
    border: 1px solid rgba(224, 220, 90, 0.28);
    border-radius: 999px;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
}
.product-detail--tire .product-info__title {
    font-size: 1.625rem;
    line-height: 1.3;
}

/* характеристики — сетка карточек вместо плоской таблицы */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--space-3);
}
.spec-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.75rem 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.spec-card:hover {
    border-color: rgba(224, 220, 90, 0.3);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}
.spec-card__label {
    font-size: 0.75rem;
    color: var(--gray-text);
    line-height: 1.3;
}
.spec-card__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
    word-break: break-word;
}

/* CTA-блок: крупная кнопка цен + ссылка поиска по артикулу */
.product-info__cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-2);
}
.product-info__cta-main {
    width: 100%;
    justify-content: center;
}
.product-detail--tire .product-info__cta .product-info__article-link {
    align-self: center;
    font-size: var(--text-base);
}

/* дисклеймер как мягкая плашка-заметка */
.product-detail--tire .product-info__disclaimer {
    margin-top: var(--space-2);
    padding: 0.75rem 0.875rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid rgba(224, 220, 90, 0.45);
    border-radius: 10px;
    opacity: 0.85;
}

/* Старые классы (для обратной совместимости с JS, который их может искать) */
.product_div_price_crossed_out {
    text-decoration: line-through;
    opacity: 0.65;
    color: var(--gray-text);
}

/* ===== PRODUCT OFFERS (предложения по товару) ===== */
.product-offers {
    margin-bottom: var(--space-8);
}

.product-offers__card {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6) var(--space-8);
}

.product-offers__table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-offers__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.product-offers__th {
    text-align: left;
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.product-offers__th:first-child {
    padding-left: 0;
}

.product-offers__office-row td {
    padding: var(--space-4) 0 var(--space-3);
}

.product-offers__office {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.product-offers__office-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--yellow-medium);
    flex-shrink: 0;
}

.product-offers__office-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-offers__office-name {
    font-size: var(--text-base);
    color: var(--white);
    font-weight: 500;
}

.product-offers__office-address {
    font-size: var(--text-sm);
    color: var(--gray-text);
}

.product-offers__row td {
    padding: var(--space-3) var(--space-3);
    color: var(--white);
    font-size: var(--text-base);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.product-offers__row td:first-child {
    padding-left: 0;
}

.product-offers__td--price {
    font-weight: 600;
    color: var(--white);
}

.product-offers__td--action {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.product-offers__empty {
    color: var(--gray-text);
    padding-left: 0;
}

.product-offers__buy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.product-offers__status {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.04);
}

.product-offers__status--success { color: var(--status-success); }
.product-offers__status--warning { color: var(--status-warning); }
.product-offers__status--info    { color: var(--status-info); }
.product-offers__status--error   { color: var(--status-error); }


/* ===== PRODUCT TABS (вкладки информации) ===== */
.product-tabs {
    margin-bottom: var(--space-8);
}

.product-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.product-tabs__tab {
    appearance: none;
    border: none;
    background: transparent;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--gray-text);
    cursor: pointer;
    position: relative;
    transition: color 0.15s ease;
    margin-bottom: -1px;
}

.product-tabs__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--yellow-medium);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.product-tabs__tab:hover {
    color: var(--white);
}

.product-tabs__tab--active {
    color: var(--white);
}

.product-tabs__tab--active::after {
    opacity: 1;
}

.product-tabs__panes {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6) var(--space-8);
}

.product-tabs__pane {
    display: none;
    color: var(--white);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.product-tabs__pane--active {
    display: block;
}

.product-tabs__pane table {
    width: 100%;
    border-collapse: collapse;
}

.product-tabs__pane table td {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.product-tabs__pane table td:first-child {
    padding-left: 0;
    color: var(--gray-text);
    width: 40%;
}

.product-tabs__applicability-scroll {
    max-height: 500px;
    overflow-y: auto;
    padding-right: var(--space-3);
}

.product-tabs__applicability-sub {
    position: relative;
    top: -5px;
    color: var(--gray-text);
    font-size: var(--text-sm);
}


/* ===== PRODUCT VARIANTS (другие варианты исполнения) ===== */
.product-variants {
    background-color: var(--gray-darker);
    border-radius: var(--radius-2xl);
    padding: var(--space-6) var(--space-8);
    margin-bottom: var(--space-8);
}

.product-variants__container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.product-variants__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.product-variants__hint {
    color: var(--gray-text);
    font-size: var(--text-sm);
    margin: 0;
}

.product-variants__hint b {
    color: var(--white);
}

.product-variants__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.product-variants__variant {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-lg);
    color: var(--white);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.product-variants__variant:hover {
    background-color: var(--yellow-medium);
    color: var(--black);
}


/* ===== PRODUCT RELATED / SIMILAR (сопутствующие/похожие) ===== */
.product-related {
    margin-bottom: var(--space-8);
}

.product-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
}

/* Белая плашка под фото товара — повторяет правило из printProducts_2.php (#products_area),
   которое в основном каталоге отвечает за контрастный фон под прозрачные PNG */
.product-related .product-card__image-wrapper {
    background: var(--white);
    border-radius: var(--radius-lg, 12px);
    padding: 0.75rem;
}


/* ===== ADAPTIVE ===== */
@media (max-width: 1024px) {
    .product-detail__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .product-info {
        padding: var(--space-6);
    }

    .product-gallery {
        padding: var(--space-4);
    }

    .product-info__price {
        font-size: 1.25rem; /* 20px на мобилке */
    }

    .product-offers__card,
    .product-variants,
    .product-tabs__panes {
        padding: var(--space-4) var(--space-4);
    }

    .product-tabs__tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }
}

@media (max-width: 480px) {
    .product-info__buy-row {
        flex-direction: column;
    }

    .product-info__buy-row .product-counter {
        align-self: flex-start;
    }

    .product-info__buy-row .btn {
        width: 100%;
    }

    .product-offers__buy {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
}


/* ===== PRELOADER ===== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.preloader-active,
html.preloader-active body {
    overflow: hidden;
}

.preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}

.preloader__logo {
    /* logo.svg — отдельный файл через <img>; высота фиксирована,
       ширина по пропорциям (viewBox 207×35). */
    width: auto;
    height: 2.25rem;
    display: block;
    object-fit: contain;
    animation: preloader-pulse 1.6s ease-in-out infinite;
}

.preloader__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--yellow-medium);
    animation: preloader-spin 0.9s linear infinite;
}

@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

@keyframes preloader-pulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@media (max-width: 600px) {
    .preloader__logo {
        width: auto;
        height: 1.564rem; /* пропорционально уменьшенная высота */
    }
    .preloader__spinner {
        width: 2rem;
        height: 2rem;
        border-width: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preloader__spinner,
    .preloader__logo {
        animation: none;
    }
    .preloader__spinner {
        border-top-color: rgba(255, 255, 255, 0.25);
    }
}

/* ===== UNIVERSAL CONTENT LOADER ===== */
/* CSS-спиннер для подгрузки контента (товары, AJAX-блоки и т.п.).
   Заменяет старый ajax-loader-transparent.gif. Визуально согласован
   с кольцом прелоадера главной страницы (.preloader__spinner). */
.dp-loader {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--yellow-medium);
    border-radius: 50%;
    animation: preloader-spin 0.9s linear infinite;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Маленький — для инлайнового использования рядом с текстом. */
.dp-loader--sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
}

/* Крупный — для полноблочной загрузки. */
.dp-loader--lg {
    width: 3rem;
    height: 3rem;
}

/* Центрирующая обёртка для блочной загрузки. */
.dp-loader-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 12.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .dp-loader {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.25);
    }
}

/* ===== FLASH NOTIFICATIONS ===== */
.flash-stack {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(420px, calc(100vw - var(--space-6) * 2));
    pointer-events: none;
}

.flash {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background-color: var(--gray-darker);
    border-radius: var(--radius-xl);
    border-left: 3px solid var(--gray-dark);
    color: var(--white);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.flash--visible {
    opacity: 1;
    transform: translateX(0);
}

.flash--leaving {
    opacity: 0;
    transform: translateX(120%);
}

.flash__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.06);
}

.flash__icon {
    width: 1rem;
    height: 1rem;
    color: var(--white);
}

.flash__content {
    min-width: 0;
}

.flash__title {
    font-weight: 600;
    color: var(--white);
    margin-bottom: 2px;
    line-height: var(--leading-tight);
}

.flash__text {
    color: var(--gray-text);
    font-size: var(--text-sm);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.flash__close {
    appearance: none;
    border: none;
    background: transparent;
    padding: 4px;
    margin: -4px -4px -4px 0;
    color: var(--gray-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
    flex-shrink: 0;
}

.flash__close:hover {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.06);
}

.flash__close-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.flash__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    opacity: 0.5;
    transform-origin: left center;
    animation: flash-progress 6s linear forwards;
}

.flash--paused .flash__progress {
    animation-play-state: paused;
}

.flash--leaving .flash__progress {
    animation: none;
}

@keyframes flash-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Цветовые варианты — заданы через accent-color, чтобы переиспользовать в иконке и прогрессе */
.flash--success {
    border-left-color: var(--status-success);
    color: var(--status-success);
}
.flash--success .flash__icon-wrap {
    background-color: rgba(90, 224, 174, 0.15);
}
.flash--success .flash__icon {
    color: var(--status-success);
}

.flash--error {
    border-left-color: var(--status-error);
    color: var(--status-error);
}
.flash--error .flash__icon-wrap {
    background-color: rgba(229, 57, 53, 0.18);
}
.flash--error .flash__icon {
    color: var(--status-error);
}

.flash--warning {
    border-left-color: var(--status-warning);
    color: var(--status-warning);
}
.flash--warning .flash__icon-wrap {
    background-color: rgba(255, 179, 71, 0.18);
}
.flash--warning .flash__icon {
    color: var(--status-warning);
}

.flash--info {
    border-left-color: var(--status-info);
    color: var(--status-info);
}
.flash--info .flash__icon-wrap {
    background-color: rgba(100, 181, 246, 0.18);
}
.flash--info .flash__icon {
    color: var(--status-info);
}

@media (max-width: 600px) {
    .flash-stack {
        top: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
        width: auto;
    }

    .flash {
        padding: var(--space-3) var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flash {
        transition: opacity 0.15s ease;
        transform: none;
    }
    .flash--visible {
        transform: none;
    }
    .flash--leaving {
        transform: none;
    }
    .flash__progress {
        animation: none;
        display: none;
    }
}
/* ===== Обновлённый макет my-orders: мобильные правки ===== */
/* Размещено в конце файла намеренно: глобальное .custom-select__selected на
   мобиле должно перебить более раннее правило @media(max-width:480px) со
   шрифтом --text-xs (страница регистрации) — текст в селекторах должен быть 14px. */
@media (max-width: 768px) {
    .orders-container {
        border-radius: 16px;
    }
    .custom-select {
        height: 54px;
    }
    .custom-select__selected {
        font-size: 14px;
    }
}