@media (max-width: 1200px) {
    .product-grid,
    .catalog-products,
    .related-grid,
    .listing-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero h1 {
        font-size: 48px;
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 24px;
    }

    .nav-desktop,
    .header-search {
        display: none;
    }

    .search-toggle,
    .menu-toggle {
        display: inline-flex;
    }

    .hero,
    .trade-banner,
    .catalog-layout,
    .product-detail,
    .contact-layout,
    .trade-page,
    .cart-layout,
    .footer-grid,
    .auth-layout,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .address-card-grid {
        grid-template-columns: 1fr;
    }

    .hero,
    .hero-visual {
        min-height: 0;
    }

    .hero-visual {
        min-height: 320px;
        order: 2;
    }

    .hero-copy {
        padding: 36px 0 24px;
    }

    .product-grid,
    .catalog-products,
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .community-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filters {
        position: static;
    }

    .site-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 50;
        display: none;
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        width: min(360px, 88vw);
        height: 100%;
        background: #0c0e10;
        border-right: 1px solid var(--border);
        transform: translateX(-104%);
        transition: transform 200ms ease;
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    .is-open-menu .mobile-drawer {
        transform: none;
        display: flex;
    }

    .is-open-menu .site-overlay,
    .is-open-search .site-overlay {
        display: block;
    }

    .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .drawer-head img {
        width: 140px;
    }

    .drawer-nav a {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

    .drawer-nav a.is-active,
    .drawer-nav a:hover {
        color: #fff;
    }

    .drawer-foot {
        margin-top: auto;
        display: grid;
        gap: 10px;
        padding-top: 20px;
    }

    .mobile-search {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 70;
        padding: 16px;
        background: #08090a;
        border-bottom: 1px solid var(--border);
        transform: translateY(-110%);
        transition: transform 180ms ease;
        display: block;
    }

    .is-open-search .mobile-search {
        transform: none;
    }

    .mobile-search form {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 48px;
        padding: 0 14px;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        background: #0c0e10;
    }

    .mobile-search input {
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fff;
    }

    .mobile-search button {
        border: 0;
        background: transparent;
        color: #fff;
    }

    .filters-toggle {
        display: inline-flex;
    }

    .filters.is-collapsed {
        display: none;
    }

    .footer-bottom-inner {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    :root {
        --header-h: 68px;
    }

    .logo img {
        width: 132px;
    }

    .section {
        padding: 56px 0;
    }

    .product-grid,
    .category-grid,
    .community-grid,
    .related-grid,
    .catalog-products,
    .listing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1 {
        font-size: 36px;
    }

    .trade-banner {
        padding: 24px;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 16px;
    }

    .product-grid.home-featured,
    .product-grid,
    .catalog-products {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .community-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 240px;
    }

    .hero-perks {
        flex-direction: column;
        gap: 10px;
    }

    .product-body h3 {
        min-height: 0;
    }

    .cart-item {
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .product-grid,
    .product-grid.home-featured,
    .catalog-products {
        grid-template-columns: 1fr;
    }
}
