/* PDP Modern Responsive Optimization - HD+ Displays & iPhone */

/* ===== CONTAINER OPTIMIZATION ===== */
/* Optimize for HD+ displays (1440px+) while maintaining mobile-first approach */
.container {
    width: min(1200px, 90%); /* Max 1200px for HD+ displays, 90% for smaller screens */
    margin: 0 auto;
    padding: 0 20px; /* Add padding for mobile */
}

/* Large desktop screens - optimize spacing further */
@media (min-width: 1200px) {
    .Product-detail .product-slider {
        width: 58% !important; /* Slightly larger for very wide screens */
        margin-right: 2% !important;
        padding-bottom: 0 !important; /* Remove bottom padding to allow image expansion */
    }
    
    .Product-detail .product-details {
        width: 40% !important; /* Adjusted to match */
    }
    
    /* Increase thumbnail spacing for larger screens */
    .product-slider center:last-child {
        left: 15px !important; /* More space from edge */
        width: 70px !important; /* Slightly larger thumbnails */
        max-width: 70px !important;
    }
    
    /* Adjust main image positioning for larger thumbnails */
    .product-slider #popupdiv {
        margin-left: 40px !important; /* Optimal balance between aesthetics and functionality */
        max-width: calc(100% - 40px) !important;
        padding: 5px !important; /* Minimal padding for maximum image size */
        margin-bottom: 0 !important; /* Remove bottom margin to utilize white space */
        height: auto !important; /* Allow container to expand with image */
        min-height: auto !important; /* Remove any min-height constraints */
    }
    
    .product-slider center:first-child {
        margin-left: 40px !important;
        max-width: calc(100% - 40px) !important;
        margin-bottom: 0 !important; /* Remove bottom margin */
        height: auto !important; /* Allow container to expand with image */
        min-height: auto !important; /* Remove any min-height constraints */
    }
    
    /* Maximize main image size on large screens to cover yellow area */
    .product-slider #productmainimage {
        width: 600px !important; /* Larger explicit width for big screens */
        height: 600px !important; /* Larger explicit height for big screens */
        max-height: 900px !important; /* Even larger on big screens to cover yellow area */
        padding: 0 !important; /* Remove all padding for maximum size */
    }
}

/* ===== PRODUCT LAYOUT OPTIMIZATION ===== */
/* Use flexbox instead of grid to work with existing float structure */
.Product-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
    max-width: 100%;
}

/* Desktop optimized layout - maintain original proportions but optimize */
@media (min-width: 768px) {
    .Product-detail {
        display: block !important; /* Revert to block for float compatibility */
    }
    
    .Product-detail .product-slider {
        width: 55% !important; /* Increased from 48% to better utilize space */
        float: left !important;
        height: auto !important;
        margin-right: 2% !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        padding-bottom: 0 !important; /* Remove bottom padding to allow image expansion */
    }
    
    .Product-detail .product-details {
        width: 43% !important; /* Adjusted to match new product-slider width */
        float: left !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        font-family: 'Lato-Regular' !important;
    }
    
    .Product-detail .product-full-details {
        width: 100% !important;
        overflow: hidden !important; /* Clear floats */
        display: block !important;
    }
}

/* Tablet layout */
@media (min-width: 768px) and (max-width: 1023px) {
    .Product-detail .product-slider {
        width: 55% !important; /* Match desktop layout */
        margin-right: 2% !important;
    }
    
    .Product-detail .product-details {
        width: 43% !important; /* Match desktop layout */
    }
}

/* Mobile layout - stack vertically */
@media (max-width: 767px) {
    .Product-detail {
        display: block !important;
    }
    
    .Product-detail .product-slider {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        margin-bottom: 20px !important;
    }
    
    .Product-detail .product-details {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        margin-top: 0 !important;
    }
    
    .Product-detail .product-full-details {
        width: 100% !important;
    }
}

/* Large Mobile / Small Tablet (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    /* Keep mobile layout but optimize for larger screens */
    .Product-detail .product-slider {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    .Product-detail .product-details {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    .Product-detail .product-full-details {
        width: 100% !important;
        max-width: 640px !important;
        margin: 0 auto !important;
    }

    /* Image sizing - Between mobile (400px) and tablet (500px) */
    #productmainimage,
    #productmainimage_mob {
        max-height: 450px !important;
    }

    /* Thumbnail carousel - Wider for larger screen */
    .thumb-slider {
        max-width: 420px !important;
        margin: 0 auto !important;
    }

    .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 68px !important;
        height: 68px !important;
    }

    /* Typography - 16px between mobile (14px) and tablet (18px) */
    .product-details h1 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .product-details p,
    .product-details .description {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* Metal selector buttons - Slightly larger for bigger screens */
    .metal-icon-button svg {
        width: 46px !important;
        height: 46px !important;
    }
}

