/**
 * Mobile Fix for Variable Products - Single Product Page
 * 
 * Fixes overflow and layout issues on mobile devices
 * Ensures all elements fit properly within viewport
 * 
 * @package Commerce_Elite
 */

/* ============================================
   CRITICAL MOBILE FIXES
   ============================================ */

/* Ensure summary container doesn't overflow */
@media (max-width: 768px) {
    .single-product-wrapper .summary.entry-summary {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix all child elements */
    .single-product-wrapper .summary.entry-summary > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Stack cart elements earlier on mobile */
    .single-product-wrapper .cart {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Full width quantity selector */
    .single-product-wrapper .quantity {
        flex: 1 !important;
        width: 100% !important;
    }
    
    /* Full width add to cart button */
    .single-product-wrapper .single_add_to_cart_button {
        flex: 1 !important;
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
    }
    
    /* Fix variations table */
    .single-product-wrapper .variations {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .single-product-wrapper .variations td {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0 !important;
    }
    
    .single-product-wrapper .variations label {
        display: block !important;
        margin-bottom: 0.5rem !important;
        padding: 0 !important;
    }
    
    .single-product-wrapper .variations select {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix price display */
    .single-product-wrapper .summary .price {
        font-size: 1.75rem !important;
        flex-wrap: wrap !important;
    }
    
    /* Fix short description */
    .single-product-wrapper .woocommerce-product-details__short-description {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix trust badges */
    .single-product-wrapper .product-trust-badges {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
    }
    
    .single-product-wrapper .trust-badge {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Fix stock badge */
    .single-product-wrapper .stock {
        width: fit-content !important;
        max-width: 100% !important;
    }
    
    /* Fix product meta (SKU, Category) */
    .single-product-wrapper .product_meta {
        width: 100% !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix variation swatches on mobile */
    .ce-variation-swatches {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .ce-swatches-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 480px) {
    .single-product-wrapper .summary.entry-summary {
        padding: 1rem !important;
    }
    
    .single-product-wrapper .product_title {
        font-size: 1.375rem !important;
        line-height: 1.3 !important;
    }
    
    .single-product-wrapper .summary .price {
        font-size: 1.5rem !important;
    }
    
    .single-product-wrapper .single_add_to_cart_button {
        min-height: 48px !important;
        font-size: 0.9375rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .single-product-wrapper .quantity .qty {
        height: 48px !important;
    }
    
    /* Smaller gap for cart elements */
    .single-product-wrapper .cart {
        gap: 0.625rem !important;
    }
}

/* ============================================
   FIX VARIATION SWATCHES MOBILE OVERFLOW
   ============================================ */

@media (max-width: 768px) {
    /* Ensure swatches fit properly */
    .ce-swatch-item {
        width: 65px !important;
        max-width: 65px !important;
    }
    
    .ce-swatch-image-wrapper {
        height: 55px !important;
    }
}

@media (max-width: 480px) {
    .ce-swatch-item {
        width: 60px !important;
        max-width: 60px !important;
    }
    
    .ce-swatch-image-wrapper {
        height: 50px !important;
    }
    
    .ce-swatches-wrapper {
        gap: 8px !important;
    }
}

/* ============================================
   ENSURE NO HORIZONTAL SCROLL
   ============================================ */

@media (max-width: 768px) {
    /* Root container fix */
    .single-product-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .single-product-wrapper .product-main-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Prevent any element from causing overflow */
    .single-product-wrapper .summary.entry-summary * {
        max-width: 100% !important;
    }
}

/* ============================================
   VARIATION FORM SPECIFIC FIXES
   ============================================ */

@media (max-width: 768px) {
    /* Variation form table layout fix */
    .single-product-wrapper .variations_form {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .single-product-wrapper table.variations {
        display: block !important;
        width: 100% !important;
    }
    
    .single-product-wrapper table.variations tbody {
        display: block !important;
        width: 100% !important;
    }
    
    .single-product-wrapper table.variations tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .single-product-wrapper table.variations td.label {
        display: block !important;
        width: 100% !important;
        padding-bottom: 0.5rem !important;
    }
    
    .single-product-wrapper table.variations td.value {
        display: block !important;
        width: 100% !important;
    }
    
    /* Reset button */
    .single-product-wrapper .reset_variations {
        display: inline-block !important;
        margin-top: 0.5rem !important;
        font-size: 0.875rem !important;
    }
}