:root {
        --rd-background: #F7F8FA;
        --rd-foreground: #23263B;
        --rd-card: #FFFFFF;
        --rd-card-foreground: #23263B;
        --rd-popover: #FFFFFF;
        --rd-popover-foreground: #23263B;
        --rd-primary: #2563EB;
        --rd-primary-foreground: #FFFFFF;
        --rd-primary-soft: #EEF3FF;
        --rd-secondary: #F1F3F6;
        --rd-secondary-foreground: #3A3F4D;
        --rd-muted: #F1F3F6;
        --rd-muted-foreground: #6B7180;
        --rd-accent: #EEF3FF;
        --rd-accent-foreground: #2563EB;
        --rd-success: #16A34A;
        --rd-success-foreground: #FFFFFF;
        --rd-success-soft: #E9F7EE;
        --rd-warning: #F5A623;
        --rd-destructive: #DC2626;
        --rd-destructive-foreground: #FFFFFF;
        --rd-border: #E5E7EB;
        --rd-input: #D7DBE0;
        --rd-ring: #2563EB;
        --rd-radius: 14px;
        --rd-shadow-card: 0 1px 2px rgba(23, 26, 35, 0.06), 0 8px 24px rgba(23, 26, 35, 0.06);
        --rd-shadow-card-hover: 0 2px 6px rgba(23, 26, 35, 0.08), 0 16px 40px rgba(23, 26, 35, 0.10);
        --rd-shadow-pop: 0 24px 60px rgba(15, 20, 30, 0.22);
    }

    body {
        background-color: var(--rd-background) !important;
        color: var(--rd-foreground) !important;
        font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
        font-feature-settings: 'ss01';
        -webkit-text-size-adjust: 100%;
    }

    h1, h2, h3 {
        font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
        letter-spacing: -0.02em;
    }

    * { border-color: var(--rd-border); }

    /* Контейнеры */
    .container-site {
        width: 100%;
        margin-inline: auto;
        max-width: 80rem;
        padding-inline: 1rem;
    }
    @media (min-width: 640px) { .container-site { padding-inline: 1.5rem; } }
    @media (min-width: 1024px) { .container-site { padding-inline: 2rem; } }

    .section-y { padding-block: 1.5rem; }
    @media (min-width: 768px) { .section-y { padding-block: 2rem; } }

    .no-scrollbar { scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* Карточка */
    .card-surface {
        background-color: var(--rd-card);
        border-radius: calc(var(--rd-radius) + 8px);
        box-shadow: var(--rd-shadow-card);
        border: 1px solid var(--rd-border);
    }
    .shadow-card-hover:hover { box-shadow: var(--rd-shadow-card-hover); }

    /* Семантические цвета */
    .bg-background { background-color: var(--rd-background) !important; }
    .bg-card { background-color: var(--rd-card) !important; }
    .bg-popover { background-color: var(--rd-popover) !important; }
    .bg-secondary { background-color: var(--rd-secondary) !important; }
    .bg-muted { background-color: var(--rd-muted) !important; }
    .bg-primary { background-color: var(--rd-primary) !important; }
    .bg-primary\/90 { background-color: rgba(37, 99, 235, 0.9) !important; }
    .bg-primary-soft { background-color: var(--rd-primary-soft) !important; }
    .bg-success { background-color: var(--rd-success) !important; }
    .bg-success\/90 { background-color: rgba(22, 163, 74, 0.9) !important; }
    .bg-success-soft { background-color: var(--rd-success-soft) !important; }
    .bg-foreground\/40 { background-color: rgba(35, 38, 59, 0.4) !important; }
    .bg-foreground\/70 { background-color: rgba(35, 38, 59, 0.7) !important; }
    .bg-foreground\/10 { background-color: rgba(35, 38, 59, 0.1) !important; }

    .text-foreground { color: var(--rd-foreground) !important; }
    .text-muted-foreground { color: var(--rd-muted-foreground) !important; }
    .text-primary { color: var(--rd-primary) !important; }
    .text-primary-foreground { color: var(--rd-primary-foreground) !important; }
    .text-success { color: var(--rd-success) !important; }
    .text-success-foreground { color: var(--rd-success-foreground) !important; }
    .text-warning { color: var(--rd-warning) !important; }
    .text-accent-foreground { color: var(--rd-accent-foreground) !important; }
    .text-destructive { color: var(--rd-destructive) !important; }
    .text-border { color: var(--rd-border) !important; }

    .border-border { border-color: var(--rd-border) !important; }
    .border-input { border-color: var(--rd-input) !important; }
    .divide-border > * + * { border-top: 1px solid var(--rd-border); }

    /* Утилиты-размеры (Tailwind v4 size-*) */
    .size-2 { width: 0.5rem; height: 0.5rem; }
    .size-3\.5 { width: 0.875rem; height: 0.875rem; }
    .size-4 { width: 1rem; height: 1rem; }
    .size-5 { width: 1.25rem; height: 1.25rem; }
    .size-6 { width: 1.5rem; height: 1.5rem; }
    .size-8 { width: 2rem; height: 2rem; }
    .size-9 { width: 2.25rem; height: 2.25rem; }
    .size-10 { width: 2.5rem; height: 2.5rem; }
    .size-11 { width: 2.75rem; height: 2.75rem; }
    .size-12 { width: 3rem; height: 3rem; }
    .size-14 { width: 3.5rem; height: 3.5rem; }
    .size-full { width: 100%; height: 100%; }

    /* Недостающие утилиты (нет в скомпилированном tailwind.css) */
    .align-middle { vertical-align: middle; }
    .place-items-center { place-items: center; }
    .uppercase { text-transform: uppercase; }
    .tracking-wide { letter-spacing: 0.025em; }
    .rounded-md { border-radius: 0.375rem; }
    .font-black { font-weight: 900; }
    .text-6xl { font-size: 3.75rem; line-height: 1; }
    .max-w-xl { max-width: 36rem; }
    .h-11 { height: 2.75rem; }
    .top-24 { top: 6rem; }
    .top-sidebar { top: 5.5rem; }
    .bottom-4 { bottom: 1rem; }
    .left-3 { left: 0.75rem; }
    .left-4 { left: 1rem; }
    .inset-x-0 { left: 0; right: 0; }
    .z-40 { z-index: 40; }
    .mt-1\.5 { margin-top: 0.375rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-2\.5 { margin-top: 0.625rem; }
    .mt-5 { margin-top: 1.25rem; }
    .mt-7 { margin-top: 1.75rem; }
    .pt-7 { padding-top: 1.75rem; }
    .p-2\.5 { padding: 0.625rem; }
    .py-2\.5 { padding-block: 0.625rem; }
    .py-12 { padding-block: 3rem; }
    .pt-0 { padding-top: 0; }
    .pb-24 { padding-bottom: 6rem; }
    .pl-9 { padding-left: 2.25rem; }
    .gap-5 { gap: 1.25rem; }
    .gap-x-8 { column-gap: 2rem; }
    .gap-y-0 { row-gap: 0; }
    .space-y-2\.5 > * + * { margin-top: 0.625rem; }
    .border-y { border-top-width: 1px; border-bottom-width: 1px; }
    .duration-300 { transition-duration: 300ms; }

    .bg-card\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
    .text-white\/85 { color: rgba(255, 255, 255, 0.85); }
    .hover\:text-primary:hover { color: var(--rd-primary); }
    .hover\:text-success:hover { color: var(--rd-success); }
    .hover\:underline:hover { text-decoration: underline; }
    .hover\:bg-white\/90:hover { background-color: rgba(255, 255, 255, 0.9); }
    .hover\:bg-success\/90:hover { background-color: rgba(22, 163, 74, 0.9); }
    .group:hover .group-hover\:scale-105 { transform: scale(1.05); }

    .\!rounded-full { border-radius: 9999px !important; }
    .\!text-primary { color: var(--rd-primary) !important; }

    @media (min-width: 640px) {
        .sm\:block { display: block; }
        .sm\:inline { display: inline; }
        .sm\:flex-row { flex-direction: row; }
        .sm\:px-10 { padding-inline: 2.5rem; }
        .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .sm\:text-8xl { font-size: 6rem; line-height: 1; }
        .sm\:grid-cols-\[220px_minmax\(0\,1fr\)\] { grid-template-columns: 220px minmax(0, 1fr); }
    }
    @media (min-width: 768px) {
        .md\:flex-row { flex-direction: row; }
        .md\:items-center { align-items: center; }
        .md\:justify-between { justify-content: space-between; }
        .md\:gap-6 { gap: 1.5rem; }
        .md\:flex-1 { flex: 1; }
        .md\:py-12 { padding-block: 3rem; }
    }
    @media (min-width: 1024px) {
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .lg\:grid-cols-\[minmax\(0\,1fr\)_320px\] { grid-template-columns: minmax(0, 1fr) 320px; }
        .lg\:pb-10 { padding-bottom: 2.5rem; }
        .lg\:text-5xl { font-size: 3rem; line-height: 1; }
    }
    @media (min-width: 1280px) {
        .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    }

    .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Кнопки (btn.base + size + variant) */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: background-color .15s, color .15s, border-color .15s;
        cursor: pointer;
        border: none;
        line-height: 1.2;
        white-space: nowrap;
    }
    .btn-sm { height: 2.25rem; padding: 0 0.75rem; font-size: 0.875rem; }
    .btn-md { height: 2.75rem; padding: 0 1.25rem; font-size: 0.875rem; }
    .btn-lg { height: 3rem; padding: 0 1.5rem; font-size: 1rem; }
    .btn-primary { background: var(--rd-primary); color: var(--rd-primary-foreground); }
    .btn-primary:hover { background: rgba(37, 99, 235, 0.9); }
    .btn-phone { background: var(--rd-success); color: var(--rd-success-foreground); }
    .btn-phone:hover { background: rgba(22, 163, 74, 0.9); }
    .btn-outline { border: 1px solid var(--rd-border); background: var(--rd-card); color: var(--rd-foreground); }
    .btn-outline:hover { background: var(--rd-secondary); }
    .btn-ghost { background: transparent; color: var(--rd-foreground); }
    .btn-ghost:hover { background: var(--rd-secondary); }
    .btn-soft { background: var(--rd-primary-soft); color: var(--rd-accent-foreground); }
    .btn-soft:hover { background: rgba(238, 243, 255, 0.7); }

    /* Поля ввода */
    .input-rd {
        width: 100%;
        border-radius: 0.5rem;
        border: 1px solid var(--rd-input);
        background: var(--rd-background);
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        outline: none;
        transition: border-color .15s, box-shadow .15s;
        color: var(--rd-foreground);
    }
    .input-rd:focus { border-color: var(--rd-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }
    .input-rd::placeholder { color: var(--rd-muted-foreground); }

    /* Шапка */
    .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--rd-border); backdrop-filter: blur(8px); }
    .site-logo { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: var(--rd-primary); color: #fff; font-size: 0.875rem; font-weight: 800; flex-shrink: 0; }

    /* Поле поиска в шапке */
    .site-search-input {
        width: 100%; height: 2.75rem; border-radius: 0.5rem;
        border: 1px solid var(--rd-input); background: var(--rd-background);
        padding: 0 0.75rem 0 2.5rem; font-size: 0.875rem; outline: none;
        transition: border-color .15s, box-shadow .15s; color: var(--rd-foreground);
    }
    .site-search-input:focus { border-color: var(--rd-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }
    .site-search-input::placeholder { color: var(--rd-muted-foreground); }

    /* === Header layout === */
    /* Мобилка: категории — первая строка справа, поиск — вторая строка */
    #cat-dropdown-wrap { margin-left: auto; }
    .header-search { flex: 1 1 100%; min-width: 0; }
    /* Десктоп: лого слева | поиск по центру | категории справа */
    @media (min-width: 768px) {
        #cat-dropdown-wrap { margin-left: 0; order: 3; }
        .header-search { flex: 0 1 480px; min-width: 200px; max-width: 560px; order: 2; margin-left: auto; margin-right: auto; }
    }

    /* Город в шапке */
    .city-select-dropdown {
        position: absolute; left: 0; top: calc(100% + 8px); z-index: 200;
        min-width: 12rem; overflow: hidden;
        background: var(--rd-popover); border: 1px solid var(--rd-border);
        border-radius: 0.75rem; box-shadow: var(--rd-shadow-pop);
        color: var(--rd-foreground);
    }
    .city-select-option { display: block; width: 100%; padding: 0.625rem 1rem; border: none; background: transparent; font-size: 0.875rem; color: var(--rd-foreground); cursor: pointer; text-align: left; }
    .city-select-option:hover { background: var(--rd-secondary); }
    .city-select-option.selected { font-weight: 600; color: var(--rd-primary); }

    /* Выпадающее меню категорий */
    .cat-dropdown:not(.hidden) {
        position: absolute; left: 0; top: calc(100% + 8px); z-index: 200;
        width: min(95vw, 720px);
        background: var(--rd-popover); border: 1px solid var(--rd-border);
        border-radius: 0.75rem; box-shadow: var(--rd-shadow-pop);
        padding: 1rem; max-height: 70vh; overflow-y: auto;
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    }
    @media (max-width: 640px) {
        .cat-dropdown:not(.hidden) {
            position: fixed; left: 0; right: 0; top: auto;
            width: 100vw; max-height: 80vh;
            grid-template-columns: 1fr 1fr; border-radius: 0;
            border-left: none; border-right: none;
        }
    }
    .cat-dropdown-group {
        padding: 0.625rem 0.75rem;
        border-bottom: 1px solid var(--rd-border);
    }
    .cat-dropdown-group:nth-last-child(-n+3) { border-bottom: none; }
    .cat-dropdown-title {
        display: block; font-size: 0.8125rem; font-weight: 700; color: var(--rd-foreground);
        text-decoration: none; padding-bottom: 0.375rem; margin-bottom: 0.25rem;
    }
    .cat-dropdown-title:hover { color: var(--rd-primary); }
    .cat-dropdown-link {
        display: block; font-size: 0.8125rem; color: var(--rd-muted-foreground);
        text-decoration: none; padding: 0.1875rem 0; line-height: 1.4;
    }
    .cat-dropdown-link:hover { color: var(--rd-primary); }
    .cat-dropdown-more {
        display: block; font-size: 0.75rem; color: var(--rd-primary);
        text-decoration: none; padding-top: 0.25rem; font-weight: 500;
    }
    .cat-dropdown-more:hover { text-decoration: underline; }

    /* Хиро */
    .hero-rd { border-bottom: 1px solid var(--rd-border); background: var(--rd-primary-soft); }
    .hero-rd img { object-fit: cover; }
    .hero-search input {
        width: 100%; height: 3.5rem; border-radius: 0.75rem;
        border: 1px solid var(--rd-input); background: var(--rd-card);
        padding: 0 1rem 0 3rem; font-size: 1rem; outline: none;
        transition: border-color .15s, box-shadow .15s; color: var(--rd-foreground);
    }
    .hero-search input:focus { border-color: var(--rd-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); }

    /* Шаги */
    .step-num {
        display: grid; place-items: center;
        width: 2.75rem; height: 2.75rem; border-radius: 50%;
        background: var(--rd-primary); color: var(--rd-primary-foreground);
        font-size: 1.125rem; font-weight: 800; flex-shrink: 0;
    }

    /* CTA-секция: фото-подложка на всю ширину + полупрозрачный синий блок */
    .cta-section {
        background-image: url('/assets/img/fon-footer-1.jpg');
        background-size: cover; background-position: center;
    }
    .cta-banner {
        display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
        border-radius: 1rem; background: rgba(37, 99, 235, 0.85); color: var(--rd-primary-foreground);
        padding: 2rem 1.5rem;
    }
    @media (min-width: 768px) {
        .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem; }
    }

    /* Общие модалки */
    .phone-btn {
        background: var(--rd-success); border-radius: 0.5rem; padding: 0.875rem 1.5rem;
        color: #fff; font-size: 1rem; font-weight: 700; width: 100%;
        cursor: pointer; border: none; transition: background 0.2s;
    }
    .phone-btn:hover { background: rgba(22, 163, 74, 0.9); }
    .phone-btn .phone-sub { display: block; font-size: 0.875rem; font-weight: 400; opacity: 0.9; margin-top: 2px; }
    .phone-btn.revealed .phone-label { font-size: 1.125rem; letter-spacing: 0.5px; }
    .msg-btn {
        background: var(--rd-primary); border-radius: 0.5rem; padding: 0.875rem 1.5rem;
        color: #fff; font-size: 1rem; font-weight: 600; width: 100%;
        cursor: pointer; border: none; transition: background 0.2s;
    }
    .msg-btn:hover { background: rgba(37, 99, 235, 0.9); }

    .seller-card { background: var(--rd-card); border: 1px solid var(--rd-border); border-radius: 1rem; padding: 1rem; box-shadow: var(--rd-shadow-card); }

    .detail-row { display: flex; padding: 0.5rem 0; border-bottom: 1px solid var(--rd-border); }
    .detail-label { color: var(--rd-muted-foreground); width: 50%; flex-shrink: 0; font-size: 0.875rem; }
    .detail-value { font-weight: 600; width: 50%; font-size: 0.875rem; }
    .detail-row-full .detail-label { width: 25%; }
    .detail-row-full .detail-value { width: 75%; }
    .detail-value-nowrap { white-space: nowrap; overflow-x: auto; }

    .price-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--rd-border); }
    .price-row:last-child { border-bottom: none; }
    .section-collapsible { cursor: pointer; user-select: none; }
    .section-collapsible:hover { background: var(--rd-secondary); }

    .review-card { padding: 1rem 0; border-bottom: 1px solid var(--rd-border); display: flex; gap: 0.75rem; }
    .review-card:last-child { border-bottom: none; }
    .review-avatar {
        width: 2.5rem; height: 2.5rem; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0;
    }
    .avito-stars { color: var(--rd-warning); letter-spacing: 1px; }
    .rating-badge { background: var(--rd-success); color: #fff; font-weight: 700; border-radius: 6px; padding: 2px 6px; font-size: 13px; }

    /* Галерея (компонент) */
    .gallery-arrow {
        position: absolute; top: 50%; transform: translateY(-50%);
        width: 2.5rem; height: 2.5rem; border-radius: 50%;
        background: rgba(255, 255, 255, 0.9); border: none; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background 0.2s; z-index: 10;
    }
    .gallery-arrow:hover { background: #fff; }
    .gallery-arrow-left { left: 0.75rem; }
    .gallery-arrow-right { right: 0.75rem; }
    .gallery-counter {
        position: absolute; bottom: 0.75rem; right: 0.75rem;
        background: rgba(35, 38, 59, 0.7); color: #fff; font-size: 0.75rem;
        padding: 0.25rem 0.5rem; border-radius: 0.375rem; pointer-events: none;
    }
    .gallery-thumb {
        border: 2px solid transparent; border-radius: 0.75rem; overflow: hidden;
        cursor: pointer; padding: 0; background: none; transition: border-color 0.15s, opacity 0.15s; flex-shrink: 0;
    }
    .gallery-thumb img { display: block; width: 6rem; height: 3.75rem; object-fit: cover; border-radius: 0.625rem; }

    /* Галерея — компактнее (главное фото 16:9, не 4:3) */
    #gallery > .relative { aspect-ratio: 16 / 9 !important; max-height: 30rem; }
    @media (min-width: 1024px) { #gallery > .relative { max-height: 26rem; } }

    /* Форма отзыва — компактнее, и скрыта, пока отзывов нет */
    #reviews > p + div.mt-8 { display: none; }
    #reviews > div.mt-8 { margin-top: 1.25rem !important; padding: 1rem !important; }
    .gallery-thumb.active { border-color: var(--rd-primary); }
    .gallery-thumb:hover { border-color: var(--rd-primary); opacity: 0.85; }

    /* Переопределения avito-классов общих компонентов */
    .bg-avito-blue { background-color: var(--rd-primary) !important; }
    .bg-avito-blue-hover { background-color: rgba(37, 99, 235, 0.9) !important; }
    .hover\:bg-avito-blue-hover { background-color: rgba(37, 99, 235, 0.9) !important; }
    .hover\:bg-avito-blue-hover:hover { background-color: rgba(37, 99, 235, 0.9) !important; }
    .bg-avito-green { background-color: var(--rd-success) !important; }
    .text-avito-blue { color: var(--rd-primary) !important; }
    .text-avito-text { color: var(--rd-foreground) !important; }
    .text-avito-text-secondary { color: var(--rd-muted-foreground) !important; }
    .text-avito-text-muted { color: var(--rd-muted-foreground) !important; }
    .border-avito-border { border-color: var(--rd-border) !important; }
    .border-avito-border-light { border-color: var(--rd-border) !important; }
    .bg-avito-bg { background-color: var(--rd-background) !important; }
    .hover\:border-avito-blue:hover { border-color: var(--rd-primary) !important; }
    .group:hover .group-hover\:text-avito-blue { color: var(--rd-primary) !important; }

    /* Рейтинг-звёзды старого типа (★) в shared-компонентах */
    .star { transition: color 0.15s; }

    /* Модалки — скругления как в дизайне */
    #login-modal .bg-white, #leadModal, #reviews-modal .bg-white { border-radius: 1rem; }

    @media (max-width: 1024px) {
        .detail-row { flex-direction: column; gap: 4px; }
        .detail-label { width: 100%; }
        .detail-value { width: 100%; font-weight: 400; }
        footer.mt-12 { margin-top: 0.5rem; }
    }