/*
 * Mobile edge spacing guard.
 *
 * Keeps storefront content centered with equal inline breathing room on phones,
 * including browsers using "Desktop site" where the CSS viewport can be wider
 * than a normal mobile viewport.
 */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1180px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .container,
    .hp-container,
    .page-shell {
        width: min(calc(100% - 1.5rem), 1200px);
        max-width: calc(100% - 1.5rem) !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
        box-sizing: border-box;
    }

    main > .container,
    main > section.container,
    .breadcrumb-container > .container,
    .hp-breadcrumb-wrap .hp-container {
        margin-inline: auto !important;
    }

    .pd-layout,
    .product-detail-layout,
    .product-content-layout,
    .cart-layout,
    .checkout-layout,
    .page-grid,
    .products-page-layout,
    .products-page-layout--dynamic {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .pd-layout,
    .product-detail-layout,
    .product-content-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pd-gallery,
    .pd-info,
    .pd-actions,
    .pd-tabs,
    .pd-related,
    .modern-hero__content,
    .modern-products-grid,
    .products-grid,
    .modern-category-circles,
    .cta-banner {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .pd-gallery__main,
    .pd-gallery__img,
    .pd-actions__btns,
    .pd-btn-cart,
    .pd-btn-whatsapp,
    .pd-info__desc,
    .pd-tabs {
        width: 100%;
    }

    .pd-gallery__thumbs {
        max-width: 100%;
    }

    .pd-actions__btns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 52px) minmax(0, 52px);
        align-items: stretch;
    }

    .pd-btn-cart {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .pd-actions__btns {
        grid-template-columns: 1fr 1fr !important;
    }

    .pd-btn-cart {
        grid-column: 1 / -1;
    }

    .pd-btn-wish,
    .pd-btn-compare {
        width: 100% !important;
    }
}