/* AUTO-GENERATED CSS BUNDLE */
/* Generated: 2026-07-13 19:19:57 */
/* Files: 38 */
/* === variables.css === */
/**
* Версия: 1.2
* Путь: /styles/variables.css
* Файл: variables.css
* Описание:
* - CSS-переменные для светлой и тёмной темы
* - Цветовая палитра (Indigo / Violet / Pink)
* - Типографика, отступы, радиусы, тени
* - Брейкпоинты и z-index
* - v1.1: Добавлены улучшенные тени и переходы для Soft UI
* - v1.2: Добавлены переменные для тёмной Bento-секции со следами протектора
*/
:root {
/* ===== ШРИФТЫ ===== */
--font-heading: "Manrope", sans-serif;
--font-body: "Inter", sans-serif;

/* ===== ЦВЕТА ===== */
--title-color: #ffcc00;
--body-color: #6E7070;
--black-color: #000000;
--color-primary: #000;
--color-primary-light: #1a1a1a;
--color-primary-dark: #0a0a0a;
--color-accent: #ffd500;
--color-accent-hover: #ffea00;
--color-accent-dark: #e6b000;
--color-red: #e30613;
--color-red-light: #ff4444;
--color-red-dark: #c50510;
--color-green: #2a8a2a;
--color-green-light: #4a9a4a;
--color-sidebar-bg: #3a3a3a;

/* ФОНОВЫЕ ЦВЕТА */
--bg-body: #fff;
--bg-white: #fff;
--bg-light: #f9f9f9;
--bg-lighter: #f5f5f5;
--bg-dark: #0d0d0d;
--bg-darker: #0a0a0a;
--bg-nav: #3a3a3a;
--bg-card: #3a3a3a;
--bg-border: #eee;
--bg-border-light: #e0e0e0;

/* ЦВЕТА ТЕКСТА */
--text-primary: #333;
--text-secondary: #666;
--text-muted: #999;
--text-light: #888;
--text-dark: #555;
--text-white: #fff;
--text-inverse: rgba(240, 240, 255, 0.85);

/* ===== 🆕 v1.2: ПЕРЕМЕННЫЕ ТЁМНОЙ BENTO-СЕКЦИИ ===== */
--bento-dark-bg-start: #0a0a0a;
--bento-dark-bg-mid: #111111;
--bento-dark-bg-end: #1a1a1a;
--bento-tire-track-color: rgba(58, 58, 58, 0.35);
--bento-tire-track-highlight: rgba(80, 80, 80, 0.20);
--bento-tire-track-shadow: rgba(0, 0, 0, 0.45);
--bento-dirt-overlay: rgba(20, 18, 15, 0.25);
--bento-section-padding: 80px;

/* ===== РАЗМЕРЫ ШРИФТОВ ===== */
--h1-size: 38px;
--h1-lh: 1.18;
--h2-size: 48px;
--h2-lh: 1.2;
--h3-size: 32px;
--h3-lh: 1.28;
--h4-size: 30px;
--h4-lh: 1.33;
--h5-size: 24px;
--h5-lh: 1.42;
--h6-size: 20px;
--h6-lh: 1.5;
--body-size: 14px;
--body-lh: 1.75;
--label-size: 16px;
--label-lh: 1.4;
--input-size: 14px;
--input-lh: 1.5;
--btn-size: 15px;
--btn-lh: 1.4;
--caption-size: 13px;
--caption-lh: 1.4;
--product-title-size: 32px;
--product-title-lh: 1.3;

/* ===== РАЗМЕРЫ ТЕКСТА (утилиты) ===== */
--fs-xs: 10px;
--fs-sm: 11px;
--fs-base: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
--fs-2xl: 20px;
--fs-3xl: 22px;
--fs-4xl: 24px;
--fs-5xl: 26px;
--fs-hero: 28px;

/* ===== СКОРУГЛЕНИЯ ===== */
--radius-none: 0;
--radius-xs: 0;
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-full: 0;
--radius-default: var(--radius-none);

/* ===== ОТСТУПЫ ===== */
--space-xs: 5px;
--space-sm: 10px;
--space-md: 15px;
--space-lg: 20px;
--space-xl: 25px;
--space-2xl: 30px;
--space-3xl: 40px;

/* ===== КОНТЕЙНЕР ===== */
--container-max: 1250px;
--container-pad: 15px;

/* ===== ТЕНИ (БАЗОВЫЕ) ===== */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 6px 20px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);

/* ===== ТЕНИ (SOFT UI - v1.1) ===== */
--shadow-soft-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-soft-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-soft-md: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-soft-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
--shadow-soft-xl: 0 12px 48px rgba(0, 0, 0, 0.15);

/* Тени с акцентным цветом */
--shadow-accent-sm: 0 4px 12px rgba(255, 213, 0, 0.15);
--shadow-accent-md: 0 8px 24px rgba(255, 213, 0, 0.20);
--shadow-accent-lg: 0 12px 36px rgba(255, 213, 0, 0.25);

/* ===== АНИМАЦИИ ===== */
--transition-fast: 0.2s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);

/* Переходы для Soft UI (v1.1) */
--transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-lift: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);

/* ===== РАЗМЕРЫ КОМПОНЕНТОВ ===== */
--height-topbar: 48px;
--height-search: 38px;

/* ===== ЭФФЕКТЫ ===== */
--shine-w: 50%;
--shine-o: 0.3;
--shine-dur: 0.7s;
--shine-skew: -25deg;

/* ===== САЙДБАР ===== */
--sidebar-width: 350px;
--sidebar-slide-dur: 0.4s;

/* ===== СЛАЙДЕР ===== */
--slider-height: 800px;
}
/* === 404.css === */
/**
 * Стили для страницы ошибки 404
 */