/* ===== PRODUCT SLIDER OPTIMIZATION ===== */
.product-slider {
    position: relative;
}

/* Ensure product-slider has relative positioning for absolute thumbnails */
@media (min-width: 768px) {
    .Product-detail .product-slider {
        position: relative !important;
    }
}

/* Desktop image optimization */
@media (min-width: 768px) {
    .product-slider #popupdiv {
        max-width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .product-slider #productmainimage {
        max-width: 100%;
        height: auto;
        max-height: 650px; /* TIER 2 FIX: Changed from 500px to 650px for Diamond Detail 650px images */
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    
    .product-slider center {
        width: 100%;
        margin: 0 auto;
    }
}

/* Mobile image optimization */
@media (max-width: 767px) {
    .product-slider #productmainimage,
    .product-slider #productmainimage_mob {
        max-width: 100%;
        height: auto;
        max-height: 400px; /* Optimized for mobile viewport */
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
}

/* ===== PRODUCT DETAILS OPTIMIZATION ===== */
.product-details {
    font-family: 'Lato-Regular';
}

/* Desktop typography optimization - Best practices for readability */
@media (min-width: 768px) {
    .product-details .product-title h1 {
        font-size: clamp(18px, 2vw, 24px); /* Reduced for better readability */
        line-height: 1.4; /* Improved line height */
        margin-bottom: 12px; /* Reduced spacing */
        word-wrap: break-word;
        font-weight: 400; /* Normal weight to blend with theme */
        color: #333; /* Better contrast */
    }
    
    /* Product description text - viewport-specific optimization
       Based on UI/UX expert panel analysis (6/6 unanimous):
       - Desktop 16px: Web standard, accessibility compliance (WCAG AA)
       - Tablet 15px: Optimal for mid-range viewing distance
       - Mobile 14px: Perfect for close proximity viewing */

    /* Desktop (≥1024px): 16px for optimal readability at 20-28" viewing distance */
    @media (min-width: 1024px) {
        .product-details .product-text p {
            font-size: 16px !important;
            line-height: 1.6 !important; /* Improved from 1.5 for desktop */
            margin-bottom: 12px;
            word-wrap: break-word;
            font-weight: 300;
            color: #555;
        }
    }

    /* Tablet (768px-1023px): 15px for mid-range viewing distance */
    @media (min-width: 768px) and (max-width: 1023px) {
        .product-details .product-text p {
            font-size: 15px !important;
            line-height: 1.5 !important;
            margin-bottom: 12px;
            word-wrap: break-word;
            font-weight: 300;
            color: #555;
        }
    }

    /* Mobile (<768px): 14px for close proximity viewing */
    @media (max-width: 767px) {
        .product-details .product-text p {
            font-size: 14px !important;
            line-height: 1.5 !important;
            margin-bottom: 12px;
            word-wrap: break-word;
            font-weight: 300;
            color: #555;
        }
    }
    
    .product-details {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0; /* Remove top margin */
        padding-top: 0; /* Remove top padding */
    }
    
    /* Optimize pricing and other elements */
    .product-details .price {
        font-size: clamp(16px, 1.6vw, 20px);
        line-height: 1.3;
        margin-bottom: 8px;
        font-weight: 400; /* Normal weight */
    }
    
    .product-details .description {
        font-size: clamp(12px, 1.2vw, 14px);
        line-height: 1.4;
        margin-bottom: 10px;
        font-weight: 300; /* Light weight */
        color: #666;
    }
    
    /* Reduce spacing between elements */
    .product-details > * {
        margin-bottom: 8px !important;
    }
    
    .product-details .product-title {
        margin-bottom: 8px !important;
    }
    
    .product-details .product-text {
        margin-bottom: 8px !important;
    }
}

/* Mobile typography optimization - Best practices for readability */
@media (max-width: 767px) {
    .product-details .product-title h1 {
        font-size: 16px; /* Reduced for better readability */
        line-height: 1.4; /* Improved line height */
        margin-bottom: 10px; /* Reduced spacing */
        font-weight: 400; /* Normal weight to blend with theme */
        color: #333;
    }
    
    .product-details .product-text p {
        font-size: 14px; /* Reduced for better readability */
        line-height: 1.4; /* Improved line height */
        margin-bottom: 12px; /* Reduced spacing */
        font-weight: 300; /* Light weight to blend with theme */
        color: #555;
    }
    
    /* Reduce spacing between elements */
    .product-details > * {
        margin-bottom: 6px !important;
    }
}

