/**
 * Mobile product page styles
 * Critical CSS for mobile product layout and responsiveness
 */
@media (max-width: 1024px) {
    /* Force container and all parents to respect viewport on mobile */
    .single-product .site-main,
    .single-product .container,
    .single-product .woocommerce,
    .woocommerce,
    .woocommerce div.product,
    .woocommerce div.product .summary {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Product title */
    .woocommerce div.product .product_title,
    .product_title.entry-title,
    h1.product_title {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 24px !important;
    }

    /* Critical mobile fixes for variations table */
    table.variations,
    .woocommerce div.product form.cart .variations {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        table-layout: auto !important;
    }

    .woocommerce div.product form.cart .variations tbody {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    .woocommerce div.product form.cart .variations tr {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        margin-bottom: 16px !important;
    }

    .woocommerce div.product form.cart .variations th,
    .woocommerce div.product form.cart .variations td,
    .woocommerce div.product form.cart .variations th.label,
    .woocommerce div.product form.cart .variations td.value {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        padding: 4px 0 !important;
    }

    .woocommerce div.product form.cart .variations select,
    select#duft,
    select[name^="attribute_"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    .woocommerce div.product form.cart button.single_add_to_cart_button,
    button.single_add_to_cart_button,
    .single_add_to_cart_button.button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .woocommerce div.product form.cart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Fix product images on mobile - center them */
    .woocommerce div.product div.images,
    .woocommerce div.product .woocommerce-product-gallery {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 0 2vw !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .woocommerce div.product .woocommerce-product-gallery__wrapper {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .woocommerce div.product .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
        width: 320px !important;
        height: 320px !important;
        margin: 0 auto !important;
    }

    .woocommerce div.product .woocommerce-product-gallery__image img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .woocommerce div.product .duftelys-thumb-strip {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}