/* ==========================================================================
   Drah — Authoritative mobile safety layer (loaded LAST so it always wins).
   Goal: zero horizontal overflow / no right-edge crop on ANY phone, incl. iOS
   Safari which strictly honors fixed-px grid/flex floors (minmax(NNNpx,...)),
   unlike Chrome. We neutralize every fixed-px column floor on small screens by
   forcing single-column stacks and viewport-bound widths.
   ========================================================================== */

/* --- Global containment: nothing may exceed the screen width --- */
@media (max-width: 768px) {
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Every primary wrapper bounded to the viewport */
    .site-main,
    .drah-container,
    .entry-content,
    .drah-page-shell,
    .drah-commerce-page,
    .single-product,
    .single-product .product,
    .single-product div.product.product {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    /* Media never forces width */
    img, video, iframe, svg, table, canvas {
        max-width: 100% !important;
        height: auto;
    }
}

/* --- Single-product page: force one stacked column, kill all px floors --- */
@media (max-width: 768px) {
    .single-product div.product.product,
    .single-product .drah-product-custom-grid,
    .single-product .drah-product-custom-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .single-product div.product.product > *,
    .single-product div.product div.images,
    .single-product div.product div.summary,
    .single-product .drah-product-gallery,
    .single-product .drah-product-custom-fields {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Customization fields stack full-width, but DON'T force display on the
       option-pill containers (that would make pills stack as full-width blocks). */
    .single-product .drah-product-custom-field,
    .single-product .drah-product-custom-grid > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Inputs/selects/textareas must shrink with the column (iOS min-content fix) */
    .single-product input,
    .single-product select,
    .single-product textarea {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Option pills: keep them as a compact wrapping row, side by side */
    .single-product .drah-product-option-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .single-product .drah-product-option-pills > * {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

/* --- Checkout / cart / account: stack the sidebar layouts --- */
@media (max-width: 980px) {
    .wc-block-components-sidebar-layout,
    .woocommerce-checkout form.checkout,
    .woocommerce-account .woocommerce {
        display: block !important;
    }
    .wc-block-components-sidebar-layout > *,
    .woocommerce-checkout form.checkout > *,
    .woocommerce-account .woocommerce > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
    }
}

/* --- Related products: contain the horizontal carousel so it can't drag the
       whole page sideways on iOS (overscroll containment) --- */
@media (max-width: 768px) {
    .single-product .related.products ul.products {
        max-width: 100% !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Grid fallbacks: any 2-col customization grids collapse cleanly --- */
@media (max-width: 480px) {
    .single-product .drah-product-custom-grid {
        grid-template-columns: 1fr !important;
    }
}