/* ===== MODERN IPHONE OPTIMIZATION ===== */
/* iPhone SE (375px) */
@media (max-width: 375px) {
    .container {
        padding: 0 16px;
    }
    
    .product-slider #productmainimage,
    .product-slider #productmainimage_mob {
        max-height: 300px;
    }
    
    .product-details .product-title h1 {
        font-size: 16px;
    }
}

/* iPhone 12/13/14 (390px) */
@media (min-width: 376px) and (max-width: 390px) {
    .product-slider #productmainimage,
    .product-slider #productmainimage_mob {
        max-height: 350px;
    }
}

/* iPhone 12/13/14 Pro Max (428px) */
@media (min-width: 391px) and (max-width: 428px) {
    .product-slider #productmainimage,
    .product-slider #productmainimage_mob {
        max-height: 380px;
    }
}

/* ===== THUMBNAIL OPTIMIZATION ===== */
/* Desktop thumbnails - Position within visible area */
@media (min-width: 768px) {
    /* Position thumbnails within the product-slider area, not off-screen */
    .product-slider center:last-child {
        position: absolute !important;
        left: 10px !important; /* Position within the product-slider area */
        top: 60px !important; /* Align with main image */
        width: 60px !important; /* Reduced from 100px to 60px */
        max-width: 60px !important;
        padding: 4px !important; /* Minimal padding */
        margin: 0 !important;
        z-index: 10 !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        /* Allow thumbnails to expand vertically */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* SURGICAL FIX: Ultra-high specificity to override mobile CSS and match product details 1% margin */
    .Product-detail .container .product-full-details .product-slider center:last-child {
        position: absolute !important;
        left: 10px !important;
        top: 7px !important; /* Match product details 1% margin */
        width: 60px !important;
        max-width: 60px !important;
        padding: 4px !important;
        margin: 0 !important;
        z-index: 10 !important;
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Move main image to the right to avoid overlap and utilize white space */
    .product-slider #popupdiv {
        margin-left: 80px !important; /* Move main image right to avoid thumbnail overlap */
        max-width: calc(100% - 80px) !important; /* Adjust max-width to account for thumbnails */
        margin-right: 0 !important;
        padding: 5px !important; /* Minimal padding for maximum image size */
        margin-bottom: 0 !important; /* Remove bottom margin to utilize white space */
        height: auto !important; /* Allow container to expand with image */
        min-height: auto !important; /* Remove any min-height constraints */
    }
    
    /* Ensure main image container has proper spacing */
    .product-slider center:first-child {
        margin-left: 80px !important; /* Move main image container right */
        max-width: calc(100% - 80px) !important;
        padding: 0 !important;
        margin-bottom: 0 !important; /* Remove bottom margin */
        height: auto !important; /* Allow container to expand with image */
        min-height: auto !important; /* Remove any min-height constraints */
    }
    
    /* Optimize main image sizing within the new layout - maximize size to cover yellow area */
    .product-slider #productmainimage {
        max-width: 100% !important;
        width: 500px !important; /* Explicit width for square images */
        height: 500px !important; /* Explicit height for square images */
        max-height: 800px !important; /* Significantly increased to cover yellow area */
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important; /* Remove all padding for maximum size */
    }
    
    /* Ensure the thumb-slider container fits properly */
    .thumb-slider {
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px !important; /* Minimal padding to match container */
        margin: 0 !important;
    }
    
    /* Make the owl-carousel vertical for desktop - no scroll */
    .thumb-slider .owl-carousel,
    .thumb-slider .thumbnails-pure-css {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important; /* Remove height limit */
        overflow: visible !important; /* Remove all overflow */
        /* Adjust for square thumbnails */
        width: 60px !important;
        max-width: 60px !important;
        /* Override Owl Carousel default styles */
        transform: none !important;
        transition: none !important;
    }
    
    /* Override Owl Carousel stage elements */
    .thumb-slider .owl-carousel .owl-stage-outer {
        width: 60px !important;
        max-width: 60px !important;
        overflow: visible !important;
    }
    
    .thumb-slider .owl-carousel .owl-stage {
        width: 60px !important;
        max-width: 60px !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Style the owl items for vertical layout */
    .thumb-slider .owl-carousel .owl-item,
    .thumb-slider .thumbnails-pure-css > div {
        margin-bottom: 0 !important;
        width: 60px !important; /* Match thumbnail width */
        display: block !important;
        float: none !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Style the imagetable elements for desktop vertical layout - square 60px */
    .thumb-slider .owl-carousel .owl-item .imagetable,
    .thumb-slider .thumbnails-pure-css .imagetable {
        width: 60px !important;
        height: 60px !important; /* Make it square */
        margin: 0 0 2px 0 !important; /* Reduced margin to fit more thumbnails */
        display: block !important; /* Use block for absolute positioning */
        border: 1px solid #30a8dc !important;
        border-radius: 4px !important;
        overflow: hidden !important; /* Hide overflow for clean edges */
        float: none !important;
        background-color: #FFFFFF !important;
        cursor: pointer !important;
        /* Ensure square aspect ratio */
        aspect-ratio: 1 / 1 !important;
        padding: 0 !important; /* Remove all padding for perfect centering */
        box-sizing: border-box !important;
        position: relative !important; /* For absolute child positioning */
    }
    
    /* Style the images inside imagetable - perfect centering with minimal padding */
    .thumb-slider .owl-carousel .owl-item .imagetable img,
    .thumb-slider .owl-carousel .owl-item .imagetable img[src],
    .thumb-slider .owl-carousel .owl-item .imagetable img[data-src],
    .thumb-slider .thumbnails-pure-css .imagetable img,
    .thumb-slider .thumbnails-pure-css .imagetable img[src],
    .thumb-slider .thumbnails-pure-css .imagetable img[data-src] {
        width: auto !important;
        height: auto !important;
        max-width: 58px !important; /* Use almost full width (60px - 2px border) */
        max-height: 58px !important; /* Use almost full height (60px - 2px border) */
        object-fit: contain !important; /* Prevent cropping, show full image */
        object-position: center !important; /* Center the image */
        display: block !important;
        position: absolute !important; /* Absolute positioning for perfect centering */
        top: 50% !important; /* Center vertically */
        left: 50% !important; /* Center horizontally */
        transform: translate(-50%, -50%) !important; /* Perfect centering */
        z-index: 1 !important; /* Ensure image is on top */
        margin: 0 !important; /* Remove all margins */
        padding: 0 !important; /* Remove all padding */
        /* Override any Owl Carousel styles */
        float: none !important;
        vertical-align: top !important;
        border: none !important;
        outline: none !important;
    }
    
    /* FORCE CENTERING - This rule runs after all others to override any JavaScript */
    .thumb-slider .owl-carousel .owl-item .imagetable img[style],
    .thumb-slider .thumbnails-pure-css .imagetable img[style] {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        height: auto !important;
        max-width: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        vertical-align: top !important;
    }
    
    /* NUCLEAR OPTION - Override any possible JavaScript styles - DESKTOP ONLY */
    .thumb-slider .imagetable img {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        height: auto !important;
        max-width: 58px !important;
        max-height: 58px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        vertical-align: top !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
    }
    
    /* SPECIFIC CENTERING FOR 50x50 IMAGES */
    .thumb-slider .imagetable img[src*="50x50"] {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide navigation arrows on desktop */
    .thumb-slider .owl-carousel .owl-nav {
        display: none !important;
    }
}

/* ===== MOBILE LAYOUT - HORIZONTAL THUMBNAILS ===== */
@media (max-width: 767px) {
    /* Reset desktop styles for mobile */
    .thumb-slider .owl-carousel {
        display: block !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        transition: none !important;
    }
    
    .thumb-slider .owl-carousel .owl-stage-outer {
        width: 100% !important;
        max-width: 340px !important;
        overflow: visible !important;
    }
    
    .thumb-slider .owl-carousel .owl-stage {
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        transition: none !important;
    }
    
    .thumb-slider .owl-carousel .owl-item {
        width: auto !important;
        display: inline-block !important;
        float: left !important;
        transform: none !important;
        transition: none !important;
        margin-right: 8px !important;
    }
    
    /* Mobile imagetable styling - horizontal layout */
    .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 50px !important;
        height: 50px !important;
        margin: 3px !important;
        display: inline-block !important;
        border: 1px solid #30a8dc !important;
        border-radius: 0 !important;
        overflow: visible !important;
        float: left !important;
        background-color: #FFFFFF !important;
        cursor: pointer !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Mobile image styling - reset desktop centering */
    .thumb-slider .owl-carousel .owl-item .imagetable img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        vertical-align: top !important;
    }
    
    /* Reset main image positioning for mobile */
    .product-slider center:last-child {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 340px !important;
        padding: 0 50px !important;
        margin: 0 !important;
        z-index: auto !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .product-slider #popupdiv {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
}

/* ===== SIMPLE INLINE ZOOM OVERLAY ===== */
/* Clean, simple zoom overlay without blue lines */
.zoom-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.zoom-container {
    position: relative !important;
    max-width: 90% !important;
    max-height: 90% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: default !important;
}

.zoom-container img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important;
}

.zoom-close {
    position: absolute !important;
    top: -40px !important;
    right: -40px !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 10000 !important;
}

.zoom-close:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
}

/* Prevent body scroll when zoom is active */
body.zoom-active {
    overflow: hidden !important;
}

/* Make main product image clickable with visual feedback */
#productmainimage {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#productmainimage:hover {
    transform: scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Add zoom icon overlay on hover */
#popupdiv {
    position: relative !important;
}

