/* site3 — mobile v5 */

@media (prefers-reduced-motion: reduce) {
    .header-top-bar {
        transition: none;
    }
    .site-header--kits.site-header--scrolled .header-top-bar {
        max-height: 0;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-mini-logo {
        transition: none;
        transform: none;
    }
}

@media (max-width: 767px) {
    .header-top-bar {
        padding: 0.4rem 0.75rem;
        max-height: 3.5rem;
    }
    .header-top-bar__link {
        flex-wrap: nowrap;
        gap: 0.25rem 0.45rem;
    }
    .header-top-bar__name {
        font-size: clamp(0.78rem, 3.8vw, 0.92rem);
        white-space: nowrap;
    }
    .header-top-bar__tagline {
        font-size: clamp(0.66rem, 3.2vw, 0.72rem);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .header-top-bar__tagline::before {
        margin-right: 0.3rem;
    }

    .mobile-cta-bar {
        display: flex;
        align-items: stretch;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }
    body.site3-kits {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
    body.kit-page-active .mobile-cta-bar { display: none !important; }
    body.kit-page-active {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    .hero__trust-bar { gap: 0.4rem; }
    .hero__trust-item { font-size: 0.68rem; padding: 0.3rem 0.6rem; }

    .hero--commerce .hero__cta .btn--secondary { display: none; }

    .catalog-grid { grid-template-columns: 1fr; }
    .filter-tags { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .filter-tag { flex-shrink: 0; }

    .chat-widget--guide {
        display: none !important;
    }

    .kit-panel,
    .vip-info-box { padding: 1.25rem 1.35rem; }

    .cross-sell-grid { grid-template-columns: 1fr; }
}

/* Узкие экраны ~320px: короткий слоган */
@media (max-width: 400px) {
    .header-top-bar__tagline-lead {
        display: none;
    }
    .header-top-bar__tagline::before {
        display: none;
    }
    .header-top-bar__link {
        gap: 0.2rem 0.35rem;
    }
}

@media (max-width: 340px) {
    .header-top-bar {
        padding: 0.35rem 0.5rem;
    }
    .header-top-bar__name {
        font-size: 0.74rem;
    }
    .header-top-bar__tagline {
        font-size: 0.64rem;
    }
}