/*
 * Public storefront mobile guardrails.
 * Keep page-sized overflow impossible; let intentionally wide widgets scroll
 * inside their own wrapper instead of widening the whole document.
 */

html,
body {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 820px) {
    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
    }

    .site-main,
    .site-main > *,
    .site-main form,
    .commerce-home,
    .commerce-catalog,
    .catalog-page,
    .product-page,
    .cart-page,
    .checkout-page,
    .order-page,
    .px-showcase {
        min-width: 0;
        max-width: 100%;
    }

    .site-main :where(
        .catalog-toolbar__inner,
        .catalog-hero__inner,
        .catalog-filters__grid,
        .catalog-filter-groups,
        .catalog-filter-group,
        .catalog-filter-values,
        .catalog-extra,
        .catalog-extra__body,
        .catalog-extra-row,
        .catalog-extra-row__values,
        .catalog-results-box,
        .catalog-grid,
        .product-toolbar__inner,
        .product-hero,
        .product-card,
        .product-section,
        .product-service-box,
        .product-reviews,
        .product-related-grid,
        .checkout-layout,
        .checkout-page__panel,
        .checkout-page__summary,
        .order-page__grid,
        .order-page__card,
        .cart-page__table-card,
        .cart-page__summary,
        .commerce-products,
        .commerce-categories,
        .commerce-services,
        .ai-projects,
        .ai-projects__hero,
        .ai-projects__grid,
        .ms-projects__slider,
        .ms-projects__viewport,
        .ms-projects__controls,
        .px-hero,
        .px-overview,
        .px-features,
        .px-flow,
        .px-shots,
        .px-related__grid
    ),
    .site-main :where(
        .catalog-toolbar__inner,
        .catalog-hero__inner,
        .catalog-filters__grid,
        .catalog-extra-row,
        .catalog-grid,
        .product-toolbar__inner,
        .product-hero,
        .product-service-box,
        .product-reviews,
        .product-related-grid,
        .checkout-layout,
        .order-page__grid,
        .commerce-products,
        .commerce-categories,
        .commerce-services,
        .ai-projects__grid,
        .px-hero,
        .px-overview,
        .px-features,
        .px-flow,
        .px-shots,
        .px-related__grid
    ) > * {
        min-width: 0;
        max-width: 100%;
    }

    .site-main :where(img, video, canvas, iframe) {
        max-width: 100%;
    }

    .site-main :where(input, select, textarea, button) {
        max-width: 100%;
    }

    .site-main :where(h1, h2, h3, h4, p, a, span, strong, small, label, td, th) {
        overflow-wrap: anywhere;
    }

    .site-main :where(pre, code) {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .site-main :where(
        .cart-page__table-wrap,
        .checkout-summary__table-wrap,
        .order-page__table-wrap,
        .product-specs-wrap,
        .product-nav,
        .catalog-pagination,
        .px-subnav
    ) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .store-header,
    .store-header__main,
    .store-search,
    .store-search input,
    .store-actions {
        min-width: 0;
        max-width: 100%;
    }

    .store-search input {
        width: 100%;
    }

    .storefront-catalog .catalog-filter-values,
    .storefront-catalog .catalog-extra-row__values {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .storefront-catalog .catalog-chip {
        min-width: 0;
        max-width: 100%;
        flex: 0 1 auto !important;
    }

    .storefront-catalog .catalog-chip span {
        min-width: 0;
        max-width: 100%;
        height: auto;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .px-showcase {
        width: 100% !important;
        margin-inline: 0 !important;
    }
}

@media (max-width: 380px) {
    .site-main {
        width: calc(100% - 16px);
        padding-inline: 0 !important;
    }

    .storefront-catalog .catalog-toolbar__left,
    .storefront-catalog .catalog-price-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .storefront-catalog .catalog-btn {
        white-space: normal;
    }
}