@media (max-width: 1100px) {
    .topbar {
        grid-template-columns: auto 1fr;
    }

    .top-actions {
        display: none;
    }

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

    .catalog-grid,
    .product-grid,
    .component-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    :root {
        --gutter: 16px;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .topbar {
        min-height: 64px;
        display: flex;
        justify-content: space-between;
    }

    .top-search,
    .main-nav {
        display: none;
    }

    .brand span {
        font-size: 24px;
    }

    .hero {
        min-height: 520px;
    }

    .hero__panel {
        padding: 30px;
    }

    .hero h1 {
        font-size: 36px;
    }

    .catalog-layout {
        grid-template-columns: 1fr;
        padding-top: 40px;
    }

    .catalog-sidebar {
        padding-right: 0;
        border-right: 0;
        border-bottom: 1px solid var(--outline);
        padding-bottom: 24px;
    }

    .catalog-toolbar {
        flex-direction: column;
    }

    .product-hero,
    .product-gallery {
        grid-template-columns: 1fr;
    }

    .product-gallery__thumbs {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .product-gallery__main {
        min-height: 380px;
    }
}

@media (max-width: 620px) {
    .section {
        padding-block: 56px;
    }

    .category-grid,
    .catalog-grid,
    .product-grid,
    .component-grid,
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

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

    .hero__content {
        padding-block: 48px;
    }

    .hero__panel {
        max-width: none;
    }

    .button-row,
    .cta-band__inner {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .product-summary h1,
    .content-page h1 {
        font-size: 34px;
    }

    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}