#popupdiv::after {
    content: "🔍" !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 8px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

#popupdiv:hover::after {
    opacity: 1 !important;
}

/* Mobile responsive zoom */
@media (max-width: 767px) {
    .zoom-container {
        max-width: 95% !important;
        max-height: 95% !important;
        padding: 20px !important;
    }
    
    .zoom-close {
        top: -30px !important;
        right: -30px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 20px !important;
    }
    
    /* Hide zoom icon on mobile */
    #popupdiv::after {
        display: none !important;
    }
}
    
/* ===== DESKTOP PERFORMANCE OPTIMIZATIONS ===== */
/* Optimize main product image for desktop */
.product-slider #productmainimage {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    /* Performance optimizations */
    will-change: transform !important;
    contain: layout style paint !important;
    transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* Optimize thumbnail rendering */
.thumb-slider .imagetable {
    /* Performance optimizations */
    contain: layout style paint !important;
    will-change: transform !important;
}

/* Optimize CloudZoom performance */
.cloudzoom-zoom-inside {
    /* Performance optimizations */
    will-change: transform !important;
    contain: layout style paint !important;
    transform: translateZ(0) !important;
}

/* Reduce layout thrashing */
.product-slider {
    contain: layout !important;
}

/* Optimize animations */
.thumb-slider .imagetable img {
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

/* Mobile thumbnails - Keep original horizontal layout - DO NOT CHANGE */
@media (max-width: 767px) {
    /* Reset ALL desktop changes for mobile - restore original behavior */
    .product-slider center:last-child {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 340px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    .thumb-slider {
        width: 100% !important;
        padding: 0 50px !important;
        box-sizing: border-box !important;
        max-width: 340px !important;
    }
    
    .thumb-slider .owl-carousel {
        display: block !important;
        flex-direction: row !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        /* Force horizontal layout for mobile */
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .thumb-slider .owl-carousel .owl-item {
        margin-bottom: 0 !important;
        margin-right: 8px !important;
        width: auto !important;
        display: inline-block !important;
        float: left !important;
        /* Force horizontal layout for mobile */
        flex: none !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }
    
    .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 50px !important;
        height: 50px !important;
        margin: 3px !important;
        display: inline-block !important;
        border: 1px solid #30a8dc !important;
        border-radius: 0 !important;
        overflow: visible !important;
        float: left !important;
        background-color: #FFFFFF !important;
        cursor: pointer !important;
        /* Force horizontal layout for mobile */
        flex: none !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }
    
    .thumb-slider .owl-carousel .owl-item .imagetable img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* Show navigation arrows on mobile */
    .thumb-slider .owl-carousel .owl-nav {
        display: initial !important;
    }
    
    .thumb-slider .owl-carousel .owl-dots {
        display: block !important;
    }
    
    /* Reset main image positioning for mobile */
    .product-slider #popupdiv {
        margin-left: 0 !important; /* Reset margin for mobile */
        max-width: 100% !important; /* Reset width for mobile */
    }
    
    .product-slider #productmainimage,
    .product-slider #productmainimage_mob {
        max-height: 400px !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Optimize images for better performance */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optimize buttons for touch targets */
button, .btn, input[type="submit"], input[type="button"] {
    min-height: 44px; /* iOS recommended touch target */
    min-width: 44px;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Focus states for better accessibility */
button:focus, .btn:focus, a:focus {
    outline: 2px solid #30a8dc;
    outline-offset: 2px;
}

/* ===== UTILITY CLASSES ===== */
/* Clear floats */
.clear {
    clear: both;
}

/* Responsive spacing */
.pdp-spacing-sm { margin: 8px 0; }
.pdp-spacing-md { margin: 16px 0; }
.pdp-spacing-lg { margin: 24px 0; }

/* ===== LEGACY SUPPORT ===== */
/* Ensure compatibility with existing float-based layouts */
.product-slider,
.product-details {
    box-sizing: border-box;
}

/* Fix any layout issues */
.product-details.product_detail-etrnity {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Additional layout fixes */
.Product-detail .product-slider,
.Product-detail .product-details {
    box-sizing: border-box !important;
    vertical-align: top !important;
}

/* Ensure proper alignment */
.Product-detail .product-slider {
    display: block !important;
}

.Product-detail .product-details {
    display: block !important;
}

/* Fix any margin issues */
.Product-detail .product-details.product_detail-etrnity {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ===== PRINT OPTIMIZATION ===== */
@media print {
    .product-slider,
    .product-details {
        float: none !important;
        width: 100% !important;
    }
    
    .product-slider #productmainimage {
        max-height: 400px;
    }
}

/* ===== HIGH SPECIFICITY OVERRIDES FOR MAIN IMAGE ===== */
/* Override any conflicting styles with maximum specificity */
.Product-detail .product-slider #productmainimage {
    width: 500px !important;
    height: 500px !important;
    max-width: 100% !important;
    max-height: 800px !important;
    min-height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Large screens override */
@media (min-width: 1200px) {
    .Product-detail .product-slider #productmainimage {
        width: 600px !important;
        height: 600px !important;
        max-height: 900px !important;
    }
}

/* Override any mainproductimageclass constraints */
.Product-detail .product-slider #productmainimage.mainproductimageclass {
    min-height: auto !important;
    margin-left: 0 !important;
    width: 500px !important;
    height: 500px !important;
}

@media (min-width: 1200px) {
    .Product-detail .product-slider #productmainimage.mainproductimageclass {
        width: 600px !important;
        height: 600px !important;
    }
}

/* ===== PRODUCT DETAILS SPACING OPTIMIZATION ===== */
/* Reduce excessive white space in product details */
.product-details {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Optimize button spacing */
.product-details .btn, 
.product-details button, 
.product-details input[type="submit"] {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Optimize pricing section spacing */
.product-details .price-section,
.product-details .pricing {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

/* Optimize form elements spacing */
.product-details .form-group,
.product-details .form-control {
    margin-bottom: 6px !important;
}

/* Optimize dropdown and select elements - ONLY margin, NO text alignment */
.product-details select,
.product-details .dropdown,
.product-details .b_select {
    margin-bottom: 6px !important;
    /* Remove all text alignment overrides */
}

/* Ship date alignment - keep left-aligned as requested */
.product-details li {
    text-align: left !important;
    text-indent: 0 !important;
}

/* Ensure other text elements are left-aligned */
.product-details p,
.product-details div,
.product-details span {
    text-align: left !important;
    margin-bottom: 6px !important;
}

/* Specific fix for ship date text */
.product-details li b {
    text-align: left !important;
}

/* Dropdown containers - NO text alignment overrides */
.product-details .product-select2,
.product-details .metal_filter_select {
    /* Remove text alignment overrides */
}

/* Fix dropdown layout - proper spacing for background images with higher specificity */
.Product-detail .product-details .web-size .metal_filter_select a.metal_filter_select_title {
    width: 186px !important; /* Ensure proper width */
    height: 30px !important; /* Increase height to fit text properly */
    min-height: 30px !important; /* Minimum height */
    padding: 6px 25px 6px 35px !important; /* Adjust padding: less left (35px), less right (25px) for more text space */
    line-height: 18px !important; /* Proper line height */
    text-align: center !important; /* Center the text */
    text-indent: 0 !important;
    display: block !important;
    overflow: hidden !important; /* Prevent text overflow */
    white-space: nowrap !important; /* Prevent text wrapping */
    text-overflow: ellipsis !important; /* Add ellipsis if text is too long */
    box-sizing: border-box !important; /* Include padding in width calculation */
    
    /* Let original CSS handle background images - don't override metal-specific images */
}

/* Optimize social media and action buttons */
.product-details .social-links,
.product-details .action-buttons {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Reduce spacing in product detail eternity variant */
.product-details.product_detail-etrnity {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Optimize stock number and shipping info */
.product-details .stock-info,
.product-details .shipping-info {
    margin-bottom: 6px !important;
    font-size: 13px;
    color: #666;
}

/* ===== RESPONSIVE WIDTH OPTIMIZATION ===== */
/* Optimize page width for different devices using best practices */

/* Mobile devices (320px - 767px) */
@media (max-width: 767px) {
    .container {
        width: 95% !important; /* More space utilization on mobile */
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }
    
    .Product-detail {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Tablet devices (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        width: 90% !important; /* Better space utilization on tablets */
        max-width: 1000px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    .Product-detail {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Desktop devices (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .container {
        width: 85% !important; /* Optimal desktop width */
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 30px !important;
    }

    /* SURGICAL EXTENSION: Product layout for mid-range desktops */
    .Product-detail .product-slider {
        width: 55% !important;
    }

    .Product-detail .product-details {
        width: 44% !important;
    }

    /* Image sizing - Scale between tablet and large desktop */
    #productmainimage {
        max-height: 550px !important;
    }

    /* Thumbnail carousel sizing */
    .thumb-slider {
        width: 65px !important;
    }

    .thumb-slider .owl-carousel .owl-item .imagetable {
        width: 62px !important;
        height: 62px !important;
    }

    /* Typography adjustments for mid-range desktop */
    .product-details h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }
}

/* Large desktop devices (1200px+) */
@media (min-width: 1200px) {
    .container {
        width: 80% !important; /* Original width for large screens */
        max-width: 1400px !important; /* Prevent excessive width on very large screens */
        margin: 0 auto !important;
        padding: 0 40px !important;
    }
}

/* Extra large screens (1600px+) */
@media (min-width: 1600px) {
    .container {
        width: 75% !important; /* Reduce width on very large screens */
        max-width: 1600px !important;
        margin: 0 auto !important;
        padding: 0 50px !important;
    }
}

/* ===== CONTAINER POSITIONING FIXES ===== */
/* Move containers left to align with frame, but keep text in original position */

/* Fix dropdown container positioning and layout */
/* ===== COMPREHENSIVE LAYOUT FIXES ===== */

/* Desktop - Move dropdown left to fill white space - ULTRA HIGH SPECIFICITY */
@media (min-width: 768px) {
    .Product-detail .product-details .web-size .metal_filter_select {
        margin-left: -20px !important; /* Move left to fill white space */
        padding-left: 0 !important;
        float: left !important;
        position: relative !important;
        left: 0 !important;
        width: 186px !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure text elements don't get cropped on desktop */
    .Product-detail .product-details .product-price {
        width: 100% !important;
        overflow: visible !important;
    }
    
    .Product-detail .product-details .product-ul {
        width: 100% !important;
        overflow: visible !important;
    }
    
    .Product-detail .product-details .product-ul ul {
        width: 100% !important;
    }
    
    .Product-detail .product-details .product-ul li {
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
    }
}

/* Mobile - Account for 3% padding and prevent cropping - ULTRA HIGH SPECIFICITY */
@media (max-width: 767px) {
    /* Fix mobile padding issue - counteract the 3% padding */
    .Product-detail .product-details {
        padding-left: 0 !important; /* Remove left padding */
        padding-right: 3% !important; /* Keep right padding */
    }
    
    .Product-detail .product-details .web-size .metal_filter_select {
        margin-left: 0 !important; /* Reset margin on mobile */
        padding-left: 0 !important;
        float: left !important;
        position: relative !important;
        left: 0 !important;
        width: 186px !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Fix text cropping for pricing and stock on mobile */
    .Product-detail .product-details .product-price {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
    }
    
    .Product-detail .product-details .product-ul {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
    }
    
    .Product-detail .product-details .product-ul ul {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    .Product-detail .product-details .product-ul li {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
        white-space: normal !important; /* Allow text to wrap */
    }
}

/* Fix dropdown text - ensure proper layout without overriding background images - ULTRA HIGH SPECIFICITY */
.Product-detail .product-details .web-size .metal_filter_select a.metal_filter_select_title {
    width: 186px !important;
    height: 30px !important;
    padding: 6px 25px 6px 35px !important; /* Adjusted padding for more text space */
    line-height: 18px !important;
    text-align: center !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    
    /* Don't override background images - let original CSS handle metal-specific images */
}

/* Fix dropdown list spacing when opened */
.Product-detail .product-details .metal_filter_select ul {
    width: 186px !important; /* Match dropdown width */
    margin-top: 0 !important;
    padding: 4px 0 !important;
    z-index: 1000 !important; /* Ensure it appears above other elements */
}

.Product-detail .product-details .metal_filter_select li {
    width: 100% !important;
    padding: 4px 10px !important;
    margin: 0 !important;
}

.Product-detail .product-details .metal_filter_select li a {
    width: 100% !important;
    height: 26px !important;
    padding: 0 0 0 34px !important;
    line-height: 26px !important;
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Fix ship date container positioning */
.Product-detail .product-details li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}

/* Fix ship date text - revert to original alignment */
.Product-detail .product-details li b {
    text-align: left !important; /* Keep ship date text left-aligned */
}

/* Fix other dropdown containers */
.Product-detail .product-details .product-select2 {
    margin-left: 0 !important;
    padding-left: 0 !important;
    float: left !important;
}

/* Fix b_select dropdown positioning - only container positioning, no text changes */
.Product-detail .product-details select.b_select {
    margin-left: 0 !important;
    /* Remove text alignment overrides - let original CSS handle text positioning */
}

/* ===== ULTRA HIGH SPECIFICITY OVERRIDES ===== */
/* Override all existing CSS that causes indentation */

/* Force metal filter to align with left edge of product details */
.Product-detail .product-details .metal_filter_select {
    margin-left: -3% !important; /* Counteract the 3% padding from other CSS files */
    padding-left: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    float: left !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) !important;
}

/* Force ship date to align with left edge */
.Product-detail .product-details li {
    margin-left: -3% !important; /* Counteract the 3% padding */
    padding-left: 0 !important;
    text-indent: 0 !important;
}

/* Override any parent container padding that affects alignment */
.Product-detail .product-details {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ===== IPHONE SPECIFIC OPTIMIZATIONS ===== */

/* iPhone 6/7/8 Plus and larger */
@media only screen and (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
    .Product-detail .product-slider {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .Product-detail .product-details {
        width: 100% !important;
        padding: 0 2% !important;
        margin-top: 0 !important;
    }
    
    .Product-detail .product-slider #productmainimage {
        width: 100% !important;
        height: auto !important;
        max-width: 350px !important;
        max-height: 350px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .metal_filter_select a.metal_filter_select_title {
        padding: 8px 20px 8px 30px !important;
        width: 180px !important;
        height: 32px !important;
        font-size: 14px !important;
        line-height: 16px !important;
    }
    
    .metal_filter_select {
        width: 180px !important;
        margin-left: 0 !important;
    }
    
    .product-price, .product-ul {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    .product-title h1 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    
    .product-text p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
}

/* iPhone SE and smaller screens */
@media only screen and (max-width: 375px) {
    .Product-detail .product-slider #productmainimage {
        max-width: 300px !important;
        max-height: 300px !important;
    }
    
    .metal_filter_select a.metal_filter_select_title {
        padding: 6px 18px 6px 28px !important;
        width: 170px !important;
        height: 30px !important;
        font-size: 13px !important;
    }
    
    .metal_filter_select {
        width: 170px !important;
    }
    
    .Product-detail .product-details {
        padding: 0 1% !important;
    }
    
    .product-title h1 {
        font-size: 16px !important;
    }
    
    .product-text p {
        font-size: 12px !important;
    }
    
    .product-price {
        font-size: 13px !important;
    }
}

/* iPhone touch optimization */
@media (max-width: 767px) {
    .metal_filter_select a.metal_filter_select_title {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    .product-details button, .product-details input[type="submit"] {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        min-height: 44px !important; /* iOS minimum touch target */
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .product-details input, .product-details select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* iPhone landscape orientation */
@media only screen and (max-width: 896px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    .Product-detail .product-slider {
        width: 50% !important;
    }
    
    .Product-detail .product-details {
        width: 48% !important;
        padding: 0 1% !important;
    }
    
    .Product-detail .product-slider #productmainimage {
        max-width: 250px !important;
        max-height: 250px !important;
    }
}

/* Remove universal text alignment override - let original CSS handle text positioning */
/* Only override positioning, not text alignment */
.Product-detail .product-details .metal_filter_select,
.Product-detail .product-details li {
    margin-left: -3% !important; /* Counteract the 3% padding */
    padding-left: 0 !important;
}

/* ===== DUAL IMAGE CONTAINER RESPONSIVE VISIBILITY ===== */
/* Fix for thumbnail click showing both desktop and mobile containers */

/* Mobile (767px and below) - Show mobile container only for STATIC images */
@media (max-width: 767px) {
    /* ProductDetail pages (use .Centervideocontainer parent) */
    .Centervideocontainer .imageWeb {
        display: none !important;
    }
    /* BUT keep visible when it contains ACTIVE 360° videos */
    .Centervideocontainer .imageWeb:has(#video-overlay-wrapper.active) {
        display: block !important;
    }
    .Centervideocontainer .imageMob {
        display: block !important;
    }

    /* BuildProductDetail pages (use .product-slider parent) */
    .product-slider .imageWeb {
        display: none !important;
    }
    /* BUT keep visible when it contains ACTIVE 360° videos */
    .product-slider .imageWeb:has(#video-overlay-wrapper.active) {
        display: block !important;
    }
    .product-slider .imageMob {
        display: block !important;
    }
}

/* Desktop (768px and above) - Show desktop container only */
@media (min-width: 768px) {
    /* ProductDetail pages (use .Centervideocontainer parent) */
    .Centervideocontainer .imageWeb {
        display: block !important;
    }
    .Centervideocontainer .imageMob {
        display: none !important;
    }

    /* BuildProductDetail pages (use .product-slider parent) */
    .product-slider .imageWeb {
        display: block !important;
    }
    .product-slider .imageMob {
        display: none !important;
    }
}