/* ===== ОСНОВНАЯ СЕКЦИЯ ===== */
.error-404-section {
    padding: 60px 0 80px;
    background: var(--bg-white, #fff);
}

.error-404-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ===== КОД 404 ===== */
.error-404-code {
    font-size: 180px;
    font-weight: 900;
    font-family: var(--font-heading, "Manrope", sans-serif);
    color: var(--color-accent, #ffd500);
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    display: inline-block;
}

.error-404-code::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background: var(--color-accent, #ffd500);
    border-radius: 2px;
}

/* ===== ЗАГОЛОВОК И ТЕКСТ ===== */
.error-404-title {
    font-size: var(--h2-size, 48px);
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.error-404-text {
    font-size: 18px;
    color: var(--text-secondary, #666);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== КНОПКИ ДЕЙСТВИЙ ===== */
.error-404-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.error-404-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-body, "Inter", sans-serif);
    text-decoration: none;
    border-radius: 0;
    transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.error-404-btn--primary {
    background: var(--color-accent, #ffd500);
    color: #000;
    border: 2px solid var(--color-accent, #ffd500);
}

.error-404-btn--primary:hover {
    background: #000;
    color: var(--color-accent, #ffd500);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.error-404-btn--secondary {
    background: transparent;
    color: #000;
    border: 2px solid #000;
}

.error-404-btn--secondary:hover {
    background: #000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ===== БЛОК ПОИСКА ===== */
.error-404-search {
    margin-bottom: 50px;
    padding: 30px;
    background: var(--bg-light, #f9f9f9);
    border: 1px solid var(--bg-border, #eee);
}

.error-404-search h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.error-404-search .search-bar {
    padding: 0;
    background: transparent;
    border-bottom: none;
}

/* ===== ПОПУЛЯРНЫЕ РАЗДЕЛЫ ===== */
.error-404-links h3 {
    font-size: 20px;
    margin-bottom: 24px;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.error-404-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.error-404-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--bg-border, #eee);
    text-decoration: none;
    color: #000;
    font-weight: 600;
    font-size: 15px;
    font-family: var(--font-body, "Inter", sans-serif);
    transition: all var(--transition-fast, 0.2s ease);
}

.error-404-link-item:hover {
    border-color: var(--color-accent, #ffd500);
    background: #fffde7;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.error-404-link-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light, #f9f9f9);
    border-radius: 8px;
    color: var(--color-accent-dark, #e6b000);
}

.error-404-link-icon svg {
    stroke: var(--color-accent-dark, #e6b000);
}

.error-404-link-item:hover .error-404-link-icon {
    background: var(--color-accent, #ffd500);
}

.error-404-link-item:hover .error-404-link-icon svg {
    stroke: #000;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .error-404-section {
        padding: 40px 0 60px;
    }

    .error-404-code {
        font-size: 140px;
    }

    .error-404-title {
        font-size: 36px;
    }

    .error-404-text {
        font-size: 16px;
    }

    .error-404-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .error-404-section {
        padding: 30px 0 50px;
    }

    .error-404-code {
        font-size: 120px;
    }

    .error-404-title {
        font-size: 28px;
    }

    .error-404-text {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .error-404-actions {
        flex-direction: column;
        margin-bottom: 40px;
    }

    .error-404-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 14px;
    }

    .error-404-search {
        padding: 20px;
        margin-bottom: 40px;
    }

    .error-404-search h3 {
        font-size: 18px;
    }

    .error-404-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .error-404-link-item {
        padding: 12px 14px;
        font-size: 13px;
        gap: 8px;
    }

    .error-404-link-icon {
        width: 32px;
        height: 32px;
    }

    .error-404-link-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* Маленькие мобильные (до 480px) */
@media (max-width: 480px) {
    .error-404-code {
        font-size: 80px;
    }

    .error-404-title {
        font-size: 24px;
    }

    .error-404-text {
        font-size: 14px;
    }

    .error-404-links-grid {
        grid-template-columns: 1fr;
    }

    .error-404-links h3 {
        font-size: 18px;
    }
}
/* === admin.css === */
/**
* Стили для админ-панели
*/
/* ===== СТРАНИЦА ВХОДА ===== */
body.admin-login-body {
    font-family: 'Inter', sans-serif;
    background: #f4f6f9;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
.admin-login-container {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 400px;
}
.admin-login-container h1 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 24px;
    text-align: center;
    color: #333;
}
.admin-login-form .admin-form-group {
    margin-bottom: 16px;
}
.admin-login-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #555;
}
.admin-login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.admin-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}
.admin-btn-primary {
    background: #ffd500;
    color: #000;
    width: 100%;
}
.admin-btn-primary:hover {
    background: #e6b000;
}
.admin-alert {
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}
.admin-alert-error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
.admin-login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 13px;
}
.admin-login-footer a {
    color: #666;
    text-decoration: none;
}
.admin-login-footer a:hover {
    color: #000;
}

/* ===== КАРКАС АДМИН-ПАНЕЛИ ===== */
body.admin-body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    background: #f4f6f9;
    color: #333;
}
.admin-wrapper {
    display: flex;
    min-height: 100vh;
}
.admin-sidebar {
    width: 250px;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}
.admin-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #333;
}
.admin-sidebar-header h2 {
    margin: 0;
    font-size: 20px;
    color: #ffd500;
}
.admin-nav {
    flex: 1;
    padding: 20px 0;
}
.admin-nav a {
    display: block;
    padding: 12px 20px;
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}
.admin-nav a:hover, .admin-nav a.active {
    background: #333;
    color: #ffd500;
}
.admin-sidebar-footer {
    padding: 20px;
    border-top: 1px solid #333;
    font-size: 13px;
}
.admin-sidebar-footer a {
    display: block;
    color: #999;
    text-decoration: none;
    margin-bottom: 8px;
}
.admin-sidebar-footer a:hover {
    color: #fff;
}
.admin-main {
    flex: 1;
    margin-left: 250px;
    display: flex;
    flex-direction: column;
}
.admin-header {
    background: #fff;
    padding: 15px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
.admin-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
.admin-content {
    padding: 30px;
    flex: 1;
}

/* ===== ДАШБОРД ===== */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.admin-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.admin-card-icon {
    font-size: 32px;
}
.admin-card-info h3 {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}
.admin-card-value {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #000;
}
.admin-welcome-block {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.admin-welcome-block h2 {
    margin-top: 0;
    color: #000;
}
.admin-welcome-block p {
    color: #555;
    line-height: 1.6;
}

/* ===== ТУЛБАР И ТАБЛИЦЫ ===== */
.admin-toolbar {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
.admin-table th, .admin-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.admin-table th {
    background: #f9f9f9;
    font-weight: 600;
    color: #555;
    font-size: 13px;
    text-transform: uppercase;
}
.admin-table tr:hover {
    background: #fcfcfc;
}
.admin-actions {
    display: flex;
    gap: 8px;
}
.admin-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    width: auto;
}
.admin-btn-secondary {
    background: #eee;
    color: #333;
    width: auto;
}
.admin-btn-secondary:hover {
    background: #ddd;
}
.admin-btn-danger {
    background: #ffebee;
    color: #c62828;
    width: auto;
}
.admin-btn-danger:hover {
    background: #c62828;
    color: #fff;
}
.admin-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.admin-badge-success {
    background: #e8f5e9;
    color: #2e7d32;
}
.admin-badge-warning {
    background: #fff3e0;
    color: #ef6c00;
}
.admin-alert-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
    padding: 1px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* ===== ФОРМЫ ===== */
.admin-form {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    max-width: 1000px;
}
.admin-form-group {
    margin-bottom: 20px;
}
.admin-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #555;
    font-size: 14px;
}
.admin-input, .admin-textarea, .admin-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.admin-input:focus, .admin-textarea:focus, .admin-select:focus {
    outline: none;
    border-color: #ffd500;
    box-shadow: 0 0 0 2px rgba(255, 213, 0, 0.2);
}
.admin-textarea {
    resize: vertical;
    min-height: 100px;
}
.admin-form-row {
    display: flex;
    gap: 20px;
}
.admin-form-group--flex-1 { flex: 1; }
.admin-form-group--flex-2 { flex: 2; }
.admin-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.admin-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
/* === banners.css === */
/**
 * Стили для Секции баннеров (Banners Section)
 * Точная копия с сайта-донора STELSMOTO
 */
/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.banners-section {
    padding: 25px 0;
    background: var(--bg-white, #fff);
}

/* ===== РЯД БАННЕРОВ ===== */
.banner-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.banner-row:last-child {
    margin-bottom: 0;
}

/* ===== КОЛОНКА БАННЕРОВ ===== */
.banner-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.banner-col-2 {
    flex: 1;
}

/* ===== ОТДЕЛЬНЫЙ БАННЕР ===== */
.banner-item {
    display: block;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-fast, 0.2s ease), box-shadow var(--transition-fast, 0.2s ease);
}

.banner-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, 0.15));
}

.banner-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== АДАПТИВНОСТЬ ===== */
/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .banners-section {
        padding: 20px 0;
    }
    .banner-row {
        flex-direction: column;
        gap: 15px;
    }
    .banner-col {
        width: 100%;
    }
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .banners-section {
        padding: 15px 0;
    }
    .banner-row {
        gap: 12px;
        margin-bottom: 12px;
    }
    .banner-col {
        gap: 12px;
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .banners-section {
        padding: 10px 0;
    }
    .banner-row {
        gap: 10px;
        margin-bottom: 10px;
    }
    .banner-col {
        gap: 10px;
    }
}
/* === base.css === */
/**
 * Базовые стили и макет (Base & Layout)
 * Определяет глобальные сбросы, box-sizing и класс .container
 * Использует переменные из variables.css
 */

/* ===== СБРОС BOX-SIZING ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ===== БАЗОВЫЕ СТИЛИ BODY ===== */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: var(--body-size, 14px);
    line-height: var(--body-lh, 1.75);
    color: var(--body-color, #6E7070);
    background-color: var(--bg-body, #fff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.sidebar-open {
    overflow: hidden;
}

/* ===== ГЛОБАЛЬНЫЙ КОНТЕЙНЕР ===== */
.container {
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
    padding: 0 var(--container-pad, 15px);
    width: 100%;
}

/* ===== БАЗОВЫЕ СБРОСЫ ДЛЯ МЕДИА ===== */
img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== БАЗОВЫЕ ССЫЛКИ ===== */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast, 0.2s ease);
}

a:hover {
    color: var(--color-accent-dark, #e6b000);
}

/* ===== БАЗОВЫЕ ЗАГОЛОВКИ ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, "Manrope", sans-serif);
    font-weight: 700;
    color: #000;
    margin-top: 0;
    line-height: 1.2;
}

h1 { font-size: var(--h1-size, 38px); margin-bottom: 20px; }
h2 { font-size: var(--h2-size, 48px); margin-bottom: 18px; }
h3 { font-size: var(--h3-size, 32px); margin-bottom: 16px; }
h4 { font-size: var(--h4-size, 30px); margin-bottom: 14px; }
h5 { font-size: var(--h5-size, 24px); margin-bottom: 12px; }
h6 { font-size: var(--h6-size, 20px); margin-bottom: 10px; }

/* ===== УТИЛИТАРНЫЕ КЛАССЫ ДЛЯ ТЕКСТА ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-accent { color: var(--color-accent, #ffd500); }
.text-red { color: var(--color-red, #e30613); }

/* ===== ОТСТУПЫ МЕЖДУ СЕКЦИЯМИ ===== */
.hero-slider,
.page-header,
.search-bar,
.services-section,
.product-slider-section,
.banners-section,
.info-section,
.contacts-section,
.catalog-section,
.favorites-section,
.compare-section,
.news-section,
.pages-catalog-section,
.news-catalog-section,
.page-detail-section,
.page-content-section {
    margin-bottom: var(--space-3xl, 40px);
}

.news-section:last-of-type,
.page-content-section:last-of-type,
.contacts-section:last-of-type,
.catalog-section:last-of-type,
.favorites-section:last-of-type,
.compare-section:last-of-type {
    margin-bottom: 0;
}

.page-header + .search-bar {
    margin-top: 0;
}

.search-bar + section {
    margin-top: 0;
}

/* Адаптивные отступы для планшетов */
@media (max-width: 991px) {
    .hero-slider, .page-header, .search-bar, .services-section, .product-slider-section,
    .banners-section, .info-section, .contacts-section, .catalog-section, .favorites-section,
    .compare-section, .news-section, .pages-catalog-section, .news-catalog-section,
    .page-detail-section, .page-content-section {
        margin-bottom: var(--space-2xl, 30px);
    }
}

/* Адаптивные отступы для мобильных */
@media (max-width: 767px) {
    .hero-slider, .page-header, .search-bar, .services-section, .product-slider-section,
    .banners-section, .info-section, .contacts-section, .catalog-section, .favorites-section,
    .compare-section, .news-section, .pages-catalog-section, .news-catalog-section,
    .page-detail-section, .page-content-section {
        margin-bottom: var(--space-xl, 25px);
    }
}

/* ===== УТИЛИТЫ ДЛЯ ИКОНОК И ТРАНСФОРМАЦИЙ ===== */
.flip-x {
    transform: scaleX(-1);
}
.icon-align-top {
    flex-shrink: 0;
    margin-top: 2px;
}
/* === bento-categories.css === */
/* Version: v2.8.0 | Path: styles/bento-categories.css */
/* ===== СТИЛИ ДЛЯ BENTO-СЕТКИ КАТЕГОРИЙ ===== */
/* v2.8: Текст по центру кнопки изначально, при hover уходит вправо */
/* v2.7: Обновлены hover-эффекты кнопок (Квадрат слева, прямые углы, высота 56px) */
/* v2.6: Обновлены hover-эффекты кнопок (Вариант А: фиксированная зона наведения) */
/* v2.5: Фоновое изображение WebP вместо SVG-паттернов */
.bento-categories-section {
position: relative;
padding: var(--bento-section-padding, 80px) 0;
overflow: hidden;
isolation: isolate;
}

/* ===== 🆕 v2.5: ТЁМНЫЙ ФОН С ИЗОБРАЖЕНИЕМ ===== */
.bento-categories-section--dark {
background-color: var(--bento-dark-bg-start, #0a0a0a);
background-image: var(--bento-bg-image, none);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 90%;
}

/* ===== ЗАГОЛОВОК СЕКЦИИ ===== */
.bento-section-header {
position: relative;
z-index: 3;
text-align: center;
margin-bottom: 60px;
}

.bento-section-label {
display: inline-block;
padding: 6px 18px;
background: rgba(255, 213, 0, 0.15);
border: 1px solid rgba(255, 213, 0, 0.4);
color: var(--color-accent);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 30px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}

.bento-section-title {
font-family: var(--font-heading);
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
line-height: 1.1;
margin: 0 0 16px;
color: var(--text-white);
letter-spacing: -1px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.bento-section-subtitle {
font-family: var(--font-body);
font-size: clamp(15px, 1.8vw, 18px);
color: rgba(255, 255, 255, 0.7);
margin: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}

/* ===== КОНТЕЙНЕР ===== */
.bento-container {
position: relative;
z-index: 3;
max-width: var(--container-max, 1250px);
margin: 0 auto;
padding: 0 var(--container-pad, 15px);
}

/* ===== BENTO-СЕТКА ===== */
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 320px);
gap: 20px;
}

.bento-tile-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-tile-2 { grid-column: 3 / 4; grid-row: 1 / 2; }
.bento-tile-3 { grid-column: 4 / 5; grid-row: 1 / 2; }
.bento-tile-4 { grid-column: 3 / 5; grid-row: 2 / 3; }

/* ===== ПЛИТКА ===== */
.bento-tile {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
text-decoration: none;
color: #fff;
border-radius: var(--radius-md, 8px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0  0 1px rgba(255, 255, 255, 0.08);
transition:
transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.5s ease;
}

.bento-tile:hover {
transform: translateY(-8px);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(255, 213, 0, 0.3),
0 0 40px rgba(255, 213, 0, 0.15);
z-index: 2;
}

.bento-bg {
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 0;
transform: scale(1.08);
}

.bento-tile:hover .bento-bg {
transform: scale(1.15);
}

.bento-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.5) 40%,
rgba(0, 0, 0, 0.2) 70%,
transparent 100%
);
z-index: 1;
transition: background 0.5s ease;
}

.bento-tile:hover .bento-overlay {
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.6) 45%,
rgba(0, 0, 0, 0.25) 75%,
transparent 100%
);
}

.bento-category-badge {
display: inline-block;
padding: 4px 12px;
background: rgba(255, 213, 0, 0.95);
color: #000;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 4px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(255, 213, 0, 0.4);
}

.bento-content {
position: relative;
z-index: 2;
padding: 32px;
width: 100%;
}

.bento-title {
font-family: var(--font-heading);
font-size: var(--h3-size, 32px);
font-weight: 800;
margin: 0 0 12px;
line-height: 1.1;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
letter-spacing: -0.5px;
}

.bento-tile-2 .bento-title,
.bento-tile-3 .bento-title {
font-size: var(--h5-size, 24px);
}

.bento-text {
font-family: var(--font-body);
font-size: var(--body-size, 14px);
line-height: 1.5;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.9);
max-width: 400px;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

/* ===== 🆕 v2.8: КНОПКА КАТЕГОРИИ (ТЕКСТ ПО ЦЕНТРУ, КВАДРАТ СЛЕВА) ===== */
.bento-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 180px;
height: 56px;
padding: 0 32px;
background: var(--color-accent, #ffd500);
color: var(--color-primary, #000);
font-family: var(--font-body);
font-size: var(--btn-size, 14px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
border-radius: 0;
overflow: hidden;
cursor: pointer;
transition: background 0.4s cubic-bezier(0.65, 0, 0.35, 1);
z-index: 1;
}

/* Псевдоэлемент для квадратной подложки (появляется слева) */
.bento-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 56px;
height: 56px;
background: var(--color-accent, #ffd500);
border-radius: 0;
transform: scale(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease;
z-index: 1;
box-shadow: 0 0 0 rgba(255, 213, 0, 0);
}

.bento-btn .btn-text,
.bento-btn .btn-arrow {
position: relative;
z-index: 2;
transition: opacity 0.3s ease, transform 0.3s ease;
}

.bento-btn .btn-text {
white-space: nowrap;
}

.bento-btn .btn-arrow {
position: absolute;
left: 28px;
top: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
width: 22px;
height: 22px;
stroke: var(--color-primary, #000);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Hover-эффект кнопки */
.bento-tile:hover .bento-btn {
background: transparent;
}

.bento-tile:hover .bento-btn::after {
transform: scale(1);
box-shadow:
0 12px 32px rgba(255, 213, 0, 0.5),
0 0 40px rgba(255, 213, 0, 0.4);
}

.bento-tile:hover .bento-btn .btn-text {
opacity: 0;
transform: translateX(20px);
}

.bento-tile:hover .bento-btn .btn-arrow {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1024px) {
.bento-categories-section {
padding: 60px 0;
}
.bento-categories-section--dark {
background-size: auto 60%;
background-position: right bottom;
}
.bento-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.bento-tile-1 { grid-column: 1 / 3; grid-row: auto; min-height: 400px; }
.bento-tile-2 { grid-column: 1 / 2; grid-row: auto; min-height: 280px; }
.bento-tile-3 { grid-column: 2 / 3; grid-row: auto; min-height: 280px; }
.bento-tile-4 { grid-column: 1 / 3; grid-row: auto; min-height: 280px; }
.bento-section-header {
margin-bottom: 40px;
}
.bento-btn {
height: 48px;
padding: 0 24px;
}
.bento-btn::after {
width: 48px;
height: 48px;
}
.bento-btn .btn-arrow {
left: 24px;
width: 20px;
height: 20px;
}
}

@media (max-width: 767px) {
.bento-categories-section {
padding: 50px 0;
}
.bento-categories-section--dark {
background-size: auto 40%;
background-position: right bottom;
}
.bento-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.bento-tile-1,
.bento-tile-2,
.bento-tile-3,
.bento-tile-4 {
grid-column: 1 / -1;
min-height: 300px;
}
.bento-content {
padding: 24px;
}
.bento-title {
font-size: var(--h4-size, 28px);
}
.bento-tile-2 .bento-title,
.bento-tile-3 .bento-title {
font-size: var(--h4-size, 28px);
}
.bento-tile:hover {
transform: translateY(-2px);
}
.bento-section-header {
margin-bottom: 32px;
}
.bento-section-label {
font-size: 11px;
padding: 5px 14px;
letter-spacing: 1.5px;
}
.bento-btn {
height: 44px;
padding: 0 20px;
}
.bento-btn::after {
width: 44px;
height: 44px;
}
.bento-btn .btn-arrow {
left: 22px;
width: 18px;
height: 18px;
}
}

@media (max-width: 480px) {
.bento-categories-section {
padding: 40px 0;
}
.bento-categories-section--dark {
background-size: auto 30%;
background-position: right bottom;
}
.bento-tile {
min-height: 260px;
}
.bento-content {
padding: 20px;
}
.bento-category-badge {
font-size: 10px;
padding: 3px 10px;
margin-bottom: 10px;
}
.bento-title {
font-size: 24px !important;
margin-bottom: 8px;
}
.bento-text {
font-size: 13px;
margin-bottom: 18px;
}
.bento-btn {
min-width: 160px;
height: 40px;
padding: 0 16px;
font-size: 12px;
}
.bento-btn::after {
width: 40px;
height: 40px;
}
.bento-btn .btn-arrow {
left: 20px;
width: 16px;
height: 16px;
}
}

/* ===== ОТКЛЮЧЕНИЕ АНИМАЦИЙ ===== */
@media (prefers-reduced-motion: reduce) {
.bento-tile,
.bento-bg,
.bento-overlay,
.bento-btn,
.bento-btn::after,
.bento-btn .btn-text,
.bento-btn .btn-arrow {
transition: none !important;
}
.bento-tile:hover {
transform: none !important;
}
.bento-tile:hover .bento-bg {
transform: scale(1.08) !important;
}
.bento-tile:hover .bento-btn::after {
transform: scale(1) !important;
}
.bento-tile:hover .bento-btn .btn-text {
transform: translateX(20px) !important;
}
.bento-tile:hover .bento-btn .btn-arrow {
transform: translate(-50%, -50%) scale(1) !important;
}
}
/* === catalog-section.css === */
/* Version: v1.2.0 | Path: css/catalog-section.css */
/* ===== СТИЛИ ДЛЯ СЕКЦИИ КАТАЛОГА (catalog-section) ===== */
/* v1.1: Улучшены hover-эффекты (Soft UI без скруглений) */
/* v1.2: Добавлен сайдбар с деревом категорий и адаптивная сетка */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.catalog-section {
    padding: 50px 0 60px;
    background: var(--bg-white, #fff);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* ===== LAYOUT WITH SIDEBAR ===== */
.catalog-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.catalog-sidebar {
    flex: 0 0 280px;
    background: #fff;
    border: 1px solid var(--bg-border, #eee);
    padding: 20px;
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.catalog-sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent, #ffd500);
}

.catalog-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.catalog-sidebar-list--root {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.catalog-sidebar-item {
    margin-bottom: 5px;
}

.catalog-sidebar-link {
    display: block;
    padding: 10px 15px;
    color: var(--text-primary, #333);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-radius: 4px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.catalog-sidebar-link:hover {
    background: var(--bg-light, #f9f9f9);
    color: var(--color-accent-dark, #e6b000);
    border-left-color: var(--color-accent, #ffd500);
}

.catalog-sidebar-item--active > .catalog-sidebar-link {
    background: var(--color-accent, #ffd500);
    color: #000;
    font-weight: 700;
    border-left-color: #000;
}

.catalog-sidebar-item--active > .catalog-sidebar-link:hover {
    background: var(--color-accent-hover, #ffea00);
    color: #000;
}

/* Nested lists */
.catalog-sidebar-list:not(.catalog-sidebar-list--root) {
    margin-top: 5px;
    margin-left: 15px;
    border-left: 1px solid var(--bg-border-light, #e0e0e0);
    padding-left: 10px;
}

.catalog-sidebar-list:not(.catalog-sidebar-list--root) .catalog-sidebar-link {
    font-size: 14px;
    font-weight: 400;
    padding: 8px 12px;
}

.catalog-main {
    flex: 1;
    min-width: 0;
}

/* ===== ЗАГОЛОВОК СЕКЦИИ ===== */
.catalog-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
    margin-bottom: 30px;
}

/* ===== СЕТКА КАТАЛОГА ===== */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* ===== КАРТОЧКА ТОВАРА ===== */
.catalog-card {
    background: #fff;
    border: 1px solid var(--text-inverse, rgba(240, 240, 255, 0.85));
    position: relative;
    transition:
        border-color var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        box-shadow var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        transform var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
}

/* v1.1: Улучшенный hover-эффект с подъёмом и тенью */
.catalog-card:hover {
    border-color: var(--title-color, #ffcc00);
    box-shadow:
        0 0 0 1px var(--title-color, #ffcc00),
        var(--shadow-soft-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
    transform: translateY(-8px);
    z-index: 2;
}

/* ===== ИЗОБРАЖЕНИЕ ТОВАРА ===== */
.catalog-card-img {
    position: relative;
    height: 220px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.catalog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* v1.1: Увеличенное масштабирование при hover */
.catalog-card:hover .catalog-card-img img {
    transform: scale(1.05);
}

/* Эффект блика на изображении */
.catalog-card-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: var(--shine-w, 50%);
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, var(--shine-o, 0.3)) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 60%);
    transform: skewX(var(--shine-skew, -25deg));
    z-index: 1;
    pointer-events: none;
    transition: none;
}

.catalog-card:hover .catalog-card-img::before {
    animation: catalogShine 0.7s ease-in-out forwards;
}

@keyframes catalogShine {
    0% { left: -60%; }
    100% { left: 120%; }
}

/* ===== КНОПКА "В ИЗБРАННОЕ" ===== */
.catalog-fav-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all var(--transition-fast, 0.2s ease);
    box-shadow: var(--shadow-soft-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.catalog-fav-btn svg {
    width: 18px;
    height: 18px;
    stroke: #333;
    fill: none;
    stroke-width: 2;
    transition: all var(--transition-fast, 0.2s ease);
}

/* v1.1: Улучшенный hover для кнопки избранного */
.catalog-fav-btn:hover {
    background: var(--color-accent, #ffd500);
    box-shadow: var(--shadow-accent-sm, 0 4px 12px rgba(255, 213, 0, 0.15));
    transform: scale(1.1);
}

.catalog-fav-btn:hover svg {
    stroke: #000;
    fill: rgba(0, 0, 0, 0.1);
}

/* ===== БЕЙДЖИ НА ТОВАРЕ ===== */
.catalog-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.catalog-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1;
    white-space: nowrap;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: padding-right 0.3s ease, max-width 0.3s ease;
    min-height: 20px;
}

/* Бейдж "АКЦИЯ" */
.catalog-badge--action {
    background: var(--color-red, #e30613);
    color: #fff;
}

.catalog-badge--action::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: var(--shine-w, 50%);
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.2) 55%, transparent 60%);
    transform: skewX(var(--shine-skew, -25deg));
    animation: badgeShine 2s ease-in-out infinite;
}

@keyframes badgeShine {
    0% { left: -60%; }
    100% { left: 120%; }
}

/* Бейдж "ГАРАНТИЯ" */
.catalog-badge--guarantee {
    background: #1a1a1a;
    color: var(--color-accent, #ffd500);
    font-size: 10px;
    min-height: 20px;
}

/* Бейдж "РАССРОЧКА" */
.catalog-badge--installment {
    background: var(--color-accent, #ffd500);
    color: #000;
    font-size: 10px;
    min-height: 20px;
}

/* Бейдж "НОВИНКА" */
.catalog-badge--new {
    background: #000;
    color: #fff;
    font-size: 10px;
    min-height: 20px;
}

/* Анимация расширения бейджей при ховере */
.catalog-card:hover .catalog-badge {
    padding-right: 16px;
}

.catalog-card:hover .catalog-badge--action {
    transition-delay: 0s;
    padding-right: 18px;
}

.catalog-card:hover .catalog-badge--guarantee {
    transition-delay: 0.08s;
    padding-right: 16px;
}

.catalog-card:hover .catalog-badge--installment {
    transition-delay: 0.16s;
    padding-right: 18px;
}

.catalog-card:hover .catalog-badge--new {
    transition-delay: 0s;
    padding-right: 18px;
}

/* ===== КОНТЕНТ КАРТОЧКИ ===== */
.catalog-card-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    text-align: center;
}

/* Заголовок товара */
.catalog-card-title {
    background: var(--color-accent, #ffd500);
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: 1.35;
    min-height: 52px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    width: 100%;
    justify-content: center;
    transition: background var(--transition-fast, 0.2s ease);
}

/* v1.1: Изменение цвета заголовка при hover */
.catalog-card:hover .catalog-card-title {
    background: var(--color-accent-hover, #ffea00);
}

/* Блок с ценами */
.catalog-card-prices {
    padding: 12px 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.catalog-price-label {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-bottom: 2px;
}

.catalog-price-current {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-red, #e30613);
    line-height: 1.2;
}

.catalog-price-current.no-discount {
    color: var(--text-primary, #333);
}

.catalog-price-old-wrap {
    margin-top: 4px;
}

.catalog-price-old-label {
    font-size: 11px;
    color: var(--text-muted, #999);
}

.catalog-price-old {
    font-size: 14px;
    color: var(--text-muted, #999);
    text-decoration: line-through;
    font-weight: 500;
}

/* ===== ДЕЙСТВИЯ С ТОВАРОМ ===== */
.catalog-card-actions {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    width: 100%;
}

.catalog-card-actions-row {
    display: flex;
    gap: 6px;
    width: 100%;
}

.catalog-card-actions-row > * {
    flex: 1;
    min-width: 0;
}

/* ===== ПОДСКАЗКИ (TOOLTIP) ===== */
.tooltip-wrap {
    position: relative;
    width: 100%;
}

.tooltip-wrap .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    font-size: 11px;
    padding: 6px 10px;
    white-space: nowrap;
    border-radius: 3px;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    font-family: var(--font-body, "Inter", sans-serif);
}

.tooltip-wrap .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #222;
}

.tooltip-wrap:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ===== КНОПКИ ДЕЙСТВИЙ ===== */
/* Кнопка "В корзину" */
.btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-accent, #ffd500);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body, "Inter", sans-serif);
    transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    border-radius: 0;
    color: #000;
}

/* v1.1: Улучшенный hover для кнопки корзины */
.btn-cart:hover {
    background: var(--color-accent-hover, #ffea00);
    box-shadow: var(--shadow-accent-md, 0 8px 24px rgba(255, 213, 0, 0.20));
    transform: translateY(-2px);
}

.btn-cart:active {
    transform: translateY(0);
    box-shadow: var(--shadow-accent-sm, 0 4px 12px rgba(255, 213, 0, 0.15));
}

.btn-cart svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast, 0.2s ease);
}

/* v1.1: Анимация иконки при hover */
.btn-cart:hover svg {
    transform: scale(1.1);
}

/* Кнопка "Рассрочка" */
.btn-installment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--color-red, #e30613);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body, "Inter", sans-serif);
    transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    border-radius: 0;
    color: var(--color-red, #e30613);
    white-space: nowrap;
    width: 100%;
}

/* v1.1: Улучшенный hover для кнопки рассрочки */
.btn-installment:hover {
    background: var(--color-red, #e30613);
    color: #fff;
    box-shadow: 0 4px 12px rgba(227, 6, 19, 0.25);
    transform: translateY(-2px);
}

.btn-installment:active {
    transform: translateY(0);
}

.btn-installment svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Кнопка "Лизинг" */
.btn-leasing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--color-green, #2a8a2a);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body, "Inter", sans-serif);
    transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    border-radius: 0;
    color: var(--color-green, #2a8a2a);
    white-space: nowrap;
    width: 100%;
}

/* v1.1: Улучшенный hover для кнопки лизинга */
.btn-leasing:hover {
    background: var(--color-green, #2a8a2a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(42, 138, 42, 0.25);
    transform: translateY(-2px);
}

.btn-leasing:active {
    transform: translateY(0);
}

.btn-leasing svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Кнопка "Сравнить" */
.btn-compare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-accent, #ffd500);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body, "Inter", sans-serif);
    transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    border-radius: 0;
    color: #000;
}

/* v1.1: Улучшенный hover для кнопки сравнения */
.btn-compare:hover {
    background: var(--color-accent-hover, #ffea00);
    box-shadow: var(--shadow-accent-md, 0 8px 24px rgba(255, 213, 0, 0.20));
    transform: translateY(-2px);
}

.btn-compare:active {
    transform: translateY(0);
}

.btn-compare svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast, 0.2s ease);
}

/* v1.1: Анимация иконки при hover */
.btn-compare:hover svg {
    transform: rotate(15deg) scale(1.1);
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1200px) {
    .catalog-main .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .catalog-layout {
        flex-direction: column;
    }
    .catalog-sidebar {
        flex: none;
        width: 100%;
        position: static;
        max-height: none;
        margin-bottom: 30px;
    }
    .catalog-sidebar-list--root {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .catalog-sidebar-list:not(.catalog-sidebar-list--root) {
        grid-column: 1 / -1;
        margin-left: 0;
        border-left: none;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
}

@media (max-width: 767px) {
    .catalog-section {
        padding: 40px 0 50px;
    }
    .catalog-section-title {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .catalog-main .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .catalog-card-img {
        height: 180px;
    }
    .catalog-card-title {
        font-size: 14px;
        padding: 8px 10px;
        min-height: 44px;
    }
    .catalog-price-current {
        font-size: 18px;
    }
    .catalog-price-old {
        font-size: 13px;
    }
    .catalog-card-actions-row {
        flex-direction: column;
    }
    .catalog-card-actions-row > * {
        width: 100%;
    }
    .btn-cart,
    .btn-compare {
        padding: 8px 12px;
        font-size: 12px;
    }
    .btn-installment,
    .btn-leasing {
        padding: 6px 8px;
        font-size: 10px;
    }
    /* v1.1: Уменьшенный подъём на мобильных */
    .catalog-card:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 575px) {
    .catalog-sidebar-list--root,
    .catalog-sidebar-list:not(.catalog-sidebar-list--root) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .catalog-section {
        padding: 30px 0 40px;
    }
    .catalog-section-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .catalog-main .catalog-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .catalog-card-img {
        height: 220px;
    }
    .catalog-card-title {
        font-size: 15px;
        min-height: 50px;
    }
    .catalog-price-current {
        font-size: 20px;
    }
    /* v1.1: Уменьшенный подъём на маленьких экранах */
    .catalog-card:hover {
        transform: translateY(-2px);
    }
}
/* === contacts.css === */
/**
 * Стили для страницы Контактов (Contacts Page)
 * Адаптировано с сайта-донора STELSMOTO
 */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.contacts-section {
    padding: 40px 0 60px;
    background: var(--bg-white, #fff);
}

/* ===== БЛОК ТЕЛЕФОНОВ ===== */
.contacts-phones-block {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.phone-link-large {
    color: var(--color-accent-dark, #e6b000);
    text-decoration: none;
    transition: color var(--transition-fast, 0.2s ease);
}

.phone-link-large:hover {
    color: var(--color-accent, #ffd500);
}

/* ===== БЛОК ИНФОРМАЦИИ (АДРЕС, ГРАФИК) ===== */
.contacts-info-block {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.contacts-info-icon {
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    font-size: 24px;
    line-height: 1;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 767px) {
    .contacts-section {
        padding: 30px 0 40px;
    }
    .contacts-phones-block {
        font-size: 18px;
    }
    .contacts-info-block {
        gap: 10px;
    }
    .contacts-info-icon {
        width: 24px;
        font-size: 20px;
    }
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ КЛАССЫ ДЛЯ КОНТАКТОВ ===== */
.contacts-grid {
    margin-bottom: 40px;
}
.contacts-info-block-flex {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.contacts-info-icon-flex {
    flex-shrink: 0;
    width: 32px;
    text-align: center;
    font-size: 24px;
    line-height: 1;
}
.contacts-map-iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: none;
    border-radius: var(--radius-md, 12px);
}
/* === cookie-consent.css === */
/* ===== УВЕДОМЛЕНИЕ О COOKIE (COOKIE CONSENT) ===== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111111;
    color: #cccccc;
    z-index: 10000; /* Поднят выше плавающих кнопок (9999) */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    padding: 15px 0;
}

.cookie-consent .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
}

.cookie-consent a {
    color: var(--color-accent, #ffd500);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.cookie-consent a:hover {
    color: #ffffff;
}

.cookie-text {
    flex: 1;
    margin: 0;
}

.cookie-text b {
    font-weight: 600;
    color: #ffffff;
}

.cookie-btn {
    background-color: var(--color-accent, #ffd500);
    color: #000000;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-family: var(--font-body, "Inter", sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.cookie-btn:hover {
    background-color: var(--color-accent-hover, #ffea00);
    transform: translateY(-1px);
}

.cookie-btn:active {
    transform: translateY(0);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 767px) {
    .cookie-consent .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .cookie-btn {
        width: 100%;
        text-align: center;
    }
}

/* ===== АДАПТАЦИЯ ПЛАВАЮЩИХ КНОПОК ПОД COOKIE BAR ===== */
body.cookie-bar-visible .social-floating-btn,
body.cookie-bar-visible .floating-actions {
    bottom: 90px !important;
    transition: bottom 0.3s ease;
}

@media (max-width: 767px) {
    body.cookie-bar-visible .social-floating-btn,
    body.cookie-bar-visible .floating-actions {
        bottom: 160px !important;
    }
}
/* === editor-content.css === */
/* Version: v2.0.0 | Path: css/editor-content.css */

/* ===== ПОДКЛЮЧАЕМ ПЕРЕМЕННЫЕ ИЗ STYLES.CSS ===== */
/* Эти переменные берутся из :root в styles.css */
/* Если переменные не определены, используются значения по умолчанию */

/* ===== БАЗОВЫЕ СТИЛИ ДЛЯ КОНТЕНТА РЕДАКТОРА ===== */
/* Эти стили применяются ТОЛЬКО к контенту внутри .page-content */
.page-content {
    /* Основные настройки */
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: var(--body-size, 16px);
    line-height: var(--body-lh, 1.6);
    color: var(--body-color, #6E7070);
    word-wrap: break-word;
}

/* ===== ЗАГОЛОВКИ (используем переменные) ===== */
.page-content h1 {
    font-size: var(--h1-size, 54px);
    font-weight: 700;
    color: #000;
    margin: 1.5em 0 0.5em;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: var(--h1-lh, 1.18);
    position: relative;
    padding-bottom: 12px;
}
.page-content h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--color-accent, #ffd500);
}
.page-content h2 {
    font-size: var(--h2-size, 48px);
    font-weight: 700;
    color: #000;
    margin: 1.4em 0 0.5em;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: var(--h2-lh, 1.2);
    position: relative;
    padding-bottom: 10px;
}
.page-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--color-accent, #ffd500);
}
.page-content h3 {
    font-size: var(--h3-size, 32px);
    font-weight: 700;
    color: #000;
    margin: 1.3em 0 0.5em;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: var(--h3-lh, 1.28);
}
.page-content h4 {
    font-size: var(--h4-size, 30px);
    font-weight: 700;
    color: #000;
    margin: 1.2em 0 0.5em;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: var(--h4-lh, 1.33);
}
.page-content h5 {
    font-size: var(--h5-size, 24px);
    font-weight: 700;
    color: #000;
    margin: 1.1em 0 0.5em;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: var(--h5-lh, 1.42);
}
.page-content h6 {
    font-size: var(--h6-size, 20px);
    font-weight: 700;
    color: var(--color-accent-dark, #e6b000);
    margin: 1em 0 0.5em;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: var(--h6-lh, 1.5);
    text-transform: uppercase;
}

/* ===== ПАРАГРАФЫ И БАЗОВЫЕ БЛОКИ ===== */
.page-content p {
    margin-bottom: 1.2em;
    font-size: var(--body-size, 14px);
    line-height: var(--body-lh, 1.75);
    color: var(--body-color, #6E7070);
}
.page-content div:not([class*="wysiwyg-grid"]) {
    margin-bottom: 0.5em;
}

/* ===== СПИСКИ (улучшенные маркеры) ===== */
.page-content ul,
.page-content ol {
    margin: 1em 0;
    padding-left: 1.5em;
}
.page-content li {
    margin-bottom: 0.5em;
    line-height: var(--body-lh, 1.75);
    font-size: var(--body-size, 14px);
    color: var(--body-color, #6E7070);
}
.page-content ul {
    list-style-type: none;
}
.page-content ul li {
    position: relative;
    padding-left: 24px;
}
.page-content ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-accent, #ffd500);
    font-size: 14px;
}
.page-content ol {
    list-style-type: none;
    counter-reset: item;
}
.page-content ol li {
    position: relative;
    padding-left: 28px;
    counter-increment: item;
}
.page-content ol li::before {
    content: counter(item) '.';
    position: absolute;
    left: 0;
    color: var(--color-accent, #ffd500);
    font-weight: 700;
}

/* ===== ССЫЛКИ (улучшенные) ===== */
.page-content a {
    color: var(--color-accent-dark, #e6b000);
    text-decoration: none;
    transition: all var(--transition-fast, 0.2s ease);
    border-bottom: 1px solid transparent;
}
.page-content a:hover {
    color: var(--color-accent, #ffd500);
    border-bottom-color: var(--color-accent, #ffd500);
}

/* ===== ТЕКСТ (жирный, курсив, подчеркнутый) ===== */
.page-content b,
.page-content strong {
    font-weight: 700;
    color: #000;
}
.page-content i,
.page-content em {
    font-style: italic;
}
.page-content u {
    text-decoration: underline;
}

/* ===== ИЗОБРАЖЕНИЯ (улучшенные) ===== */
.page-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
    transition: transform var(--transition-normal, 0.25s ease), box-shadow var(--transition-normal, 0.25s ease);
}
.page-content img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.15));
}
.page-content figure {
    margin: 1.5em 0;
    text-align: center;
}
.page-content figcaption {
    font-size: var(--caption-size, 13px);
    color: var(--text-muted, #999);
    margin-top: 8px;
    line-height: var(--caption-lh, 1.4);
}

/* ===== ТАБЛИЦЫ (с горизонтальным скроллом) ===== */
.page-content .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5em 0;
    border-radius: var(--radius-md, 12px);
}
.page-content table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--body-size, 14px);
    background: var(--bg-white, #fff);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.05));
}
.page-content th,
.page-content td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bg-border, #eee);
}
.page-content th {
    background: linear-gradient(135deg, var(--bg-lighter, #f5f5f5) 0%, var(--bg-light, #f9f9f9) 100%);
    font-weight: 700;
    color: #000;
    font-size: var(--body-size, 14px);
    border-bottom: 2px solid var(--color-accent, #ffd500);
}
.page-content tr:last-child td {
    border-bottom: none;
}
.page-content tr:hover td {
    background: rgba(255, 213, 0, 0.05);
}
.page-content table {
    border: 1px solid var(--bg-border, #eee);
}
.page-content th:first-child {
    border-top-left-radius: var(--radius-md, 12px);
}
.page-content th:last-child {
    border-top-right-radius: var(--radius-md, 12px);
}
.page-content tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md, 12px);
}
.page-content tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md, 12px);
}

/* ===== АДАПТИВНЫЕ СЕТКИ (WYSIWYG-GRID) - УЛУЧШЕННАЯ ВЕРСИЯ ===== */

/* Десктоп: стандартное поведение */
.wysiwyg-grid {
    display: grid;
    gap: 25px;
    margin: 30px 0;
}

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

.wysiwyg-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.wysiwyg-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.wysiwyg-grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.wysiwyg-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.wysiwyg-grid-7 {
    grid-template-columns: repeat(7, 1fr);
}

.wysiwyg-grid-8 {
    grid-template-columns: repeat(8, 1fr);
}

/* Планшеты и маленькие ноутбуки (992px - 1199px) */
@media (max-width: 1199px) {
    .wysiwyg-grid {
        gap: 20px;
    }
    
    .wysiwyg-grid-5,
    .wysiwyg-grid-6,
    .wysiwyg-grid-7,
    .wysiwyg-grid-8 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Планшеты вертикальные (768px - 991px) */
@media (max-width: 991px) {
    .wysiwyg-grid {
        gap: 15px;
        margin: 25px 0;
    }
    
    .wysiwyg-grid-4,
    .wysiwyg-grid-5,
    .wysiwyg-grid-6,
    .wysiwyg-grid-7,
    .wysiwyg-grid-8 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Мобильные телефоны (576px - 767px) - 1 колонка */
@media (max-width: 767px) {
    .wysiwyg-grid {
        gap: 12px !important;
        margin: 20px 0 !important;
    }
    
    /* ВСЕ сетки в 1 колонку на телефонах */
    .wysiwyg-grid-2,
    .wysiwyg-grid-3,
    .wysiwyg-grid-4,
    .wysiwyg-grid-5,
    .wysiwyg-grid-6,
    .wysiwyg-grid-7,
    .wysiwyg-grid-8 {
        grid-template-columns: 1fr !important;
    }
    
    .wysiwyg-grid__item {
        padding: 15px !important;
    }
}

/* Маленькие телефоны (до 480px) */
@media (max-width: 480px) {
    .wysiwyg-grid {
        gap: 10px !important;
        margin: 15px 0 !important;
    }
    
    .wysiwyg-grid__item {
        padding: 12px !important;
    }
}

/* Элемент сетки (улучшенный) */
.wysiwyg-grid__item {
    background: var(--bg-white, #fff);
    border: 1px solid var(--bg-border, #eee);
    padding: var(--space-xl, 25px);
    border-radius: var(--radius-md, 12px);
    transition: all var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.02));
}
.wysiwyg-grid__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 12px 24px rgba(0,0,0,0.1));
    border-color: var(--color-accent, #ffd500);
}
.wysiwyg-grid__item p {
    margin-bottom: 0;
}
.wysiwyg-grid__item h2,
.wysiwyg-grid__item h3,
.wysiwyg-grid__item h4 {
    margin-top: 0;
}
.wysiwyg-grid__item h2::after,
.wysiwyg-grid__item h3::after {
    left: 0;
}

/* ===== КАРТОЧКИ (для контента) ===== */
.page-content .card {
    background: var(--bg-white, #fff);
    border: 1px solid var(--bg-border, #eee);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-lg, 20px);
    transition: all var(--transition-normal, 0.25s ease);
}
.page-content .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 8px 20px rgba(0,0,0,0.1));
    border-color: var(--color-accent, #ffd500);
}
.page-content .card-title {
    font-size: var(--h5-size, 18px);
    font-weight: 700;
    margin-bottom: var(--space-md, 12px);
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
}
.page-content .card-text {
    font-size: var(--body-size, 14px);
    color: var(--text-secondary, #666);
    line-height: var(--body-lh, 1.75);
}

/* ===== ЦИТАТЫ ===== */
.page-content blockquote {
    margin: 1.5em 0;
    padding: var(--space-lg, 20px) var(--space-xl, 25px);
    background: var(--bg-light, #f9f9f9);
    border-left: 4px solid var(--color-accent, #ffd500);
    font-style: italic;
    color: var(--text-secondary, #666);
    border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
}
.page-content blockquote p {
    margin-bottom: 0;
}
.page-content blockquote footer {
    margin-top: var(--space-sm, 10px);
    font-size: var(--caption-size, 13px);
    color: var(--text-muted, #999);
}

/* ===== КНОПКИ ===== */
.page-content .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--space-sm, 10px) var(--space-xl, 24px);
    background: var(--color-accent, #ffd500);
    color: #000;
    font-weight: 700;
    font-size: var(--btn-size, 15px);
    font-family: var(--font-body, "Inter", sans-serif);
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    transition: all var(--transition-normal, 0.25s ease);
    border: none;
    cursor: pointer;
}
.page-content .btn:hover {
    background: #000;
    color: var(--color-accent, #ffd500);
    transform: translateY(-2px);
}
.page-content .btn-primary {
    background: var(--color-accent, #ffd500);
    color: #000;
}
.page-content .btn-secondary {
    background: transparent;
    border: 2px solid var(--color-accent, #ffd500);
    color: #000;
}
.page-content .btn-secondary:hover {
    background: var(--color-accent, #ffd500);
    color: #000;
}

/* ===== ПРОГРЕСС-БАРЫ И ДИВИДЕРЫ ===== */
.page-content hr {
    margin: var(--space-2xl, 30px) 0;
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--bg-border, #eee), transparent);
}
.page-content .divider {
    width: 100%;
    height: 1px;
    background: var(--bg-border, #eee);
    margin: var(--space-lg, 20px) 0;
}

/* ===== АКЦЕНТНЫЕ БЛОКИ ===== */
.page-content .highlight {
    background: #fffae6;
    border-left: 4px solid var(--color-accent, #ffd500);
    padding: var(--space-md, 15px) var(--space-lg, 20px);
    margin: var(--space-lg, 20px) 0;
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}
.page-content .warning {
    background: #fff0f0;
    border-left: 4px solid var(--color-red, #e30613);
    padding: var(--space-md, 15px) var(--space-lg, 20px);
    margin: var(--space-lg, 20px) 0;
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}
.page-content .info {
    background: #e8f4f8;
    border-left: 4px solid #2196f3;
    padding: var(--space-md, 15px) var(--space-lg, 20px);
    margin: var(--space-lg, 20px) 0;
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ МЕДИА ===== */
@media (max-width: 1199px) {
    .page-content h1 { font-size: var(--h1-size, 54px); }
    .page-content h2 { font-size: var(--h2-size, 36px); }
    .page-content h3 { font-size: var(--h3-size, 30px); }
    .page-content h4 { font-size: var(--h4-size, 24px); }
    .page-content h5 { font-size: var(--h5-size, 20px); }
    .page-content h6 { font-size: var(--h6-size, 16px); }
}
@media (max-width: 767px) {
    .page-content {
        font-size: var(--body-size, 15px);
    }
    .page-content h1 { font-size: var(--h1-size, 40px); }
    .page-content h2 { font-size: var(--h2-size, 34px); }
    .page-content h3 { font-size: var(--h3-size, 26px); }
    .page-content h4 { font-size: var(--h4-size, 22px); }
    .page-content h5 { font-size: var(--h5-size, 18px); }
    .page-content h6 { font-size: var(--h6-size, 16px); }
    
    .page-content th,
    .page-content td {
        padding: var(--space-sm, 10px) var(--space-md, 12px);
        font-size: var(--body-size, 13px);
    }
    
    .page-content blockquote {
        padding: var(--space-md, 15px) var(--space-lg, 20px);
    }
    
    .page-content .card {
        padding: var(--space-md, 15px);
    }
}

@media (max-width: 375px) {
    .page-content h1 { font-size: var(--h1-size, 32px); }
    .page-content h2 { font-size: var(--h2-size, 28px); }
    .page-content h3 { font-size: var(--h3-size, 26px); }
    .page-content h4 { font-size: var(--h4-size, 22px); }
    .page-content h5 { font-size: var(--h5-size, 18px); }
    .page-content h6 { font-size: var(--h6-size, 16px); }
}

@media (max-width: 480px) {
    .page-content {
        font-size: var(--body-size, 14px);
    }
    .page-content h1 { font-size: var(--h1-size, 24px); }
    .page-content h2 { font-size: var(--h2-size, 22px); }
    .page-content h3 { font-size: var(--h3-size, 20px); }
    
    .page-content th,
    .page-content td {
        padding: var(--space-xs, 8px) var(--space-sm, 10px);
        font-size: var(--body-size, 12px);
    }
}

/* ===== УТИЛИТЫ ===== */
.page-content .text-center {
    text-align: center;
}
.page-content .text-right {
    text-align: right;
}
.page-content .text-accent {
    color: var(--color-accent, #ffd500);
}
.page-content .text-red {
    color: var(--color-red, #e30613);
}
.page-content .mt-0 { margin-top: 0; }
.page-content .mb-0 { margin-bottom: 0; }
.page-content .mt-2 { margin-top: var(--space-2xl, 20px); }
.page-content .mb-2 { margin-bottom: var(--space-2xl, 20px); }
.page-content .p-0 { padding: 0; }
.page-content .p-2 { padding: var(--space-2xl, 20px); }
/* === floating-actions.css === */
/**
 * Стили для плавающих кнопок Избранного и Сравнения (Floating Actions)
 * Точная копия с сайта-донора STELSMOTO
 */

/* ===== ПЛАВАЮЩИЕ КНОПКИ ДЛЯ ИЗБРАННОГО И СРАВНЕНИЯ (СЛЕВА) ===== */
.floating-actions {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.floating-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-accent, #ffd500);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.floating-action-btn:hover {
    transform: scale(1.08);
    background: #000000;
}

.floating-action-btn:hover .floating-action-icon svg {
    stroke: #ffffff;
}

.floating-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.floating-action-icon svg {
    width: 24px;
    height: 24px;
    stroke: #000000;
    stroke-width: 2;
    fill: none;
    transition: stroke 0.3s ease;
}

/* Бейдж с количеством */
.floating-action-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    background: var(--color-red, #e30613);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-body, "Inter", sans-serif);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.floating-action-count.has-count {
    opacity: 1;
    transform: scale(1);
}

/* Всплывающая подсказка (tooltip) - справа от кнопки */
.floating-action-tooltip {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    padding: 6px 12px;
    background: #222;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-body, "Inter", sans-serif);
    white-space: nowrap;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

.floating-action-tooltip::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #222;
}

.floating-action-btn:hover .floating-action-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(4px);
}

/* Адаптивность для мобильных */
@media (max-width: 767px) {
    .floating-actions {
        left: 20px;
        bottom: 20px;
        gap: 10px;
    }

    .floating-action-btn {
        width: 42px;
        height: 42px;
    }

    .floating-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .floating-action-count {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .floating-action-tooltip {
        font-size: 11px;
        padding: 4px 10px;
        margin-left: 8px;
    }
}

@media (max-width: 480px) {
    .floating-actions {
        left: 15px;
        bottom: 15px;
        gap: 8px;
    }

    .floating-action-btn {
        width: 38px;
        height: 38px;
    }

    .floating-action-icon svg {
        width: 18px;
        height: 18px;
    }

    .floating-action-count {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        top: -4px;
        right: -4px;
    }

    .floating-action-tooltip {
        display: none;
    }
}
/* === footer-bottom.css === */
/**
* Стили для Footer Bottom (нижняя часть подвала)
* Точная копия с сайта-донора STELSMOTO
*/
/* ===== ОСНОВНОЙ КОНТЕЙНЕР НИЖНЕЙ ЧАСТИ ФУТЕРА ===== */
.footer-bottom {
    background: var(--bg-darker, #0a0a0a);
    padding: 25px 0;
    border-top: 1px solid #1a1a1a;
}

.footer-bottom .container {
    display: flex;
    justify-content: center;
}

/* ===== ЛОГОТИП ===== */
.footer-bottom-logo {
    flex: 0 0 auto;
    text-align: left;
}

.footer-bottom-logo img {
    height: 55px;
    width: auto;
}

/* ===== ЦЕНТРАЛЬНЫЙ БЛОК С ТЕКСТОМ ===== */
.footer-bottom-center {
    flex: 0 0 auto;
    text-align: right;
}

.footer-copyright {
    font-size: var(--fs-sm, 11px);
    color: #ccc;
    margin-bottom: 5px;
}

.footer-copyright a {
    color: #ccc;
}

.footer-disclaimer {
    font-size: var(--fs-sm, 11px);
    color: var(--text-dark, #555);
}

/* ===== ПУСТОЙ БЛОК ДЛЯ БАЛАНСА ===== */
.footer-bottom-empty {
    /* Пустой блок для сохранения структуры при трех колонках */
}

/* ===== АДАПТИВНОСТЬ ===== */
/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .footer-bottom-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-bottom-logo {
        text-align: center;
    }
    
    .footer-bottom-center {
        text-align: center;
    }
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .footer-bottom {
        padding: 20px 0;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .footer-bottom-logo {
        text-align: center;
    }
    
    .footer-bottom-center {
        text-align: center;
    }
    
    .footer-copyright {
        font-size: 11px;
        line-height: 1.5;
    }
    
    .footer-disclaimer {
        font-size: 10px;
        margin-top: 8px;
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .footer-bottom {
        padding: 15px 0;
    }
    
    .footer-bottom-logo img {
        height: 45px;
    }
    
    .footer-copyright {
        font-size: 10px;
    }
    
    .footer-disclaimer {
        font-size: 9px;
    }
}
/* === footer-main.css === */
/**
 * Стили для Footer Main (основная часть подвала)
 * Точная копия с сайта-донора STELSMOTO
 */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ФУТЕРА ===== */
.footer-main {
    background: var(--bg-dark, #0d0d0d);
    padding: var(--space-3xl, 40px) 0 var(--space-2xl, 30px);
    color: var(--text-white, #fff);
}

.footer-main .container {
    display: grid;
    grid-template-columns: 1fr 1fr 2.2fr 1.5fr;
    gap: var(--space-2xl, 30px);
}

/* ===== КОЛОНКИ ФУТЕРА ===== */
.footer-col h4 {
    font-size: var(--h5-size, 24px);
    font-weight: 700;
    color: var(--text-white, #fff);
    margin-bottom: 18px;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

/* ИСПРАВЛЕНИЕ: Убираем стандартные маркеры списка */
.footer-col ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--text-muted, #999);
    font-size: var(--fs-sm, 11px);
    transition: color var(--transition-fast, 0.2s ease);
}

.footer-col ul li a:hover {
    color: var(--text-white, #fff);
}

.footer-col ul li a::before {
    content: '■';
    color: var(--text-dark, #555);
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    margin-right: 6px;
    transform: translateY(-3px);
}

/* ===== БЛОК С РАСПИСАНИЕМ ===== */
.footer-schedule {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-schedule svg {
    flex-shrink: 0;
}

.footer-schedule-text {
    color: var(--text-white, #fff);
    font-size: var(--body-size, 14px);
    font-family: var(--font-body, "Inter", sans-serif);
}

.footer-schedule-text .red-text {
    color: #e63946;
    font-size: var(--body-size, 14px);
    display: block;
    margin-top: 2px;
}

/* ===== БЛОК С ТЕЛЕФОНАМИ ===== */
.footer-phones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
    margin-bottom: 25px;
}

.footer-phone-group {
    margin-bottom: 15px;
}

.footer-phone-label {
    color: var(--color-accent, #ffd500);
    font-size: var(--body-size, 14px);
    font-weight: 500;
    margin-bottom: 4px;
}

.footer-phone-group a {
    color: var(--text-white, #fff);
    font-size: var(--fs-2xl, 20px);
    font-weight: 700;
    display: block;
    transition: color var(--transition-fast, 0.2s ease);
}

.footer-phone-group a:hover {
    color: var(--color-accent, #ffd500);
}

/* ===== БЛОК С АДРЕСОМ ===== */
.footer-address-block {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-address-block svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-address-text {
    font-size: var(--fs-md, 14px);
    color: var(--text-white, #fff);
    line-height: 1.5;
}

.footer-address-text a {
    color: var(--color-accent, #ffd500);
    font-size: var(--fs-md, 14px);
    font-weight: 500;
    border-bottom: 1px dashed var(--color-accent, #ffd500);
    display: inline-block;
    margin-top: 4px;
    transition: color var(--transition-fast, 0.2s ease);
}

.footer-address-text a:hover {
    color: var(--text-white, #fff);
}

/* ===== ПРАВАЯ КОЛОНКА ===== */
.footer-right-col {
    display: flex;
    flex-direction: column;
}

.footer-actions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.footer-actions-title .percent-icon {
    width: 28px;
    height: 28px;
    background: var(--color-accent, #ffd500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #000);
    font-size: var(--fs-md, 14px);
    font-weight: 700;
}

.footer-actions-title h4 {
    margin-bottom: 0;
}

.footer-divider {
    border: none;
    border-top: 1px solid #222;
    margin-bottom: 20px;
}

.footer-social-title {
    color: var(--text-white, #fff);
    font-size: var(--fs-md, 14px);
    font-weight: 500;
    margin-bottom: 15px;
}

.footer-social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-social-icons a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast, 0.2s ease);
}

.footer-social-icons a:hover {
    opacity: 0.7;
}

.footer-social-icons img {
    width: 32px;
    height: 32px;
}

.footer-yandex-rating {
    margin-top: auto;
}

.footer-yandex-rating iframe {
    border: none;
}

/* ===== АДАПТИВНОСТЬ ===== */
/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .footer-main .container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
    
    .footer-col h4 {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }
    
    .footer-col ul li a {
        font-size: 13px !important;
    }
    
    .footer-schedule-text {
        font-size: 13px !important;
    }
    
    .footer-phone-group a {
        font-size: 16px !important;
    }
    
    .footer-address-text {
        font-size: 13px !important;
    }
    
    .footer-actions-title h4 {
        font-size: 18px !important;
    }
    
    .footer-social-title {
        font-size: 14px !important;
    }
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .footer-main {
        padding: 30px 0 20px !important;
    }
    
    .footer-main .container {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .footer-col {
        text-align: center !important;
    }
    
    .footer-col h4 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 2px solid var(--color-accent, #ffd500);
        display: inline-block !important;
    }
    
    .footer-col ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .footer-col ul li a {
        font-size: 13px !important;
    }
    
    /* Блок с расписанием */
    .footer-schedule {
        justify-content: center !important;
    }
    
    .footer-schedule-text {
        font-size: 13px !important;
    }
    
    /* Блок с телефонами */
    .footer-phones {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 15px !important;
    }
    
    .footer-phone-group {
        margin-bottom: 0 !important;
    }
    
    .footer-phone-label {
        font-size: 12px !important;
    }
    
    .footer-phone-group a {
        font-size: 15px !important;
    }
    
    /* Блок с адресом */
    .footer-address-block {
        justify-content: center !important;
    }
    
    .footer-address-text {
        font-size: 12px !important;
        text-align: center !important;
    }
    
    /* Правая колонка */
    .footer-right-col {
        grid-column: span 1 !important;
    }
    
    .footer-actions-title {
        justify-content: center !important;
    }
    
    .footer-actions-title h4 {
        font-size: 16px !important;
        margin-bottom: 0 !important;
    }
    
    .footer-social-icons {
        justify-content: center !important;
    }
    
    .footer-yandex-rating {
        display: flex !important;
        justify-content: center !important;
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .footer-main {
        padding: 25px 0 15px !important;
    }
    
    .footer-main .container {
        gap: 20px !important;
    }
    
    .footer-col h4 {
        font-size: 15px !important;
    }
    
    .footer-col ul li a {
        font-size: 12px !important;
    }
    
    .footer-schedule-text {
        font-size: 12px !important;
    }
    
    .footer-phone-label {
        font-size: 11px !important;
    }
    
    .footer-phone-group a {
        font-size: 14px !important;
    }
    
    .footer-address-text {
        font-size: 11px !important;
    }
    
    .footer-actions-title h4 {
        font-size: 15px !important;
    }
    
    .footer-social-title {
        font-size: 13px !important;
    }
    
    .footer-social-icons a {
        width: 28px !important;
        height: 28px !important;
    }
    
    .footer-social-icons img {
        width: 28px !important;
        height: 28px !important;
    }
}
/* === footer-top-nav.css === */
/**
 * Стили для Footer Top Nav (навигация в верхней части подвала)
 * Точная копия с сайта-донора STELSMOTO
 * Адаптивное меню с горизонтальной прокруткой
 */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.footer-top-nav {
    background: var(--bg-nav, #3a3a3a);
    padding: 14px 0;
    position: relative;
    overflow: visible;
}

.footer-top-nav .container {
    position: relative;
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
    padding: 0 var(--container-pad, 15px);
    display: flex;
    justify-content: space-between;
}

/* ===== ОБЕРТКА ДЛЯ СКРОЛЛА ===== */
.scrollable-nav-wrapper {
    position: relative;
    width: 100%;
}

/* ===== КОНТЕЙНЕР С ПРОКРУТКОЙ ===== */
.scrollable-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent, #ffd500) rgba(255, 255, 255, 0.1);
}

/* Стилизация скроллбара для WebKit (Chrome, Safari) */
.scrollable-nav::-webkit-scrollbar {
    height: 3px;
}

.scrollable-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0;
}

.scrollable-nav::-webkit-scrollbar-thumb {
    background: var(--color-accent, #ffd500);
    border-radius: 0;
}

/* ===== ВНУТРЕННИЙ КОНТЕЙНЕР СО ССЫЛКАМИ ===== */
.scrollable-nav__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    white-space: nowrap;
    padding: 0 20px;
}

.scrollable-nav__inner a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    color: var(--text-light, #aaa);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
    white-space: nowrap;
    position: relative;
}

.scrollable-nav__inner a:hover {
    color: var(--text-white, #fff);
    background: rgba(255, 255, 255, 0.05);
}

.scrollable-nav__inner a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-accent, #ffd500);
    transition: all 0.25s ease;
    transform: translateX(-50%);
}

.scrollable-nav__inner a:hover::after {
    width: 30px;
}

/* ===== ЭФФЕКТЫ ЗАТЕМНЕНИЯ ПО КРАЯМ ===== */
.scrollable-nav__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.scrollable-nav__fade--left {
    left: 0;
    background: linear-gradient(to right,
        rgba(58, 58, 58, 1) 0%,
        rgba(58, 58, 58, 0.9) 30%,
        rgba(58, 58, 58, 0.6) 60%,
        rgba(58, 58, 58, 0) 100%
    );
}

.scrollable-nav__fade--right {
    right: 0;
    background: linear-gradient(to left,
        rgba(58, 58, 58, 1) 0%,
        rgba(58, 58, 58, 0.9) 30%,
        rgba(58, 58, 58, 0.6) 60%,
        rgba(58, 58, 58, 0) 100%
    );
}

/* Скрываем затемнение если прокрутка не нужна */
.scrollable-nav__fade.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Планшеты и маленькие ноутбуки (768px - 991px) */
@media (max-width: 991px) {
    .footer-top-nav .container {
        padding: 0 12px;
    }

    .scrollable-nav__inner {
        padding: 0 15px;
    }

    .scrollable-nav__inner a {
        padding: 12px 16px;
        font-size: 13px;
    }

    .scrollable-nav__fade {
        width: 40px;
    }
}

/* Мобильные устройства (576px - 767px) */
@media (max-width: 767px) {
    .footer-top-nav .container {
        padding: 0 10px;
    }

    .scrollable-nav__inner {
        padding: 0 12px;
    }

    .scrollable-nav__inner a {
        padding: 10px 14px;
        font-size: 12px;
    }

    .scrollable-nav__fade {
        width: 35px;
    }
}

/* Маленькие мобильные (до 575px) */
@media (max-width: 575px) {
    .footer-top-nav .container {
        padding: 0 8px;
    }

    .scrollable-nav__inner {
        padding: 0 10px;
    }

    .scrollable-nav__inner a {
        padding: 10px 12px;
        font-size: 12px;
    }

    .scrollable-nav__fade {
        width: 30px;
    }
}
/* === forms.css === */
/* Version: v2.0.0 | Path: css/forms.css */
/* ===== УНИВЕРСАЛЬНЫЕ СТИЛИ ДЛЯ ФОРМ ===== */

/* ===== ГРУППЫ ПОЛЕЙ ===== */
.form-group {
    margin-bottom: 20px;
}

/* ===== МЕТКИ ===== */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-family: var(--font-body, "Inter", sans-serif);
}

.form-label.required::after {
    content: '*';
    color: var(--color-red, #e30613);
    margin-left: 4px;
}

/* ===== ПОЛЯ ВВОДА ===== */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--bg-border, #eee);
    font-size: 14px;
    font-family: var(--font-body, "Inter", sans-serif);
    transition: all 0.2s ease;
    background: #fff;
    border-radius: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent, #ffd500);
    box-shadow: 0 0 0 2px rgba(255, 213, 0, 0.2);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--color-red, #e30613);
}

/* ===== СООБЩЕНИЯ ОБ ОШИБКАХ ===== */
.form-error {
    font-size: 12px;
    color: var(--color-red, #e30613);
    margin-top: 5px;
    display: none;
}

.form-error.visible {
    display: block;
}

/* ===== ЗАГРУЗКА ФАЙЛА ===== */
.form-file-wrapper {
    position: relative;
}

.form-file {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-family: var(--font-body, "Inter", sans-serif);
}

.form-file-info {
    font-size: 11px;
    color: var(--text-muted, #999);
    margin-top: 5px;
}

/* ===== ЧЕКБОКС ===== */
.form-checkbox-group {
    margin-bottom: 25px;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

.form-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-checkbox-mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bg-border, #eee);
    background: #fff;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.form-checkbox-input:checked + .form-checkbox-mark {
    background: var(--color-accent, #ffd500);
    border-color: var(--color-accent, #ffd500);
    position: relative;
}

.form-checkbox-input:checked + .form-checkbox-mark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 12px;
    font-weight: bold;
}

.form-checkbox-text {
    font-size: 13px;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

.form-checkbox-text a {
    color: var(--color-accent-dark, #e6b000);
    text-decoration: underline;
}

.form-checkbox-text a:hover {
    color: var(--color-accent, #ffd500);
}

.form-checkbox-input.error + .form-checkbox-mark {
    border-color: var(--color-red, #e30613);
}

/* ===== КНОПКА ОТПРАВКИ ===== */
.form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: var(--color-accent, #ffd500);
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-body, "Inter", sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    color: #000;
    border-radius: 0;
}

.form-submit-btn:hover {
    background: #000;
    color: var(--color-accent, #ffd500);
}

.form-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== УВЕДОМЛЕНИЯ ===== */
.form-notification {
    margin-top: 20px;
    padding: 15px;
    font-size: 14px;
    text-align: center;
}

.form-notification.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-notification.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-notification.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Скрытое уведомление */
.form-notification.hide {
    display: none;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ФОРМ (ИЗ STYLES.CSS) ===== */

/* Стили для select (дополнительные) */
select.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

/* Стили для textarea */
textarea.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Стили для полей с ошибками при фокусе */
.form-input.error:focus,
.form-select.error:focus,
.form-textarea.error:focus {
    border-color: var(--color-red, #e30613);
    box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.2);
}

/* Стили для disabled полей */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-checkbox-input:disabled + .form-checkbox-mark {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--bg-lighter, #f5f5f5);
}

/* ===== АДАПТИВНОСТЬ ДЛЯ ФОРМ ===== */
@media (max-width: 767px) {
    .form-label {
        font-size: 13px;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .form-submit-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .form-checkbox-text {
        font-size: 12px;
    }
    
    .form-notification {
        padding: 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .form-label {
        font-size: 12px;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .form-submit-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .form-checkbox-text {
        font-size: 11px;
    }
    
    .form-checkbox-mark {
        width: 18px;
        height: 18px;
    }
    
    .form-notification {
        padding: 10px;
        font-size: 12px;
    }
}
/* === header-nav.css === */
/**
* Стили для ГЛАВНОГО НАВИГАЦИОННОГО МЕНЮ (util-div-cac9__root_1)
* Точная копия с сайта-донора STELSMOTO + Smart Sticky Nav
*/

/* ===== ОСНОВНОЙ КОНТЕЙНЕР НАВИГАЦИИ ===== */
.util-div-cac9__root_1 {
    background-color: var(--bg-nav, #3a3a3a);
    position: relative;
    z-index: 997;
}

/* Sticky-эффект при прокрутке (Smart Sticky Nav) */
.util-div-cac9__root_1.sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 997;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.util-div-cac9__root_1.sticky-hidden {
    transform: translateY(-100%);
}

.util-div-cac9__root_1.sticky-visible {
    transform: translateY(0);
}

/* ===== КОМПЕНСАЦИЯ ОТСТУПА ПРИ ФИКСИРОВАННОМ МЕНЮ ===== */
/* Когда меню становится fixed, следующий за ним элемент (promo-strip) 
   уезжает под него. Добавляем margin-top равный высоте меню через CSS-переменную. */
body.header-nav-sticky-active .promo-strip {
    margin-top: var(--header-nav-height, 60px);
    transition: margin-top 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* На мобильных устройствах меню скрыто, компенсация не нужна */
@media (max-width: 991px) {
    body.header-nav-sticky-active .promo-strip {
        margin-top: 0 !important;
    }
}

/* ===== ВНУТРЕННИЙ КОНТЕЙНЕР ===== */
.util-div-aa77__root_1_1 {
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* ===== МЕНЮ ===== */
.menu {
    display: flex;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu__item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.menu__link {
    color: var(--text-inverse, rgba(240, 240, 255, 0.85));
    padding: 14px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--body-size, 14px);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    text-transform: var(--font-mainnav-transform, uppercase);
    letter-spacing: var(--font-mainnav-spacing, 0.5px);
    transition: color var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
    position: relative;
    width: 100%;
    text-align: center;
}

.menu__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--color-accent, #ffd500);
    transition: width var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}

.menu__link:hover {
    color: var(--text-white, #fff);
}

.menu__link:hover::after {
    width: 100%;
}

.menu__link.active {
    color: var(--color-accent, #ffd500);
}

.menu__link.active::after {
    width: 100%;
}

/* ===== ВЫПАДАЮЩИЕ БЛОКИ (DROPDOWN) ===== */
.dropdown-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card, #3a3a3a);
    padding: 20px;
    z-index: 999;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.3));
}

.dropdown-wrapper.active {
    display: block;
}

/* Сетка дропдауна */
.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
}

/* Элемент дропдауна */
.dropdown-item {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid transparent;
    transition: all var(--transition-normal, 0.25s ease);
    cursor: pointer;
}

.dropdown-item:hover {
    border-color: #fed500;
    background: rgba(254, 213, 0, 0.05);
}

/* Эффект блика при наведении */
.dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: var(--shine-w, 50%);
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, var(--shine-o, 0.3)) 50%, rgba(255, 255, 255, 0.15) 55%, transparent 60%);
    transform: skewX(var(--shine-skew, -25deg));
    transition: none;
    pointer-events: none;
}

.dropdown-item:hover::before {
    animation: shineMove var(--shine-dur, 0.7s) ease-in-out forwards;
}

@keyframes shineMove {
    0% { left: -60%; }
    100% { left: 120%; }
}

/* Иконка в дропдауне */
.dropdown-item-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-item-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: invert(75%) sepia(60%) saturate(600%) hue-rotate(10deg) brightness(100%);
}

/* Текст в дропдауне */
.dropdown-item-text {
    color: var(--text-white, #fff);
    font-size: var(--fs-md, 14px);
    font-weight: 500;
    line-height: 1.3;
}

.dropdown-item:hover .dropdown-item-text {
    color: #fed500;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .util-div-cac9__root_1 {
        display: none !important;
    }
}
/* === header-top-mobile.css === */
/* Version: v3.0.0 | Path: css/header-top-mobile.css */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР МОБИЛЬНОЙ ПАНЕЛИ ===== */
.util-div-2b1a__root_1 {
    background-color: var(--color-primary, #000000);
    padding: 12px 0;
    position: relative;
}

/* ===== ВНУТРЕННИЙ КОНТЕЙНЕР ===== */
.util-div-38fd__root_2_2 {
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
    padding: 0 var(--container-pad, 15px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: visible;
    position: relative;
}

/* ===== ОБЩИЙ СТИЛЬ ДЛЯ БЛОКОВ КОНТАКТОВ ===== */
.contact-block {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* Иконка */
.contact-block__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.contact-block__icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.contact-block__icon img {
    width: 20px;
    height: 20px;
}

.contact-block__icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-accent, #ffd500);
}

/* Контент */
.contact-block__content {
    flex: 1;
}

.contact-block__value {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
}

.contact-block__value .tel {
    color: var(--color-accent, #ffd500);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

/* ===== БЛОК СОЦИАЛЬНЫХ СЕТЕЙ ===== */
.social-icons-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-icons-block .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.social-icons-block .social-icon:hover {
    opacity: 0.7;
}

.social-icons-block .social-icon img {
    width: 28px;
    height: 28px;
}

/* ===== БЛОК ТЕЛЕФОНА (УПРОЩЁННЫЙ, БЕЗ ВЫПАДАЮЩЕГО МЕНЮ) ===== */
.contact-block--phone {
    cursor: pointer;
    position: relative;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Скрываем блок с адресом на мобильных устройствах (767px и меньше) */
@media (max-width: 767px) {
    .contact-block--address {
        display: none !important;
    }
    
    .util-div-38fd__root_2_2 {
        gap: 15px;
        padding: 0 12px;
    }
    
    .social-icons-block .social-icon img {
        width: 24px;
        height: 24px;
    }
    
    .contact-block__icon {
        width: 36px;
        height: 36px;
    }
    
    .contact-block__icon svg {
        width: 18px;
        height: 18px;
    }
}

/* Планшеты (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .contact-block--address {
        display: flex !important;
    }
    
    .util-div-38fd__root_2_2 {
        gap: 20px;
    }
}

/* ===== КЛИКАБЕЛЬНЫЙ ТЕЛЕФОН (просто ссылка) ===== */
.header-phone-clickable {
    cursor: pointer;
    position: relative;
}

.header-phone-clickable::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffd500;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.header-phone-clickable:hover::after {
    transform: scaleX(1);
}

/* ===== СКРЫВАЕМ МОБИЛЬНУЮ ВЕРСИЮ НА ДЕСКТОПЕ (992px И ВЫШЕ) ===== */
@media (min-width: 992px) {
    .util-div-2b1a__root_1.desktop-hidden {
        display: none !important;
    }
}

/* ===== СТИЛИ ДЛЯ ГОРИЗОНТАЛЬНОГО СКРОЛЛИНГА ===== */

/* Контейнер с прокруткой */
.scrollable-mobile-header {
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent, #ffd500) rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

/* Стилизация скроллбара */
.scrollable-mobile-header::-webkit-scrollbar {
    height: 3px;
}

.scrollable-mobile-header::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0;
}

.scrollable-mobile-header::-webkit-scrollbar-thumb {
    background: var(--color-accent, #ffd500);
    border-radius: 0;
}

/* Внутренний контейнер */
.scrollable-mobile-header .util-div-38fd__root_2_2 {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 0 15px;
    min-width: 100%;
    width: max-content;
}

/* Элементы внутри не должны сжиматься */
.scrollable-mobile-header .contact-block,
.scrollable-mobile-header .social-icons-block {
    flex-shrink: 0;
}

/* Обертка для скроллинга */
.mobile-header-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Эффекты затемнения по краям */
.mobile-header-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.mobile-header-fade--left {
    left: 0;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 0.9) 30%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

.mobile-header-fade--right {
    right: 0;
    background: linear-gradient(to left, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 0.9) 30%,
        rgba(0, 0, 0, 0.6) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

.mobile-header-fade.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Адаптивность для эффектов затемнения */
@media (max-width: 480px) {
    .mobile-header-fade {
        width: 30px;
    }
    
    .scrollable-mobile-header .util-div-38fd__root_2_2 {
        gap: 15px;
        padding: 0 12px;
    }
}

/* === header-top.css === */
/**
 * Стили для Десктопной верхней панели (Header Top)
 * Точная копия с сайта-донора STELSMOTO (util-div-2b1a__root_1 root_1)
 */
/* ===== ОСНОВНОЙ КОНТЕЙНЕР ВЕРХНЕЙ ПАНЕЛИ ===== */
.util-div-2b1a__root_1 {
    background-color: var(--color-primary, #000000);
    padding: 10px 0;
    position: relative;
}

/* ===== ВНУТРЕННИЙ КОНТЕЙНЕР ===== */
.util-div-38fd__root_2 {
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

/* ===== БЛОК ЛОГОТИПА ===== */
.util-div-e341__root_2_1 {
    width: 300px;
    flex-shrink: 0;
}

.util-div-e341__root_2_1_1 {
    width: 180px;
    flex-shrink: 0;
    display: none !important;
}

.logo-iw {
    display: flex;
    width: 100%;
}

.logo-iw_1 {
    width: 100%;
    height: auto;
}

/* ===== БЛОК ТЕЛЕФОНОВ ===== */
.util-div-2234__root_2_2 {
    width: 420px;
    padding: 0 0 0 15px;
    flex-shrink: 0;
    cursor: default;
}

.util-div-2234__root_2_2_1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.util-div-2234__root_2_2_2 {
    width: 50%;
    padding: 0 0 8px;
}

.header-info-title {
    color: var(--color-accent, #ffd500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-size: 10px !important;
}

.tel {
    font-size: var(--font-phone-size, 20px);
    color: var(--text-white, #fff);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tel:hover {
    color: var(--text-light, #888);
}

/* ===== БЛОК АДРЕСА И ВРЕМЕНИ РАБОТЫ ===== */
.util-div-2234__root_2_3 {
    width: 320px;
    flex-shrink: 0;
}

.util-div-2234__root_2_3_1 {
    display: flex;
    margin: 6px 0;
}

.util-div-2234__root_2_3_2 {
    width: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.util-div-2234__root_2_3_2 img {
    width: 22px;
    height: 22px;
}

.util-div-2234__root_2_3_3 {
    width: 100%;
}

.address_1 {
    padding: 0 0 0 10px;
    color: var(--text-white, #fff);
    font-size: var(--body-size, 14px);
    line-height: 1.4;
}

.red {
    color: #ff0d0d;
    font-size: var(--fs-sm, 11px);
    padding: 0 0 5px 10px;
    display: flex;
}

.find-link {
    color: var(--color-accent, #ffd500);
    font-size: var(--body-size, 14px);
    padding: 3px 6px;
    background-color: var(--color-primary, #000);
    margin: 0 2px;
    display: inline-block;
}

.find-link:hover {
    color: var(--color-primary, #000);
    background-image: radial-gradient(var(--color-accent-hover, #ffea00) 0%, var(--color-accent, #ffd500) 100%);
}

/* ===== БЛОК СОЦИАЛЬНЫХ СЕТЕЙ И РЕЙТИНГА ===== */
.util-div-2234__root_2_4 {
    flex: 0 0 10%;
    min-width: 160px;
}

.social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.social-icons {
    gap: 8px;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast, 0.2s ease);
    width: 35px;
    height: 28px;
}

.social-icon:hover {
    opacity: 0.75;
}

.social-icon img {
    height: 28px;
    width: auto;
}

.rating-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ===== ГОРИЗОНТАЛЬНЫЙ СКРОЛЛИНГ ДЕСКТОПНОЙ ВЕРСИИ ===== */
.desktop-header-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
}

.scrollable-desktop-header {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent, #ffd500) rgba(255, 255, 255, 0.1);
}

.scrollable-desktop-header::-webkit-scrollbar {
    height: 3px;
}

.scrollable-desktop-header::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0;
}

.scrollable-desktop-header::-webkit-scrollbar-thumb {
    background: var(--color-accent, #ffd500);
    border-radius: 0;
}

.scrollable-desktop-header .util-div-38fd__root_2 {
    display: flex;
    align-items: center;
    min-width: min-content;
    width: max-content;
    padding: 0 15px;
}

.scrollable-desktop-header .util-div-e341__root_2_1,
.scrollable-desktop-header .util-div-2234__root_2_2,
.scrollable-desktop-header .util-div-2234__root_2_3,
.scrollable-desktop-header .util-div-2234__root_2_4 {
    flex-shrink: 0;
}

/* Эффекты затемнения по краям */
.desktop-header-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.desktop-header-fade--left {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}

.desktop-header-fade--right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 100%);
}

.desktop-header-fade.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ===== СКРЫВАЕМ ДЕСКТОПНУЮ ВЕРСИЮ НА МОБИЛЬНЫХ (ДО 991px) ===== */
@media (max-width: 991px) {
    .util-div-2b1a__root_1.root_1 {
        display: none !important;
    }
}

/* Адаптивность эффектов затемнения для планшетов */
@media (max-width: 1200px) {
    .desktop-header-fade {
        width: 40px;
    }
}

@media (max-width: 992px) {
    .desktop-header-fade {
        width: 35px;
    }
}
/* === hero-slider.css === */
/**
* Стили для HERO-СЛАЙДЕРА
* Точная копия с сайта-донора STELSMOTO
* v1.4: Убраны скругления углов, hover-эффект теперь квадратный
*/
/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЛАЙДЕРА ===== */
.hero-slider {
position: relative;
width: 100%;
height: var(--slider-height, 800px);
overflow: hidden;
user-select: none;
-webkit-user-select: none;
cursor: grab;
}
.hero-slider.grabbing {
cursor: grabbing;
}
/* ===== ТРЕК СЛАЙДЕРА ===== */
.hero-slider-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
will-change: transform;
}
.hero-slider-track.dragging {
transition: none;
}
/* ===== СЛАЙД ===== */
.hero-slide {
min-width: 100%;
width: 100%;
height: 100%;
position: relative;
flex-shrink: 0;
}
.hero-slide img,
.hero-slide video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* ===== 🆕 v1.4: КОНТЕНТ СЛАЙДА (КНОПКА КАТЕГОРИИ ПО ЦЕНТРУ, БЕЗ СКРУГЛЕНИЙ) ===== */
.hero-slide-content {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
pointer-events: auto;
}
/* Кнопка категории (Вариант А: Фиксированная зона, прямые углы) */
.hero-category-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 240px;
height: 56px;
padding: 0 32px;
background: var(--color-accent, #ffd500);
color: var(--color-primary, #000);
font-family: var(--font-heading, "Manrope", sans-serif);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
border-radius: 0;
overflow: hidden;
cursor: pointer;
transition: background 0.4s cubic-bezier(0.65, 0, 0.35, 1);
z-index: 1;
}
/* Псевдоэлемент для квадратной подложки (появляется при hover) */
.hero-category-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
background: var(--color-accent, #ffd500);
border-radius: 0;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease;
z-index: 1;
box-shadow: 0 0 0 rgba(255, 213, 0, 0);
}
.hero-category-btn .btn-text,
.hero-category-btn .btn-arrow {
position: relative;
z-index: 2;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero-category-btn .btn-text {
white-space: nowrap;
}
.hero-category-btn .btn-arrow {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
width: 24px;
height: 24px;
stroke: var(--color-primary, #000);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Hover-эффект кнопки (Зона наведения НЕ меняет размер) */
.hero-category-btn:hover {
background: transparent;
}
.hero-category-btn:hover::after {
transform: translate(-50%, -50%) scale(1);
box-shadow:
0 12px 32px rgba(255, 213, 0, 0.5),
0 0 40px rgba(255, 213, 0, 0.4);
}
.hero-category-btn:hover .btn-text {
opacity: 0;
transform: scale(0.8);
}
.hero-category-btn:hover .btn-arrow {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* ===== СТРЕЛКИ НАВИГАЦИИ ===== */
.hero-slider-arrow-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.5);
border: none;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.hero-slider-arrow-btn:hover {
background: rgba(0, 0, 0, 0.8);
}
.hero-slider-arrow-btn.prev {
left: 20px;
}
.hero-slider-arrow-btn.next {
right: 20px;
}
.hero-slider-arrow-btn img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
}
.hero-slider-arrow-btn.next img {
transform: scaleX(-1);
}
/* ===== ТОЧКИ НАВИГАЦИИ (DOTS) ===== */
.hero-dots {
position: absolute;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.hero-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
border-radius: 50%;
}
.hero-dot.active {
background: var(--color-accent, #ffd500);
border-color: var(--color-accent, #ffd500);
transform: scale(1.2);
}
.hero-dot:hover {
background: rgba(255, 255, 255, 0.7);
}
/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
.hero-slider {
height: 500px;
}
.hero-slide-content {
bottom: 60px;
}
.hero-category-btn {
min-width: 200px;
height: 48px;
padding: 0 24px;
font-size: 16px;
}
.hero-category-btn::after {
width: 48px;
height: 48px;
}
.hero-category-btn .btn-arrow {
width: 20px;
height: 20px;
}
.hero-slider-arrow-btn {
width: 40px;
height: 40px;
}
.hero-slider-arrow-btn img {
width: 20px;
height: 20px;
}
}
@media (max-width: 767px) {
.hero-slider {
height: 350px;
}
.hero-slide-content {
bottom: 50px;
}
.hero-category-btn {
min-width: 180px;
height: 44px;
padding: 0 20px;
font-size: 14px;
}
.hero-category-btn::after {
width: 44px;
height: 44px;
}
.hero-category-btn .btn-arrow {
width: 18px;
height: 18px;
}
.hero-slider-arrow-btn {
width: 35px;
height: 35px;
}
.hero-slider-arrow-btn img {
width: 16px;
height: 16px;
}
.hero-dots {
bottom: 15px;
gap: 8px;
}
.hero-dot {
width: 10px;
height: 10px;
}
}
@media (max-width: 480px) {
.hero-slider {
height: 250px;
}
.hero-slide-content {
bottom: 40px;
}
.hero-category-btn {
min-width: 160px;
height: 40px;
padding: 0 16px;
font-size: 13px;
}
.hero-category-btn::after {
width: 40px;
height: 40px;
}
.hero-category-btn .btn-arrow {
width: 16px;
height: 16px;
}
.hero-slider-arrow-btn {
width: 30px;
height: 30px;
}
.hero-slider-arrow-btn img {
width: 14px;
height: 14px;
}
.hero-slider-arrow-btn.prev {
left: 10px;
}
.hero-slider-arrow-btn.next {
right: 10px;
}
}
/* ===== ОТКЛЮЧЕНИЕ АНИМАЦИЙ ===== */
@media (prefers-reduced-motion: reduce) {
.hero-category-btn,
.hero-category-btn::after,
.hero-category-btn .btn-text,
.hero-category-btn .btn-arrow {
transition: none !important;
}
.hero-category-btn:hover {
transform: none !important;
}
.hero-category-btn:hover::after {
transform: translate(-50%, -50%) scale(1) !important;
}
.hero-category-btn:hover .btn-arrow {
transform: translate(-50%, -50%) scale(1) !important;
}
}
/* === info-section.css === */
/**
 * Стили для Информационной секции (Info Section)
 * Рестайлинг v3.0: Тёмная Bento-сетка с программой кредитования STELSCREDIT
 * v3.2: Добавлено фоновое видео с постером и 80% черным оверлеем
 * v3.3: Обновлена CTA плитка (прозрачная кнопка, желтый текст, подчеркивание, подзаголовок)
 * v3.4: Убран наружный отступ снизу (margin-bottom: 0) во всех брейкпоинтах
 * Все переменные берутся ТОЛЬКО из variables.css
 */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.info-section--dark {
    padding: var(--bento-section-padding, 80px) 0;
    background-color: var(--bento-dark-bg-start, #0a0a0a);
    position: relative;
    overflow: hidden;
    /* v3.4: Убираем наружный отступ снизу, который задаётся в base.css */
    margin-bottom: 0 !important;
}

/* ===== 🆕 v3.2: ФОНОВОЕ ВИДЕО И ОВЕРЛЕЙ ===== */
.info-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.info-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.80); /* 80% черный фон */
    z-index: 1;
    pointer-events: none;
}

.info-section--dark .container {
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
    padding: 0 var(--container-pad, 15px);
    position: relative;
    z-index: 2; /* Поверх видео и оверлея */
}

/* ===== BENTO-СЕТКА ===== */
.info-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 280px 280px;
    gap: 20px;
    margin-bottom: 60px;
}

.info-tile--main { grid-column: 1 / 3; grid-row: 1 / 3; }
.info-tile--individuals { grid-column: 3 / 4; grid-row: 1 / 2; }
.info-tile--business { grid-column: 4 / 5; grid-row: 1 / 2; }
.info-tile--cta { grid-column: 3 / 5; grid-row: 2 / 3; }

/* ===== БАЗОВЫЕ СТИЛИ ПЛИТКИ ===== */
.info-tile {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.85) 0%, rgba(17, 17, 17, 0.85) 100%);
    border: 1px solid rgba(255, 213, 0, 0.15);
    border-radius: var(--radius-md, 8px);
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.info-tile:hover {
    border-color: rgba(255, 213, 0, 0.5);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 213, 0, 0.1);
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(17, 17, 17, 0.95) 100%);
}

/* ===== ЭФФЕКТ БЛИКА (GLARE) ===== */
.info-tile__glare {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 213, 0, 0.03) 45%,
        rgba(255, 213, 0, 0.15) 50%,
        rgba(255, 213, 0, 0.03) 55%,
        transparent 60%);
    transform: skewX(-25deg);
    pointer-events: none;
    z-index: 1;
    transition: none;
}

.info-tile:hover .info-tile__glare {
    animation: infoGlare 0.8s ease-in-out forwards;
}

@keyframes infoGlare {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* ===== СОДЕРЖИМОЕ ПЛИТКИ ===== */
.info-tile__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 213, 0, 0.15);
    border: 1px solid rgba(255, 213, 0, 0.4);
    color: var(--color-accent, #ffd500);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
    width: fit-content;
}

.info-title {
    font-family: var(--font-heading, "Manrope", sans-serif);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
    color: var(--text-white, #fff);
    letter-spacing: -1px;
}

.info-text {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 450px;
}

.info-percent {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: var(--font-heading, "Manrope", sans-serif);
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 213, 0, 0.08);
    pointer-events: none;
    z-index: 1;
    transition: color 0.4s ease;
}

.info-tile--main:hover .info-percent {
    color: rgba(255, 213, 0, 0.15);
}

/* ===== ИКОНКИ И ТЕКСТЫ МАЛЫХ ПЛИТОК ===== */
.info-tile__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 213, 0, 0.1);
    border: 1px solid rgba(255, 213, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 20px;
    color: var(--color-accent, #ffd500);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.info-tile:hover .info-tile__icon {
    transform: scale(1.1) rotate(-5deg);
    background: var(--color-accent, #ffd500);
    color: var(--color-primary, #000);
    border-color: var(--color-accent, #ffd500);
}

.info-tile__icon svg {
    width: 28px;
    height: 28px;
}

.info-tile__title {
    font-family: var(--font-heading, "Manrope", sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-white, #fff);
    margin: 0 0 12px;
    line-height: 1.3;
}

.info-tile__text {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ===== CTA КНОПКА (v3.3: Прозрачный фон, желтый текст, подчеркивание) ===== */
.info-tile--cta {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    z-index: 2;
}

.info-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 84px;
    min-height: 84px;
    background: transparent;
    color: var(--color-accent, #ffd500);
    font-family: var(--font-heading, "Manrope", sans-serif);
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.info-cta-btn:hover {
    background: transparent;
    color: var(--color-accent-hover, #ffea00);
    transform: translateY(-2px);
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
}

.info-cta-btn__arrow {
    width: 28px;
    height: 28px;
    transition: transform 0.3s ease;
}

.info-cta-btn:hover .info-cta-btn__arrow {
    transform: translateX(8px);
}

.info-cta-subtitle {
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    text-align: center;
}

/* ===== ФУТЕР С ТЕЛЕФОНАМИ ===== */
.info-section-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-footer-note {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
    font-family: var(--font-body, "Inter", sans-serif);
}

.info-phones {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.info-phone-link {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-accent, #ffd500);
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.info-phone-link:hover {
    color: #fff;
    transform: scale(1.05);
    text-shadow: 0 0 15px rgba(255, 213, 0, 0.5);
}

.info-phone-separator {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.3);
}

/* ===== АДАПТИВНОСТЬ ===== */
/* Планшеты (до 1024px) */
@media (max-width: 1024px) {
    .info-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 16px;
    }
    .info-tile--main { grid-column: 1 / 3; grid-row: auto; min-height: 320px; }
    .info-tile--individuals { grid-column: 1 / 2; grid-row: auto; }
    .info-tile--business { grid-column: 2 / 3; grid-row: auto; }
    .info-tile--cta { grid-column: 1 / 3; grid-row: auto; min-height: 100px; }
    .info-title { font-size: 36px; }
    .info-percent { font-size: 90px; }
    .info-cta-btn { font-size: 20px; height: 70px; min-height: 70px; }
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .info-section--dark {
        padding: 50px 0;
        /* v3.4: Подтверждаем отсутствие отступа и на мобильных */
        margin-bottom: 0 !important;
    }
    .info-bento-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .info-tile--main,
    .info-tile--individuals,
    .info-tile--business,
    .info-tile--cta {
        grid-column: 1 / -1;
        min-height: auto;
    }
    .info-tile {
        padding: 24px;
    }
    .info-title { font-size: 32px; }
    .info-percent { font-size: 70px; bottom: 10px; right: 10px; }
    .info-cta-btn {
        font-size: 18px;
        height: 64px;
        min-height: 64px;
        gap: 12px;
    }
    .info-phone-link,
    .info-phone-separator {
        font-size: 22px;
    }
}

/* ===== ОТКЛЮЧЕНИЕ АНИМАЦИЙ ===== */
@media (prefers-reduced-motion: reduce) {
    .info-tile,
    .info-tile__icon,
    .info-cta-btn,
    .info-cta-btn__arrow,
    .info-phone-link {
        transition: none !important;
    }
    .info-tile:hover {
        transform: none !important;
    }
    .info-tile:hover .info-tile__glare {
        animation: none !important;
        display: none;
    }
    .info-tile:hover .info-tile__icon {
        transform: none !important;
    }
    .info-cta-btn:hover .info-cta-btn__arrow {
        transform: none !important;
    }
}
/* === micro-interactions.css === */
/**
* Микро-взаимодействия и Hover-эффекты
* Ripple-эффект, улучшенные переходы, анимации кнопок
* v1.1: Усилены эффекты для Soft UI (без скруглений)
*/

/* ===== RIPPLE EFFECT (Волна при клике) ===== */
.btn-ripple,
.btn-cart,
.service-btn,
.form-submit-btn,
.pc-buy-btn,
.pc-action-btn,
.news-sidebar-all-btn,
.empty-action-btn,
.pagination-page,
.pagination-first,
.pagination-prev,
.pagination-next,
.pagination-last {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
    z-index: -1;
}

/* Для светлых кнопок делаем ripple темным */
.service-btn:not(:hover) .ripple,
.pc-action-btn .ripple,
.pagination-page:not(.active) .ripple,
.pagination-first .ripple,
.pagination-prev .ripple,
.pagination-next .ripple,
.pagination-last .ripple {
    background: rgba(0, 0, 0, 0.15);
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ===== УЛУЧШЕННЫЕ HOVER-ЭФФЕКТЫ ДЛЯ КНОПОК ===== */
.btn-cart,
.form-submit-btn,
.pc-buy-btn,
.news-sidebar-all-btn,
.empty-action-btn,
.service-btn,
.pc-action-btn {
    transition: 
        transform var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        box-shadow var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        background-color var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)),
        color var(--transition-fast, 0.2s ease),
        border-color var(--transition-fast, 0.2s ease);
}

/* v1.1: Улучшенные hover-эффекты с тенями */
.btn-cart:hover,
.form-submit-btn:hover,
.pc-buy-btn:hover,
.news-sidebar-all-btn:hover,
.empty-action-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
}

.btn-cart:active,
.form-submit-btn:active,
.pc-buy-btn:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft-md, 0 4px 16px rgba(0, 0, 0, 0.10));
}

/* ===== МИКРО-АНИМАЦИИ ДЛЯ КАРТОЧЕК КАТАЛОГА ===== */
.catalog-card {
    transition: 
        transform var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        box-shadow var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        border-color var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* v1.1: Усиленный hover-эффект для карточек */
.catalog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-soft-xl, 0 12px 48px rgba(0, 0, 0, 0.15));
    z-index: 10;
}

/* ===== ПЛАВНЫЙ ФОКУС ДЛЯ ФОРМ (GLOW & LIFT) ===== */
.form-input,
.form-select,
.form-textarea {
    transition: 
        border-color var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1)),
        transform var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

/* v1.1: Улучшенный эффект фокуса с подъёмом */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    transform: translateY(-3px);
    box-shadow: 
        0 0 0 2px rgba(255, 213, 0, 0.2),
        var(--shadow-soft-md, 0 4px 16px rgba(0, 0, 0, 0.10));
}

/* ===== АНИМАЦИЯ ПЕРЕХОДА ДЛЯ САЙДБАРА (Каскадное появление) ===== */
.sidebar.active .sidebar-nav a {
    animation: slide-in-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    opacity: 0;
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar.active .sidebar-nav a:nth-child(1) { animation-delay: 0.05s; }
.sidebar.active .sidebar-nav a:nth-child(2) { animation-delay: 0.1s; }
.sidebar.active .sidebar-nav a:nth-child(3) { animation-delay: 0.15s; }
.sidebar.active .sidebar-nav a:nth-child(4) { animation-delay: 0.2s; }
.sidebar.active .sidebar-nav a:nth-child(5) { animation-delay: 0.25s; }
.sidebar.active .sidebar-nav a:nth-child(6) { animation-delay: 0.3s; }
.sidebar.active .sidebar-nav a:nth-child(7) { animation-delay: 0.35s; }
.sidebar.active .sidebar-nav a:nth-child(8) { animation-delay: 0.4s; }
.sidebar.active .sidebar-nav a:nth-child(9) { animation-delay: 0.45s; }
.sidebar.active .sidebar-nav a:nth-child(10) { animation-delay: 0.5s; }
.sidebar.active .sidebar-nav a:nth-child(11) { animation-delay: 0.55s; }
.sidebar.active .sidebar-nav a:nth-child(12) { animation-delay: 0.6s; }

/* ===== HOVER-ЭФФЕКТЫ ДЛЯ ССЫЛОК С ПОДЧЕРКИВАНИЕМ ===== */
.footer-col ul li a,
.news-info-item .info-text {
    position: relative;
    transition: color var(--transition-fast, 0.2s ease);
}

.footer-col ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--text-white, #fff);
    transition: width var(--transition-smooth, .3s cubic-bezier(0.4, 0, 0.2, 1));
}

.footer-col ul li a:hover::after {
    width: 100%;
}

/* ===== v1.1: ДОПОЛНИТЕЛЬНЫЕ SOFT UI ЭФФЕКТЫ ===== */

/* Пульсация для активных элементов */
@keyframes soft-pulse {
    0%, 100% {
        box-shadow: var(--shadow-soft-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
    }
    50% {
        box-shadow: var(--shadow-soft-md, 0 4px 16px rgba(0, 0, 0, 0.10));
    }
}

/* Эффект "дыхания" для CTA-кнопок */
.cta-pulse {
    animation: soft-pulse 2s ease-in-out infinite;
}

/* Плавное появление элементов */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fade-in-up 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Эффект "всплытия" для карточек */
@keyframes lift-up {
    0% {
        transform: translateY(0);
        box-shadow: var(--shadow-soft-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
    }
    100% {
        transform: translateY(-8px);
        box-shadow: var(--shadow-soft-xl, 0 12px 48px rgba(0, 0, 0, 0.15));
    }
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МИКРО-ВЗАИМОДЕЙСТВИЙ ===== */
@media (max-width: 767px) {
    /* Уменьшенные эффекты на мобильных */
    .btn-cart:hover,
    .form-submit-btn:hover,
    .pc-buy-btn:hover,
    .news-sidebar-all-btn:hover,
    .empty-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-soft-md, 0 4px 16px rgba(0, 0, 0, 0.10));
    }
    
    .catalog-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-soft-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
    }
    
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        transform: translateY(-1px);
    }
}

@media (max-width: 480px) {
    /* Минимальные эффекты на маленьких экранах */
    .btn-cart:hover,
    .form-submit-btn:hover,
    .pc-buy-btn:hover,
    .news-sidebar-all-btn:hover,
    .empty-action-btn:hover {
        transform: translateY(-1px);
    }
    
    .catalog-card:hover {
        transform: translateY(-2px);
    }
    
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        transform: translateY(0);
    }
}

/* ===== ОТКЛЮЧЕНИЕ АНИМАЦИЙ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ С ОСОБЫМИ ПОТРЕБНОСТЯМИ ===== */
@media (prefers-reduced-motion: reduce) {
    .btn-cart,
    .form-submit-btn,
    .pc-buy-btn,
    .news-sidebar-all-btn,
    .empty-action-btn,
    .service-btn,
    .pc-action-btn,
    .catalog-card,
    .form-input,
    .form-select,
    .form-textarea {
        transition: none !important;
    }
    
    .catalog-card:hover,
    .btn-cart:hover,
    .form-submit-btn:hover,
    .pc-buy-btn:hover,
    .news-sidebar-all-btn:hover,
    .empty-action-btn:hover {
        transform: none !important;
    }
    
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        transform: none !important;
    }
    
    .ripple {
        animation: none !important;
    }
}
/* === news-catalog.css === */
/**
* Стили для каталога новостей (News Catalog)
* Адаптировано с сайта-донора STELSMOTO
*/

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.news-catalog-section {
    padding: 40px 0 60px;
    background: var(--bg-white, #fff);
}

/* ===== СЕТКА НОВОСТЕЙ ===== */
.news-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* ===== КАРТОЧКА НОВОСТИ ===== */
.news-catalog-card {
    background: #fff;
    border: 1px solid var(--bg-border, #eee);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.news-catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent, #ffd500);
}

/* ===== ИЗОБРАЖЕНИЕ ===== */
.news-catalog-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.news-catalog-card:hover .news-catalog-image img {
    transform: scale(1.05);
}

.news-catalog-date {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    font-family: var(--font-body, "Inter", sans-serif);
}

/* ===== КОНТЕНТ КАРТОЧКИ ===== */
.news-catalog-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.news-catalog-title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 52px;
}

.news-catalog-excerpt {
    font-size: 14px;
    color: var(--text-secondary, #666);
    line-height: 1.5;
    font-family: var(--font-body, "Inter", sans-serif);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
    flex: 1;
}

.news-catalog-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-dark, #e6b000);
    text-decoration: none;
    transition: gap 0.2s ease;
    margin-top: auto;
}

.news-catalog-readmore:hover {
    gap: 10px;
    color: #000;
}

.news-catalog-readmore svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .news-catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .news-catalog-grid {
        grid-template-columns: 1fr;
    }
    
    .news-catalog-image {
        height: 200px;
    }
}
/* === news-detail.css === */
/**
* Стили для детальной страницы новости (News Detail)
* Адаптировано с сайта-донора STELSMOTO
*/

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.news-detail-section {
    padding: 40px 0 60px;
    background: var(--bg-white, #fff);
}

/* ===== КОНТЕНТ НОВОСТИ ===== */
.news-detail-content {
    flex: 1;
    min-width: 0;
}

.news-detail-image {
    margin-bottom: 24px;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.news-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.news-detail-date {
    font-size: 13px;
    color: var(--text-muted, #999);
    margin-bottom: 12px;
}

.news-detail-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: 1.2;
}

/* ===== САЙДБАР С ДРУГИМИ НОВОСТЯМИ ===== */
.news-sidebar {
    flex: 0 0 320px;
    width: 320px;
}

.news-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.news-sidebar-item {
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.news-sidebar-item:hover {
    transform: translateX(4px);
}

.news-sidebar-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-lighter, #f5f5f5);
    border-radius: var(--radius-sm, 4px);
}

.news-sidebar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-sidebar-info {
    flex: 1;
    min-width: 0;
}

.news-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.news-sidebar-quote {
    font-size: 11px;
    color: var(--text-muted, #999);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-sidebar-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--color-accent, #ffd500);
    color: #000;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-body, "Inter", sans-serif);
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-sidebar-all-btn:hover {
    background: #000;
    color: var(--color-accent, #ffd500);
}

.news-sidebar-all-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .news-detail-section .page-detail-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .news-sidebar {
        width: 100%;
        flex: none;
    }
    
    .news-detail-title {
        font-size: 26px;
    }
}
/* === news-section.css === */
/**
* Стили для Секции новостей и полезной информации (News Section)
* Точная копия с сайта-донора STELSMOTO
* v1.1: Улучшены hover-эффекты (Soft UI без скруглений)
* v1.2: Усилены hover-эффекты для news-info-item (акцентная полоска, анимация иконки, glow)
* v1.3: Убраны сдвиг вверх и тень для news-slider-slide при наведении
*/
/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ НОВОСТЕЙ ===== */
.news-section {
padding: 50px 0 60px;
background: var(--bg-light, #f9f9f9);
}
.news-section-inner {
display: flex;
gap: 40px;
}
/* ===== ЛЕВЫЙ БЛОК С ПОЛЕЗНОЙ ИНФОРМАЦИЕЙ ===== */
.news-info-block {
flex: 0 0 280px;
flex-shrink: 0;
}
.news-info-block h3 {
font-size: 20px;
font-weight: 700;
color: #000;
margin-bottom: 20px;
font-family: var(--font-heading, "Manrope", sans-serif);
padding-bottom: 12px;
border-bottom: 3px solid var(--color-accent, #ffd500);
}
.news-info-grid {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ===== КНОПКИ ИНФОРМАЦИОННОГО БЛОКА (УСИЛЕННЫЕ HOVER-ЭФФЕКТЫ v1.2) ===== */
.news-info-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: #fff;
border: 1px solid #eee;
border-left: 3px solid transparent;
transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
cursor: pointer;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
}
/* v1.2: Декоративный градиентный оверлей при наведении */
.news-info-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 213, 0, 0.08) 0%, rgba(255, 213, 0, 0) 100%);
opacity: 0;
transition: opacity var(--transition-smooth, 0.3s ease);
pointer-events: none;
z-index: 1;
}
/* v1.2: Усиленный hover с акцентной полоской слева */
.news-info-item:hover {
border-color: var(--color-accent, #ffd500);
border-left-color: var(--color-accent, #ffd500);
background: #fffdf0;
box-shadow:
var(--shadow-soft-md, 0 4px 16px rgba(0, 0, 0, 0.10)),
0 0 0 1px rgba(255, 213, 0, 0.2);
transform: translateX(6px);
}
.news-info-item:hover::before {
opacity: 1;
}
/* ===== ИКОНКА В КНОПКЕ (с анимацией) ===== */
.news-info-item .info-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-bounce, 0.4s cubic-bezier(0.34, 1.56, 0.64, 1));
position: relative;
z-index: 2;
background: rgba(255, 213, 0, 0);
border-radius: 50%;
}
/* v1.2: Анимация иконки при hover — поворот + подсветка фоном */
.news-info-item:hover .info-icon {
transform: scale(1.15) rotate(-8deg);
background: rgba(255, 213, 0, 0.15);
}
.news-info-item .info-icon svg {
width: 22px;
height: 22px;
stroke: #333;
stroke-width: 1.8;
fill: none;
transition: stroke var(--transition-fast, 0.2s ease);
}
/* v1.2: Изменение цвета иконки при наведении */
.news-info-item:hover .info-icon svg {
stroke: var(--color-accent-dark, #e6b000);
}
/* ===== ТЕКСТ В КНОПКЕ ===== */
.news-info-item .info-text {
font-size: 12px;
font-weight: 600;
color: #333;
line-height: 1.2;
font-family: var(--font-body, "Inter", sans-serif);
position: relative;
z-index: 2;
transition: color var(--transition-fast, 0.2s ease);
}
.news-info-item .info-text .red-text {
color: var(--color-red, #e30613);
}
.news-info-item .info-text .yellow-text {
color: var(--color-accent-dark, #e6b000);
}
/* v1.2: Лёгкое изменение цвета текста при наведении */
.news-info-item:hover .info-text {
color: var(--color-primary, #000);
}
/* ===== ПРАВЫЙ БЛОК СО СЛАЙДЕРОМ НОВОСТЕЙ ===== */
.news-slider-block {
flex: 1;
min-width: 0;
}
.news-slider-block h3 {
font-size: 20px;
font-weight: 700;
color: #000;
margin-bottom: 20px;
font-family: var(--font-heading, "Manrope", sans-serif);
display: flex;
align-items: center;
justify-content: space-between;
}
.news-slider-controls {
display: flex;
gap: 8px;
}
.news-slider-btn {
width: 44px;
height: 44px;
background: #ffd500;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}
/* v1.1: Улучшенный hover для кнопок слайдера */
.news-slider-btn:hover {
background: #000;
box-shadow: var(--shadow-soft-md, 0 4px 16px rgba(0, 0, 0, 0.10));
transform: scale(1.1);
}
.news-slider-btn:active {
transform: scale(1.05);
}
.news-slider-btn svg {
width: 18px;
height: 18px;
stroke: #000;
stroke-width: 2.5;
fill: none;
transition: stroke var(--transition-fast, 0.2s ease);
}
.news-slider-btn:hover svg {
stroke: #ffd500;
}
.news-slider-viewport {
overflow: hidden;
}
.news-slider-track {
display: flex;
gap: 20px;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: grab;
user-select: none;
}
.news-slider-track.dragging {
transition: none;
cursor: grabbing;
}
.news-slider-slide {
flex: 0 0 calc(50% - 10px);
min-width: calc(50% - 10px);
background: #fff;
border: 1px solid #eee;
overflow: hidden;
transition: border-color var(--transition-fast, 0.2s ease);
}
/* v1.3: Убраны сдвиг вверх и тень, оставлена только смена цвета рамки */
.news-slider-slide:hover {
border-color: var(--color-accent, #ffd500);
}
.news-card-img-wrap {
position: relative;
height: 200px;
overflow: hidden;
}
.news-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}
/* v1.1: Увеличенное масштабирование изображения при hover */
.news-slider-slide:hover .news-card-img-wrap img {
transform: scale(1.08);
}
.news-date-badge {
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
font-family: var(--font-body, "Inter", sans-serif);
transition: background var(--transition-fast, 0.2s ease);
}
/* v1.1: Изменение цвета бейджа при hover */
.news-slider-slide:hover .news-date-badge {
background: var(--color-accent, #ffd500);
color: #000;
}
.news-card-content {
padding: 16px;
}
.news-card-title {
font-size: 15px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
font-family: var(--font-heading, "Manrope", sans-serif);
line-height: 1.35;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition: color var(--transition-fast, 0.2s ease);
}
/* v1.1: Изменение цвета заголовка при hover */
.news-slider-slide:hover .news-card-title {
color: var(--color-accent-dark, #e6b000);
}
.news-card-excerpt {
font-size: 13px;
color: #888;
line-height: 1.5;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-family: var(--font-body, "Inter", sans-serif);
}
/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
.news-section-inner {
flex-direction: column;
}
.news-info-block {
flex: none;
}
.news-info-grid {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.news-info-item {
flex: 0 0 calc(50% - 4px);
}
.news-info-item:hover {
transform: translateX(2px);
}
}
@media (max-width: 767px) {
.news-section {
padding: 40px 0 50px;
}
.news-slider-slide {
flex: 0 0 100%;
min-width: 100%;
}
.news-card-img-wrap {
height: 180px;
}
.news-info-item:hover {
transform: translateX(0);
}
}
@media (max-width: 575px) {
.news-info-item {
flex: 0 0 calc(50% - 4px);
}
.news-card-title {
font-size: 14px;
height: auto;
min-height: 38px;
}
.news-card-excerpt {
font-size: 12px;
height: auto;
}
}
/* === page-header.css === */
/**
 * Стили для Заголовка страницы (page-header)
 * Точная копия с сайта-донора STELSMOTO
 */
/* ===== ОСНОВНОЙ КОНТЕЙНЕР ЗАГОЛОВКА ===== */
.page-header {
    padding: 20px 0;
    background: var(--bg-white, #fff);
    border-bottom: 1px solid var(--bg-border, #eee);
}

/* ===== ХЛЕБНЫЕ КРОШКИ (BREADCRUMBS) ===== */
.page-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb-link {
    color: var(--text-secondary, #666);
    font-size: var(--label-size, 16px);
    font-weight: 400;
    padding: 4px 8px;
    transition: all var(--transition-fast, 0.2s ease);
    background: transparent;
    text-decoration: none;
}

.breadcrumb-link:hover {
    background: var(--color-primary, #000);
    color: var(--text-white, #fff);
}

.breadcrumb-arrow {
    width: 14px;
    height: 14px;
    filter: invert(0);
    opacity: 0.4;
    flex-shrink: 0;
}

.breadcrumb-item:last-child .breadcrumb-link {
    color: var(--text-muted, #999);
    cursor: default;
}

.breadcrumb-item:last-child .breadcrumb-link:hover {
    background: transparent;
    color: var(--text-muted, #999);
}

/* ===== ЗАГОЛОВОК СТРАНИЦЫ ===== */
.page-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.page-title-icon {
    width: 40px;
    height: 40px;
    background: var(--color-accent, #ffd500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-title-icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(0);
}

.page-title h1 {
    font-size: var(--h1-size, 38px);
    font-weight: 700;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
    margin: 0;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .page-header {
        padding: 15px 0;
    }
    .page-title h1 {
        font-size: calc(var(--h1-size, 38px) * 0.85);
    }
    .page-title-icon {
        width: 35px;
        height: 35px;
    }
    .page-title-icon img {
        width: 20px;
        height: 20px;
    }
    .breadcrumb-link {
        font-size: 13px;
        padding: 3px 6px;
    }
}

@media (max-width: 767px) {
    .page-header {
        padding: 12px 0;
    }
    .page-title {
        gap: 8px;
    }
    .page-title h1 {
        font-size: calc(var(--h1-size, 38px) * 0.7);
        line-height: 1.2;
    }
    .page-title-icon {
        width: 30px;
        height: 30px;
    }
    .page-title-icon img {
        width: 16px;
        height: 16px;
    }
    .page-breadcrumbs {
        margin-bottom: 10px;
        gap: 4px;
    }
    .breadcrumb-link {
        font-size: 11px;
        padding: 2px 4px;
    }
    .breadcrumb-arrow {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 10px 0;
    }
    .page-title h1 {
        font-size: 20px;
    }
    .page-title-icon {
        width: 28px;
        height: 28px;
    }
    .page-title-icon img {
        width: 14px;
        height: 14px;
    }
    .breadcrumb-link {
        font-size: 10px;
        padding: 2px 3px;
    }
}
/* === phone-modal.css === */
/* Version: v1.0.0 | Path: css/phone-modal.css */

/* ===== МОДАЛЬНОЕ ОКНО С КОНТАКТАМИ ===== */

/* Затемнение фона (оверлей) */
.phone-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

.phone-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Модальное окно */
.phone-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    background: #1a1a1a;
    border: 1px solid #ffd500;
    border-radius: 16px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.phone-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Шапка модального окна */
.phone-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #0d0d0d;
    border-bottom: 2px solid #ffd500;
}

.phone-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: #ffd500;
    margin: 0;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

/* Кнопка закрытия (крестик) */
.phone-modal__close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.phone-modal__close:hover {
    background: #e30613;
    color: #fff;
    transform: rotate(90deg);
}

/* Содержимое модального окна */
.phone-modal__content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Стилизация скроллбара */
.phone-modal__content::-webkit-scrollbar {
    width: 6px;
}

.phone-modal__content::-webkit-scrollbar-track {
    background: #333;
    border-radius: 3px;
}

.phone-modal__content::-webkit-scrollbar-thumb {
    background: #ffd500;
    border-radius: 3px;
}

/* Секции внутри модального окна */
.phone-modal__section {
    margin-bottom: 25px;
}

.phone-modal__section:last-child {
    margin-bottom: 0;
}

.phone-modal__section-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffd500;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Номера телефонов */
.phone-modal__phone {
    display: block;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 0;
    transition: all 0.2s ease;
}

.phone-modal__phone:hover {
    color: #ffd500;
    padding-left: 8px;
}

/* Адрес */
.phone-modal__address {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
}

/* Расписание */
.phone-modal__schedule {
    font-size: 14px;
    color: #ccc;
    line-height: 1.6;
}

.phone-modal__schedule-red {
    color: #e30613;
    font-weight: 500;
}

/* Кнопка закрытия внизу (для удобства) */
.phone-modal__footer {
    padding: 15px 20px;
    border-top: 1px solid #333;
    text-align: center;
}

.phone-modal__footer-btn {
    background: #ffd500;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
    color: #000;
}

.phone-modal__footer-btn:hover {
    background: #000;
    color: #ffd500;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Планшеты */
@media (max-width: 768px) {
    .phone-modal {
        width: 95%;
        max-width: 450px;
    }
    
    .phone-modal__title {
        font-size: 18px;
    }
    
    .phone-modal__phone {
        font-size: 16px;
    }
}

/* Мобильные устройства */
@media (max-width: 480px) {
    .phone-modal {
        width: 95%;
        max-height: 80vh;
        border-radius: 12px;
    }
    
    .phone-modal__header {
        padding: 14px 16px;
    }
    
    .phone-modal__title {
        font-size: 16px;
    }
    
    .phone-modal__close {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
    
    .phone-modal__content {
        padding: 16px;
    }
    
    .phone-modal__section-title {
        font-size: 13px;
    }
    
    .phone-modal__phone {
        font-size: 15px;
        padding: 6px 0;
    }
    
    .phone-modal__address,
    .phone-modal__schedule {
        font-size: 13px;
    }
}
/* === product-card.css === */
/**
* Стили для страницы товара (Product Card Section)
* Адаптировано с сайта-донора STELSMOTO
*/

.product-card-section {
    padding: 40px 0 60px;
    background: var(--bg-white, #fff);
}

.product-card-layout {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.product-card-left {
    flex: 1;
    min-width: 300px;
}

.product-card-right {
    flex: 0 0 350px;
}

/* Цвета */
.pc-color-selector {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pc-color-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.pc-color-options {
    display: flex;
    gap: 12px;
}

.pc-color-opt {
    cursor: pointer;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.pc-color-opt.active {
    border-color: var(--color-accent, #ffd500);
}

.color-swatch {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    border: 1px solid #ddd;
}

.color-swatch--yellow { background: #ffd500; }
.color-swatch--red { background: #e30613; }
.color-swatch--black { background: #111; }
.color-swatch--camo { background: repeating-linear-gradient(45deg, #4a5a3a 0px, #4a5a3a 10px, #6b7a5a 10px, #6b7a5a 20px); }

/* Табы */
.pc-tabs {
    margin-top: 30px;
}

.pc-tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #eee;
    margin-bottom: 20px;
    overflow-x: auto;
}

.pc-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pc-tab-btn:hover {
    color: #000;
}

.pc-tab-btn.active {
    color: #000;
    border-bottom-color: var(--color-accent, #ffd500);
}

.pc-tab-content {
    display: none;
}

.pc-tab-content.active {
    display: block;
}

/* Правая колонка */
.pc-right-inner {
    position: sticky;
    top: 100px;
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
}

.pc-price-block {
    margin-bottom: 20px;
}

.pc-price-value {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.pc-in-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2a8a2a;
    font-weight: 600;
    margin-top: 8px;
}

.pc-in-stock svg {
    width: 20px;
    height: 20px;
}

.pc-buy-btn {
    display: block;
    width: 100%;
    padding: 16px;
    background: var(--color-accent, #ffd500);
    color: #000;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-bottom: 20px;
}

.pc-buy-btn:hover {
    background: var(--color-accent-hover, #ffea00);
}

.pc-installment-info {
    margin-bottom: 20px;
}

.pc-installment-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.pc-installment-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-red, #e30613);
}

.pc-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.pc-action-btn {
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pc-action-btn--installment { border-color: var(--color-red, #e30613); color: var(--color-red, #e30613); }
.pc-action-btn--installment:hover { background: var(--color-red, #e30613); color: #fff; }

.pc-action-btn--leasing { border-color: var(--color-green, #2a8a2a); color: var(--color-green, #2a8a2a); }
.pc-action-btn--leasing:hover { background: var(--color-green, #2a8a2a); color: #fff; }

.pc-action-btn--compare { border-color: var(--color-accent, #ffd500); }
.pc-action-btn--compare:hover { background: var(--color-accent, #ffd500); }

.pc-payment-block {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
}

.pc-payment-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.pc-payment-icons {
    display: flex;
    gap: 10px;
}

.pc-payment-icon {
    width: 40px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}

.pc-ask-btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pc-ask-btn:hover {
    border-color: var(--color-accent, #ffd500);
}

/* Адаптивность */
@media (max-width: 991px) {
    .product-card-layout {
        flex-direction: column;
    }
    .product-card-right {
        flex: 1;
        width: 100%;
    }
    .pc-right-inner {
        position: static;
    }
}
/* === product-comments.css === */
/* ===== СЕКЦИЯ КОММЕНТАРИЕВ ===== */
.product-comments-section {
    padding: 60px 0;
    background: var(--bg-light, #f9f9f9);
}

.comments-title {
    font-size: var(--h2-size, 36px);
    font-family: var(--font-heading, "Manrope", sans-serif);
    font-weight: 700;
    color: var(--text-primary, #000);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.comments-count {
    font-size: var(--h4-size, 24px);
    color: var(--text-muted, #999);
    font-weight: 400;
}

.comments-avg-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
}

.star {
    color: var(--bg-border-light, #ddd);
    font-size: 24px;
    line-height: 1;
}

.star--filled {
    color: var(--color-accent, #ffd500);
}

.avg-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #000);
    margin-left: 5px;
}

.comments-alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    font-weight: 500;
}

.comments-alert--success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.comments-alert--error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.comments-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: flex-start;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comments-empty {
    font-size: 16px;
    color: var(--text-muted, #999);
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    text-align: center;
}

.comment-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-soft-sm, 0 2px 8px rgba(0,0,0,0.05));
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.comment-author {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #000);
}

.comment-date {
    font-size: 13px;
    color: var(--text-muted, #999);
}

.comment-rating {
    margin-bottom: 10px;
}

.comment-rating .star {
    font-size: 18px;
}

.comment-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary, #333);
}

/* ===== ФОРМА КОММЕНТАРИЯ ===== */
.comment-form-wrapper {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-soft-md, 0 4px 16px rgba(0,0,0,0.08));
    position: sticky;
    top: 100px;
}

.comment-form-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary, #000);
}

.rating-selector {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating-selector input {
    display: none;
}

.rating-selector label {
    font-size: 32px;
    color: var(--bg-border-light, #ddd);
    cursor: pointer;
    transition: color 0.2s;
}

.rating-selector input:checked ~ label,
.rating-selector label:hover,
.rating-selector label:hover ~ label {
    color: var(--color-accent, #ffd500);
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .comments-layout {
        grid-template-columns: 1fr;
    }
    .comment-form-wrapper {
        position: static;
    }
}

@media (max-width: 767px) {
    .product-comments-section {
        padding: 40px 0;
    }
    .comments-title {
        font-size: 24px;
    }
    .star {
        font-size: 20px;
    }
}
/* === product-slider.css === */
/* Version: v1.4.0 | Path: styles/product-slider.css */
/* ===== СТИЛИ ДЛЯ PRODUCT-СЛАЙДЕРА (product-slider-wrapper) ===== */
/* v1.4.0: Отказ от тени и сдвига вверх. Добавлен внутренний отступ у track для сохранения обводки */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.product-slider-wrapper {
    position: relative;
}

/* ===== ЗАГОЛОВОК И УПРАВЛЕНИЕ ===== */
.product-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.product-slider-title {
    font-size: var(--h4-size, 30px);
    font-weight: 700;
    color: #000;
    margin: 0;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

.product-slider-controls {
    display: flex;
    gap: 8px;
}

.product-slider-btn {
    width: 44px;
    height: 44px;
    background: #ffd500;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.product-slider-btn:hover {
    background: #000;
}

.product-slider-btn svg {
    width: 18px;
    height: 18px;
    stroke: #000;
    stroke-width: 2.5;
    fill: none;
    transition: stroke 0.2s ease;
}

.product-slider-btn:hover svg {
    stroke: #ffd500;
}

/* ===== ВЬЮПОРТ ===== */
.product-slider-viewport {
    overflow: hidden;
    /* Убраны padding и margin, которые конфликтовали с JS-расчетами */
}

/* ===== ТРЕК ===== */
.product-slider-track {
    display: flex;
    gap: 15px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: grab;
    user-select: none;
    /* 🆕 v1.4.0: Внутренний отступ, чтобы обводка (border 1px) не срезалась родительским overflow: hidden */
    padding: 2px; 
}

.product-slider-track.dragging {
    transition: none;
    cursor: grabbing;
}

/* ===== СЛАЙД ===== */
.product-slider-slide {
    flex: 0 0 calc(25% - 11.25px);
    min-width: calc(25% - 11.25px);
    background: #fff;
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
    transition: border-color 0.25s ease;
}

/* v1.4.0: Только смена цвета обводки без сдвига и тени */
.product-slider-slide:hover {
    border-color: var(--title-color, #ffcc00);
    z-index: 2;
}

/* ===== КАРТОЧКА ТОВАРА ВНУТРИ СЛАЙДА ===== */
.product-card-img {
    position: relative;
    padding: 15px;
    background: #fff;
    overflow: hidden;
}

.product-card-img img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    display: block;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Зум картинки при hover оставляем, так как он внутри overflow: hidden самой карточки */
.product-slider-slide:hover .product-card-img img {
    transform: scale(1.05);
}

.product-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 52px;
    height: 52px;
}

.product-sale-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card-body {
    padding: 12px 15px 15px;
}

.product-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: 1.35;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.product-slider-slide:hover .product-card-name {
    color: var(--color-accent-dark, #e6b000);
}

.product-card-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}

.product-price-current {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.product-price-old {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.product-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-action-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.product-action-btn:hover {
    border-color: #ffd500;
    background: #fffde7;
}

.product-action-btn svg {
    width: 18px;
    height: 18px;
}

.product-action-btn.view-btn svg {
    stroke: #333;
    fill: none;
    stroke-width: 2;
}

.product-action-btn.cart-btn-action svg {
    stroke: #333;
    fill: none;
    stroke-width: 1.8;
}

.product-action-btn.fav-btn svg {
    stroke: #333;
    fill: none;
    stroke-width: 1.8;
}

.product-action-btn.fav-btn:hover svg {
    fill: #e30613;
    stroke: #e30613;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1024px) {
    .product-slider-slide {
        flex: 0 0 calc(33.333% - 10px);
        min-width: calc(33.333% - 10px);
    }
}

@media (max-width: 767px) {
    .product-slider-slide {
        flex: 0 0 calc(50% - 7.5px);
        min-width: calc(50% - 7.5px);
    }
    .product-card-img img {
        height: 160px;
    }
}

@media (max-width: 480px) {
    .product-slider-slide {
        flex: 0 0 100%;
        min-width: 100%;
    }
    .product-card-img img {
        height: 200px;
    }
}

/* ===== ОТКЛЮЧЕНИЕ АНИМАЦИЙ ДЛЯ ПОЛЬЗОВАТЕЛЕЙ С ОСОБЫМИ ПОТРЕБНОСТЯМИ ===== */
@media (prefers-reduced-motion: reduce) {
    .product-slider-slide,
    .product-card-img img,
    .product-card-name {
        transition: none !important;
    }
    .product-slider-slide:hover .product-card-img img {
        transform: none !important;
    }
}
/* === promo-strip.css === */
/**
 * Стили для Промо-ленты (Promo Strip)
 * Точная копия с сайта-донора STELSMOTO + поддержка drag/swipe
 */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ПРОМО-ЛЕНТЫ ===== */
.promo-strip {
    background: var(--color-red, #e30613);
    padding: 1px 0;
    overflow: hidden;
}

/* ===== КОНТЕЙНЕР СЛАЙДЕРА ===== */
.promo-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md, 15px);
    min-height: 50px;
}

/* ===== СТРЕЛКИ НАВИГАЦИИ ===== */
.slider-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity var(--transition-fast, 0.2s);
    flex-shrink: 0;
    height: 100%;
}

.slider-arrow:hover {
    opacity: 1;
}

.slider-arrow img {
    width: var(--space-lg, 20px);
    height: var(--space-lg, 20px);
    filter: brightness(0) invert(1);
    display: block;
}

/* ===== КОНТЕЙНЕР СОДЕРЖИМОГО ===== */
.slider-content {
    flex: 1;
    text-align: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.promo-strip.is-dragging .slider-content {
    cursor: grabbing;
}

/* ===== ОТДЕЛЬНЫЙ СЛАЙД ===== */
.slider-slide {
    color: var(--text-white, #fff);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal, 0.3s ease), visibility var(--transition-normal, 0.3s ease);
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    pointer-events: auto;
}

.slider-slide a {
    color: var(--color-accent, #ffd500);
    text-decoration: underline;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .promo-strip { padding: 1px 0; }
    .promo-slider { min-height: 45px; gap: var(--space-sm, 10px); }
    .slider-content { min-height: 45px; }
    .slider-slide { font-size: var(--caption-size, 13px); letter-spacing: 0.5px; line-height: 1.4; }
    .slider-arrow img { width: 18px; height: 18px; }
}

@media (max-width: 767px) {
    .promo-strip { padding: 1px 0; }
    .promo-slider { min-height: 55px; gap: 8px; }
    .slider-content { min-height: 55px; }
    .slider-slide { font-size: var(--fs-sm, 11px); letter-spacing: 0.3px; line-height: 1.5; padding: 0 5px; }
    .slider-arrow img { width: 16px; height: 16px; }
}

@media (max-width: 575px) {
    .promo-strip { padding: 1px 0; }
    .promo-slider { min-height: 60px; gap: 6px; }
    .slider-content { min-height: 60px; }
    .slider-slide { font-size: var(--fs-xs, 10px); letter-spacing: 0; line-height: 1.6; word-break: break-word; }
    .slider-slide a { display: inline-block; word-break: break-word; }
    .slider-arrow img { width: 14px; height: 14px; }
}

@media (max-width: 375px) {
    .promo-strip { padding: 1px 0; }
    .promo-slider { min-height: 65px; gap: 4px; }
    .slider-content { min-height: 65px; }
    .slider-slide { font-size: 9px; line-height: 1.7; }
    .slider-arrow { padding: 4px; }
    .slider-arrow img { width: 12px; height: 12px; }
}

/* ===== АКЦЕНТНАЯ ССЫЛКА В ПРОМО-ЛЕНТЕ ===== */
.slider-slide a.accent-link {
    color: var(--color-accent, #ffd500);
    text-decoration: underline;
}
/* === scroll-reveal.css === */
/**
 * Scroll Reveal Animations
 * Плавное появление элементов при скролле
 */

/* Базовый класс для всех анимируемых элементов */
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: opacity, transform;
}

/* Состояние видимости (добавляется JS) */
.reveal.reveal-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Направления анимаций */
.reveal-up {
  transform: translateY(40px);
}

.reveal-down {
  transform: translateY(-40px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-scale {
  transform: scale(0.9);
}

/* Задержки для каскадного появления (например, для сеток) */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Отключение анимаций для пользователей, предпочитающих уменьшенное движение */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* === search-bar.css === */
/**
 * Стили для Строки поиска (search-bar)
 * Точная копия с сайта-донора STELSMOTO + Стили выпадающего списка
 */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СТРОКИ ПОИСКА ===== */
.search-bar {
    padding: 18px 0;
    background: var(--bg-white, #fff);
    border-bottom: 1px solid var(--bg-border, #eee);
}

.search-bar .container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-container {
    position: relative;
    width: 100%;
}

/* ===== ФОРМА ПОИСКА ===== */
.search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* ===== ПОЛЕ ВВОДА ПОИСКА ===== */
.search-input {
    flex: 1;
    height: 56px;
    border: 1px solid var(--bg-border, #eee);
    padding: 0 15px;
    font-size: var(--input-size, 14px);
    outline: none;
    font-family: var(--font-body, "Inter", sans-serif);
    width: 100%;
}

.search-input:focus {
    border-color: var(--color-accent, #ffd500);
}

/* ===== КНОПКА ПОИСКА ===== */
.search-btn {
    height: 56px;
    width: 56px;
    background: var(--color-accent, #ffd500);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast, 0.2s ease);
}

.search-btn:hover {
    background: var(--color-accent-dark, #e6b000);
}

.search-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--text-primary, #333);
}

/* ===== ВЫПАДАЮЩИЙ БЛОК РЕЗУЛЬТАТОВ ПОИСКА ===== */
.search-results-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-white, #fff);
    border: 1px solid var(--bg-border, #eee);
    border-radius: var(--radius-md, 0);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.3));
    max-height: 500px;
    overflow-y: auto;
    display: none;
}

.search-results-dropdown.active {
    display: block;
}

/* Стилизация скроллбара */
.search-results-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-results-dropdown::-webkit-scrollbar-track {
    background: var(--bg-lighter, #f5f5f5);
}

.search-results-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-accent, #ffd500);
}

.search-dropdown-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 14px;
}

.search-dropdown-inner {
    padding: 15px;
}

.search-dropdown-section {
    margin-bottom: 15px;
}

.search-dropdown-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted, #999);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.search-dropdown-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-sm, 4px);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.search-dropdown-item:hover {
    background: var(--bg-light, #f9f9f9);
}

.search-dropdown-img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-dropdown-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search-dropdown-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-red, #e30613);
}

.search-dropdown-url {
    font-size: 12px;
    color: var(--text-muted, #999);
}

.search-dropdown-all {
    display: block;
    text-align: center;
    padding: 12px;
    background: var(--bg-light, #f9f9f9);
    color: var(--color-accent-dark, #e6b000);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-top: 1px solid #eee;
    transition: background 0.2s;
}

.search-dropdown-all:hover {
    background: #f0f0f0;
}

/* ===== АДАПТИВНОСТЬ ===== */

/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .search-bar {
        padding: 15px 0;
    }

    .search-input,
    .search-btn {
        height: 48px;
    }

    .search-btn {
        width: 48px;
    }

    .search-input {
        font-size: 13px;
    }

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

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .search-bar {
        padding: 12px 0;
    }

    .search-bar .container {
        gap: 8px;
    }

    .search-input,
    .search-btn {
        height: 42px;
    }

    .search-btn {
        width: 42px;
    }

    .search-input {
        font-size: 12px;
        padding: 0 12px;
    }

    .search-btn svg {
        width: 14px;
        height: 14px;
    }

    .search-results-dropdown {
        max-height: 400px;
    }

    .search-dropdown-item {
        gap: 10px;
        padding: 10px;
    }

    .search-dropdown-img {
        width: 40px;
        height: 40px;
    }

    .search-dropdown-name {
        font-size: 13px;
    }

    .search-dropdown-price {
        font-size: 14px;
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .search-bar {
        padding: 10px 0;
    }

    .search-bar .container {
        gap: 6px;
    }

    .search-input,
    .search-btn {
        height: 38px;
    }

    .search-btn {
        width: 38px;
    }

    .search-input {
        font-size: 11px;
        padding: 0 10px;
    }

    .search-btn svg {
        width: 12px;
        height: 12px;
    }
}
/* === services.css === */
/**
* Стили для Секции услуг (Services Section)
* Точная копия с сайта-донора STELSMOTO + эффект блика при наведении
* v1.3: Динамический цвет иконок через currentColor
* Все переменные берутся ТОЛЬКО из variables.css
*/

/* ===== ОСНОВНОЙ КОНТЕЙНЕР СЕКЦИИ ===== */
.services-section {
    padding: 0;
    background: var(--bg-white, #fff);
}

/* ===== СЕТКА СЕРВИСНЫХ КАРТОЧЕК ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--bg-white, #fff);
}

/* ===== КАРТОЧКА УСЛУГИ ===== */
.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 20px 36px;
    text-align: center;
    position: relative;
    min-height: 300px;
    transition: 
        background var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        box-shadow var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        transform var(--transition-lift, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1)),
        border-color var(--transition-fast, 0.2s ease);
    overflow: hidden;
    background: var(--bg-white, #fff);
    text-decoration: none;
    border: 1px solid #eee;
}

/* v1.1: Эффект жёлтого фона при наведении + подъём и тень */
.service-item:hover {
    background: var(--color-accent, #ffd500);
    box-shadow: var(--shadow-soft-xl, 0 12px 48px rgba(0, 0, 0, 0.15));
    transform: translateY(-6px);
    z-index: 2;
    border-color: var(--color-accent, #ffd500);
}

/* ===== ЭФФЕКТ БЛИКА (SHINE) ===== */
.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: var(--shine-w, 50%);
    height: 100%;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.3) 55%,
        transparent 60%);
    transform: skewX(var(--shine-skew, -25deg));
    z-index: 1;
    pointer-events: none;
    transition: none;
}

.service-item:hover::before {
    animation: serviceShine var(--shine-dur, 0.7s) ease-in-out forwards;
}

@keyframes serviceShine {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* ===== КОНТЕНТ КАРТОЧКИ (z-index для поверх блика) ===== */
.service-icon-wrap,
.service-title,
.service-btn-wrap {
    position: relative;
    z-index: 2;
}

/* ===== ИКОНКА УСЛУГИ ===== */
.service-icon-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-accent, #ffd500);
    transition: all var(--transition-bounce, 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)), color var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* v1.3: Анимация иконки и смена цвета при hover */
.service-item:hover .service-icon-wrap {
    transform: scale(1.15) rotate(5deg);
    color: var(--color-primary, #000);
}

.service-icon-wrap svg {
    width: 72px;
    height: 72px;
    opacity: 1;
    transition: opacity var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}

.service-item:hover .service-icon-wrap svg {
    opacity: 1;
}

/* ===== ЗАГОЛОВОК УСЛУГИ ===== */
.service-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #333);
    margin-bottom: 20px;
    font-family: var(--font-heading, "Manrope", sans-serif);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    transition: color var(--transition-slow, 0.35s cubic-bezier(0.25, 0.8, 0.25, 1));
}

.service-item:hover .service-title {
    color: var(--color-primary, #000);
}

/* ===== ОБЕРТКА ДЛЯ КНОПКИ ===== */
.service-btn-wrap {
    width: 100%;
    max-width: 200px;
    margin-top: auto;
    display: flex;
    justify-content: center;
}

/* ===== КНОПКА УСЛУГИ ===== */
.service-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border: 2px solid var(--color-accent, #ffd500);
    cursor: pointer;
    transition: all var(--transition-smooth, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    font-family: var(--font-body, "Inter", sans-serif);
    line-height: 1.3;
    text-decoration: none;
    background: transparent;
    color: var(--text-primary, #333);
}

/* v1.1: Улучшенный hover для кнопки услуги */
.service-item:hover .service-btn {
    background: var(--color-primary, #000);
    color: var(--color-accent, #ffd500);
    border-color: var(--color-primary, #000);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
    transform: translateY(-2px);
}

.service-item:hover .service-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.service-item:hover .service-btn:active {
    transform: translateY(0);
}

/* ===== АДАПТИВНОСТЬ ===== */
/* Планшеты (768px - 991px) */
@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-item {
        padding: 30px 15px 26px;
        min-height: 260px;
    }
    .service-icon-wrap {
        width: 65px;
        height: 65px;
        margin-bottom: 18px;
    }
    .service-icon-wrap svg {
        width: 55px;
        height: 55px;
    }
    .service-title {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .service-btn {
        padding: 10px 16px;
        font-size: 12px;
    }
    /* v1.1: Уменьшенный подъём на планшетах */
    .service-item:hover {
        transform: translateY(-4px);
    }
}

/* Мобильные устройства (до 767px) */
@media (max-width: 767px) {
    .service-item {
        padding: 25px 15px 22px;
        min-height: 240px;
    }
    .service-icon-wrap {
        width: 55px;
        height: 55px;
        margin-bottom: 15px;
    }
    .service-icon-wrap svg {
        width: 45px;
        height: 45px;
    }
    .service-title {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .service-btn {
        padding: 8px 12px;
        font-size: 11px;
    }
    /* v1.1: Уменьшенный подъём на мобильных */
    .service-item:hover {
        transform: translateY(-3px);
    }
    /* v1.1: Уменьшенная анимация иконки */
    .service-item:hover .service-icon-wrap {
        transform: scale(1.1) rotate(3deg);
    }
}

/* Очень маленькие экраны (до 575px) */
@media (max-width: 575px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-item {
        padding: 20px 15px;
        min-height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        text-align: left;
        justify-content: flex-start;
    }
    .service-icon-wrap {
        width: 50px;
        height: 50px;
        margin-bottom: 0;
    }
    .service-icon-wrap svg {
        width: 40px;
        height: 40px;
    }
    .service-title {
        flex: 1;
        margin-bottom: 0;
        font-size: 14px;
    }
    .service-btn-wrap {
        width: 100%;
        max-width: none;
        margin-top: 15px;
        justify-content: flex-start;
    }
    .service-btn {
        width: 100%;
        padding: 8px 20px;
    }
    /* v1.1: Отключаем подъём на маленьких экранах */
    .service-item:hover {
        transform: translateY(0);
    }
}
/* === sidebar.css === */
/**
* Стили для Sidebar (Мобильное меню)
* Точная копия с сайта-донора STELSMOTO
*/
/* ===== SIDEBAR OVERLAY (ЗАТЕМНЕНИЕ ФОНА) ===== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ===== SIDEBAR (БОКОВОЕ МЕНЮ) ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width, 350px);
    height: 100vh;
    height: 100dvh;
    background: var(--color-sidebar-bg, #3a3a3a);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}
.sidebar.active {
    transform: translateX(0);
}

/* Стилизация скроллбара для WebKit */
.sidebar::-webkit-scrollbar {
    width: 4px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 0;
}

/* ===== ЗАГОЛОВОК САЙДБАРА ===== */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--color-primary-dark, #0a0a0a);
    position: sticky;
    top: 0;
    z-index: 10;
}
.sidebar-title {
    color: var(--color-accent, #ffd500);
    font-size: var(--h4-size, 30px);
    line-height: var(--h4-lh, 1.33);
    margin: 0;
}

/* Кнопка закрытия */
.sidebar-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity var(--transition-fast, 0.2s ease);
    background: none;
    border: none;
    padding: 0;
}
.sidebar-close:hover {
    opacity: 0.7;
}
.sidebar-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-white, #fff);
    stroke-width: 2;
}

/* ===== СЕКЦИИ САЙДБАРА ===== */
.sidebar-section {
    padding: 16px 24px;
}
.sidebar-section-title {
    color: var(--color-accent, #ffd500);
    font-size: var(--body-size, 14px);
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: none;
}

/* ===== НАВИГАЦИЯ САЙДБАРА ===== */
.sidebar-nav {
    display: flex;
    flex-direction: column;
}
.sidebar-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    color: var(--text-white, #fff);
    font-size: var(--body-size, 14px);
    font-weight: 400;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
}

/* Эффект заливки при наведении */
.sidebar-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #fed500;
    z-index: -1;
    transition: width var(--sidebar-slide-dur, 0.4s) cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sidebar-nav a:hover::before {
    width: 100%;
}

/* Маркер (точка) */
.sidebar-nav a .bullet {
    width: 6px;
    height: 6px;
    background: var(--text-muted, #999);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: background 0s;
}
.sidebar-nav a:hover .bullet {
    background: #000;
}

/* Текст ссылки */
.sidebar-nav a .nav-text {
    position: relative;
    z-index: 2;
    color: #fff;
    transition: none;
}
.sidebar-nav a:hover .nav-text {
    color: #000;
}

/* Бейдж (например, "0%" для рассрочки) */
.sidebar-nav a .badge-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-red, #e30613);
    color: var(--text-white, #fff);
    font-size: var(--fs-xs, 10px);
    padding: 2px 6px;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

/* Красный текст (например, "Услуги") */
.sidebar-nav a .text-red {
    color: var(--color-red, #e30613);
    font-weight: 700;
    position: relative;
    z-index: 2;
    transition: none;
}
.sidebar-nav a:hover .text-red {
    color: #000;
}

/* Активная ссылка */
.sidebar-nav a.active {
    font-weight: 700;
}
.sidebar-nav a.active::before {
    width: 100%;
}
.sidebar-nav a.active .bullet {
    background: #000;
}
.sidebar-nav a.active .nav-text {
    color: #000;
}
.sidebar-nav a.active .text-red {
    color: #000;
}

/* ===== РАЗДЕЛИТЕЛЬ ===== */
.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 8px 24px;
}
/* === skeletons.css === */
/**
* Скелетоны (Skeletons) для анимированных заглушек
* Улучшают воспринимаемую производительность при клиентском рендеринге
*/
.skeleton {
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Карточка товара */
.skeleton-card {
  background: #fff;
  border: 1px solid #eee;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-img { width: 100%; height: 180px; }
.skeleton-title { width: 80%; height: 20px; }
.skeleton-price { width: 50%; height: 24px; }
.skeleton-btn { width: 100%; height: 40px; }

/* Строка (для корзины и сравнения) */
.skeleton-row {
  display: flex;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}
.skeleton-row-img { width: 80px; height: 80px; flex-shrink: 0; }
.skeleton-row-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.skeleton-container {
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .skeleton-img { height: 140px; }
  .skeleton-row-img { width: 60px; height: 60px; }
}
/* === social-floating-btn.css === */
/* Version: v1.0.0 | Path: css/social-floating-btn.css */
/* ===== СТИЛИ ДЛЯ ПЛАВАЮЩЕЙ КНОПКИ СОЦСЕТЕЙ (social-floating-btn) ===== */
/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.social-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

/* ===== ОСНОВНАЯ КНОПКА - ЖЁЛТАЯ ===== */
.social-floating-btn__main {
    width: 56px;
    height: 56px;
    background: var(--color-accent, #ffd500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
}

.social-floating-btn__main:hover {
    transform: scale(1.05);
    background: #000000;
}

.social-floating-btn__main:hover .social-floating-btn__icon {
    stroke: #ffffff;
}

/* ===== ИКОНКА НА КНОПКЕ ===== */
.social-floating-btn__icon {
    width: 28px;
    height: 28px;
    stroke: #000000;
    transition: stroke 0.3s ease;
}

/* ===== ПУЛЬСАЦИЯ ===== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 213, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 213, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 213, 0, 0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

/* ===== КОНТЕЙНЕР КРУЖКОВ ===== */
.social-floating-btn__circle-container {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ===== КРУЖКИ С СОЦСЕТЯМИ ===== */
.social-floating-btn__circle {
    position: absolute;
    width: 48px;
    height: 48px;
    background: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    margin-left: -24px;
    margin-bottom: -24px;
}

.social-floating-btn__circle:hover {
    transform: scale(1.1) !important;
    background: var(--color-accent, #ffd500);
}

.social-floating-btn__circle svg {
    width: 24px;
    height: 24px;
    color: #ffffff;
    transition: color 0.3s ease;
}

.social-floating-btn__circle:hover svg {
    color: #000000;
}

/* ===== АКТИВНОЕ СОСТОЯНИЕ КОНТЕЙНЕРА ===== */
.social-floating-btn__circle-container.active .social-floating-btn__circle {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* ===== ПОЗИЦИИ КРУЖКОВ ПО ДУГЕ 90° С РАДИУСОМ 112px ===== */
/* Углы: 90°, 120°, 150°, 180° от вертикали */
/* VK (верхний) */
.social-floating-btn__circle--vk {
    bottom: 112px;
    right: 0;
    transition-delay: 0s;
}

.social-floating-btn__circle-container.active .social-floating-btn__circle--vk {
    bottom: 112px;
    right: 0;
}

/* Rutube (второй) */
.social-floating-btn__circle--rutube {
    bottom: 97px;
    right: 56px;
    transition-delay: 0.05s;
}

.social-floating-btn__circle-container.active .social-floating-btn__circle--rutube {
    bottom: 97px;
    right: 56px;
}

/* Telegram (третий) */
.social-floating-btn__circle--telegram {
    bottom: 56px;
    right: 97px;
    transition-delay: 0.1s;
}

.social-floating-btn__circle-container.active .social-floating-btn__circle--telegram {
    bottom: 56px;
    right: 97px;
}

/* Max (четвертый) */
.social-floating-btn__circle--max {
    bottom: 0;
    right: 112px;
    transition-delay: 0.15s;
}

.social-floating-btn__circle-container.active .social-floating-btn__circle--max {
    bottom: 0;
    right: 112px;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 767px) {
    .social-floating-btn {
        bottom: 20px;
        right: 20px;
    }

    .social-floating-btn__main {
        width: 48px;
        height: 48px;
    }

    .social-floating-btn__icon {
        width: 24px;
        height: 24px;
    }

    .social-floating-btn__circle {
        width: 42px;
        height: 42px;
        margin-left: -21px;
        margin-bottom: -21px;
    }

    .social-floating-btn__circle svg {
        width: 20px;
        height: 20px;
    }

    .social-floating-btn__circle-container {
        bottom: 24px;
        right: 24px;
    }

    /* Адаптивные позиции на мобильных (радиус 95px) */
    .social-floating-btn__circle-container.active .social-floating-btn__circle--vk {
        bottom: 95px;
        right: 0;
    }

    .social-floating-btn__circle-container.active .social-floating-btn__circle--rutube {
        bottom: 82px;
        right: 48px;
    }

    .social-floating-btn__circle-container.active .social-floating-btn__circle--telegram {
        bottom: 48px;
        right: 82px;
    }

    .social-floating-btn__circle-container.active .social-floating-btn__circle--max {
        bottom: 0;
        right: 95px;
    }
}
/* === sticky-contact.css === */
/* Version: v1.0.0 | Path: css/sticky-contact.css */
/* ===== СТИЛИ ДЛЯ ПЛАВАЮЩЕЙ КНОПКИ СВЯЗИ (sticky-contact) ===== */

/* ===== ОСНОВНОЙ КОНТЕЙНЕР ===== */
.sticky-contact {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* ===== КНОПКА С ПОВОРОТОМ НА 90 ГРАДУСОВ ===== */
.sticky-contact__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #000000;
    border: none;
    padding: 8px 24px;
    cursor: pointer;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.2s ease;
    box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10;
    white-space: nowrap;
    /* Поворот на 90 градусов против часовой стрелки */
    transform: rotate(-90deg) translateY(-50%);
    transform-origin: right center;
    border-radius: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-right: -1px; /* Убираем возможный зазор */
}

.sticky-contact__btn:hover {
    background: var(--color-accent, #ffd500);
    color: #000000;
    box-shadow: -6px 6px 20px rgba(0, 0, 0, 0.25);
}

/* ===== ИКОНКА НА КНОПКЕ ===== */
.sticky-contact__icon {
    font-size: 18px;
    filter: none;
}

.sticky-contact__text {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* ===== МОДАЛЬНОЕ ОКНО НА ВЕСЬ ЭКРАН ===== */
.sticky-contact__form-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticky-contact__form-wrapper.active {
    opacity: 1;
    visibility: visible;
}

/* ===== КОНТЕЙНЕР ФОРМЫ ===== */
.sticky-contact__form-container {
    width: 500px;
    max-width: calc(100vw - 40px);
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.sticky-contact__form-wrapper.active .sticky-contact__form-container {
    transform: scale(1);
}

/* Стилизация скроллбара */
.sticky-contact__form-container::-webkit-scrollbar {
    width: 6px;
}

.sticky-contact__form-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.sticky-contact__form-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* ===== ЗАГОЛОВОК ФОРМЫ ===== */
.sticky-contact__form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px 15px;
    border-bottom: 2px solid var(--color-accent, #ffd500);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 20px;
}

.sticky-contact__form-title {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin: 0;
    font-family: var(--font-heading, "Manrope", sans-serif);
}

/* ===== КНОПКА ЗАКРЫТИЯ ===== */
.sticky-contact__close {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #666;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sticky-contact__close:hover {
    background: var(--color-red, #e30613);
    color: #fff;
    transform: rotate(90deg);
}

/* ===== СТИЛИ ДЛЯ ЭЛЕМЕНТОВ ФОРМЫ ===== */
.sticky-contact__form-container .form-group {
    padding: 0 25px;
    margin-bottom: 20px;
}

.sticky-contact__form-container .form-submit-btn {
    margin: 0 25px 25px;
    width: calc(100% - 50px);
    border-radius: 8px;
}

/* ===== АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ ===== */
@media (max-width: 767px) {
    .sticky-contact__btn {
        padding: 10px 18px;
        gap: 8px;
        font-size: 12px;
    }
    
    .sticky-contact__icon {
        font-size: 16px;
    }
    
    .sticky-contact__text {
        font-size: 12px;
    }
    
    .sticky-contact__form-container {
        width: calc(100vw - 30px);
        max-height: 85vh;
        border-radius: 12px;
    }
    
    .sticky-contact__form-header {
        padding: 15px 20px;
    }
    
    .sticky-contact__form-title {
        font-size: 18px;
    }
    
    .sticky-contact__form-container .form-group {
        padding: 0 20px;
    }
    
    .sticky-contact__form-container .form-submit-btn {
        margin: 0 20px 20px;
        width: calc(100% - 40px);
    }
}

/* Очень маленькие экраны (до 480px) */
@media (max-width: 480px) {
    .sticky-contact__btn {
        padding: 8px 14px;
        gap: 6px;
        font-size: 11px;
    }
    
    .sticky-contact__icon {
        font-size: 14px;
    }
    
    .sticky-contact__text {
        font-size: 11px;
    }
    
    .sticky-contact__form-title {
        font-size: 16px;
    }
    
    .sticky-contact__close {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}
/* === top-bar.css === */
/**
 * Стили для Top Bar (верхняя информационная панель)
 * Точная копия с сайта-донора STELSMOTO
 */

/* ===== TOP BAR ===== */
.top-bar {
    background: var(--bg-white, #fff);
    height: var(--height-topbar, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-pad, 15px);
    border-bottom: 0px solid var(--color-sidebar-bg, #3a3a3a);
    max-width: var(--container-max, 1250px);
    margin: 0 auto;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== HAMBURGER (кнопка гамбургер-меню) ===== */
.hamburger {
    width: 46px;
    height: 46px;
    background: var(--color-primary-light, #1a1a1a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-accent, #ffd500);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center;
}

.hamburger span:nth-child(1) {
    transform: translateY(0);
}

.hamburger span:nth-child(2) {
    transform: scaleX(1);
}

.hamburger span:nth-child(3) {
    transform: translateY(0);
}

.hamburger:hover span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger:hover span:nth-child(2) {
    transform: scaleX(0);
    opacity: 0;
}

.hamburger:hover span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ===== TOP NAVIGATION ===== */
.top-nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}

.top-nav a {
    color: var(--text-primary, #333);
    font-size: var(--body-size, 14px);
    padding: 0 10px;
    white-space: nowrap;
    transition: color var(--transition-fast, 0.2s ease);
    font-weight: 400;
    text-decoration: none;
}

.top-nav a:hover {
    color: var(--color-accent, #ffd500);
}

.top-nav a.active {
    color: var(--color-red, #e30613);
    font-weight: 700;
}

.badge-red {
    display: inline-block;
    background: var(--color-red, #e30613);
    color: var(--text-white, #fff);
    font-size: var(--fs-xs, 10px);
    padding: 1px 5px;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1.4;
}

.top-nav a span.label-percent {
    font-size: var(--body-size, 14px);
}

/* ===== МОБИЛЬНЫЙ ЛОГОТИП В TOP-BAR ===== */
.mobile-logo {
    display: none;
}

/* ===== TOP BAR RIGHT (CART) ===== */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary, #333);
    font-size: var(--btn-size, 15px);
    padding: 6px 14px;
    border-left: 1px solid var(--bg-border-light, #e0e0e0);
    text-decoration: none;
}

.cart-btn:hover {
    color: var(--color-accent, #ffd500);
}

.cart-icon {
    width: 20px;
    height: 20px;
}

.cart-icon svg {
    fill: var(--color-accent, #ffd500);
}

.cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-red, #e30613);
    color: var(--text-white, #fff);
    font-size: var(--fs-sm, 11px);
    font-weight: 700;
    width: 20px;
    height: 20px;
}

/* ===== АДАПТИВНОСТЬ: НА МОБИЛЬНЫХ СКРЫВАЕМ TOP-NAV И ПОКАЗЫВАЕМ ЛОГОТИП ===== */
@media (max-width: 991px) {
    .top-nav {
        display: none !important;
    }

    .mobile-logo {
        display: block !important;
    }

    .mobile-logo .logo-iw_1 {
        height: 35px;
        width: auto;
    }

    .top-bar {
        background-color: var(--bg-nav, #3a3a3a);
    }

    .cart-btn {
        border-left: 1px solid var(--color-accent, #ffd500);
    }

    .cart-count_0 {
        display: none !important;
    }
}

/* ===== STICKY TOP-BAR FOR MOBILE ===== */
@media (max-width: 991px) {
    .top-bar.sticky-active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--bg-nav, #3a3a3a);
        z-index: 999;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .top-bar.sticky-hidden {
        transform: translateY(-100%);
    }

    .top-bar.sticky-visible {
        transform: translateY(0);
    }

    body.top-bar-sticky-active {
        padding-top: 60px;
    }
}