/* ============================================
   PRODUCT PAGE MOBILE OVERRIDE - FINAL
   This file MUST be loaded last to override everything
   ============================================ */

/* Mobile - 768px and below - MAXIMUM SPECIFICITY */
@media (max-width: 768px) {

    /* CRITICAL: Override grid layout with maximum specificity - ALL POSSIBLE SELECTORS */
    html body .product-content,
    html body #productContent,
    html body .product-container .product-content,
    html body .product-main .container .product-content,
    html body .product-main .product-container .product-content,
    html body .product-container #productContent,
    html body .product-main #productContent,
    body .product-content,
    body #productContent,
    .product-content,
    #productContent {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
    }

    /* CRITICAL: Force images wrapper to full width and relative positioning - ALL SELECTORS */
    html body .product-images-wrapper,
    html body #productContent .product-images-wrapper,
    html body .product-content .product-images-wrapper,
    html body .product-container .product-images-wrapper,
    html body .product-main .product-images-wrapper,
    body .product-images-wrapper,
    body #productContent .product-images-wrapper,
    body .product-content .product-images-wrapper,
    .product-images-wrapper,
    #productContent .product-images-wrapper,
    .product-content .product-images-wrapper {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        align-self: stretch !important;
    }

    /* CRITICAL: Force right column to full width - ALL SELECTORS */
    html body .product-right-column,
    html body #productContent .product-right-column,
    html body .product-content .product-right-column,
    html body .product-container .product-right-column,
    body .product-right-column,
    body #productContent .product-right-column,
    body .product-content .product-right-column,
    .product-right-column,
    #productContent .product-right-column,
    .product-content .product-right-column {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        padding: 0 !important;
        /* margin: 100px 0 0 0 !important; */
        /* margin-top: 100px !important; */
    }

    /* Product Images - Stack vertically on mobile */
    html body .product-images,
    html body .product-images-wrapper .product-images {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px 12px !important;
        width: 100% !important;
    }

    /* Thumbnails - Horizontal scroll on mobile */
    html body .thumbnail-gallery-vertical {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: none !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    /* OVERRIDE INLINE STYLES - Force single column even if inline styles exist */
    html body [class*="product-content"][style],
    html body [id*="productContent"][style] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
    }

    html body [class*="product-images-wrapper"][style] {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    html body [class*="product-right-column"][style] {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: 1 / -1 !important;
    }
}